@import url("/brand/fonts.css"); @import url("/brand/components.css"); /* html { overflow-x: clip; } and a:focus-visible { outline: 3px solid var(--cn-color-amber); } are authored in brand/components.css. */ .hero, .lab { padding: var(--cn-space-16) 0 var(--cn-space-12); position: relative; } .hero-motif { color: var(--cn-color-leaf); display: none; opacity: 0.06; pointer-events: none; position: absolute; right: 0; top: var(--cn-space-8); width: min(36vw, 30rem); } .eyebrow { color: var(--cn-color-link); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; line-height: 1.25; margin: 0 0 var(--cn-space-4); } h1 { font-family: var(--cn-font-display); font-size: clamp(3rem, 7vw, 6rem); font-weight: 600; line-height: 0.96; margin: 0 0 var(--cn-space-6); max-width: 14ch; } .hero h1 { font-size: clamp(2.125rem, 4.6vw, 3.375rem); line-height: 1.16; max-width: 22ch; } .lab h1 { font-size: clamp(2.5rem, 5vw, 4.5rem); line-height: 1; } .lede { font-size: 1.25rem; line-height: 1.55; margin: 0 0 var(--cn-space-8); max-width: 60ch; } .start, .contact { border-top: 1px solid var(--cn-color-line); padding: var(--cn-space-12) 0; } h2 { font-family: var(--cn-font-display); font-size: 2rem; font-weight: 600; line-height: 1.1; margin: 0 0 var(--cn-space-4); } .section-intro { color: var(--cn-color-muted); margin: 0 0 var(--cn-space-8); max-width: 60ch; } .model-list { display: grid; gap: var(--cn-space-6); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); list-style: none; margin: 0 0 var(--cn-space-8); max-width: var(--cn-figure-max); padding: 0; } .model-item { background: var(--cn-color-panel); border: 1px solid var(--cn-color-line); border-radius: var(--cn-radius-control); padding: var(--cn-space-6); } .item-label { color: var(--cn-color-muted); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; line-height: 1.25; margin: 0 0 var(--cn-space-2); } .item-heading { font-size: 1.25rem; font-weight: 600; line-height: 1.25; margin: 0; } .item-heading a { text-decoration: none; } .item-heading a:hover { text-decoration: underline; } .status-line { color: var(--cn-color-muted); margin: var(--cn-space-4) 0 0; max-width: 60ch; } .results-page { max-width: var(--cn-figure-max); } .results-intro, .results-section > p { max-width: var(--cn-reading-max); } .method-note { border-left: 0.25rem solid var(--cn-color-leaf); color: var(--cn-color-muted); margin: var(--cn-space-8) 0 0; padding-left: var(--cn-space-4); } .results-section { border-top: 1px solid var(--cn-color-line); margin-top: var(--cn-space-12); max-width: var(--cn-figure-max); padding-top: var(--cn-space-8); } .check-block { background: var(--cn-color-panel); border: 1px solid var(--cn-color-line); border-radius: var(--cn-radius-control); font: 0.8125rem/1.6 var(--cn-font-mono); margin: var(--cn-space-6) 0; max-width: var(--cn-figure-max); overflow-x: auto; padding: var(--cn-space-4); } .check-block-wrap { overflow-wrap: anywhere; white-space: pre-wrap; } .method-note code { overflow-wrap: anywhere; } .table-wrap { overflow-x: auto; } .table-scroll-hint { color: var(--cn-color-muted); font-size: 0.75rem; font-weight: 600; margin: 0 0 var(--cn-space-3); } .table-wrap:focus-visible { outline: 3px solid var(--cn-color-amber); outline-offset: 3px; } @container page (min-width: 60.0625rem) { .product-output-card .table-scroll-hint { display: none; } } table { border-collapse: collapse; min-width: 38rem; width: 100%; } th, td { border-bottom: 1px solid var(--cn-color-line); padding: var(--cn-space-3) var(--cn-space-4); text-align: left; } thead th, .figure-source, .figure-limit { color: var(--cn-color-muted); font-size: 0.875rem; font-weight: 600; } tbody th, td, .chart-bar { font-variant-numeric: tabular-nums; } .quant-chart { background: var(--cn-color-panel); border: 1px solid var(--cn-color-line); border-radius: var(--cn-radius-rule); margin: var(--cn-space-8) 0 0; padding: var(--cn-space-6); } .quant-chart h3 { font-family: var(--cn-font-body); font-size: 1.125rem; font-weight: 600; line-height: 1.25; margin: 0; } .quant-chart figcaption > p, .figure-source, .figure-limit { margin: var(--cn-space-3) 0 0; } .figure-source code { overflow-wrap: anywhere; } .chart { margin-top: var(--cn-space-6); } .chart-legend { color: var(--cn-color-ink); display: flex; flex-wrap: wrap; gap: var(--cn-space-4); } .chart-legend > span, .chart-category { align-items: center; color: var(--cn-color-ink); font-family: var(--cn-font-body); font-size: 0.75rem; font-weight: 500; line-height: 1.25; } .chart-legend > span { display: inline-flex; gap: var(--cn-space-2); } .chart-swatch { display: inline-block; height: 0.75rem; width: 0.75rem; } .chart-plot { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); margin-top: var(--cn-space-6); } .chart-axis { color: var(--cn-color-ink); font-family: var(--cn-font-mono); font-size: 0.75rem; line-height: 1.25; position: relative; } .chart-axis span { position: absolute; right: var(--cn-space-2); transform: translateY(50%); } .chart-scale50 { top: 0; transform: translateY(-50%) !important; } .chart-scale25 { top: 50%; } .chart-scale0 { bottom: 0; } .chart-area { border-bottom: 2px solid var(--cn-color-ink); height: 15rem; position: relative; } .chart-gridline { background: var(--cn-color-line); height: 1px; left: 0; position: absolute; right: 0; } .chart-gridline-50 { top: 0; } .chart-gridline-25 { top: 50%; } .chart-gridline-0 { bottom: 0; } .chart-groups { align-items: end; bottom: 0; display: grid; gap: var(--cn-space-3); grid-template-columns: repeat(4, minmax(0, 1fr)); left: 0; position: absolute; right: 0; top: 0; } .chart-group { height: 100%; min-width: 0; } .chart-bar-pair { align-items: end; display: flex; gap: var(--cn-space-2); height: 100%; justify-content: center; width: 100%; } .chart-series { align-items: stretch; display: flex; flex: 0 1 3rem; height: 100%; justify-content: end; min-width: 0; position: relative; } .chart-value { color: var(--cn-color-ink); font-family: var(--cn-font-mono); font-size: 0.75rem; font-weight: 400; line-height: 1.25; position: absolute; text-align: center; width: 100%; } .chart-bar { bottom: 0; display: block; min-height: 0; position: absolute; width: 100%; } .chart-bar-leaf { background: var(--cn-color-leaf); } .chart-bar-amber { background: var(--cn-color-amber); } .chart-series.chart-48 .chart-bar { height: 96%; } .chart-series.chart-46 .chart-bar { height: 92%; } .chart-series.chart-44 .chart-bar { height: 88%; } .chart-series.chart-48 .chart-value { bottom: calc(96% + var(--cn-space-1)); } .chart-series.chart-46 .chart-value { bottom: calc(92% + var(--cn-space-1)); } .chart-series.chart-44 .chart-value { bottom: calc(88% + var(--cn-space-1)); } .chart-categories { display: grid; gap: var(--cn-space-3); grid-column: 2; grid-template-columns: repeat(4, minmax(0, 1fr)); } .chart-category { margin: var(--cn-space-2) 0 0; overflow-wrap: anywhere; text-align: center; } .results-actions { align-items: flex-start; display: flex; flex-wrap: wrap; gap: var(--cn-space-4); margin-top: var(--cn-space-12); } .contact-line { margin: 0; max-width: 60ch; } .project-section { border-top: 1px solid var(--cn-color-line); margin-top: var(--cn-space-12); padding-top: var(--cn-space-8); } .project-section:first-of-type { margin-top: var(--cn-space-8); } .project-list { list-style: none; margin: 0; max-width: var(--cn-reading-max); padding: 0; } .project-item { border-bottom: 1px solid var(--cn-color-line); padding: var(--cn-space-6) 0; } .project-item:first-child { padding-top: 0; } .project-item p { margin: var(--cn-space-2) 0 0; max-width: var(--cn-reading-max); } .project-item .item-heading { margin-top: var(--cn-space-2); } /* Redirect replacement guide — an instruction sheet, not a dashboard. */ .redirect-guide { max-width: var(--cn-figure-max); } .redirect-guide .results-intro { max-width: var(--cn-reading-max); } .redirect-guide h1 { max-width: 13ch; } .redirect-guide .guide-kicker { color: var(--cn-color-muted); font-family: var(--cn-font-mono); font-size: .875rem; margin: 0 0 var(--cn-space-4); } .redirect-sheet { background: var(--cn-color-panel); border: var(--cn-stroke) solid var(--cn-color-ink); box-shadow: none; margin: var(--cn-space-8) 0 0; padding: clamp(1rem, 3vw, 2rem); } .redirect-sheet > header { border-bottom: var(--cn-stroke) solid var(--cn-color-ink); display: flex; flex-wrap: wrap; gap: var(--cn-space-3) var(--cn-space-6); justify-content: space-between; padding-bottom: var(--cn-space-4); } /* A figure title, not a section title: the results-page h2 rule would otherwise set it in Fraunces at title size. */ .redirect-sheet h2, article.results-page .redirect-sheet h2 { font: 600 var(--wp-text-h3)/1.25 var(--cn-font-body); letter-spacing: 0; margin: 0; max-width: none; word-spacing: normal; } .synthetic-label { background: var(--cn-color-mint); border: var(--cn-stroke-small) solid var(--cn-color-ink); border-radius: var(--cn-radius-rule); color: var(--cn-color-ink); font-family: var(--cn-font-mono); font-size: var(--wp-text-body); font-weight: 600; line-height: 1.25; margin: 0; padding: .25rem .5rem; } .redirect-rows { list-style: none; margin: 0; padding: 0; } .redirect-row { border-bottom: var(--cn-stroke-small) solid var(--cn-color-ink); display: grid; gap: var(--cn-space-4); grid-template-columns: minmax(7rem, .6fr) minmax(0, 1fr) minmax(0, 1fr); padding: var(--cn-space-6) 0; } .redirect-row:last-child { border-bottom: 0; padding-bottom: 0; } .redirect-status { align-items: start; display: flex; flex-direction: column; gap: var(--cn-space-2); } .redirect-status strong { font-family: var(--cn-font-mono); font-size: .875rem; line-height: 1.25; } .redirect-status .symbol { align-items: center; border: var(--cn-stroke-small) solid var(--cn-color-ink); display: inline-flex; font-family: var(--cn-font-mono); font-size: 1rem; font-weight: 600; height: 1.75rem; justify-content: center; width: 1.75rem; } .redirect-row.kept .symbol { background: var(--cn-color-mint); } .redirect-row.changed .symbol { background: var(--cn-color-amber); color: var(--cn-color-panel); } .redirect-row.missing .symbol { background: var(--cn-color-ink); color: var(--cn-color-panel); } .redirect-cell { min-width: 0; } .redirect-cell-label { color: var(--cn-color-muted); display: block; font-family: var(--cn-font-mono); font-size: .75rem; font-weight: 600; letter-spacing: .04em; margin-bottom: var(--cn-space-2); text-transform: uppercase; } .redirect-pair { background: var(--cn-color-canvas); border: var(--cn-stroke-small) solid var(--cn-color-ink); display: block; font-family: var(--cn-font-mono); font-size: clamp(.875rem, 2vw, 1rem); overflow-wrap: anywhere; padding: var(--cn-space-3); } .redirect-pair .arrow { padding: 0 .25rem; } .redirect-pair.omitted { background: transparent; border-style: dashed; color: var(--cn-color-muted); min-height: 3rem; } .redirect-sheet figcaption { border-top: var(--cn-stroke-small) solid var(--cn-color-ink); color: var(--cn-color-muted); font-size: .875rem; margin-top: var(--cn-space-6); padding-top: var(--cn-space-4); } .guide-callout { background: var(--cn-color-mint); border-left: var(--cn-stroke) solid var(--cn-color-ink); margin: var(--cn-space-8) 0 0; max-width: var(--cn-reading-max); padding: var(--cn-space-6); } .guide-callout p { margin: 0; } .guide-callout p + p { margin-top: var(--cn-space-3); } .guide-cta { background: var(--cn-color-leaf-strong); color: var(--cn-color-panel); margin-top: var(--cn-space-12); padding: clamp(1.5rem, 4vw, 3rem); } .guide-cta h2 { font-size: clamp(2rem, 4vw, 3.5rem); max-width: 12ch; } .guide-cta p { max-width: 60ch; } /* On the cobalt band the action turns cream with cobalt text, as on the field (components.css). */ .guide-cta .button { background: var(--wp-on-bio); border-color: var(--wp-on-bio); color: var(--wp-cobalt); margin-top: var(--cn-space-3); } .guide-cta .button:hover { background: #fff; border-color: #fff; color: var(--wp-cobalt); } .guide-cta a:not(.button), .guide-cta a:not(.button):visited { color: var(--cn-color-panel); text-decoration-color: var(--cn-color-amber); } .guide-cta a:not(.button):hover { color: var(--cn-color-panel); text-decoration-color: var(--cn-color-panel); } .guide-cta :focus-visible { outline-color: var(--cn-color-panel); } article.results-page .guide-cta .item-label { color: var(--cn-color-panel); } article.results-page .guide-cta .via { color: var(--wp-deep-label); font-size: 1rem; line-height: 1.5; margin-top: var(--cn-space-4); } article.results-page .guide-cta .via a { font-weight: 400; } .email-fallback { border-top: var(--cn-stroke-small) solid var(--cn-color-panel); font-size: .9375rem; margin-top: var(--cn-space-6); padding-top: var(--cn-space-4); } #email-fallback-label { font-size: var(--wp-text-body); } .email-fallback-copy { background: var(--cn-color-panel); border: 0; border-radius: 0; color: var(--cn-color-ink); display: block; font: .875rem/1.4 var(--cn-font-mono); margin-top: var(--cn-space-2); max-width: 100%; min-height: 8rem; overflow-wrap: anywhere; padding: .25rem .5rem; resize: vertical; width: 100%; } /* This page's action and shell controls meet the 48px touch-target brief. */ .redirect-guide-page .brand, .redirect-guide-page .site-header nav a, .redirect-guide-page .site-footer nav a, .redirect-guide-page .guide-cta .button { min-height: 3rem; } .redirect-guide-page .site-header nav a { min-width: 3rem; } @container page (max-width: 34rem) { .redirect-row { grid-template-columns: 1fr; gap: var(--cn-space-3); } .redirect-status { align-items: center; flex-direction: row; } .redirect-sheet { box-shadow: none; } } @container page (min-width: 60rem) { .hero, .lab { padding: var(--cn-space-24) 0 var(--cn-space-16); } .start, .contact { padding: var(--cn-space-16) 0; } .hero-motif { display: block; } } /* Inked site surface: outlines, hard offsets, and flat fills. */ a { font-weight: 500; text-decoration-thickness: 2px; } .breach-clock .search-panel input:focus-visible { outline: 3px solid var(--cn-color-amber); outline-offset: 3px; } .hero-motif { display: none; } h1 { text-wrap: balance; } .hero h1 .machine { background: var(--cn-color-ink); border-radius: 0.1em; box-decoration-break: clone; color: var(--cn-color-canvas); padding: 0.06em 0.22em; -webkit-box-decoration-break: clone; } .start, .contact, .results-section, .scope-note, .eligibility-note, .project-section { border-top: var(--cn-stroke) solid var(--cn-color-ink); } .model-item, .quant-chart, .breach-clock .search-panel, .breach-clock .offer { background: var(--cn-color-panel); border: var(--cn-stroke) solid var(--cn-color-ink); box-shadow: var(--cn-offset) var(--cn-offset) 0 var(--cn-color-ink); } .model-item:nth-child(even), .breach-clock .offer:nth-child(even) { box-shadow: var(--cn-offset) var(--cn-offset) 0 var(--cn-color-leaf-strong); } .eyebrow, .item-label { background: var(--cn-color-leaf); border: var(--cn-stroke-small) solid var(--cn-color-ink); border-radius: var(--cn-radius-rule); color: var(--cn-color-ink); display: inline-block; font-family: var(--cn-font-mono); padding: 0.125rem 0.4375rem; } .item-heading a { color: var(--cn-color-ink); text-decoration-color: var(--cn-color-amber); } table { border: var(--cn-stroke) solid var(--cn-color-ink); } th, td { border-bottom: 2px solid var(--cn-color-ink); } .quant-chart { border-radius: var(--cn-radius-control); } .chart-area { border-bottom-width: var(--cn-stroke); } .chart-gridline { background: var(--cn-color-line); opacity: 1; } .chart-bar { border: 2px solid var(--cn-color-ink); } .chart-swatch { border: 1.5px solid var(--cn-color-ink); } .breach-clock .search-panel input { border: var(--cn-stroke) solid var(--cn-color-ink); border-radius: var(--cn-radius-control); } .project-item { border-bottom: 2px solid var(--cn-color-ink); } /* Working Proof — brand kit v1.4.0 Inked composition. */ .wrap { margin: 0 auto; max-width: var(--cn-page-max); padding-left: var(--cn-space-8); padding-right: var(--cn-space-8); } .hero { display: grid; gap: var(--cn-space-16); grid-template-columns: 1fr; padding-bottom: 6rem; padding-top: 5.5rem; position: relative; } .hero::after { background: var(--cn-color-ink); bottom: 0; content: ""; height: var(--cn-stroke); left: var(--cn-space-8); position: absolute; right: var(--cn-space-8); } .hero-copy { align-self: end; } .hero h1 { font-size: clamp(3.8rem, 6.5vw, 6rem); letter-spacing: -.035em; line-height: .94; max-width: 11ch; text-wrap: balance; } .hero-lede { font-size: 1.25rem; line-height: 1.5; margin: var(--cn-space-8) 0 var(--cn-space-8); max-width: 55ch; } .hero .actions { gap: var(--cn-space-4); } .hero .button { padding: var(--cn-space-3) var(--cn-space-6); } .identity { border-left: var(--cn-stroke) solid var(--cn-color-ink); color: var(--cn-color-muted); font-size: .875rem; margin: var(--cn-space-8) 0 0; max-width: 55ch; padding-left: var(--cn-space-4); } .section { padding-bottom: 5.5rem; padding-top: 5.5rem; } .section-head { align-items: end; display: grid; gap: var(--cn-space-8); grid-template-columns: 1fr 1fr; margin-bottom: 2.75rem; } .section-head h2 { font-size: clamp(2.5rem, 4vw, 4.25rem); letter-spacing: -.025em; line-height: .98; max-width: 12ch; } .section-head p { color: var(--cn-color-muted); margin: 0; max-width: 52ch; } .section-head p.section-head-cta { color: var(--cn-color-ink); } .work-grid { display: grid; gap: var(--cn-space-6); grid-template-columns: 1.35fr .65fr; } .work-card { background: var(--cn-color-panel); border: var(--cn-stroke) solid var(--cn-color-ink); border-radius: var(--cn-radius-control); box-shadow: var(--cn-offset) var(--cn-offset) 0 var(--cn-color-ink); color: var(--cn-color-ink); display: grid; min-height: 16.25rem; overflow: hidden; padding: var(--cn-space-8); position: relative; text-decoration: none; } .work-card:hover h3 { text-decoration: underline; text-decoration-color: var(--cn-color-amber); text-decoration-thickness: 4px; } .work-card.primary { background: var(--cn-color-leaf-strong); box-shadow: var(--cn-offset-figure) var(--cn-offset-figure) 0 var(--cn-color-amber); color: var(--cn-color-panel); grid-row: span 2; min-height: 34rem; } .work-card.primary .meta { color: var(--cn-color-mint); } .work-card.primary h3 { font-size: clamp(3rem, 5vw, 5rem); max-width: 8ch; } .work-card.game-card { background: linear-gradient(145deg, var(--cn-color-ink), var(--cn-color-leaf-strong)); box-shadow: var(--cn-offset) var(--cn-offset) 0 var(--cn-color-amber); color: var(--cn-color-panel); } .work-card.game-card::before { background: var(--cn-color-amber); content: ''; height: 2px; left: -12%; opacity: .9; position: absolute; top: 48%; transform: rotate(-17deg); width: 124%; } .work-card.game-card .meta { color: var(--cn-color-mint); } .work-card.game-card .index-no { color: var(--cn-color-amber); } .work-card.game-card h3 { font-size: clamp(2.75rem, 4.5vw, 4.5rem); max-width: 8ch; } .work-card h3 { align-self: end; font-size: 2.125rem; line-height: 1.04; max-width: 11ch; } .meta { color: var(--cn-color-muted); font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; } .work-card p { align-self: end; margin: var(--cn-space-4) 0 0; max-width: 44ch; } .index-no { color: var(--cn-color-leaf); font-family: var(--cn-font-display); font-size: 5rem; line-height: .8; position: absolute; right: var(--cn-space-6); top: var(--cn-space-6); } .work-card:not(.primary) .index-no { color: var(--cn-color-leaf-strong); } .field-strip { border-bottom: var(--cn-stroke) solid var(--cn-color-ink); border-top: var(--cn-stroke) solid var(--cn-color-ink); } .field-strip .wrap { display: grid; grid-template-columns: repeat(2, 1fr); padding-bottom: 0; padding-top: 0; } .field-item { min-height: 11.875rem; padding: var(--cn-space-8); } .field-item + .field-item { border-left: var(--cn-stroke) solid var(--cn-color-ink); } .field-item h3 { font-family: var(--cn-font-body); font-size: 1.1875rem; } .field-item p { color: var(--cn-color-muted); margin: var(--cn-space-3) 0 var(--cn-space-4); } .field-item a { color: var(--cn-color-link); font-weight: 600; position: relative; } /* The card action is a 20px-tall inline link, under the 24px WCAG 2.5.8 floor and the kit's 2.75rem target. Grow the pointer target to 2.75rem without moving a visible pixel; it is the last child of its card, so the overlay reaches into padding and never covers another interactive element. */ .field-item a::after { content: ''; inset: -0.75rem -0.5rem; position: absolute; } .closing { align-items: end; display: grid; gap: var(--cn-space-16); grid-template-columns: 1.2fr .8fr; padding-bottom: 6rem; padding-top: 6rem; } .closing h2 { font-size: clamp(3rem, 5vw, 5.5rem); line-height: .94; max-width: 10ch; } .closing p { margin: 0 0 var(--cn-space-6); } @container page (max-width: 60rem) { .hero { gap: var(--cn-space-12); grid-template-columns: 1fr; } } @container page (max-width: 34rem) { .wrap { padding-left: 1.25rem; padding-right: 1.25rem; } .hero { gap: var(--cn-space-12); padding-bottom: 4.125rem; padding-top: 3.625rem; } .hero::after { left: 1.25rem; right: 1.25rem; } .hero h1 { font-size: clamp(3.1rem, 16vw, 4.2rem); } .hero-lede { font-size: 1.125rem; } .hero .actions { align-items: stretch; flex-direction: column; } .hero .button { text-align: center; } .section { padding-bottom: 4.125rem; padding-top: 4.125rem; } .section-head { grid-template-columns: 1fr; margin-bottom: var(--cn-space-8); } .work-grid { grid-template-columns: 1fr; } .work-card.primary { grid-row: auto; min-height: 30rem; } .work-card { min-height: 16.875rem; } .field-strip .wrap { grid-template-columns: 1fr; } .field-item { min-height: auto; padding: var(--cn-space-6) 0; } .field-item + .field-item { border-left: 0; border-top: var(--cn-stroke) solid var(--cn-color-ink); } .closing { align-items: start; grid-template-columns: 1fr; padding-bottom: 4.5rem; padding-top: 4.5rem; } } .breach-clock { max-width: var(--cn-figure-max); padding-bottom: var(--cn-space-16); } .breach-clock h1 { font-size: clamp(2.5rem, 5vw, 4.5rem); } .search-panel { background: var(--cn-color-panel); border: 1px solid var(--cn-color-line); border-radius: var(--cn-radius-control); margin-top: var(--cn-space-8); padding: var(--cn-space-6); } .search-panel label { display: block; font-size: 0.875rem; font-weight: 600; margin-bottom: var(--cn-space-2); } .search-panel input { background: var(--cn-color-panel); border: 1px solid var(--cn-color-leaf); border-radius: var(--cn-radius-rule); color: var(--cn-color-ink); font: inherit; min-height: 3rem; padding: var(--cn-space-3) var(--cn-space-4); width: 100%; } .search-panel input:focus-visible { outline: 3px solid var(--cn-color-amber); outline-offset: 3px; } .privacy-line { color: var(--cn-color-muted); font-size: 0.875rem; font-weight: 500; margin: var(--cn-space-3) 0 0; } .coverage-line { color: var(--cn-color-muted); margin: var(--cn-space-6) 0 0; max-width: var(--cn-reading-max); } .offer-results { display: grid; gap: var(--cn-space-4); list-style: none; margin: var(--cn-space-8) 0 0; padding: 0; } .offer { background: var(--cn-color-panel); border: 1px solid var(--cn-color-line); border-radius: var(--cn-radius-control); padding: var(--cn-space-6); } .offer h2 { font-family: var(--cn-font-body); font-size: 1.25rem; line-height: 1.25; margin-bottom: var(--cn-space-3); word-spacing: normal; } .offer p { margin: var(--cn-space-2) 0 0; } .offer .status-open { color: var(--cn-color-link); font-weight: 600; } .offer .status-expired { color: var(--cn-color-danger); font-weight: 600; } .offer .status-unknown { color: var(--cn-color-muted); font-weight: 600; } .empty-result { color: var(--cn-color-muted); margin: var(--cn-space-8) 0 0; max-width: var(--cn-reading-max); } .scope-note, .eligibility-note { border-top: 1px solid var(--cn-color-line); margin: var(--cn-space-12) 0 0; max-width: var(--cn-reading-max); padding-top: var(--cn-space-6); } .source-footer { color: var(--cn-color-muted); font-size: 0.875rem; font-weight: 500; margin: var(--cn-space-12) 0 0; } @container page (max-width: 34rem) { .breach-clock { padding-bottom: var(--cn-space-12); } } /* Documents to CSV — Stripe-level product clarity on the shared apex grid. */ .product-page { padding-bottom: var(--cn-space-16); } .product-hero { align-items: start; border-bottom: var(--cn-stroke) solid var(--cn-color-ink); display: grid; gap: var(--cn-space-16); grid-template-columns: minmax(0, 1.25fr) minmax(18rem, .75fr); padding-bottom: var(--cn-space-12); padding-top: 5.5rem; } .product-hero-copy h1 { font-size: clamp(3.25rem, 6.5vw, 6rem); letter-spacing: -.035em; line-height: .94; max-width: 9ch; text-wrap: balance; } .product-hero-copy .lede { max-width: 56ch; } .product-summary { align-self: end; display: grid; gap: var(--cn-space-6); } .offer-tier { min-width: 0; } .offer-tier + .offer-tier { border-top: var(--cn-stroke-small) solid var(--cn-color-ink); padding-top: var(--cn-space-5); } .tier-label { color: var(--cn-color-muted); font-family: var(--cn-font-mono); font-size: .75rem; font-weight: 600; letter-spacing: .04em; margin: 0; text-transform: uppercase; } .tier-price { font-family: var(--cn-font-display); font-size: clamp(2.75rem, 6vw, 4.5rem); letter-spacing: -.05em; line-height: .85; margin: var(--cn-space-2) 0 0; } .tier-note { color: var(--cn-color-muted); font-size: .875rem; margin: var(--cn-space-2) 0 var(--cn-space-4); } .summary-price { font-family: var(--cn-font-display); font-size: clamp(4rem, 8vw, 7rem); letter-spacing: -.05em; line-height: .8; margin: 0; } .summary-label { font-size: 1.125rem; font-weight: 600; margin: var(--cn-space-2) 0 var(--cn-space-4); } .product-facts { border-top: var(--cn-stroke-small) solid var(--cn-color-ink); list-style: none; margin: 0; padding: 0; } .product-facts li { align-items: baseline; border-bottom: 1px solid var(--cn-color-line); display: flex; gap: var(--cn-space-3); justify-content: space-between; padding: var(--cn-space-3) 0; } .product-facts strong { font-size: 1.125rem; } .product-facts span { color: var(--cn-color-muted); font-size: .875rem; text-align: right; } .summary-rejection { border-left: .35rem solid var(--cn-color-leaf); margin: var(--cn-space-3) 0 0; padding-left: var(--cn-space-3); } .product-section { border-bottom: 1px solid var(--cn-color-line); padding-bottom: 5.5rem; padding-top: 5.5rem; } .limitation-card { border-left: .35rem solid var(--cn-color-amber); } .limitation-card h2 { font-size: 1.75rem; line-height: 1.2; margin: var(--cn-space-2) 0 var(--cn-space-4); } .limitation-card p { margin: 0 0 var(--cn-space-3); max-width: 68ch; } .limitation-card p:last-child { margin-bottom: 0; } .limitation-card code, .lede code, .starter-buy-note code, .summary-rejection code, .output-caption code, .product-section-head code, .free-proof-copy code { font-size: .9em; white-space: nowrap; } .row-empty td { color: var(--cn-color-muted); font-variant-numeric: normal; } .product-section-head { margin-bottom: 2.75rem; } .product-output-grid, .deliverable-grid { align-items: start; display: grid; gap: var(--cn-space-6); } .product-output-grid { grid-template-columns: minmax(0, 1fr); } .deliverable-grid { grid-template-columns: minmax(0, 1.35fr) minmax(18rem, .65fr); } .product-output-card, .flagged-output, .sample-downloads { min-width: 0; } .product-output-card h3, .flagged-output h3, .sample-downloads h3, .delivery-notes h3 { font-family: var(--cn-font-body); font-size: 1.25rem; line-height: 1.25; margin: 0; } .output-caption { color: var(--cn-color-muted); margin: var(--cn-space-3) 0 0; max-width: 60ch; } .product-output-card .table-wrap { margin-top: var(--cn-space-6); } .product-output-card table { min-width: 0; } .reference-job-table { min-width: 0; } .reference-job-table th:not(:first-child), .reference-job-table td { white-space: nowrap; } #reference-job .limitation-card .item-heading { margin-bottom: var(--cn-space-3); } @container page (max-width: 34rem) { .reference-job-table { font-size: .875rem; } .reference-job-table th, .reference-job-table td { padding-left: var(--cn-space-2); padding-right: var(--cn-space-2); } } .product-output-side { align-content: start; display: grid; gap: var(--cn-space-6); grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 0; } .flagged-output p:not(.item-label) { margin: var(--cn-space-3) 0 0; } .flagged-output table { display: block; font-size: .875rem; margin-top: var(--cn-space-5); min-width: 0; table-layout: fixed; width: 100%; } .flagged-output th, .flagged-output td { overflow-wrap: normal; vertical-align: top; word-break: normal; } .flagged-output th:first-child, .flagged-output td:first-child { width: 40%; } .sample-downloads ul { list-style: none; margin: var(--cn-space-4) 0 0; padding: 0; } .sample-sources-label { margin: var(--cn-space-5) 0 0; } .sample-downloads li { border-top: 1px solid var(--cn-color-line); padding: var(--cn-space-2) 0; } .sample-downloads a { font-weight: 600; } .sample-downloads a.button { color: var(--cn-color-link); width: 100%; } .deliverables-list { counter-reset: deliverable; list-style: none; margin: 0; padding: 0; } .deliverables-list li { align-items: baseline; border-top: 1px solid var(--cn-color-line); counter-increment: deliverable; display: flex; gap: var(--cn-space-4); justify-content: space-between; padding: var(--cn-space-3) 0; } .deliverables-list li:first-child { border-top: 0; padding-top: 0; } .deliverables-list li::before { color: var(--cn-color-muted); content: counter(deliverable, decimal-leading-zero); font-family: var(--cn-font-mono); font-size: .75rem; } .deliverables-list strong { flex: 1 1 auto; font-family: var(--cn-font-mono); } .deliverables-list span { color: var(--cn-color-muted); font-size: .875rem; text-align: right; } .delivery-notes p:not(.item-label) { margin-top: var(--cn-space-4); } .hero-free-note { color: var(--cn-color-muted); font-size: 1rem; margin: var(--cn-space-4) 0 0; max-width: 56ch; } .hero-free-note a { color: var(--cn-color-link); } .starter-buy { width: 100%; } .starter-buy-note { color: var(--cn-color-muted); font-size: 1rem; margin: var(--cn-space-3) 0 0; } .free-proof-card { align-items: center; display: grid; gap: var(--cn-space-8); grid-template-columns: minmax(0, 1.15fr) minmax(13rem, .5fr) auto; } .free-proof-copy h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.1; margin: var(--cn-space-3) 0 0; max-width: 22ch; } .free-proof-copy p:not(.item-label) { margin: var(--cn-space-4) 0 0; max-width: 60ch; } .free-proof-copy .muted { font-size: 1rem; } .free-proof-facts { border-top: var(--cn-stroke-small) solid var(--cn-color-ink); list-style: none; margin: 0; padding: 0; } .free-proof-facts li { align-items: baseline; border-bottom: 1px solid var(--cn-color-line); display: flex; gap: var(--cn-space-3); justify-content: space-between; padding: var(--cn-space-3) 0; } .free-proof-facts strong { font-size: 1.125rem; } .free-proof-facts span { color: var(--cn-color-muted); font-size: .875rem; text-align: right; } .free-proof-actions { display: grid; gap: var(--cn-space-3); } .bottom-cta-free { font-size: 1rem; margin: var(--cn-space-4) 0 0; } .bottom-cta-free a { color: inherit; } .closed-offer { border-bottom: 0; padding-bottom: var(--cn-space-8); padding-top: var(--cn-space-8); } .closed-offer h2 { font-family: var(--cn-font-body); font-size: 1.125rem; line-height: 1.35; margin: var(--cn-space-3) 0 0; max-width: 60ch; word-spacing: normal; } .closed-offer > p:not(.item-label) { color: var(--cn-color-muted); font-size: 1rem; margin: var(--cn-space-2) 0 0; max-width: 60ch; } .product-bottom-cta { align-items: end; background: var(--cn-color-leaf-strong); color: var(--cn-color-panel); display: flex; gap: var(--cn-space-8); justify-content: space-between; margin-top: var(--cn-space-12); } .product-bottom-cta .item-label { background: var(--cn-color-mint); } .product-bottom-cta h2 { font-size: clamp(2rem, 4vw, 3.5rem); margin: 0; max-width: 12ch; } .product-bottom-cta .button { background: var(--cn-color-panel); flex: 0 0 auto; } /* PDF accessibility remediation — the free-check service page reads as a plain worked list: each item names one thing the check or the fix covers. */ .service-list { display: grid; gap: var(--cn-space-4); list-style: none; margin: 0; max-width: 68ch; padding: 0; } .service-list li { border-left: .35rem solid var(--cn-color-leaf); padding-left: var(--cn-space-4); } .service-steps { display: grid; gap: var(--cn-space-4); margin: 0; max-width: 68ch; padding-left: var(--cn-space-6); } .service-steps li { padding-left: var(--cn-space-2); } @container page (max-width: 60rem) { .product-hero { gap: var(--cn-space-12); grid-template-columns: minmax(0, 1fr) minmax(16rem, .7fr); } .deliverable-grid { grid-template-columns: 1fr; } .product-output-card table { min-width: 54rem; } .free-proof-card { align-items: start; grid-template-columns: minmax(0, 1fr) minmax(12rem, .6fr); } .free-proof-actions { grid-column: 1 / -1; justify-self: start; } } @container page (max-width: 34rem) { .product-page { padding-bottom: var(--cn-space-12); } .product-hero { align-items: start; gap: var(--cn-space-8); grid-template-columns: 1fr; padding-bottom: var(--cn-space-12); padding-top: 3.625rem; } .product-hero-copy h1 { font-size: clamp(3.1rem, 16vw, 4.2rem); } .product-hero-copy .actions { align-items: stretch; flex-direction: column; } .product-hero-copy .button { text-align: center; } .product-section { padding-bottom: 4.125rem; padding-top: 4.125rem; } .closed-offer { padding-bottom: var(--cn-space-8); padding-top: var(--cn-space-8); } .product-section-head { margin-bottom: var(--cn-space-8); } .product-section-head h2 { font-size: clamp(2.5rem, 12vw, 3.5rem); } .product-output-card, .flagged-output, .sample-downloads, .deliverable-grid .card { padding: var(--cn-space-4); } .product-output-side { grid-template-columns: 1fr; } .deliverables-list li { align-items: start; flex-wrap: wrap; gap: var(--cn-space-2) var(--cn-space-3); } .deliverables-list strong { flex: 1 1 calc(100% - 2rem); } .deliverables-list span { flex-basis: 100%; padding-left: 2rem; text-align: left; } .product-bottom-cta { align-items: stretch; flex-direction: column; margin-top: var(--cn-space-8); } .product-bottom-cta .button { width: 100%; } .free-proof-card { gap: var(--cn-space-6); grid-template-columns: 1fr; padding: var(--cn-space-4); } .free-proof-actions { width: 100%; } .free-proof-actions .button { text-align: center; width: 100%; } } /* Who pays for this (scripts/value-capture.mjs): reader support, planned Team checks and the sponsor * line, after a page's content and never before it. A quiet ledger: the status leads each row in * mono, so "planned, not built" and "none yet" read as plainly as the offer itself. */ .vc { border-top: var(--wp-rule-strong) solid var(--wp-ink); display: grid; margin-top: var(--wp-16); max-width: 60rem; padding-top: var(--wp-6); } .vc h2 { font-size: 1.75rem; line-height: 1.1; margin: 0 0 var(--wp-2); } .vc-row { border-top: var(--wp-rule) solid var(--wp-hair); column-gap: var(--wp-8); display: grid; grid-template-columns: 13rem minmax(0, 1fr); padding: var(--wp-4) 0 var(--wp-6); } .vc h2 + .vc-row { border-top: 0; } .vc-status { color: var(--wp-muted); font: 500 var(--wp-text-cite)/1.4 var(--wp-font-mono); letter-spacing: .06em; margin: .3em 0 0; text-transform: uppercase; } .vc-copy { display: grid; gap: var(--wp-3); max-width: var(--wp-measure); } .vc-copy h3 { font: 700 1.25rem/1.2 var(--wp-font-display); margin: 0; } .vc-copy p { line-height: 1.55; margin: 0; } .vc-copy a[href^="mailto:"] { overflow-wrap: anywhere; } .vc-line { line-height: 1.55; margin: var(--wp-6) 0 0; max-width: 40em; } .vc-nb { white-space: nowrap; } /* Narrower than 20rem happens only with enlarged text (at 100% the page is at least 320px): there a name wider than the line wraps inside its own box instead of crossing the screen. */ @container page (max-width: 19.99rem) { .vc-nb { display: inline-block; max-width: 100%; overflow-wrap: anywhere; text-decoration: inherit; white-space: normal; } } @container page (max-width: 37.5rem) { .vc { margin-top: var(--wp-12); } .vc-row { grid-template-columns: minmax(0, 1fr); row-gap: var(--wp-2); } }