/* Signal Scope - report. One hierarchy: header strip, section nav, sections. Only scores carry the hue ramp. */
.sg-report { --sg-secbar-h: 52px; display: block; }
/* V7-09: the title takes the free width (at least 32rem, about 30 characters of the 28px title on one line) and the toolbar wraps onto its
   own row below it when both do not fit (the 884px canvas beside the open rail), instead of squeezing the title to ~256px. */
.sg-rhead { position: static; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; padding: 14px 0; border-bottom: 1px solid var(--sg-border); }
.sg-rhead__main { min-width: 0; display: grid; gap: 6px; flex: 1 1 32rem; }
.sg-rhead__title { font-size: clamp(1.375rem, 2.4vw, 1.75rem); line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.sg-rhead__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-size: .875rem; color: var(--sg-text-2); }
.sg-rhead__meta > span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.sg-rhead__actions { display: flex; align-items: center; gap: 8px; flex: 0 1 auto; flex-wrap: wrap; }
/* N3-05: between 700 and 900px the toolbar keeps Export / Share / Re-run and takes its own row under the title. */
@media (min-width: 701px) and (max-width: 900px) { .sg-rhead { flex-wrap: wrap; } .sg-rhead__main { flex: 1 1 100%; } .sg-rhead__actions { flex-wrap: wrap; } }
.sg-secbar { position: sticky; top: var(--sg-nav-h, 64px); z-index: 39; display: flex; align-items: center; gap: 12px; padding: 8px 0; background: rgba(13,12,29,.94); backdrop-filter: blur(12px); border-bottom: 1px solid var(--sg-border); }
.sg-secnav { position: relative; flex: 1; min-width: 0; --fade-l: 0px; --fade-r: 0px; }
.sg-secnav[data-fade-start="1"] { --fade-l: 32px; } .sg-secnav[data-fade-end="1"] { --fade-r: 32px; }
.sg-secnav__list { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%); scroll-padding-inline: 32px; }
.sg-secnav__list { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; padding: 4px 2px; } /* V5-05: proximity, not mandatory: a mandatory snap pulled every programmatic reveal back to the nearest tab start */
.sg-secnav .sg-secnav__link:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--sg-focus, #C4B5FD); }
.sg-secnav__list::-webkit-scrollbar { display: none; }
.sg-secnav__link { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 8px; font-size: .875rem; font-weight: 600; color: var(--sg-text-2); text-decoration: none; white-space: nowrap; scroll-snap-align: start; scroll-margin-inline: 48px; transition: background var(--sg-t), color var(--sg-t); } /* V5-05: 48px keeps a focused tab clear of the paging arrows (tabs.js reveal()) */
.sg-secnav__link:hover { background: var(--sg-neutral-bg); color: var(--sg-text); }
.sg-secnav__link[aria-current="location"] { background: var(--sg-accent-bg); color: var(--sg-accent-text); box-shadow: inset 0 0 0 1px rgba(139,124,255,.5); }
.sg-expandall { flex: none; white-space: nowrap; }
/* N4-01v: scroll cue. The clipped edge fades (mask above) and a chevron pages the strip; both appear only while that edge is hidden. */
/* U4 (round 4 integration): the button is a 44 x 44 touch target; the visible 28px disc is drawn by ::before so the strip keeps its look. */
.sg-secnav__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; display: none; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--sg-text); cursor: pointer; }
.sg-secnav__arrow::before { content: ''; position: absolute; inset: 8px; border: 1px solid var(--sg-border-strong); border-radius: 50%; background: var(--sg-raised); box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.sg-secnav__arrow .sg-icon { position: relative; }
.sg-secnav__arrow--prev { left: -6px; } .sg-secnav__arrow--next { right: -6px; }
.sg-secnav__arrow--prev .sg-icon { transform: rotate(90deg); }
.sg-secnav__arrow:hover { color: #fff; } .sg-secnav__arrow:hover::before { background: var(--sg-primary); border-color: var(--sg-primary); }
.sg-secnav[data-fade-start="1"] .sg-secnav__arrow--prev, .sg-secnav[data-fade-end="1"] .sg-secnav__arrow--next { display: grid; }

.sg-report__body { display: grid; gap: 40px; padding-top: 28px; }
.sg-sec { scroll-margin-top: calc(var(--sg-secbar-h, 52px) - 8px); /* html scroll-padding-top already adds nav + 24px */ display: grid; gap: 18px; content-visibility: auto; contain-intrinsic-size: auto 600px; }
#sg-overview { content-visibility: visible; }
.sg-sec__head { display: flex; align-items: center; gap: 12px; }
.sg-sec__title { font-size: var(--fs-h2); line-height: 1.2; flex: 1; }
.sg-sec__actions { display: flex; gap: 8px; }
.sg-sec__toggle[aria-expanded="false"] .sg-icon { transform: rotate(-90deg); }
.sg-sec__toggle .sg-icon { transition: transform var(--sg-t); }
.sg-sec__lead { color: var(--sg-text-2); max-width: 68ch; margin-top: -6px; }
.sg-sec__body { display: grid; gap: 22px; }
.sg-sec.is-collapsed { gap: 0; }
.sg-block { display: grid; gap: 14px; }
.sg-h3 { font-size: var(--fs-h3); line-height: 1.25; } .sg-h4 { font-size: var(--fs-h4); line-height: 1.3; }

/* Verdict strip */
.sg-verdict { display: grid; gap: 12px; padding: 24px 28px; border-radius: var(--sg-r3); border: 1px solid rgba(139,124,255,.4); background: radial-gradient(90% 160% at 0% 0%, rgba(91,75,240,.28), transparent 62%), var(--sg-surface); }
.sg-verdict__meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.sg-verdict__text { font-family: var(--sg-display); font-size: clamp(1.25rem, 2.2vw, 1.625rem); line-height: 1.4; font-weight: 500; color: var(--sg-text); max-width: 68ch; text-wrap: pretty; }
.sg-verdict__text.is-muted { color: var(--sg-muted); }

/* Gauges */
.sg-gauges { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.sg-gauge { display: grid; gap: 8px; padding: 16px; border-radius: var(--sg-r2); border: 1px solid var(--sg-border); background: var(--sg-surface); align-content: start; }
.sg-gauge__top { min-height: 2.7em; display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
.sg-gauge__label { overflow-wrap: break-word; word-break: normal; hyphens: manual; min-width: 0; display: flex; align-items: flex-start; gap: 6px; font-size: .875rem; font-weight: 600; color: var(--sg-text-2); line-height: 1.3; }
.sg-gauge__label .sg-icon { margin-top: 2px; color: var(--sg-accent-text); }
.sg-gauge__help { margin: -6px -8px 0 0; }
.sg-gauge__read { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.sg-gauge__num { font-family: var(--sg-display); font-size: 2.25rem; font-weight: 600; line-height: 1; color: var(--sg-text); }
.sg-gauge__band { font-size: .875rem; font-weight: 700; color: var(--sg-accent-text); }
.sg-gauge.is-na .sg-gauge__num { font-size: 1.5rem; color: var(--sg-muted); } .sg-gauge.is-na .sg-gauge__band { color: var(--sg-muted); font-weight: 500; }
.sg-gauge__bar { position: relative; height: 8px; border-radius: 99px; background: rgba(255,255,255,.1); overflow: hidden; }
.sg-gauge__fill { position: absolute; inset: 0 auto 0 0; width: var(--v, 0%); background: var(--c, var(--sg-ramp-5)); border-radius: inherit; }
.sg-gauge__tick { position: absolute; top: 0; bottom: 0; left: var(--at); width: 2px; background: var(--sg-surface); }
.sg-gauge__pol-note { font-size: var(--fs-xs); color: var(--sg-muted); }
.sg-gauge--compact { padding: 12px; gap: 6px; } .sg-gauge--compact .sg-gauge__num { font-size: 1.75rem; }
.sg-scores-withheld { color: var(--sg-muted); font-size: .9375rem; }   /* round 7: replaces four n/a gauges when every score was withheld */
@media (prefers-reduced-motion: no-preference) { .sg-gauge__fill { animation: sg-fill .7s cubic-bezier(.2,.7,.3,1) both; } @keyframes sg-fill { from { width: 0; } } }

/* Findings, actions */
.sg-findings { display: grid; gap: 12px; counter-reset: f; }
.sg-finding { display: flex; gap: 16px; padding: 18px 20px; border-radius: var(--sg-r2); border: 1px solid var(--sg-border); background: var(--sg-surface); }
.sg-finding__n { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--sg-accent-bg); color: var(--sg-accent-text); font-weight: 700; font-family: var(--sg-display); border: 1px solid rgba(139,124,255,.5); }
.sg-finding__main { display: grid; gap: 8px; min-width: 0; }
.sg-finding__h { font-size: var(--fs-h4); line-height: 1.35; }
.sg-finding__so { color: var(--sg-text-2); max-width: 68ch; } .sg-finding__so strong { color: var(--sg-text); }
.sg-finding__ev { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sg-actions { display: grid; gap: 10px; }
.sg-action { display: flex; gap: 14px; padding: 14px 18px; border-radius: var(--sg-r2); border: 1px solid var(--sg-border); background: rgba(255,255,255,.025); }
.sg-action__n { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: var(--sg-primary); color: #fff; font-weight: 700; font-size: .875rem; }
.sg-action__t { font-weight: 600; }
.sg-action__meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 4px; font-size: .875rem; color: var(--sg-text-2); }
/* V7-09: a value that wraps to several lines keeps its icon on the FIRST line (it was centred on a three-line metric). */
.sg-action__meta span { display: inline-flex; align-items: flex-start; gap: 5px; }
.sg-action__meta span > .sg-icon { margin-top: calc((1.5em - 12px) / 2); }
.sg-action__meta .sg-icon { color: var(--sg-muted); }

/* Competitors */
.sg-matrixholder { display: grid; gap: 10px; container-type: inline-size; }
.sg-viewtoggle { display: inline-flex; justify-self: end; padding: 3px; border: 1px solid var(--sg-border-strong); border-radius: 10px; gap: 2px; }
.sg-viewtoggle__btn { min-height: 34px; padding: 0 14px; border: 0; border-radius: 8px; background: transparent; color: var(--sg-text-2); font-weight: 600; font-size: .875rem; cursor: pointer; }
.sg-viewtoggle__btn[aria-pressed="true"] { background: var(--sg-primary); color: #fff; }
/* V6-01: 1500px over nine columns; the first six (Company .. Positioning) are 870px so an 884px canvas at 1440 shows them in full, Evidence included. */
.sg-matrix { min-width: 1500px; table-layout: fixed; }
.sg-matrix td, .sg-matrix th { overflow-wrap: break-word; }
.sg-th--price_tier { width: 120px; } .sg-th--threat, .sg-th--momentum { width: 150px; } .sg-th--features { width: 230px; } .sg-th--evidence { width: 130px; }
.sg-th--positioning { width: 150px; } .sg-th--target_customer, .sg-th--weakness { width: 200px; } .sg-th--name { width: 170px; }
.sg-matrix .sg-tagchip { overflow-wrap: break-word; }
.sg-matrix .sg-chip--why { white-space: normal; text-align: left; }   /* "Limited evidence" wraps inside its 130px cell instead of running into the next */
.sg-matrixholder .sg-tablewrap { background: linear-gradient(to right, var(--sg-surface) 30%, rgba(26,26,46,0)) left center / 40px 100% local no-repeat, linear-gradient(to left, var(--sg-surface) 30%, rgba(26,26,46,0)) right center / 40px 100% local no-repeat, radial-gradient(farthest-side at 0 50%, rgba(139,124,255,.45), transparent) left center / 14px 100% scroll no-repeat, radial-gradient(farthest-side at 100% 50%, rgba(139,124,255,.45), transparent) right center / 14px 100% scroll no-repeat, var(--sg-surface); }
.sg-scrollhint { display: none; justify-self: start; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--sg-muted); }
.sg-matrixholder[data-view="table"][data-overflow="1"] .sg-scrollhint { display: inline-flex; }
.sg-matrix tbody tr { transition: background var(--sg-t); cursor: pointer; }
.sg-matrix tbody tr:hover { background: rgba(255,255,255,.04); }
.sg-matrix tr.is-target { background: rgba(91,75,240,.14); }
.sg-matrix tr.is-target:hover { background: rgba(91,75,240,.2); }
.sg-matrix tr.is-limited { opacity: .72; }
.sg-matrix th.sg-td--name, .sg-matrix thead th:first-child { position: sticky; left: 0; z-index: 2; background: var(--sg-surface); min-width: 170px; }
.sg-matrix thead th:first-child { background: #20203A; z-index: 3; }
/* V7-08: the sticky Company cell must be opaque (columns scroll under it), so it paints the row's own tint OVER the surface colour: the
   same rgba layer the row uses, so there is no seam; and its divider is an inset shadow at its bottom edge, painted by the cell itself on
   top of its background, so the row line never drops out when a neighbouring sticky cell snaps over a sub-pixel border. */
.sg-matrix tr.is-target th.sg-td--name { background: linear-gradient(rgba(91,75,240,.14), rgba(91,75,240,.14)), var(--sg-surface); }
.sg-matrix tr.is-target:hover th.sg-td--name { background: linear-gradient(rgba(91,75,240,.2), rgba(91,75,240,.2)), var(--sg-surface); }
.sg-matrix tbody tr:not(.is-target):hover th.sg-td--name { background: linear-gradient(rgba(255,255,255,.04), rgba(255,255,255,.04)), var(--sg-surface); }
.sg-matrix tbody th.sg-td--name { border-bottom-color: transparent; box-shadow: inset 0 -1px 0 var(--sg-border); }
.sg-matrix tbody tr:last-child th.sg-td--name { box-shadow: none; }
/* V7-08: sortable (button) and plain header labels share one baseline: both are centred in the header row. */
.sg-matrix thead th { vertical-align: middle; }
/* V7-08: a long positioning sentence is clamped to three lines in the matrix (the full text is in the company's profile drawer and in print). */
.sg-clamp3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sg-matrix .sg-td--positioning, .sg-matrix .sg-td--weakness, .sg-matrix .sg-td--target_customer { min-width: 190px; max-width: 260px; }
.sg-co { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.sg-co__name { padding: 5px 0; border: 0; background: none; font: 700 .9375rem/1.3 var(--sg-font); color: var(--sg-text); text-align: left; cursor: pointer; text-decoration: underline; text-decoration-color: rgba(255,255,255,.3); text-underline-offset: 3px; }
@media (pointer: coarse) { .sg-co__name { padding-block: 9px; } }
.sg-co__name:hover { text-decoration-color: var(--sg-accent-text); color: #fff; }
.sg-co__dom { flex-basis: 100%; font-size: var(--fs-xs); color: var(--sg-muted); font-weight: 400; }
.sg-cell-why { margin-top: 4px; font-size: var(--fs-xs); color: var(--sg-muted); max-width: 22ch; }
.sg-cocards { display: none; gap: 12px; }
@container (min-width: 720px) { .sg-cocards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sg-cocard { display: grid; gap: 10px; padding: 16px; border-radius: var(--sg-r2); border: 1px solid var(--sg-border); background: var(--sg-surface); }
.sg-cocard.is-target { border-color: rgba(139,124,255,.6); background: #1F1D45; }
.sg-cocard.is-limited { opacity: .75; }
.sg-cocard__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.sg-cocard__dl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .sg-cocard__dl dt { font-size: var(--fs-xs); color: var(--sg-muted); font-weight: 600; } .sg-cocard__wide { grid-column: 1 / -1; }
.sg-matrixholder[data-view="cards"] .sg-tablewrap { display: none; } .sg-matrixholder[data-view="cards"] .sg-cocards { display: grid; }

.sg-map { display: grid; gap: 12px; padding: 20px; border-radius: var(--sg-r2); border: 1px solid var(--sg-border); background: var(--sg-surface); }
.sg-map__cap { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sg-map__note { font-size: .875rem; color: var(--sg-muted); }
.sg-map__svg { width: 100%; height: auto; display: block; }
.sg-map__grid { stroke: rgba(255,255,255,.12); stroke-width: 1; } .sg-map__frame { stroke: rgba(255,255,255,.26); }
/* V5-01: the SVG is laid out at 1 unit = 1 CSS px (competitors.js sets --sg-map-fs to 13-15px from the container width), so this text never shrinks with the drawing. */
.sg-map__axis { fill: #C3C2D8; font: 500 var(--sg-map-fs, 13px) var(--sg-font); } .sg-map__axistitle { fill: #A6ABBA; font: 600 var(--sg-map-fs, 13px) var(--sg-font); }
.sg-map__label { fill: #ECEBF7; font: 600 var(--sg-map-fs, 13px) var(--sg-font); paint-order: stroke; stroke: #1A1A2E; stroke-width: 4px; stroke-linejoin: round; }
.sg-map__pt { cursor: pointer; } .sg-map__hit { fill: transparent; stroke: none; pointer-events: all; } .sg-map__pt circle:not(.sg-map__hit) { fill: var(--sg-ramp-4); stroke: #D6D1FD; stroke-width: 2; transition: r .15s; }
.sg-map__pt.is-target circle:not(.sg-map__hit) { fill: #FBBF24; stroke: #fff; }
.sg-map__pt:hover circle:not(.sg-map__hit), .sg-map__pt:focus-visible circle:not(.sg-map__hit) { stroke-width: 4; }
.sg-map__pt:focus-visible { outline: 3px solid var(--sg-focus); outline-offset: 4px; border-radius: 50%; }
.sg-map__leader { stroke: rgba(236,235,247,.5); stroke-width: 1; stroke-dasharray: 2 2; pointer-events: none; }
.sg-map__pt.is-target .sg-map__label { font-weight: 700; }

/* Pricing */
.sg-pricegrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.sg-pricecard { display: grid; gap: 12px; align-content: start; padding: 18px; border-radius: var(--sg-r2); border: 1px solid var(--sg-border); background: var(--sg-surface); }
.sg-pricecard.is-target { border-color: rgba(139,124,255,.55); }
.sg-pricecard__head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } .sg-pricecard__head .sg-h3 { margin-right: auto; font-size: var(--fs-h4); }
.sg-pricecard__none, .sg-pricecard__note { color: var(--sg-text-2); font-size: .875rem; }

/* Battlecards */
.sg-bcgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.sg-bcard { display: grid; gap: 12px; align-content: start; padding: 18px; border-radius: var(--sg-r2); border: 1px solid var(--sg-border); background: var(--sg-surface); }
.sg-bcard__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; } .sg-bcard__head .sg-h3 { font-size: var(--fs-h4); }
.sg-bcard__over { color: var(--sg-text-2); font-size: .9375rem; }
.sg-bcard__cols { display: grid; gap: 12px; }
.sg-bcard__k { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.sg-bcard__k--win { color: var(--sg-ok); } .sg-bcard__k--lose { color: var(--sg-warn); } .sg-bcard__v { font-size: .9375rem; }
.sg-bcard .sg-btn { justify-self: start; }
.sg-bc { display: grid; gap: 22px; }
.sg-bc__profile { display: grid; grid-template-columns: repeat(3, auto); gap: 12px 24px; justify-content: start; padding: 14px 16px; border-radius: var(--sg-r2); background: rgba(255,255,255,.04); border: 1px solid var(--sg-border); } .sg-bc__profile dt { font-size: var(--fs-xs); color: var(--sg-muted); font-weight: 600; } .sg-bc__wide { grid-column: 1 / -1; }
.sg-bc__overview { font-size: 1rem; color: var(--sg-text); }
.sg-bc__sec { display: grid; gap: 8px; } .sg-bc__h { font-size: var(--fs-h4); }
.sg-objections { display: grid; gap: 12px; } .sg-obj dt { display: flex; gap: 8px; align-items: flex-start; font-weight: 600; } .sg-obj dt .sg-icon { margin-top: 4px; color: var(--sg-accent-text); } .sg-obj dd { margin: 4px 0 0 22px; color: var(--sg-text-2); }

/* Gaps, opportunities, plan */
.sg-gaps { display: grid; gap: 12px; }
.sg-gap { display: flex; gap: 16px; padding: 16px 18px; border-radius: var(--sg-r2); border: 1px solid var(--sg-border); background: var(--sg-surface); }
.sg-gap > div { display: grid; gap: 6px; min-width: 0; flex: 1; }
.sg-gap__n { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: var(--sg-neutral-bg); font-weight: 700; color: var(--sg-text-2); }
.sg-gap__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 8px 12px; } .sg-gap__head > :last-child { justify-self: end; white-space: nowrap; }
.sg-gap__play { color: var(--sg-text-2); }
.sg-oppwrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; } /* N-07: grid above the table; the grid fills the column (N3-04) */
/* One grid for axis titles, tick words and cells: rows share a track so the tick words always line up with the cells. */
.sg-grid3 { display: grid; grid-template-columns: auto auto repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(88px, auto)) auto auto auto; gap: 6px 8px; min-width: 0; }
.sg-grid3__y { grid-column: 1; grid-row: 1 / 4; writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; font-size: var(--fs-xs); color: var(--sg-text-2); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.sg-grid3__x { grid-column: 3 / 6; grid-row: 5; text-align: center; font-size: var(--fs-xs); color: var(--sg-text-2); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.sg-grid3__tick { font-size: var(--fs-xs); color: var(--sg-muted); font-weight: 600; }
.sg-grid3__yt { grid-column: 2; grid-row: var(--gy); align-self: center; justify-self: end; padding-right: 4px; }
.sg-grid3__xt { grid-column: var(--gx); grid-row: 4; justify-self: center; }
.sg-grid3__cell { grid-column: var(--gx); grid-row: var(--gy); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; min-width: 0; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid var(--sg-border); }
.sg-grid3__cell.is-quick { background: var(--sg-ok-bg); border-color: rgba(52,211,153,.5); }
.sg-grid3__item { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; min-width: 0; padding: 3px; border: 0; border-radius: 999px; background: none; font: inherit; font-size: var(--fs-xs); color: var(--sg-text-2); text-align: left; cursor: pointer; } /* V5-13: a button that jumps to the initiative's row */
.sg-grid3__item:hover { background: rgba(255,255,255,.08); color: var(--sg-text); }
.sg-table tr.is-flash > * { background: var(--sg-accent-bg); transition: background .4s; }
.sg-grid3__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-grid3__key { grid-column: 3 / 6; grid-row: 6; display: flex; align-items: center; gap: 8px; font-size: var(--fs-xs); color: var(--sg-text-2); }
.sg-grid3__swatch { width: 14px; height: 14px; border-radius: 4px; background: var(--sg-ok-bg); border: 1px solid rgba(52,211,153,.5); flex: none; }
.sg-grid3__dot { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--sg-primary); color: #fff; font-size: var(--fs-xs); font-weight: 700; font-style: normal; } /* N3-03: white on --sg-primary is 5.7:1 (ramp-4 was 4.3) */
.sg-plancols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.sg-plancol { display: grid; gap: 10px; align-content: start; padding: 16px; border-radius: var(--sg-r2); border: 1px solid var(--sg-border); background: rgba(255,255,255,.025); }
.sg-plancol__h { font-size: var(--fs-h4); color: var(--sg-accent-text); }
.sg-plancol__list { display: grid; gap: 10px; }
.sg-plancard { padding: 12px 14px; border-radius: 10px; background: var(--sg-surface); border: 1px solid var(--sg-border); }
.sg-plancard__t { font-weight: 600; font-size: .9375rem; }
.sg-watch { display: grid; gap: 10px; } .sg-watch__item { padding: 12px 16px; border-radius: var(--sg-r2); border: 1px solid var(--sg-border); background: var(--sg-surface); display: grid; gap: 4px; }
.sg-watch__t { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-weight: 600; }

/* SWOT */
.sg-swot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.sg-swot[data-count="1"] { grid-template-columns: minmax(0, 1fr); }   /* round 7: quadrants with nothing left are not rendered; one quadrant takes the row */
.sg-plancols[data-cols="1"] { grid-template-columns: minmax(0, 1fr); } .sg-plancols[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sg-swot__q { display: grid; gap: 12px; align-content: start; padding: 18px; border-radius: var(--sg-r2); border: 1px solid var(--sg-border); background: var(--sg-surface); border-top: 3px solid var(--q); }
.sg-swot__q--ok { --q: var(--sg-ok); } .sg-swot__q--bad { --q: var(--sg-bad); } .sg-swot__q--info { --q: var(--sg-info); } .sg-swot__q--warn { --q: var(--sg-warn); }
.sg-swot__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } /* V5-15: the count badge is a sibling of the h3, not part of its name */
.sg-swot__h { display: flex; align-items: center; gap: 8px; font-size: var(--fs-h4); color: var(--q); }
.sg-swot__count { padding: 2px 9px; border-radius: 99px; background: var(--sg-neutral-bg); color: var(--sg-text-2); font-size: var(--fs-xs); font-family: var(--sg-font); font-weight: 600; }

/* SEO */
.sg-label-permanent { display: inline-flex; align-items: center; gap: 8px; justify-self: start; padding: 6px 14px; border-radius: 999px; border: 1px dashed rgba(251,191,36,.7); background: var(--sg-warn-bg); color: var(--sg-warn); font-weight: 700; font-size: .875rem; }
.sg-seogrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.sg-seocard { display: grid; gap: 12px; align-content: start; padding: 18px; border-radius: var(--sg-r2); border: 1px solid var(--sg-border); background: var(--sg-surface); }
.sg-seocard header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.sg-seocard__play { color: var(--sg-text-2); font-size: .9375rem; }

/* Sources, method */
.sg-sources { display: grid; gap: 8px; }
.sg-source { display: flex; gap: 14px; padding: 14px 16px; border-radius: var(--sg-r2); border: 1px solid var(--sg-border); background: var(--sg-surface); transition: background .4s, border-color .4s; }
.sg-source.is-flash { background: var(--sg-accent-bg); border-color: var(--sg-accent); }
.sg-source__n { flex: none; display: grid; place-items: center; min-width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--sg-accent); color: var(--sg-accent-text); font-weight: 700; font-size: .875rem; font-variant-numeric: tabular-nums; }
.sg-source__main { display: grid; gap: 4px; min-width: 0; }
.sg-source__title { font-weight: 600; }
.sg-source__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: .875rem; color: var(--sg-text-2); }
.sg-source__quote { border-left: 3px solid var(--sg-border-strong); padding-left: 12px; font-size: .875rem; color: var(--sg-text-2); font-style: italic; }
.sg-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.sg-stat { padding: 16px; border-radius: var(--sg-r2); border: 1px solid var(--sg-border); background: var(--sg-surface); }
.sg-stat__v { font-family: var(--sg-display); font-size: 1.75rem; font-weight: 600; line-height: 1.1; } .sg-stat__l { color: var(--sg-text-2); font-size: .875rem; margin-top: 2px; } .sg-stat__s { color: var(--sg-muted); font-size: var(--fs-xs); }
.sg-method__text { color: var(--sg-text-2); max-width: 72ch; }
/* V5-13: evidence label legend (Sources section): the chips carry no hover-only titles, this is where their meaning is printed. */
.sg-legend { display: grid; gap: 8px; padding: 14px 16px; border-radius: var(--sg-r2); border: 1px solid var(--sg-border); background: rgba(255,255,255,.025); font-size: .875rem; color: var(--sg-text-2); }
.sg-legend__row { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; align-items: start; }
.sg-legend__row dt { display: flex; } .sg-legend__row dd { margin: 0; }
@media (max-width: 480px) { .sg-legend__row { grid-template-columns: 1fr; gap: 4px; } }
.sg-disclaimer { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border-radius: var(--sg-r1); background: rgba(255,255,255,.04); color: var(--sg-text-2); font-size: .875rem; }
.sg-disclaimer .sg-icon { margin-top: 3px; flex: none; }
.sg-extra { display: grid; gap: 8px; padding: 16px 18px; border-radius: var(--sg-r2); border: 1px solid var(--sg-border); background: var(--sg-surface); }
.sg-sharebanner { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; padding: 10px 16px; margin-bottom: 8px; border-radius: var(--sg-r2); border: 1px solid rgba(139,124,255,.4); background: var(--sg-accent-bg); }
.sg-sharebanner p { margin-right: auto; }

/* Responsive */
@media (max-width: 700px) { .sg-hide-narrow { display: none !important; } } /* N3-05: folds into "More actions" on phones only; main.js uses the same 700px */
@media (max-width: 900px) {
  .sg-gauges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sg-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sg-plancols { grid-template-columns: 1fr; }
  .sg-pricegrid, .sg-bcgrid, .sg-seogrid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .sg-rhead { padding: 10px 0; align-items: flex-start; flex-wrap: nowrap; }   /* phones: the folded "More actions" button stays beside the title (V7-09's wrap is for the wide toolbar) */
  .sg-rhead__main { flex: 1 1 auto; }
  .sg-rhead__title { font-size: 1.25rem; -webkit-line-clamp: 2; }
  .sg-expandall { display: none; }
  .sg-report__body { gap: 32px; padding-top: 20px; }
  .sg-sec__title { font-size: 1.5rem; }
  .sg-verdict { padding: 18px 16px; }
  .sg-swot { grid-template-columns: 1fr; }
  .sg-finding, .sg-gap { gap: 12px; padding: 14px; }
  .sg-bc__profile { grid-template-columns: 1fr 1fr; }
  .sg-source { padding: 12px; }
  .sg-secnav__list { margin-inline: -16px; padding-inline: 16px; }
  .sg-map { padding: 14px; }
  .sg-grid3 { grid-template-rows: repeat(3, minmax(64px, auto)) auto auto auto; gap: 4px 6px; } .sg-grid3__cell { flex-direction: row; flex-wrap: wrap; align-content: center; justify-content: center; padding: 6px; } .sg-grid3__name { display: none; } .sg-grid3__item { gap: 0; }
  .sg-gauge__num { font-size: 1.875rem; }
}
@media (max-width: 480px) { .sg-gauges { grid-template-columns: 1fr; gap: 8px; } .sg-gauge { padding: 12px 14px; } .sg-gauge__top { min-height: 0; } .sg-stats { grid-template-columns: 1fr 1fr; } }

/* Every width: only the section bar stays sticky; the title block scrolls away to give the content room (N-04). */
@media (max-width: 700px) {
}
@media (pointer: coarse), (max-width: 700px) {
  .sg-viewtoggle__btn { min-height: 44px; min-width: 44px; }
  /* V6-04: section strip tabs (were 36px) and the company name buttons in the matrix and cards (43 x 42) are 44px targets on a touch screen. */
  .sg-secnav__link { min-height: 44px; }
  .sg-co__name { min-height: 44px; min-width: 44px; padding-block: 10px; }
  /* round-5 integration (e2e responsive pin): the Estimate chip became a button (V5-13) and the SEO grid items are buttons; at 390 they are 44px targets like
     every other control. `.sg-chip--why.sg-chip--sm` (26px, components.css) and `.sg-grid3__item { min-width: 0 }` above out-rank the generic coarse rules. */
  .sg-chip--btn.sg-chip--why.sg-chip--sm { min-height: 44px; }
  .sg-grid3__item { min-width: 44px; min-height: 44px; }
}