/* ==========================================================================
   isitdownrightnow.app · layouts from the Geist mock-ups (preview: ?layout=new)
   Loaded after geist.css only while IIDR_NEW is on (parts/style.php, parts/road/head.php).
   ========================================================================== */

body { overflow-x: clip; }   /* the full-width bands below reach the viewport edges */

/* ---------- status band colours: by status and theme ---------- */
body {
  --field: oklch(0.3 0.055 158); --on-field: oklch(0.97 0.02 150); --on-field-2: oklch(0.86 0.035 150);
  --field-line: oklch(1 0 0 / .14); --field-line-2: oklch(1 0 0 / .3);
}
body[data-status="warning"] {
  --pulse: oklch(0.52 0.12 72);
  --field: oklch(0.38 0.08 70); --on-field: oklch(0.98 0.02 85); --on-field-2: oklch(0.89 0.045 80);
  --field-line: oklch(1 0 0 / .16); --field-line-2: oklch(1 0 0 / .34);
}
[data-theme="light"] body {
  --field: oklch(0.9 0.06 155); --on-field: oklch(0.26 0.06 155); --on-field-2: oklch(0.37 0.06 155);
  --field-line: oklch(0.26 0.06 155 / .16); --field-line-2: oklch(0.26 0.06 155 / .34);
}
[data-theme="light"] body[data-status="warning"] {
  --pulse: oklch(0.82 0.14 78);
  --field: oklch(0.9 0.09 88); --on-field: oklch(0.29 0.07 65); --on-field-2: oklch(0.39 0.08 65);
  --field-line: oklch(0.29 0.07 65 / .16); --field-line-2: oklch(0.29 0.07 65 / .34);
}
body[data-status="danger"], [data-theme="light"] body[data-status="danger"] {
  --pulse: oklch(0.64 0.23 27);
  --field: oklch(0.5 0.19 27); --on-field: #fff; --on-field-2: oklch(0.95 0.03 30);
  --field-line: oklch(1 0 0 / .22); --field-line-2: oklch(1 0 0 / .45);
}
body[data-status="gone"] {
  --field: var(--surface-2); --on-field: var(--text); --on-field-2: var(--text-2); --field-line: var(--line); --field-line-2: var(--line-2);
}

/* ---------- service page: the verdict band ---------- */
/* full-width colour from a layer behind the band: the content keeps the header's column (100vw counts the scrollbar) */
.nh, .nsrc { position: relative; isolation: isolate; }
.nh > .wrap, .nsrc > .wrap { max-width: none; padding: 0; }
.nh::before, .nsrc::after { content: ""; position: absolute; left: 50%; width: 100vw; margin-left: -50vw; z-index: -1; }
.nh::before { top: 0; bottom: 0; background: var(--field); transition: background-color .3s; }
/* down or partly down: the band glows slowly behind the verdict, red for an outage, amber for problems */
.nh::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; margin-left: -50vw; z-index: -1; pointer-events: none; opacity: 0;
  background: radial-gradient(60% 110% at 24% 42%, var(--pulse, transparent), transparent 72%); }
body[data-status="danger"] .nh::after { animation: nh-glow 1.9s ease-in-out infinite; }
body[data-status="warning"] .nh::after { animation: nh-glow 3.2s ease-in-out infinite; }
@keyframes nh-glow { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
.nsrc::after { bottom: 0; height: 1px; background: var(--line); }
.nh { color: var(--on-field); padding: 36px 0 44px; }
.nh .crumbs { margin: 0 0 22px; gap: 4px 8px; color: var(--on-field-2); }
.nh .crumbs a { color: inherit; }
.nh .crumbs a:hover { color: var(--on-field); }
.nh .crumbs [aria-current] { color: var(--on-field); }
.nh-svc { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.nh .svc-logo { width: 40px; height: 40px; border-radius: 10px; box-shadow: 0 0 0 1px var(--field-line); }
.nh .svc-logo img { width: 26px; height: 26px; }
.nh .svc-name { font: 600 19px/1.2 var(--font); letter-spacing: -.02em; }
.nh .svc-domain { font: 400 12.5px/1.4 var(--mono); color: var(--on-field-2); }
.nh .svc-domain:hover { color: var(--on-field); }
.nh-live { margin-left: auto; display: inline-flex; align-items: center; gap: 9px; height: 28px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--field-line-2);
  font: 500 11.5px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }
.nh-live .dot { background: currentColor; animation: nh-ping 2s infinite; }
@keyframes nh-ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 7px transparent; } }
.nh-q { margin-top: 40px; font: 500 17px/1.4 var(--font); letter-spacing: -.01em; color: var(--on-field-2); }
.nh-q span { opacity: .78; }
.nh-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; align-items: end; margin-top: 10px; }
.nh-main { min-width: 0; container-type: inline-size; }
.nh-answer { color: var(--on-field); }
.nh-word { display: block; font: 700 min(232px, calc(100cqi / 1.5))/.84 var(--font); letter-spacing: -.065em; margin-left: -.055em; }
.nh-word.is-mid { font-size: min(232px, calc(100cqi / 1.9)); margin-left: -.012em; }   /* "Yes,": the Y has almost no side bearing */
.nh-word.is-long { font-size: min(232px, calc(100cqi / 2.6)); }
.nh-rest { display: block; margin-top: 20px; font: 600 44px/1.06 var(--font); letter-spacing: -.035em; text-wrap: balance; }
.nh-detail { margin-top: 18px; max-width: 46ch; font-size: 18px; line-height: 1.5; color: var(--on-field-2); }
.nh .official-line, .nh .official-line a, .nh .official-line b { color: var(--on-field); }
.nh .official-line .dot { box-shadow: 0 0 0 2px var(--field-line-2); }
.nh-nums { margin: 0; border-top: 1px solid var(--field-line); }
.nh-nums > div { padding: 14px 0; border-bottom: 1px solid var(--field-line); min-width: 0; }
.nh-nums dt { font: 500 11px/1.3 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--on-field-2); }
.nh-nums dd { margin: 6px 0 0; font: 500 40px/1 var(--mono); letter-spacing: -.045em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nh-trace { position: relative; margin: 52px 0 0; }
.nh-trace .cut { fill: var(--field); opacity: 1; }
.nh-clip { position: absolute; top: -20px; transform: translateX(-50%); font: 500 12px/1 var(--mono); white-space: nowrap; }
.nh-trace svg { display: block; width: 100%; height: 120px; overflow: visible; }
.nh-trace rect { fill: var(--on-field); opacity: .34; }
.nh-trace rect.c1 { opacity: .68; }
.nh-trace rect.c2 { opacity: 1; }
.nh-trace .floor { stroke: var(--field-line-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.nh-trace .base { fill: none; stroke: var(--on-field); stroke-width: 1.5; stroke-dasharray: 4 4; opacity: .6; vector-effect: non-scaling-stroke; }
.nh-axis { display: flex; justify-content: space-between; margin-top: 10px; font: 400 11.5px/1 var(--mono); color: var(--on-field-2); }
.nh-axis span:last-child { color: var(--on-field); }
.nh-cap { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 12px; font-size: 13px; line-height: 1.5; color: var(--on-field-2); }
.nh-cap .num { font: 400 12.5px/1.5 var(--mono); }
.nh-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 28px; }
.nh .nh-actions .btn { height: 48px; padding: 0 18px; border-radius: 10px; font: 500 15.5px/1 var(--font); }
.nh .nh-actions .btn-primary { padding: 0 20px; background: var(--on-field); color: var(--field); border-color: transparent; font-weight: 600; font-size: 16px; }
.nh .nh-actions .btn-primary:hover { background: var(--on-field); opacity: .9; }
.nh .nh-actions .btn-ghost { border: 1px solid var(--field-line-2); color: var(--on-field); background: transparent; }
.nh .nh-actions .btn-ghost:hover, .nh .nh-actions .btn[aria-pressed="true"] { background: var(--field-line); color: var(--on-field); border-color: var(--field-line-2); }
.nh .soc { margin: 0 0 0 auto; }
.nh .soc-label { font: 500 11px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--on-field-2); }
.nh .soc a, .nh .soc .copy { width: 34px; height: 34px; border-radius: 50%; border-color: var(--field-line-2); color: var(--on-field); }
.nh .soc a:hover, .nh .soc .copy:hover { background: var(--field-line); color: var(--on-field); border-color: var(--field-line-2); }
.nh-meta { margin-top: 22px; font: 400 12px/1.5 var(--mono); color: var(--on-field-2); }
.nh-meta .hero-spike { border-bottom-color: var(--field-line-2); }
.nh-meta .hero-spike:hover { color: var(--on-field); }
.nh .status-change { background: var(--field-line); border-color: var(--field-line-2); color: var(--on-field); }
.nh .status-change a { color: var(--on-field); }

/* selecting text in the coloured bands: the band's colours swapped (the browser's grey turns muddy on them) */
.nh ::selection, .nnow ::selection { background: var(--on-field); color: var(--field); }
/* the giant word and number: their highlight box is far taller than their line and would cover the lines around them */
.nh-word::selection, .nnow-n::selection { background: transparent; color: color-mix(in oklab, var(--on-field) 45%, var(--field)); }

/* ---------- where the numbers come from ---------- */
.nsrc-grid { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; }
.nsrc-grid > div { padding: 24px 24px 26px; border-left: 1px solid var(--line); min-width: 0; }
.nsrc-grid > div:first-child { padding-left: 0; border-left: 0; }
.nsrc-grid > div:last-child { padding-right: 0; }
.nsrc-k { font: 500 11px/1.4 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); }
.nsrc-v { display: flex; align-items: center; gap: 8px; margin-top: 8px; font: 600 17px/1.3 var(--font); letter-spacing: -.01em; }
.nsrc-v a { display: inline-flex; align-items: center; gap: 6px; color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.nsrc-v a:hover { color: var(--accent); }
.nsrc-grid p { margin-top: 6px; font-size: 13.5px; line-height: 1.55; color: var(--text-2); }

/* ---------- service page: numbered contents on the left ---------- */
.layout { grid-template-columns: 190px minmax(0, 1fr); gap: 64px; }
.side { order: -1; top: 88px; }
.side .toc { padding: 0; background: none; border: 0; box-shadow: none; }
.side .toc .card-title { margin-bottom: 14px; font: 500 11px/1.4 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); }
.toc ol { counter-reset: toc; display: grid; gap: 1px; }
.toc a { display: grid; grid-template-columns: 26px minmax(0, 1fr); margin: 0; padding: 5px 0; border-radius: 0; font-size: 14px; line-height: 1.35; }
.toc a::before { counter-increment: toc; content: counter(toc, decimal-leading-zero); font: 400 11.5px/1.6 var(--mono); color: var(--text-3); }
.toc a:hover, .toc a.is-active { background: none; box-shadow: none; color: var(--text); }
.toc a.is-active::before { color: var(--text); }
.jump { counter-reset: jmp; }
.jump a { gap: 7px; height: 34px; padding: 0 13px; font-size: 13.5px; }
.jump a::before { counter-increment: jmp; content: counter(jmp, decimal-leading-zero); font: 400 11px var(--mono); color: var(--text-3); }
/* section numbers follow the contents: sections the contents leave out don't count */
#x-posts, #badge, #method { counter-increment: none; }
#x-posts > .eyebrow::before, #badge > .eyebrow::before { content: none; }
.others { counter-increment: gsec; margin-top: clamp(64px, 8vw, 96px); }
.others > .eyebrow::before { content: counter(gsec, decimal-leading-zero); margin-right: 6px; color: var(--text); font-weight: 600; }
.sec-title { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.25rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.08; margin-top: 18px; }

/* "Last 24 hours": the chart sits in the section, not in a card */
.sec .chart-panel { --pad: 0px; margin-top: 14px; padding: 0; background: none; border: 0; border-radius: 0; display: flex; flex-direction: column; }
.sec .chart-panel .panel-head { order: 1; margin-top: 34px; }
.sec .chart-panel .chart-sum { display: contents; }
.sec .chart-panel .chart-sum > p:not(.chart-sum-ctry) { order: 0; max-width: 62ch; font-size: 1.0625rem; line-height: 1.65; color: var(--text-2); }
.sec .chart-panel .chart { order: 2; }
.sec .chart-panel .axis { order: 3; }
.sec .chart-panel .chart-keys { order: 4; }
.sec .chart-panel .metrics { order: 5; margin: 30px 0 0; border-bottom: 1px solid var(--line); }
.sec .chart-panel .chart-sum-ctry { order: 6; margin-top: 20px; max-width: 70ch; font-size: 14.5px; line-height: 1.6; color: var(--text-3); }
.sec .chart-panel .metric { padding: 18px 16px 20px 20px; }
.sec .chart-panel .metric:first-child { padding-left: 0; }
.sec .chart-panel + .sec-lead { margin-top: 30px; }
.nshare { order: 7; display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 20px 28px; align-items: center; margin: 34px 0 0;
  padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.nshare-img { display: block; border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 1px var(--line); }
.nshare-img img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; background: var(--surface-2); }
.nshare figcaption { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.nshare figcaption b { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.01em; }
.nshare figcaption span { font-size: 14.5px; line-height: 1.55; color: var(--text-2); max-width: 44ch; }
.nshare .share-row { display: flex; flex-wrap: wrap; justify-content: flex-start; align-self: flex-start; gap: 8px; margin: 10px 0 0; }
.inc-list { border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; }
.inc { grid-template-columns: 170px minmax(0, 1fr) auto; gap: 8px 20px; padding: 16px 0; border-top: 0; border-bottom: 1px solid var(--line); }
.inc .pill { height: 24px; padding: 0 9px; justify-self: start; }
.inc-peak .num { font: 500 20px/1.15 var(--mono); }

/* official channels and facts, as a section */
.ncards { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 20px; margin-top: 22px; align-items: start; }
.ncards .card:only-child { grid-column: 1 / -1; }

/* ---------- every page: section labels without icons, as in the mock-ups ---------- */
.eyebrow .ico { display: none; }

/* ---------- home ---------- */
.home .hdr-search, .home .search-toggle { display: none; }   /* the hero has the search */
.home .hdr-nav { margin-left: auto; }
.home-hero { max-width: none; margin: 0; padding: clamp(48px, 8vw, 88px) 0 clamp(44px, 6vw, 72px); text-align: left; }
.home-eyebrow { justify-content: flex-start; font: 400 12px/1.4 var(--mono); }
.home .home-title { max-width: 7.6em; font-size: clamp(3rem, 1rem + 7.2vw, 7.25rem); line-height: .96; letter-spacing: -.055em; text-wrap: balance; }
.home-lead { margin: 26px 0 0; max-width: 46ch; font-size: clamp(1.0625rem, 1rem + .4vw, 1.25rem); }
.home-hero .big-search { margin: 40px 0 0; max-width: 720px; }
.home-hero .chips { justify-content: flex-start; max-width: 720px; margin: 18px 0 0; }
/* "Right now": a band in the overall status colour */
.nnow { position: relative; isolation: isolate; margin-top: 0; padding: 24px 0 52px; color: var(--on-field); }
.nnow::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; margin-left: -50vw; z-index: -1; background: var(--field); }
.home-sec.nnow + .home-sec { margin-top: clamp(64px, 8vw, 96px); }
.nnow > .eyebrow { border-top-color: var(--field-line-2); color: var(--on-field-2); }
.nnow > .eyebrow::before { color: var(--on-field); }
.nnow-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.25fr); gap: 48px; margin-top: 28px; align-items: start; }
.nnow h2 { margin: 0; }
.nnow-n { display: block; margin-left: -.03em; font: 700 clamp(96px, 12vw, 176px)/.84 var(--font); letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.nnow-t { display: block; max-width: 13ch; margin-top: 20px; font: 600 clamp(24px, 1rem + 1.3vw, 32px)/1.08 var(--font); letter-spacing: -.03em; }
.nnow-sub { margin-top: 14px; max-width: 34ch; font-size: 15.5px; line-height: 1.6; color: var(--on-field-2); }
.nnow .tiles { margin: 0; }
.nnow .tile { background: transparent; border-color: var(--field-line-2); color: var(--on-field); }
.nnow .tile:hover { background: var(--field-line); border-color: var(--field-line-2); }
.nnow .tile .pill { height: 22px; padding: 0 8px; background: var(--on-field); color: var(--field); }
.nnow .spark path, .nnow .tile:hover .spark .s0 { fill: var(--on-field); }
.nnow .spark .s0 { opacity: .38; } .nnow .spark .s1 { opacity: .7; }
.nnow .tile-meta, .nnow .tiles-wide .tile-meta .num { color: var(--on-field-2); }
.nnow .tiles-wide .tile-meta .num { color: var(--on-field); font-family: var(--mono); }
.nnow-m { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 52px 0 0; border-top: 1px solid var(--field-line-2); }
.nnow-m .metric { padding: 20px 24px 0; border-left-color: var(--field-line-2); }
.nnow-m .metric:first-child { padding-left: 0; }
.nnow-m .metric-label, .nnow-m .metric-sub, .nnow-m .metric-sub.up, .nnow-m .metric-sub.down { color: var(--on-field-2); }
.nnow-m .metric-value, .nnow-m .metric-value a { color: var(--on-field); }
/* activity and how it works: open sections, no cards */
.home-sec.chart-panel { --pad: 0px; padding: 0; background: none; border: 0; border-radius: 0; }
#activity .panel-head { align-items: flex-end; margin-top: 18px; }
#activity .panel-title { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.25rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.08; }
.how { gap: 0 40px; margin-top: 28px; border-top: 1px solid var(--line); }
.how li { padding: 24px 0 0; border: 0; border-radius: 0; background: none; }
.how li::before { content: counter(how, decimal-leading-zero); display: block; width: auto; height: auto; margin-bottom: 16px; border: 0; border-radius: 0; background: none;
  font: 400 28px/1 var(--mono); letter-spacing: -.02em; color: var(--text-3); }

/* ---------- crumbs: "Home / Services", as in the mock-ups ---------- */
.crumbs li[aria-hidden] .ico { display: none; }
.crumbs li[aria-hidden]::before { content: "/"; opacity: .7; }

/* ---------- services directory ---------- */
.summary { --pad: 0px; padding: 0; background: none; border: 0; border-radius: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.summary .metric { padding: 20px 20px 22px; }
.summary .metric:first-child { padding-left: 0; }
.ndir-bar { position: sticky; top: var(--header-h); z-index: 20; isolation: isolate; margin-top: 36px; padding: 14px 0; }
.ndir-bar::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; margin-left: -50vw; z-index: -1; background: var(--bg); border-bottom: 1px solid var(--line); }
.ndir-bar .dir-tools { margin-top: 0; }
.ndir-bar .dir-count:empty { display: none; }
.ndir-bar .cat-nav { flex-wrap: nowrap; gap: 6px; margin-top: 12px; overflow-x: auto; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); }
.ndir-bar .cat-nav::-webkit-scrollbar { display: none; }
.ndir-bar .cat-nav a { flex: none; height: 32px; padding: 0 13px; font-size: 13.5px; }
.dir-sec { counter-increment: gsec; margin-top: clamp(56px, 7vw, 88px); scroll-margin-top: calc(var(--header-h) + 150px); }
.dir-sec > .eyebrow::before { content: counter(gsec, decimal-leading-zero); margin-right: 6px; color: var(--text); font-weight: 600; }
.dir-sec .dir-head { justify-content: space-between; margin-top: 18px; }
.dir-sec .dir-n { display: none; }

/* ---------- reports ---------- */
.nrp-feat { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 24px; margin-top: 8px; padding: clamp(22px, 3vw, 32px); border: 1px solid var(--line); border-radius: 20px;
  background: var(--surface); color: var(--text); text-decoration: none; transition: border-color .15s; }
.nrp-feat:hover { border-color: var(--line-3); }
.nrp-k { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font: 400 12px/1.4 var(--mono); color: var(--text-3); }
.nrp-k .pill { background: var(--text); color: var(--bg); }
.nrp-feat h2 { grid-column: 1 / -1; margin-top: 16px; font: 700 clamp(2.25rem, 1.4rem + 3vw, 3.75rem)/1 var(--font); letter-spacing: -.045em; }
.nrp-m { grid-column: 1; display: flex; flex-wrap: wrap; gap: 14px 40px; margin-top: 28px; }
.nrp-m small { display: block; font: 500 11px/1.4 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); }
.nrp-m b { display: block; margin-top: 6px; font: 500 clamp(1.75rem, 1.2rem + 1.4vw, 2.25rem)/1 var(--mono); letter-spacing: -.04em; }
.nrp-m b:not(.num) { font-family: var(--font); font-weight: 700; letter-spacing: -.035em; }
.nrp-big { grid-column: 1; margin-top: 18px; font-size: 14.5px; color: var(--text-2); }
.nrp-feat .btn { grid-column: 2; grid-row: 3 / span 2; align-self: end; }
.nrp-table td:first-child a { color: var(--text); font-weight: 600; font-size: 1.0625rem; text-decoration: none; }
.nrp-table td:first-child a:hover { text-decoration: underline; text-underline-offset: 3px; }
.nrp-table .pill { margin-left: 8px; height: 22px; padding: 0 8px; }
.nrp-table td { color: var(--text-2); }
.rw-list .rp-month h3 { white-space: nowrap; }

/* ---------- ping test: the title large on the left, the intro beside it ---------- */
.pt-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px 56px; align-items: end; padding-bottom: 36px; }
.pt-hero .doc-title { max-width: none; font-size: clamp(3rem, 1rem + 6.4vw, 7.25rem); line-height: .92; letter-spacing: -.055em; }
.pt-hero .dir-intro { margin: 0; }

/* ---------- not found ---------- */
.nf-big { margin: 18px 0 0 -.04em; font: 700 clamp(120px, 6rem + 9vw, 232px)/.84 var(--font); letter-spacing: -.06em; color: var(--line-3); font-variant-numeric: slashed-zero; }
.nf-hero .home-title { margin-top: 26px; }
.nf-hero .nf-dym { margin-top: 34px; text-align: left; font: 500 11px/1.4 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); }

/* ---------- breakpoints ---------- */
@media (max-width: 1100px) {
  .nh-grid { grid-template-columns: minmax(0, 1fr) 260px; }
  .nh-rest { font-size: 38px; }
  .nh-nums dd { font-size: 34px; }
  .nsrc-grid { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nsrc-grid > div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .nsrc-grid > div:nth-child(even) { padding-right: 0; }
  .nsrc-grid > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .layout { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 48px; }
  .side { display: none; }
  .ncards { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1100px) {
  .nnow-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .nnow-t { max-width: none; }
}
@media (max-width: 900px) {
  .pt-hero { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .nrp-feat { grid-template-columns: minmax(0, 1fr); }
  .nrp-feat .btn { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 22px; }
  .home #themeBtn { margin-left: auto; }   /* the menu is hidden on phones */
  .nnow-m { grid-template-columns: minmax(0, 1fr); }
  .nnow-m .metric { padding: 16px 0; border-left: 0; border-bottom: 1px solid var(--field-line); }
  .how { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .how li + li { margin-top: 28px; }
  .nh { padding: 24px 0 36px; }
  .nh-q { margin-top: 28px; }
  .nh-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .nh-word, .nh-word.is-mid, .nh-word.is-long { font-size: min(156px, calc(100cqi / 1.5)); }
  .nh-word.is-mid { font-size: min(156px, calc(100cqi / 1.9)); }
  .nh-word.is-long { font-size: min(156px, calc(100cqi / 2.6)); }
  .nh-rest { margin-top: 12px; font-size: 27px; }
  .nh-detail { font-size: 16.5px; }
  .nh-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nh-nums > div { padding-right: 10px; }
  .nh-nums dd { font-size: 21px; }
  .nh-trace { margin-top: 38px; }
  .nh-trace svg { height: 84px; }
  .nh-actions .btn { flex: 1 1 0; padding: 0 12px; }
  .nh .nh-actions .btn-primary { flex-basis: 100%; }
  .nh .soc { width: 100%; margin: 8px 0 0; gap: 5px; }
  .nh .soc a, .nh .soc .copy { width: 32px; height: 32px; }
  .nsrc-grid { grid-template-columns: minmax(0, 1fr); }
  .nsrc-grid > div, .nsrc-grid > div:nth-child(even) { padding: 20px 0; border-left: 0; }
  .nsrc-grid > div + div { border-top: 1px solid var(--line); }
  .layout { margin-top: 40px; }
  .inc { grid-template-columns: minmax(0, 1fr) auto; }
  .inc > .pill { grid-column: 1 / -1; }
  .sec .chart-panel .metric:nth-child(3) { padding-left: 0; }
  .nshare { grid-template-columns: minmax(0, 1fr); padding: 14px; }
}
@media (prefers-reduced-motion: reduce) { .nh-live .dot, .nh::after { animation: none; } .nh::before { transition: none; } }