@import url("helix-report.css?v=f78ed582b4"); /* run 13 D22/B34: the Helix report standard, byte for byte from work/run13/report/helix-report.css */

/* Offbeat AI Watch on the B2 design layer (run 11 R11-15; rewritten from the run 7 to run 10 file). Loaded after
   fonts.css and helix.css (the shared B2 layer) on every page; brand.css and app.css are no longer loaded. It restyles the
   pages' existing classes only: no words, numbers, chart values, images or links change here. One layer (B21): type,
   header, footer, buttons and dark mode come from helix.css; this file holds only what the Offbeat markup needs on top, with
   no important flags. Colours are the helix.css tokens, so dark mode (D11) follows them; anything on a fixed light colour (clay,
   rose) sets its own ink text. Every deleted or replaced rule is listed in design/run11/css-changes-offbeat.md. */

/* Line icons (they replace the emoji), in the current colour */
.hx-ico { width: 1.15em; height: 1.15em; display: inline-block; vertical-align: -.2em; flex: none; color: var(--ox); }
.feature-icon .hx-ico { width: 34px; height: 34px; color: var(--signal); }
.issue-card-image > span > .hx-ico { width: 56px; height: 56px; color: #641220; }
.hx-bg-ox .hx-ico, .hx-bg-signal .hx-ico, .section-header .hx-ico, .section-header-purple .hx-ico { color: var(--paper); }

/* Content lines up with the header: every block uses the header's box (helix.css .hx-wrap: max 1440 px, side padding --gut) */
.ob .features, .ob .latest-issue, .ob .archive, .ob .page-header, .ob .container, .ob-report #root > .max-w-7xl {
  box-sizing: border-box; max-width: var(--maxw); margin-left: auto; margin-right: auto; padding-left: var(--gut); padding-right: var(--gut); }
.ob .hero { padding-left: max(var(--gut), calc((100% - var(--maxw)) / 2 + var(--gut))); padding-right: max(var(--gut), calc((100% - var(--maxw)) / 2 + var(--gut))); }

/* Home: hero (B2 gradient from helix.css), features, latest issue and report */
.ob .hero h1 { font-size: var(--h1); margin: 0 0 .25em; max-width: 16ch; } /* R11-A1-7: the D6 inner page H1 (clamp(44px, 7vw, 112px)); the Offbeat home is a site home like a connector home (helix-b2-inner.html), not the gtmhelix.com home */
.ob .hero h1 span, .ob h2:where(:not(.ob-h3, .ob-h4)) span, .ob .page-header h1 span { color: var(--signal); }
.ob .hero .tagline { font-size: var(--lead); line-height: 1.45; max-width: 44ch; margin: 0 0 12px; }
.ob .hero .subtitle, .ob .form-note { color: var(--muted); max-width: 60ch; }
.ob .form-note { font-family: var(--mono); font-size: 13px; }
.ob .subscribe-form { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 8px; max-width: 560px; }
.ob .subscribe-form input[type=email] { flex: 1 1 240px; min-height: 50px; padding: 0 16px; font: inherit; font-size: 16px; color: var(--ink);
  background: var(--white); border: 2px solid var(--edge); border-radius: 0; }
.ob .subscribe-form input[type=email]::placeholder { color: var(--muted); opacity: 1; } /* R11-A1-4: muted #5A4B4E on white (light), #CBB9BC on #261619 (dark); was the browser grey, 3.76:1 in dark */
.ob .subscribe-form button { min-height: 50px; padding: 0 24px; font: 600 14px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--paper); background: var(--ox); border: 2px solid var(--ox); border-radius: 0; cursor: pointer; }
.ob .subscribe-form button:hover { background: var(--ink); border-color: var(--ink); }
.ob .features, .ob .latest-issue, .ob .archive { padding-top: clamp(56px, 7vw, 112px); padding-bottom: 8px; }
.ob .features h2, .ob .latest-issue h2, .ob .archive h2 { margin: 0 0 clamp(24px, 3vw, 40px); display: flex; align-items: center; gap: 12px; }
.ob .feature-grid, .ob .archive-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.ob .feature-item { background: var(--white); border: 2px solid var(--edge); border-top: 6px solid var(--ox); padding: 24px; }
.ob .feature-icon { margin-bottom: 8px; line-height: 1; }
.ob .feature-item h3 { margin: 0 0 8px; }
.ob .feature-item p { margin: 0; color: var(--muted); }
.ob .latest-issue-container { max-width: none; }
.ob .issue-card { background: var(--white); border: 2px solid var(--edge); display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; }
@media (min-width: 768px) { .ob .latest-issue .issue-card { grid-template-columns: 5fr 7fr; } }
.ob .issue-card-image { position: relative; min-height: 200px; background-size: cover; background-position: center; background-color: #EAD9D5;
  display: grid; place-items: center; }
.ob .issue-number { position: absolute; left: 12px; top: 12px; z-index: 1; font: 600 12px var(--mono); letter-spacing: .08em; text-transform: uppercase;
  color: #FAF8F6; background: #641220; padding: 4px 8px; }
.ob .issue-card-content { padding: 24px; }
.ob .issue-date { font: 500 13px var(--mono); color: var(--muted); margin: 0 0 8px; text-transform: uppercase; letter-spacing: .06em; }
.ob .issue-card-content h3 { margin: 0 0 10px; }
.ob .issue-card-content h3 a { color: var(--ink); text-decoration: none; }
.ob .issue-card-content h3 a:hover { color: var(--ox); text-decoration: underline; text-decoration-color: var(--signal); }
.ob .issue-card-content p { color: var(--muted); }
.ob .read-more, .ob .view-all a { display: inline-flex; align-items: center; min-height: 44px; font: 600 14px var(--mono); color: var(--ink);
  text-transform: uppercase; letter-spacing: .06em; text-decoration: underline; text-decoration-color: var(--signal); text-underline-offset: 4px; }
.ob .read-more::after { content: " \2192"; white-space: pre; }
.ob .view-all { margin-top: 20px; }
.ob .issue-card:hover { border-color: var(--ox); }
.ob .page-header { padding-top: clamp(40px, 5vw, 72px); padding-bottom: 8px; }
.ob .page-header h1 { margin: 0 0 .25em; }
.ob .page-header p { color: var(--muted); max-width: 60ch; font-size: var(--lead); line-height: 1.45; }

/* Issues: one article with the story headline as its H1; text at reading width, left edge on the header's */
.ob .container { padding-top: clamp(32px, 4vw, 56px); padding-bottom: 48px; }
.ob .container > * { max-width: 900px; }
.ob .container > .header { max-width: none; }
.ob .header { border-bottom: 3px solid var(--ox); padding: 8px 0 20px; margin-bottom: 28px; }
.ob .header-top, .ob .header-meta { font-family: var(--mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ob .header-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.ob .header-title { color: var(--ink); margin: 10px 0 .25em; max-width: 22ch; }
.ob .header-meta-label { color: var(--ox); }
.ob .section-header, .ob .section-header-cyan, .ob .section-header-purple, .ob .section-label, .ob .category-header {
  font: 600 13px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--paper); background: var(--ox);
  display: inline-block; padding: 5px 10px; margin: 32px 0 14px; border: 0; }
.ob .section-label { margin-top: 0; }
.ob .section-header-cyan { background: #EAD9D5; color: #1A0E10; }
.ob .section-header-purple { background: var(--signal); color: #FAF8F6; }
.ob .category-header { background: #EAD9D5; color: #641220; margin: 0 0 10px; }
.ob .category-header .hx-ico { color: #641220; }
.ob .lead-story-wrapper { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.ob .lead-story, .ob .editor-note-box, .ob .author-bio { background: var(--white); border: 1.5px solid var(--line); border-left: 4px solid var(--ox); padding: 24px; margin: 0 0 20px; color: var(--ink); }
.ob .story-headline, .ob .story-title, .ob .trend-title, .ob .column-title, .ob .author-bio h3, .ob .mini-title, .ob .tech-headline, .ob .product-name { color: var(--ink); line-height: 1.2; letter-spacing: -.01em; }
.ob .story-headline { font-size: clamp(20px, 2.6vw, 26px); margin: 0 0 12px; }
.ob .story-title, .ob .trend-title, .ob .column-title, .ob .mini-title, .ob .tech-headline, .ob .product-name { font-size: 20px; margin: 0 0 8px; }
.ob .author-bio h3 { font-size: var(--card); margin: 0 0 12px; }
.ob .trend-title { display: flex; align-items: baseline; gap: 8px; }
.ob .column-title { font: 600 13px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ox); }
.ob .story-text, .ob .story-description, .ob .trend-description, .ob .column-text, .ob .author-bio p, .ob .author-bio li,
.ob .mini-text, .ob .tech-description, .ob .product-description { color: var(--ink); font-size: 17px; line-height: 1.6; }
.ob .story-grid, .ob .trends-grid, .ob .tech-grid, .ob .product-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.ob .three-column { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 8px 0 12px; }
.ob .three-column > div, .ob .story-item, .ob .trend-item, .ob .story-item-full, .ob .trend-item-full, .ob .tech-item, .ob .product-item {
  background: var(--white); border: 1.5px solid var(--line); padding: 20px; }
.ob .story-item-full, .ob .trend-item-full { grid-column: 1 / -1; }
.ob .tech-company { font: 600 13px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ox); display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.ob .lead-image, .ob .lead-image img, .ob .container img { max-width: 100%; height: auto; display: block; }
.ob .image-caption { font: 400 13px var(--mono); color: var(--muted); margin: 6px 0 12px; }
.ob .source-link { display: inline-flex; align-items: center; min-height: 44px; font: 600 13px var(--mono); color: var(--ox); text-transform: uppercase; letter-spacing: .05em; }
.ob .editor-name { font-weight: 700; margin-top: 12px; }
.ob .editor-title { color: var(--muted); font-family: var(--mono); font-size: 13px; }
.ob .author-bio ul { padding-left: 20px; }
.ob .author-bio .ob-author-links { display: flex; flex-wrap: wrap; gap: 0 20px; }
.ob .author-bio .ob-author-links a { display: inline-flex; align-items: center; min-height: 44px; }
.ob .ob-sub-cta { margin: 8px 0 0; }
.ob .subscribe-btn, .ob-legal .back-link { display: inline-flex; align-items: center; min-height: 50px; padding: 12px 24px; font: 600 14px/1.2 var(--mono); letter-spacing: .08em;
  text-transform: uppercase; color: var(--paper); background: var(--ox); border: 2px solid var(--ox); text-decoration: none; }
.ob .subscribe-btn:hover, .ob-legal .back-link:hover { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.ob table { max-width: 100%; }
.ob .ob-hp { display: none; }

/* About page: room under the hero H1 for its descenders */
.ob-about .hx-hero h1 { margin-bottom: .25em; }
.ob-about .hx-hero .hx-eyebrow { margin-bottom: 28px; } /* R11-16: the 107 px H1 glyphs rose 10 px into the tag at 1536 */
.ob-about .hx7-about-grid h2 { margin-bottom: 20px; }
/* About page (moved from the run 10 helix.css lines 134 to 139, which the B2 layer no longer carries) */
.hx7-about-grid { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.hx7-list a, .ob-legal .contact-info a { display: inline-flex; align-items: center; min-height: 44px; }
.ob-report #root nav.mb-4 a { display: inline-flex; align-items: center; min-height: 44px; } /* R11-16: the in-report breadcrumb links were 14 px tall */
@media (max-width: 760px) { .hx7-about-grid { grid-template-columns: 1fr; } .hx7-about-grid .hx7-cred-photo { max-width: 200px; } }

/* Privacy and terms: one document; its H2 and H3 are sub-headings (the helix.css document scale) */
.ob-legal { --h2: clamp(28px, 2.6vw, 38px); --card: clamp(22px, 1.8vw, 26px); }
.ob-legal .container { padding-top: clamp(40px, 5vw, 72px); padding-bottom: 24px; display: block; }
.ob-legal .container > * { max-width: 800px; }
.ob-legal .container > .page-title { max-width: none; }
/* on phones "Terms of Service" fits one line in Archivo but two in the fallback font: two lines are reserved so the late font does not shift the page */
@media (max-width: 600px) { .ob-legal .page-title { min-height: 1.86em; } }
.ob-legal .page-title { color: var(--ink); margin: 0 0 .25em; }
.ob-legal .page-title span { color: var(--signal); }
.ob-legal .effective-date { font-family: var(--mono); font-size: 13px; color: var(--muted); margin: 0 0 32px; }
.ob-legal h2 { color: var(--ox); line-height: 1.1; margin: 36px 0 12px; }
.ob-legal h3 { color: var(--ink); margin: 22px 0 8px; }
.ob-legal p, .ob-legal li { color: var(--ink); line-height: 1.65; }
.ob-legal ul { padding-left: 22px; }
.ob-legal li { margin-bottom: 6px; }
.ob-legal .contact-info { background: var(--white); border: 1.5px solid var(--line); border-left: 4px solid var(--ox); padding: 20px 22px; margin-top: 16px; }
.ob-legal .contact-info p { margin: 0 0 8px; }
.ob-legal .important-notice { background: #EAD9D5; border-left: 4px solid #C1121F; padding: 4px 22px 12px; margin: 12px 0; }
.ob-legal .important-notice p { color: #1A0E10; }
.ob-legal .back-link { margin-top: 36px; }

/* Reports: the 15 India AI reports. Container on the header's box (above); headings on the helix.css document scale.
   The id selector outranks the report's Tailwind size classes, so no important flag is needed. */
.ob-report { --h2: clamp(28px, 2.6vw, 38px); --card: clamp(22px, 1.8vw, 26px); }
.ob-report #root { padding-left: 0; padding-right: 0; }
.ob-report #root h1 { font-size: var(--h1); line-height: .93; letter-spacing: -.045em; font-weight: 800; margin-bottom: .25em; }
.ob-report #root h2 { font-size: var(--h2); line-height: 1.05; letter-spacing: -.03em; }
.ob-report #root h3 { font-size: var(--card); line-height: 1.15; letter-spacing: -.02em; }
.ob-report #root h2:where(.ob-h3) { font-size: var(--card); line-height: 1.15; letter-spacing: -.02em; }
/* Run 11 R11-A2-11h: headings raised to h2 so no page jumps from the H1 to an h3 or h4; ob-h3 and ob-h4 keep the look the h3 or h4 had (same weight on the tag's own level, so any class rule still wins as before) */
h2:where(.ob-h3) { font-family: var(--display); font-weight: 800; font-size: var(--card); line-height: 1.04; letter-spacing: -.03em; }
h2:where(.ob-h4) { font-family: var(--display); font-weight: 700; font-size: 20px; line-height: 1.2; letter-spacing: normal; }
.ob-report #root p.text-sm, .ob-report #root p.text-xs, .ob-report #root li { font-size: var(--body); line-height: 1.55; }
.ob-report #root a.hx-text-ox:not(.rounded-lg), .ob-report #root a.hx-text-muted:not(.rounded-lg) { text-decoration: underline; text-decoration-color: rgba(26, 14, 16, .3); text-underline-offset: 3px; }
/* report tables: words never break inside a cell; the table's own overflow-x-auto wrapper scrolls on phones */
.ob-report #root td, .ob-report #root th { overflow-wrap: normal; word-break: normal; hyphens: none; }
.ob-report #root .grid > *, .ob-report #root .flex-1 { min-width: 0; }
/* tap targets: report links that stand alone (tabs, sources, share links) are at least 44 px tall; links inside sentences are inline and keep their size */
.ob-report #root a { min-height: 44px; }
.ob-report #root a.text-\[10px\] { display: inline-flex; align-items: center; padding: 0; }
/* Section tabs on phones: below 640 px the labels were hidden (7 or 8 icons only). Show them, wrapped into rows. */
@media (max-width: 639.98px) {
  .ob-report #root > .max-w-7xl > .flex-wrap.mb-5 .sm\:inline { display: inline; }
  .ob-report #root > .max-w-7xl > .flex-wrap.mb-5 > * { font-size: 14px; line-height: 1.25; max-width: 100%; }
}

/* the season line under the home tagline */
.ob .hero .season { font: 600 15px/1.4 var(--mono); letter-spacing: .04em; color: var(--ox); margin: 0 0 12px; }

/* 404 */
.ob-404 .page-header { min-height: 40vh; }
.ob-404 .ob-404-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 24px; }
.ob-404 .ob-404-home { display: inline-flex; align-items: center; min-height: 44px; font: 600 14px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink); text-decoration-color: var(--signal); }
/* card images are <img> (640 px WebP, lazy) covering the card's image area */
.ob .issue-card-image > .issue-card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 560px) {
  .ob .lead-story, .ob .editor-note-box, .ob .author-bio, .ob .story-item, .ob .trend-item, .ob .tech-item, .ob .product-item, .ob .three-column > div { padding: 16px; }
}

/* R11-A1-7: B2 hero on the issue and report templates (CSS only, no words moved in the source). The hero gradient runs
   the full page width through border-image outset, which is paint only (it adds no sideways scroll); the dots sit inside
   the hero at its top right corner, away from the text, as in helix-b2-inner.html. Crop marks around the H1 are eight
   background strokes on its ::before, so no markup is added. */
.ob, .ob-report {
  --ob-hero: linear-gradient(165deg, #F4B9C0 0%, #F8DADD 38%, #EEF1F6 62%, #CFE6F5 100%);
  --ob-dots: rgba(193, 18, 31, .72); --cmc: var(--ink);
  --ob-crop: linear-gradient(var(--cmc), var(--cmc)) 0 0 / 18px 2px no-repeat, linear-gradient(var(--cmc), var(--cmc)) 0 0 / 2px 18px no-repeat,
    linear-gradient(var(--cmc), var(--cmc)) 100% 0 / 18px 2px no-repeat, linear-gradient(var(--cmc), var(--cmc)) 100% 0 / 2px 18px no-repeat,
    linear-gradient(var(--cmc), var(--cmc)) 0 100% / 18px 2px no-repeat, linear-gradient(var(--cmc), var(--cmc)) 0 100% / 2px 18px no-repeat,
    linear-gradient(var(--cmc), var(--cmc)) 100% 100% / 18px 2px no-repeat, linear-gradient(var(--cmc), var(--cmc)) 100% 100% / 2px 18px no-repeat;
}
.ob .container:has(> .header) { padding-top: 0; }
.ob-report #root { padding-top: 0; }
.ob .container > .header, .ob-report #root > .max-w-7xl > div:has(h1) {
  position: relative; isolation: isolate; border: 0; border-image: var(--ob-hero) fill 0 // 0 100vw; }
.ob .container > .header::before, .ob-report #root > .max-w-7xl > div:has(h1)::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(circle, var(--ob-dots) 1.2px, transparent 1.7px); background-size: 7px 7px;
  -webkit-mask-image: radial-gradient(22% 60% at 100% 0%, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 75%); mask-image: radial-gradient(22% 60% at 100% 0%, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 75%); }
.ob .container > .header { padding: clamp(16px, 1.8vw, 26px) 0 clamp(18px, 1.8vw, 26px); margin: 0 0 clamp(16px, 1.8vw, 26px); }
.ob-report #root > .max-w-7xl > nav.mb-4 { margin: 0; } /* the in-report breadcrumb (4 reports) stays on the page colour above the hero */
.ob .container > .header .header-top, .ob-report #root > .max-w-7xl > div:has(h1) h1 + p {
  display: inline-block; max-width: 100%; font: 400 22px/1 var(--pixel); letter-spacing: .02em; text-transform: none; padding: 5px 10px 4px;
  background: var(--ink); color: var(--paper); margin: 0 0 14px; }
.ob .container > .header .header-title, .ob-report #root > .max-w-7xl > div:has(h1) h1 {
  position: relative; width: fit-content; max-width: 100%; margin: 0 0 14px; padding: clamp(16px, 1.8vw, 26px) clamp(8px, 1.2vw, 18px); }
.ob .container > .header .header-title::before, .ob-report #root > .max-w-7xl > div:has(h1) h1::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--ob-crop); }
.ob .container > .header .header-meta { margin: 0; }
/* issue H1s are story headlines of 6 to 11 words: on the D6 inner scale (up to 112 px) they took 3 or 4 lines at 1366 and 1536
   and pushed the lead story out of the first screen, so the issue H1 stops at 72 px (44 px on phones, as D6) */
.ob .container > .header .header-title { font-size: clamp(44px, 5.2vw, 72px); padding-top: clamp(12px, 1.2vw, 18px); padding-bottom: clamp(12px, 1.2vw, 18px); }
.ob .lead-story .story-text { line-height: 1.5; }
/* report hero: the report's subtitle is the pixel tag above the H1 (visual order only), the byline sits under it */
.ob-report #root > .max-w-7xl > div:has(h1) { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 4px;
  padding: clamp(20px, 2.4vw, 32px) 0 clamp(22px, 2.6vw, 36px); margin: 0 0 clamp(20px, 2.4vw, 32px); }
.ob-report #root > .max-w-7xl > div:has(h1) > div:first-child > div { display: flex; flex-direction: column; align-items: flex-start; }
.ob-report #root > .max-w-7xl > div:has(h1) h1 + p { order: -1; }
/* byline: a 40 px square photo that never shrinks, then "Analysis by Shashwat Ghosh" on one line */
.ob-report #root > .max-w-7xl > div:has(h1) > div:last-child { display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 12px; }
.ob-report #root > .max-w-7xl > div:has(h1) > div:last-child > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; text-align: left; }
.ob-report #root > .max-w-7xl > div:has(h1) > div:last-child p { font: 500 15px/1.35 var(--mono); color: var(--ink); margin: 0; }
.ob-report #root > .max-w-7xl > div:has(h1) > div:last-child p + p { font-weight: 600; }
.ob-report #root > .max-w-7xl > div:has(h1) img { width: 40px; height: 40px; min-width: 40px; flex: none; object-fit: cover; }

/* issues: the lead story and the editor's note are windows (black title bar in VT323), side by side from 1440 px; the other
   stories are cards with the 6 px oxblood top rule and the hard shadow */
.ob .lead-story, .ob .editor-note-box { border: 2px solid var(--edge); box-shadow: 6px 6px 0 var(--shadow); padding: 0 22px 22px; margin: 0 0 24px; }
.ob .lead-story > .section-label, .ob .editor-note-box > .column-title { display: flex; margin: 0 -22px 14px; padding: 5px 10px 4px;
  font: 400 22px/1.1 var(--pixel); letter-spacing: .02em; text-transform: none; background: var(--ink); color: var(--paper); }
/* from 900 px the lead story's photo and caption sit at the right, so its first paragraph starts under the title bar
   (plain block flow: the " | " between the source links stays inline; a flex reorder would have lifted it to the top) */
@media (min-width: 900px) {
  .ob .lead-story::after { content: ""; display: block; clear: both; }
  .ob .container > .lead-story-wrapper { max-width: none; }
  .ob .lead-story > .lead-image, .ob .lead-story > .image-caption { float: right; clear: right; width: min(40%, 420px); margin-left: 24px; }
  .ob .lead-story > .image-caption { margin-top: 6px; }
}
@media (min-width: 1440px) {
  .ob .container > .lead-story-wrapper { max-width: none; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; align-items: start; }
}
.ob .three-column > div, .ob .story-item, .ob .trend-item, .ob .story-item-full, .ob .trend-item-full, .ob .tech-item, .ob .product-item {
  border: 1.5px solid var(--edge); border-top: 6px solid var(--ox); box-shadow: 6px 6px 0 var(--shadow); }
.ob .story-grid, .ob .trends-grid, .ob .tech-grid, .ob .product-list, .ob .three-column { gap: 24px; }
@media (max-width: 600px) {
  /* phones: a tighter hero so the lead story's first paragraph reaches the first screen */
  .ob .container > .header { padding: 10px 0 12px; margin-bottom: 12px; }
  .ob .container > .header .header-top, .ob-report #root > .max-w-7xl > div:has(h1) h1 + p { margin-bottom: 8px; }
  .ob .container > .header .header-title, .ob-report #root > .max-w-7xl > div:has(h1) h1 { padding: 12px 8px; margin-bottom: 8px; }
  .ob .lead-story, .ob .editor-note-box { padding: 0 14px 16px; box-shadow: 4px 4px 0 var(--shadow); }
  .ob .lead-story > .section-label, .ob .editor-note-box > .column-title { margin: 0 -14px 10px; }
  .ob .three-column > div, .ob .story-item, .ob .trend-item, .ob .story-item-full, .ob .trend-item-full, .ob .tech-item, .ob .product-item { box-shadow: 4px 4px 0 var(--shadow); }
}

/* Dark mode (D11): the tokens above swap in helix.css; these pieces sit on colours that do not */
@media screen and (prefers-color-scheme: dark) {
  .ob .hero h1 span, .ob h2:where(:not(.ob-h3, .ob-h4)) span, .ob .page-header h1 span, .ob-legal .page-title span { color: #F2AAB3; }
  .ob, .ob-report { --ob-hero: linear-gradient(165deg, #3A0F1A 0%, #2A1020 38%, #15182A 66%, #0E1B2B 100%); --ob-dots: rgba(242, 170, 179, .30); --cmc: #F2AAB3; }
  .feature-icon .hx-ico { color: #F2AAB3; }
  .ob .section-header-purple { background: #C42835; color: #FAF8F6; }  /* paper on #C42835 is 5.3:1 (on #E0303D it was 4.25:1) */
  .ob-report #root a.hx-text-ox:not(.rounded-lg), .ob-report #root a.hx-text-muted:not(.rounded-lg) { text-decoration-color: rgba(250, 248, 246, .4); }
}

/* R11-A3-5: report pages; the sticky author card stops below the 77 px sticky top bar (bar + 16 px) instead of sliding under it.
   Short screens keep the old 16 px, as the bar is not sticky there (helix.css, max-height 500px). */
.author-card.sticky { top: 93px; }
@media (max-height: 500px) { .author-card.sticky { top: 16px; } }

/* Run 13 D22/B34: the Helix report standard, mapped onto the existing issue and report markup (contract.md, apply.md
   section C). No word, number, image or link changes here; the new hxr-tag and hxr-foot elements in the 21 pages pick
   up their look from helix-report.css directly. */

/* Title block: a plain 6 px oxblood top rule, no hero gradient behind it (this overrides the border-image hero above) */
.ob .container > .header, .ob-report #root > .max-w-7xl > div:has(h1) { border-image: none; border-top: 6px solid var(--ox); }
/* the new hxr-tag sits on its own line above the branding bar's flex row (which stays a plain 2-item space-between) */
.ob-report #root > .max-w-7xl > div:has(h1) > .hxr-tag { order: -1; flex: 1 0 100%; margin: 0 0 10px; }

/* Report cards: square corners, no soft shadow (Tailwind rounded-* and shadow-* inside the 15 reports; not the round
   avatar photo or the chart tracks, which keep their shape) */
.ob-report #root .rounded:not(img), .ob-report #root .rounded-lg:not(img), .ob-report #root .rounded-xl:not(img),
.ob-report #root .shadow-lg { border-radius: 0; box-shadow: none; }

@media print {
  /* helix-report.css scopes "only the report prints" on an element carrying class hxr; the 21 Offbeat pages carry no
     such wrapper (HTML is frozen apart from the tag and footer lines), so the same "nothing but the report column"
     rule is repeated here directly on the issue and report columns */
  main:has(.ob .container) :not(.ob .container, .ob .container *) { display: none !important; }
  main:has(.ob-report #root) :not(.ob-report #root, .ob-report #root *) { display: none !important; }
  /* the report tab rows ("Section Navigation") never print */
  .ob-report #root > .max-w-7xl > .flex-wrap.mb-5 { display: none !important; }
  /* the in-report breadcrumb (3 reports): navigation, not report text */
  .ob-report #root > .max-w-7xl > nav.mb-4 { display: none !important; }
  /* section labels print as ink text with a 1.5 px ink border, so they survive "background graphics" off */
  .ob .section-header, .ob .section-header-cyan, .ob .section-header-purple, .ob .section-label, .ob .category-header,
  .ob-report .section-header, .ob-report .section-header-cyan, .ob-report .section-header-purple,
  .ob-report .section-label, .ob-report .category-header,
  .ob .container > .header .header-top, .ob .editor-note-box > .column-title,
  .ob-report #root > .max-w-7xl > div:has(h1) h1 + p {
    background: none !important; color: #1A0E10 !important; border: 1.5px solid #1A0E10 !important; box-shadow: none !important;
  }
  /* chart bars keep their colour with backgrounds off */
  .ob-report [style*="background"], .ob-report [style*="background"] *, .ob-report .hx-bg-track, .ob-report .hx-bg-track * {
    print-color-adjust: exact; -webkit-print-color-adjust: exact;
  }
  /* R14-10b: helix.css's own dark-mode rule for table headers ("main table th") is not scoped to screen, so it
     still applies under a print + dark-scheme render; this repo's own CSS cannot edit helix.css (shared, lead
     owned), so the light-mode look is restored here for print only (logged for the lead to fix at the source) */
  .ob .container th, .ob-report #root th { background: var(--clay) !important; color: #1A0E10 !important; }
  /* R14-10c: the label stays with what follows it (helix-report.css only reaches h1 to h6; these are div labels) */
  .ob .section-header, .ob .section-header-cyan, .ob .section-header-purple, .ob .section-label, .ob .category-header,
  .ob-report .section-header, .ob-report .section-header-cyan, .ob-report .section-header-purple,
  .ob-report .section-label, .ob-report .category-header {
    break-after: avoid; page-break-after: avoid;
  }
  .ob .section-header + *, .ob .section-header-cyan + *, .ob .section-header-purple + *, .ob .section-label + *, .ob .category-header + *,
  .ob-report .section-header + *, .ob-report .section-header-cyan + *, .ob-report .section-header-purple + *,
  .ob-report .section-label + *, .ob-report .category-header + * {
    break-before: avoid; page-break-before: avoid;
  }
  /* the same keep-with-next companion helix-report.css gives ordinary h1 to h6 headings inside .hxr (break-before
     avoid on the very next sibling); Offbeat markup carries no .hxr wrapper, so headings there only had the
     break-after: avoid half of the pair (unscoped, from helix-report.css line 91), never this half. Without it, a
     heading such as the author card's "Shashwat Ghosh" h3 could still end a page while its own next line (the
     designation paragraph) starts the next: found in country-comparison and gtm-dual-strategy */
  .ob .container :is(h1, h2, h3, h4, h5, h6) + *, .ob-report #root :is(h1, h2, h3, h4, h5, h6) + * {
    break-before: avoid; page-break-before: avoid;
  }
  /* R14-10d: outside links in the report column print their address (helix-report.css's rule reaches only .hxr-body;
     the Offbeat issue and report columns carry no .hxr-body, so the same rule is repeated for them here). Chrome
     (header, row 2, Menu, tab rows, subscribe blocks) is already hidden above, so this never reaches hidden chrome.
     Several of these links (.source-link, the author bio links) are display: inline-flex on screen (for the 44 px
     tap target and icon alignment); an inline-flex box does not wrap its own children, so the long address text
     generated below just grew the box wider instead of wrapping, and ran off the printed page's edge. Printed
     link addresses do not need a tap target, so in print these go back to plain inline, letting the address wrap
     with the surrounding text like any other run of text. */
  .ob .container a[href^="http"], .ob-report #root a[href^="http"] {
    display: inline !important; min-height: auto !important;
  }
  .ob .container a[href^="http"]::after, .ob-report #root a[href^="http"]::after {
    content: " (" attr(href) ")"; font: 400 9pt/1.3 var(--mono); color: #5A4B4E; overflow-wrap: anywhere;
    text-transform: none; letter-spacing: normal;
  }
}
/* Run 13 D22 (lead review): no hard or soft shadows inside a report: the issue cards and every Tailwind shadow-* box in the reports */
.ob .container .lead-story, .ob .container .editor-note-box, .ob .container .three-column > div, .ob .container .story-item, .ob .container .trend-item,
.ob .container .story-item-full, .ob .container .trend-item-full, .ob .container .tech-item, .ob .container .product-item,
.ob-report #root [class*="shadow"] { box-shadow: none !important; }
/* Run 13 D22 (verifier R13-41): in print the title block drops the hero layer (border-image fill, isolation and the dot layer);
   with "background graphics" off, the crop-mark layer over the H1 printed as a white box and hid it */
@media print {
  .ob .container > .header, .ob-report #root > .max-w-7xl > div:has(h1) { border-image: none !important; isolation: auto !important; }
  .ob .container > .header::before, .ob-report #root > .max-w-7xl > div:has(h1)::before { display: none !important; }
  .ob .container > .header .header-title::before, .ob-report #root > .max-w-7xl > div:has(h1) h1::before { display: none !important; }
  .ob-report #root .tab-panel > *, .ob-report #root .tab-panel > * > *, .ob-report #root .rounded-xl, .ob-report #root .rounded-lg, .ob-report #root [class*="hx-bg-"]:has(> h2, > h3), .ob .story-item, .ob .trend-item, .ob .tech-item, .ob .product-item, .ob .editor-note-box, .ob .author-bio { break-inside: avoid; } /* cards, callouts and charts never split (verifier R13-41: Key Insight split) */ /* the crop marks laid over the H1 printed as a white box */
}