/* Script Tag Rescue product page (/apps/script-tag-rescue). Every rule is scoped under .str.
   The app has no brand of its own yet (Polaris admin, no icon), so the page takes a deadline look:
   a calendar page with a red date band, and cobalt for the app itself. */

.str {
  --str-cobalt: #1f45a6;       /* 8.2:1 on paper */
  --str-cobalt-dark: #15307a;
  --str-red: #b42318;          /* 6.1:1 on white */
  --str-tint: #e9eef9;
  --str-code: #0f1b3d;
  --str-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, Menlo, monospace;
  --str-ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.str .eyebrow { color: var(--str-cobalt); }
.str .sec-num span { color: var(--str-cobalt); }
.str .link-arrow { border-bottom-color: var(--str-cobalt); }
.str .link-arrow:hover, .str .faq summary:hover { color: var(--str-cobalt); }
.str :focus-visible { outline-color: var(--str-cobalt); }
.str .checks li::before { background: var(--str-cobalt); }
.str .str-mono { font-family: var(--str-mono); font-size: 0.92em; overflow-wrap: anywhere; }



/* ------------------------------------------------ type: Space Grotesk and JetBrains Mono, no Newsreader */
.str { --str-grot: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif; }
.str h1, .str h2, .str h3 { font-family: var(--str-grot); font-weight: 700; letter-spacing: -0.025em; }
.str h2 i { font-style: normal; color: var(--str-cobalt); }
.str .faq summary { font-family: var(--str-grot); font-weight: 500; }

/* ------------------------------------------------ hero: the date, full width */
.str .str-date-band { background: var(--str-red); color: #fff; padding: 28px 0 30px; }
.str .str-date-band p { margin: 0; }
.str .str-date-k { font-family: var(--str-mono); font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; color: #ffd9d3; }
.str .str-date-big { font-family: var(--str-grot); font-weight: 700; font-size: clamp(3rem, 11.5vw, 10rem); line-height: 0.92; letter-spacing: -0.045em; margin: 10px 0 16px !important; }
.str .str-date-big span { display: inline-block; }
.str .str-date-line { font-family: var(--str-mono); font-size: 0.9375rem; line-height: 1.55; max-width: 44em; color: #fff; }
.str .str-intro { padding-top: 40px; padding-bottom: 56px; }
.str .str-intro h1 { font-size: clamp(2.25rem, 7vw, 4rem); line-height: 1; margin: 0 0 12px; }
.str .str-deck { margin: 0 0 20px; font-family: var(--str-grot); font-weight: 500; font-size: clamp(1.25rem, 3vw, 1.625rem); line-height: 1.3; color: var(--str-cobalt); max-width: 30ch; }
.str .str-lead { margin: 0 0 28px; font-size: 1.125rem; line-height: 1.6; color: var(--ink-2); max-width: 44em; }
.str .str-intro-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin: 0; }
.str .str-intro-note { font-family: var(--str-mono); font-size: 0.8125rem; color: var(--ink-2); }
.str .str-btn-main { display: inline-flex; align-items: center; gap: 14px; min-height: 50px; padding: 13px 22px; background: var(--str-cobalt); color: #fff; border: 1px solid var(--str-cobalt); font-size: 0.9375rem; font-weight: 600; text-decoration: none; transition: background-color .2s, color .2s; }
.str .str-btn-main:hover { background: transparent; color: var(--str-cobalt); }
.str .str-scan { border-top: 1px solid var(--rule); }
.str .str-count-n { font-family: var(--str-grot); font-weight: 700; letter-spacing: -0.04em; }
@media (min-width: 720px) {
  .str .str-date-band { padding: 44px 0 48px; }
  .str .str-intro { padding-top: 56px; padding-bottom: 72px; }
}

/* ------------------------------------------------ admin mock (Polaris-like) */
.str .str-mock figcaption { margin-top: 12px; font-size: 0.875rem; color: var(--ink-2); }
.str .str-admin { font-family: var(--str-ui); font-size: 0.875rem; line-height: 1.45; color: #303030; background: #f1f1f1; border: 1px solid #d4d4d4; border-radius: 12px; overflow: hidden; }
.str .str-admin p { margin: 0; }
.str .str-admin-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #1a1a1a; color: #e3e3e3; font-size: 0.8125rem; }
.str .str-admin-dot { width: 18px; height: 18px; border-radius: 5px; background: linear-gradient(var(--str-red) 0 32%, #fff 32%); flex: none; }
.str .str-admin-app { font-weight: 600; }
.str .str-admin-note { margin-left: auto; color: #b5b5b5; }
.str .str-admin-canvas { padding: 12px; }

.str .str-when { display: flex; flex-wrap: wrap; gap: 0; }
.str .str-when input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.str .str-when label { padding: 6px 14px; background: #fff; border: 1px solid #c9c9c9; color: #303030; font-weight: 600; cursor: pointer; }
.str .str-when label[for="str-now"] { border-radius: 8px 0 0 8px; }
.str .str-when label[for="str-after"] { border-radius: 0 8px 8px 0; border-left: 0; }
.str .str-when input:checked + label { background: #303030; border-color: #303030; color: #fff; }
.str .str-when input:focus-visible + label { outline: 2px solid #005bd3; outline-offset: 2px; }
.str .str-panel { flex: 1 1 100%; min-width: 0; margin-top: 12px; }
.str .str-card-wrap { background: #fff; border-radius: 12px; padding: 16px; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.07), 0 0 0 1px rgba(0, 0, 0, 0.06); }
.str .str-card-title { font-weight: 650; color: #1a1a1a; margin-bottom: 10px !important; }
.str .str-card-title span { display: block; font-weight: 400; color: #616161; font-size: 0.8125rem; }
.str .str-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.str .str-card { margin: 0; padding: 14px; border: 1px solid #e3e3e3; border-radius: 10px; min-width: 0; }
.str .str-card-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 6px 10px; }
.str .str-card-id { min-width: 0; flex: 1 1 10rem; }
.str .str-card-name { font-weight: 650; color: #1a1a1a; overflow-wrap: anywhere; }
.str .str-card-does { color: #616161; font-size: 0.8125rem; }
.str .str-reason { margin-top: 8px !important; color: #4a4a4a; }
.str .str-state { margin-top: 8px !important; padding-left: 16px; position: relative; color: #4a4a4a; font-size: 0.8125rem; }
.str .str-state::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 8px; height: 8px; border-radius: 50%; background: #8a8a8a; }
.str .str-state.ok { color: #0c5132; }
.str .str-state.ok::before { background: #29845a; }
.str .str-state.warn { color: #5e4200; }
.str .str-state.warn::before { background: #b28400; }
.str .str-state.bad { color: #8e0b21; font-weight: 600; }
.str .str-state.bad::before { background: #c70a24; }
.str .s-after { display: none; }
.str #str-after:checked ~ .str-panel .s-now { display: none; }
.str #str-after:checked ~ .str-panel .s-after { display: block; }
.str .str-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px !important; }
.str .str-btn { display: inline-block; padding: 4px 12px; border-radius: 8px; background: #fff; color: #303030; font-weight: 600; box-shadow: 0 0 0 1px #c9c9c9, inset 0 -1px 0 #d4d4d4; }
.str .str-switch { position: relative; width: 32px; height: 18px; border-radius: 9px; background: #b5b5b5; flex: none; }
.str .str-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; }
.str .str-switch.on { background: #303030; }
.str .str-switch.on::after { left: 16px; }

.str .str-badge { display: inline-block; margin: 0; padding: 1px 8px; border-radius: 8px; font-family: var(--str-ui); font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
.str .str-badge.success { background: #cdfee1; color: #0c5132; }
.str .str-badge.attention { background: #ffeb78; color: #4f4700; }
.str .str-badge.critical { background: #fedad9; color: #8e0b21; }
.str .str-badge.neutral { background: #e3e3e3; color: #303030; }

.str .str-verdicts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 40px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.str .str-verdicts li { margin: 0; padding: 20px 0 22px; border-top: 1px solid var(--rule); }
.str .str-verdicts .str-badge { font-size: 0.8125rem; padding: 2px 10px; margin-bottom: 10px; }
.str .str-verdicts p:last-child { margin: 0; color: var(--ink-2); }

.str .str-card-name .str-mono { display: block; font-weight: 500; font-size: 0.8125rem; }
.str h2 i { color: var(--str-cobalt); }

/* ------------------------------------------------ the road to the cutoff: a dark track */
.str .str-track { background: var(--str-code); color: #dfe6f8; padding: 64px 0 56px; }
.str .str-track-h { color: #fff; margin-bottom: 36px; }
.str .str-timeline { list-style: none; margin: 0; padding: 0; display: grid; }
.str .str-timeline li { position: relative; margin: 0; padding: 0 0 26px 30px; border-left: 2px solid #33447a; margin-left: 6px; }
.str .str-timeline li::before { content: ""; position: absolute; left: -8px; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--str-code); border: 2px solid #8fa7e6; }
.str .str-timeline li.last { border-left-color: transparent; padding-bottom: 0; }
.str .str-timeline li.last::before { background: #ff6b5a; border-color: #ff6b5a; box-shadow: 0 0 0 6px rgba(255, 107, 90, 0.2); }
.str .str-timeline p { margin: 0; color: #b9c5e6; max-width: 36em; font-size: 0.9875rem; }
.str .str-timeline .str-date { font-family: var(--str-mono); font-size: 0.875rem; font-weight: 500; color: #8fa7e6; margin-bottom: 4px; }
.str .str-timeline li.last .str-date { color: #ff8a7a; }
.str .str-timeline li.last p:last-child { color: #fff; font-weight: 600; }
.str .str-track-note { margin: 36px 0 0; padding-top: 20px; border-top: 1px solid #33447a; color: #b9c5e6; max-width: 46em; }

/* ------------------------------------------------ the count */
.str .str-count { background: var(--str-tint); padding: 48px 0; }
.str .str-count-grid { display: grid; gap: 12px 48px; align-items: center; }
.str .str-count-grid > * { min-width: 0; }
.str .str-count-n { margin: 0; font-family: var(--str-grot); font-size: clamp(4rem, 14vw, 7rem); line-height: 1; color: var(--str-cobalt); white-space: nowrap; }
.str .str-count-n span { font-size: 0.32em; color: var(--ink-2); }
.str .str-count-lead { margin: 0 0 12px; font-size: 1.1875rem; line-height: 1.5; max-width: 34em; }
.str .str-count-src { margin: 0; font-size: 0.875rem; color: var(--ink-2); max-width: 46em; }

/* ------------------------------------------------ the scan, before and after */
.str .str-scan { padding: 72px 0; }
.str .str-scan h2 { max-width: 20ch; }
.str .str-scan-lead { color: var(--ink-2); max-width: 40em; margin-bottom: 36px; }
.str .str-scan-grid { display: grid; gap: 36px 48px; align-items: start; }
.str .str-scan-grid > * { min-width: 0; }
.str .str-mock { margin: 0; }
.str .str-verdicts { grid-template-columns: 1fr; }
.str .str-dup { margin: 8px 0 0; padding: 16px 18px; background: var(--str-tint); border-left: 3px solid var(--str-cobalt); font-size: 0.9375rem; color: var(--ink-2); }
.str .str-dup b { color: var(--ink); }

/* ------------------------------------------------ install log */
.str .str-log-band { padding: 72px 0; background: var(--stone); }
.str .str-log-grid { display: grid; gap: 28px 64px; align-items: start; }
.str .str-log-grid > * { min-width: 0; }
.str .str-log-grid p { color: var(--ink-2); max-width: 28em; }
.str .str-log { list-style: none; margin: 0; padding: 20px 20px 16px; background: var(--str-code); color: #dfe6f8; font-family: var(--str-mono); font-size: 0.8125rem; line-height: 1.6; border-radius: 6px; }
.str .str-log li { margin: 0; padding: 6px 0 6px 0; display: grid; grid-template-columns: 5.5em 1fr; gap: 12px; border-bottom: 1px dashed #2a3866; }
.str .str-log li:last-child { border-bottom: 0; }
.str .str-log span { color: #8fa7e6; }
.str .str-log span::before { content: "$ "; color: #5d6d9c; }

/* ------------------------------------------------ manifest */
.str .str-manifest { padding: 72px 0; }
.str .str-manifest h2 { margin-bottom: 28px; }

.str .str-man { display: grid; gap: 32px 56px; }
.str .str-man-col h3 { margin: 0 0 12px; padding-bottom: 10px; font-family: var(--sans); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; border-bottom: 2px solid var(--ink); }
.str .str-man-col.does h3 { color: var(--str-cobalt); }
.str .str-man-col.never h3 { color: var(--str-red); }
.str .str-man-col ul { list-style: none; margin: 0; padding: 0; }
.str .str-man-col li { position: relative; margin: 0; padding: 12px 0 12px 26px; border-bottom: 1px solid var(--rule); font-size: 0.9875rem; }
.str .str-man-col li::before { position: absolute; left: 0; top: 12px; font-weight: 700; }
.str .str-man-col.does li::before { content: "¹3"; color: var(--str-cobalt); }
.str .str-man-col.never li { color: var(--ink-2); }
.str .str-man-col.never li::before { content: "¹5"; color: var(--str-red); }

/* ------------------------------------------------ questions */
.str .str-faq { padding: 72px 0; background: var(--str-tint); }
.str .str-faq h2 { margin-bottom: 24px; }
.str .str-faq .faq details:first-of-type { border-top-color: var(--str-cobalt); }
.str .str-faq-grid { display: grid; gap: 0 48px; }

/* ------------------------------------------------ status */
.str .str-status { background: var(--paper); padding: 72px 0; border-top: 3px solid var(--str-red); }
.str .str-status-grid { display: grid; gap: 32px 80px; }
.str .str-status-grid > * { min-width: 0; }
.str .str-status h2 { max-width: 16ch; }
.str .str-status p { color: var(--ink-2); max-width: 32em; }
.str .str-tag { display: inline-block; margin: 0 0 18px; padding: 4px 10px; background: var(--str-cobalt); color: #fff !important; font-family: var(--str-mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; }
.str .str-status .btn { background: var(--str-cobalt); border-color: var(--str-cobalt); color: #fff; }
.str .str-status .btn:hover { background: transparent; color: var(--str-cobalt); }
.str .str-status .interest-form input, .str .str-status .interest-form textarea { background: #fff; border-color: #cfd8ec; }
.str .str-status .interest-form input:focus, .str .str-status .interest-form textarea:focus { border-color: var(--ink); }

@media (min-width: 720px) {
  .str .str-cards { grid-template-columns: 1fr 1fr; gap: 12px; }
  .str .str-admin-canvas { padding: 16px; }
  .str .str-track { padding: 88px 0 72px; }
  .str .str-scan, .str .str-log-band, .str .str-manifest, .str .str-faq, .str .str-status { padding: 96px 0; }
  .str .str-count-grid { grid-template-columns: auto 1fr; }
  .str .str-man { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 960px) {
  .str .str-timeline { grid-template-columns: repeat(4, 1fr); gap: 0 24px; }
  .str .str-timeline li { border-left: 0; margin-left: 0; padding: 30px 0 0; border-top: 2px solid #33447a; }
  .str .str-timeline li::before { left: 0; top: -9px; }
  .str .str-timeline li.last { border-top-color: #ff6b5a; padding-bottom: 0; }
  .str .str-scan-grid { grid-template-columns: 1.9fr 1fr; }
  .str .str-log-grid { grid-template-columns: 1fr 1.6fr; }
  .str .str-faq-grid { grid-template-columns: 1fr 1fr; }
  .str .str-faq .faq details:first-of-type, .str .str-faq .faq details:nth-of-type(2) { border-top: 1px solid var(--str-cobalt); }
  .str .str-status-grid { grid-template-columns: 1fr 1.1fr; align-items: start; }
}
@media print {
  .str .str-status { display: none; }
}