/* PupilMetrics — cnri.edu One stylesheet for the landing page and both product pages. The palette is taken from the apps' own UI: the near-black navy ground and cyan accent of the Research splash screen, with Neuro's teal/amber as a per-page accent swap, so the screenshots sit on the page instead of floating on white. */ :root { --ground: #080D16; --panel: #10192A; --panel-2: #172338; --line: #22314C; --line-soft: #1A2436; /* accent — overridden per page on */ --accent: #22D3EE; /* cyan, the Research UI accent */ --accent-lt: #67E8F9; --accent-ink: #04161C; /* text on top of a filled accent button */ --flat: #38BDF8; /* flattening — the app's blue zone badge */ --prot: #F59E0B; /* protrusion — the app's amber zone badge */ --good: #34D399; --warn: #FBBF24; --bad: #F87171; --text: #E2E8F0; --dim: #94A3B8; --dimmer: #64748B; --fallback: "Segoe UI", "Noto Sans", "Noto Sans Arabic", "Noto Sans Devanagari", "Noto Sans JP", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", "Yu Gothic", "Malgun Gothic", "Microsoft YaHei", "Microsoft JhengHei", "Nirmala UI", sans-serif; --sans: "IBM Plex Sans", system-ui, -apple-system, var(--fallback); --cond: "IBM Plex Sans Condensed", "IBM Plex Sans", system-ui, var(--fallback); --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; } /* Neuro runs the app's teal primary with amber for the Drug Monitor half. */ body.neuro { --accent: #2DD4BF; --accent-lt: #5EEAD4; --accent-ink: #052620; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--ground); color: var(--text); font-family: var(--sans); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; } .wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 24px; } a { color: var(--accent-lt); text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { color: var(--accent); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } h1, h2, h3 { font-family: var(--cond); font-weight: 600; letter-spacing: -0.01em; } /* Hidden until focused. Clip rather than park it off-canvas: a negative `left` overflows to the right under dir="rtl", which makes the whole document thousands of px wide and scrolls the real content out of view. The site is LTR-only today, but the locale folders are coming. */ .skip { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .skip:focus { position: fixed; inset-inline-start: 8px; top: 8px; width: auto; height: auto; margin: 0; padding: 10px 16px; clip: auto; clip-path: none; overflow: visible; background: var(--accent); color: var(--accent-ink); z-index: 50; } /* ---------- masthead ---------- */ .masthead { border-bottom: 1px solid var(--line); background: rgba(6, 11, 19, .93); position: sticky; top: 0; z-index: 20; backdrop-filter: blur(8px); } .masthead .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px 28px; min-height: 62px; flex-wrap: wrap; } .brand { display: flex; align-items: center; gap: 11px; font-family: var(--cond); font-weight: 700; font-size: 20px; letter-spacing: 0.01em; color: var(--text); text-decoration: none; } .brand svg { display: block; flex: none; } .brand .brand-sub { font-family: var(--mono); font-weight: 400; font-size: 12px; color: var(--accent); letter-spacing: .06em; text-transform: uppercase; padding-inline-start: 2px; } .mast-nav { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; } .mast-nav a { font-family: var(--cond); font-weight: 600; font-size: 16px; color: var(--dim); text-decoration: none; } .mast-nav a:hover { color: var(--text); } .mast-nav a.here { color: var(--accent); } .mast-nav .get { border: 1px solid var(--accent); color: var(--accent); padding: 7px 15px; border-radius: 3px; } .mast-nav .get:hover { background: var(--accent); color: var(--accent-ink); } /* ---------- hero ---------- */ .hero { padding: 66px 0 8px; } .hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 470px); gap: 56px; align-items: start; } .hero-wide .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 44px; } .hero h1 { margin: 0 0 22px; font-size: clamp(36px, 5.6vw, 58px); line-height: 1.03; letter-spacing: -0.02em; } .eyebrow { margin: 0 0 14px; font-family: var(--mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); } .lede { margin: 0 0 14px; font-size: 19.5px; color: var(--text); max-width: 46ch; } .lede-2 { margin: 0 0 30px; color: var(--dim); max-width: 52ch; } .cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } .btn { display: inline-flex; align-items: baseline; gap: 10px; padding: 15px 26px; border-radius: 3px; border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink); font-family: var(--cond); font-weight: 700; font-size: 18px; text-decoration: none; transition: background-color .15s ease, border-color .15s ease; } .btn:hover { background: var(--accent-lt); border-color: var(--accent-lt); color: var(--accent-ink); } .btn .btn-sub { font-family: var(--mono); font-size: 12.5px; font-weight: 400; opacity: .72; } .btn-quiet { display: inline-flex; align-items: center; gap: 9px; padding: 15px 20px; border-radius: 3px; border: 1px solid var(--line); background: transparent; color: var(--text); font-family: var(--cond); font-weight: 600; font-size: 17px; text-decoration: none; transition: border-color .15s ease, background-color .15s ease; } .btn-quiet:hover { border-color: var(--accent); background: var(--panel); color: var(--text); } .privacy-line { margin: 26px 0 0; padding-inline-start: 15px; border-inline-start: 2px solid var(--line); font-size: 15.5px; color: var(--dim); max-width: 56ch; } .facts { margin-top: 44px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } .fact { padding: 16px 20px 15px; border-inline-start: 1px solid var(--line-soft); } .fact:first-child { border-inline-start: 0; padding-inline-start: 0; } .fact dt { font-size: 12.5px; color: var(--dimmer); letter-spacing: 0.02em; margin-bottom: 4px; } .fact dd { margin: 0; font-family: var(--mono); font-size: 14.5px; color: var(--text); line-height: 1.45; } /* ---------- diagrams ---------- */ figure.hero-fig { margin: 0; } .diagram { width: 100%; height: auto; display: block; direction: ltr; } /* waveform panel */ .diagram .band-dark { fill: #05090F; } .diagram .band-flash { fill: var(--warn); opacity: .16; } .diagram .grid { stroke: var(--line-soft); stroke-width: 1; } .diagram .ref-base { stroke: var(--dimmer); stroke-width: 1.4; stroke-dasharray: 5 5; } .diagram .trace { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linejoin: round; } .diagram .dot { fill: var(--ground); stroke: var(--accent-lt); stroke-width: 2; } .diagram .ax { fill: var(--dimmer); font-family: var(--mono); font-size: 12px; text-anchor: end; } .diagram .ax-x { text-anchor: middle; } .diagram .callout { font-family: var(--mono); font-size: 13px; fill: var(--dim); } .diagram .callout-line { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 3; } .diagram .phase-label { font-family: var(--mono); font-size: 11.5px; fill: var(--dimmer); letter-spacing: .06em; text-transform: uppercase; text-anchor: middle; } /* three-trial overlay */ .diagram .trial { fill: none; stroke-width: 2; stroke-linejoin: round; } .diagram .t1 { stroke: var(--accent); } .diagram .t2 { stroke: var(--prot); } .diagram .t3 { stroke: var(--violet, #C084FC); } /* reflex-arc panel */ .diagram .limb { fill: none; } .diagram .pulse { opacity: 0; } .diagram .ray line { opacity: .85; } /* pupil margin panel */ .diagram .iris-rim { fill: none; stroke: #2B3A52; stroke-width: 1.6; } .diagram .anw { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-dasharray: 6 6; opacity: .65; } .diagram .ref { fill: none; stroke: var(--dimmer); stroke-width: 1.6; stroke-dasharray: 5 5; } .diagram .margin { fill: #05090F; fill-opacity: .85; stroke: #CBD5E1; stroke-width: 1.9; } .diagram .arc-flat { fill: none; stroke: var(--flat); stroke-width: 4.5; stroke-linecap: round; } .diagram .arc-prot { fill: none; stroke: var(--prot); stroke-width: 4.5; stroke-linecap: round; } .diagram .spoke { stroke: var(--line); stroke-width: 1; } .diagram .zlabel { fill: var(--dim); font-family: var(--mono); font-size: 12px; } /* Knock the ground colour out behind every label so a gridline or spoke passing underneath does not run through the glyphs. */ .diagram text { paint-order: stroke; stroke: var(--ground); stroke-width: 4.5px; stroke-linejoin: round; } .diagram .callout-flat { fill: var(--flat); } .diagram .callout-prot { fill: var(--prot); } .diagram .callout-accent { fill: var(--accent-lt); } .key { margin: 20px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line-soft); } .key li { position: relative; padding: 9px 0; padding-inline-start: 26px; border-bottom: 1px solid var(--line-soft); font-size: 14.5px; line-height: 1.5; color: var(--dim); } .key li::before { content: ""; position: absolute; inset-inline-start: 0; top: 18px; width: 15px; height: 0; border-top: 3px solid var(--dimmer); } .key b { font-weight: 500; color: var(--text); margin-inline-end: 5px; } .key .k-ref::before { border-top: 2px dashed var(--dimmer); } .key .k-anw::before { border-top: 2px dashed var(--accent); } .key .k-flat::before { border-top-color: var(--flat); } .key .k-prot::before { border-top-color: var(--prot); } .key .k-trace::before { border-top-color: var(--accent); } .key .k-t2::before { border-top-color: var(--prot); } .key .k-t3::before { border-top-color: #C084FC; } figcaption { margin-top: 18px; font-size: 15px; line-height: 1.6; color: var(--dim); } figcaption b { color: var(--text); font-weight: 500; } /* One orchestrated reveal per diagram, and only on first paint. */ @media (prefers-reduced-motion: no-preference) { @keyframes draw-on { to { stroke-dashoffset: 0; } } @keyframes fade-in { to { opacity: 1; } } @keyframes fade-soft { to { opacity: .65; } } @keyframes fill-in { to { fill-opacity: .85; } } @keyframes flash-pulse { 0% { opacity: 0; } 45% { opacity: .42; } 100% { opacity: .16; } } @keyframes pupil-run { 0%, 30% { r: 46px; } 41% { r: 32px; } 52% { r: 39px; } 72%, 100% { r: 44px; } } /* waveform: bands settle, the flash fires, then the trace draws across */ .diagram .band-flash { animation: flash-pulse 2.4s ease 1.05s 1 forwards; } .diagram .trace { stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: draw-on 2.6s cubic-bezier(.4,.05,.2,1) .35s forwards; } .diagram .dot { opacity: 0; animation: fade-in .5s ease 2.5s forwards; } .diagram .callout, .diagram .callout-line { opacity: 0; animation: fade-in .6s ease 2.8s forwards; } .diagram .phase-label { opacity: 0; animation: fade-in .6s ease .8s forwards; } /* the live pupil, breathing in step with the trace above it */ .pupil-live .pupil-disc { animation: pupil-run 10s cubic-bezier(.4,0,.3,1) .35s infinite; } /* The reflex arc runs on the same 10 s cycle as the pupil, so the signal reaches the sphincter at the moment the pupil starts to close. A short dash chased along the path reads as a travelling pulse. */ @keyframes pulse-run { 0% { opacity: 0; stroke-dashoffset: 260; } 2% { opacity: 1; } 16% { opacity: 1; stroke-dashoffset: 0; } 20%, 100% { opacity: 0; stroke-dashoffset: 0; } } @keyframes ray-flash { 0%, 28% { opacity: 0; } 30%, 33% { opacity: .9; } 38%, 100% { opacity: 0; } } .diagram .pulse { stroke-dasharray: 26 260; animation: pulse-run 10s linear infinite; } .diagram .pulse-aff { animation-delay: 3.0s; } .diagram .pulse-eff { animation-delay: 3.9s; } .diagram .ray { opacity: 0; animation: ray-flash 10s linear .35s infinite; } /* three trials, drawn one after another */ .diagram .trial { stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: draw-on 1.5s ease forwards; } .diagram .t1 { animation-delay: .3s; } .diagram .t2 { animation-delay: .9s; } .diagram .t3 { animation-delay: 1.5s; } /* pupil margin */ .diagram .ref { opacity: 0; animation: fade-soft .7s ease .15s forwards; } .diagram .margin { fill-opacity: 0; stroke-dasharray: 900; stroke-dashoffset: 900; animation: draw-on 1.6s cubic-bezier(.33,.1,.25,1) .35s forwards, fill-in .9s ease 1.0s forwards; } .diagram .arc-flat, .diagram .arc-prot { stroke-dasharray: 300; stroke-dashoffset: 300; animation: draw-on .55s ease forwards; } .diagram .arc-flat { animation-delay: 1.8s; } .diagram .arc-prot { animation-delay: 2.0s; } } /* ---------- sections ---------- */ section { padding: 74px 0; border-top: 1px solid var(--line-soft); } section:first-of-type { border-top: 0; } .sec-head { max-width: 64ch; margin-bottom: 40px; } .sec-head .num { display: block; font-family: var(--mono); font-size: 13px; letter-spacing: 0.08em; color: var(--accent); margin-bottom: 8px; } .sec-head h2 { margin: 0 0 12px; font-size: clamp(27px, 3.4vw, 36px); line-height: 1.12; } .sec-head p { margin: 0 0 10px; color: var(--dim); font-size: 17.5px; } .sec-head p:last-child { margin-bottom: 0; } /* product cards on the landing page */ .products { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 26px; } .product { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 30px 30px 26px; text-decoration: none; color: inherit; transition: border-color .15s ease, transform .15s ease; } .product:hover { border-color: var(--accent); transform: translateY(-2px); color: inherit; } .product .p-eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; } .product.p-neuro .p-eyebrow { color: #2DD4BF; } .product.p-check .p-eyebrow { color: #C084FC; } .product h3 { margin: 0 0 10px; font-size: 24px; color: var(--text); } .product p { margin: 0 0 16px; color: var(--dim); font-size: 16px; } .product .p-meta { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line-soft); font-family: var(--mono); font-size: 12.5px; color: var(--dimmer); line-height: 1.6; } .product .p-go { margin-top: 14px; font-family: var(--cond); font-weight: 600; font-size: 16px; color: var(--accent); } .product.p-neuro .p-go { color: #2DD4BF; } .product.p-check .p-go { color: #C084FC; } .product .p-go::after { content: " \2192"; } /* measurement list */ .measures { border-top: 1px solid var(--line); margin: 0; } .measure { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) minmax(0, 11rem); gap: 28px; padding: 22px 0; border-bottom: 1px solid var(--line-soft); align-items: baseline; } .measure dt { font-family: var(--cond); font-size: 21px; font-weight: 600; color: var(--accent-lt); } .measure dd { margin: 0; color: var(--text); } .measure .unit { font-family: var(--mono); font-size: 13px; color: var(--dim); text-align: end; line-height: 1.5; } /* threshold tables — real values, so a real table */ .tbl-wrap { overflow-x: auto; margin: 0 0 8px; } table.t { width: 100%; border-collapse: collapse; font-size: 15.5px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } table.t caption { text-align: start; font-family: var(--cond); font-size: 19px; font-weight: 600; color: var(--text); padding: 0 0 12px; } table.t th, table.t td { padding: 11px 0; padding-inline-end: 16px; text-align: start; vertical-align: top; } table.t thead th { font-family: var(--mono); font-size: 12.5px; font-weight: 400; letter-spacing: 0.03em; text-transform: uppercase; color: var(--dimmer); border-bottom: 1px solid var(--line); } table.t tbody tr + tr td { border-top: 1px solid var(--line-soft); } table.t td:first-child { font-family: var(--mono); font-size: 14px; color: var(--accent-lt); white-space: nowrap; } table.t td.w { color: var(--dim); } table.t td b { color: var(--text); font-weight: 500; } table.t td.num { font-family: var(--mono); font-size: 14px; white-space: nowrap; } .t-note { margin: 12px 0 0; font-size: 15px; color: var(--dim); max-width: 74ch; } /* notes / cards */ .pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; margin-top: 44px; align-items: start; } .trio { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); gap: 24px; margin-top: 40px; align-items: start; } .note { padding: 26px 28px; background: var(--panel); border: 1px solid var(--line); border-radius: 3px; } .note h3 { margin: 0 0 12px; font-size: 20px; color: var(--text); } .note p { margin: 0 0 12px; font-size: 16px; color: var(--dim); } .note p:last-child { margin-bottom: 0; } .note p b { color: var(--text); font-weight: 500; } .note ul { margin: 0; padding-inline-start: 20px; color: var(--dim); font-size: 16px; } .note ul li { margin-bottom: 7px; } .note-flag { border-inline-start: 3px solid var(--accent); } .note-warn { border-inline-start: 3px solid var(--warn); } /* screenshots */ .shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 36px 30px; } .shots-phone { grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 30px 24px; } .shot { margin: 0; } .shot img { width: 100%; height: auto; display: block; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); } .shot figcaption { margin-top: 14px; font-size: 14.5px; } .shot figcaption strong { display: block; font-family: var(--cond); font-size: 17px; font-weight: 600; color: var(--text); margin-bottom: 3px; } /* split figure + text */ .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px; align-items: start; } .split.flip > figure { order: 2; } .split > figure { margin: 0; } .split img { width: 100%; height: auto; display: block; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); } .split .body > p { color: var(--dim); margin: 0 0 14px; } .split .body > p b { color: var(--text); font-weight: 500; } .split .body h3 { margin: 0 0 12px; font-size: 22px; } /* numbered steps */ .steps { counter-reset: step; max-width: 76ch; } .step { counter-increment: step; position: relative; padding: 0 0 32px; padding-inline-start: 62px; border-inline-start: 1px solid var(--line); margin-inline-start: 17px; } .step:last-child { border-inline-start-color: transparent; padding-bottom: 6px; } .step::before { content: counter(step); position: absolute; inset-inline-start: -18px; top: -2px; width: 35px; height: 35px; border-radius: 50%; background: var(--ground); border: 1px solid var(--accent); color: var(--accent); font-family: var(--mono); font-size: 15px; display: grid; place-items: center; } .step h3 { margin: 4px 0 8px; font-size: 21px; } .step p { margin: 0 0 10px; color: var(--dim); } .step p:last-child { margin-bottom: 0; } .step p b { color: var(--text); font-weight: 500; } /* phase strip — the recording sequence */ .phases { display: grid; gap: 1px; background: var(--line-soft); border: 1px solid var(--line); border-radius: 3px; overflow: hidden; } .phase { background: var(--ground); padding: 18px 22px; display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 7rem) minmax(0, 1fr); gap: 20px; align-items: baseline; } .phase .ph-name { font-family: var(--cond); font-weight: 600; font-size: 18px; color: var(--accent-lt); } .phase .ph-time { font-family: var(--mono); font-size: 13px; color: var(--dimmer); } .phase .ph-body { color: var(--dim); font-size: 15.5px; } /* tiled grid */ .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 1px; background: var(--line-soft); border: 1px solid var(--line); border-radius: 3px; overflow: hidden; } .tile { background: var(--ground); padding: 22px 24px; } .tile h3 { margin: 0 0 6px; font-size: 18px; color: var(--accent-lt); } .tile p { margin: 0; font-size: 15.5px; color: var(--dim); } /* chip rows */ .chips { display: flex; flex-wrap: wrap; gap: 9px; margin: 0; padding: 0; list-style: none; } .chips li { font-family: var(--mono); font-size: 13.5px; border: 1px solid var(--line); background: var(--panel); color: var(--dim); border-radius: 999px; padding: 5px 14px; } .chips li b { color: var(--accent-lt); font-weight: 400; } /* jump nav */ .jump { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 18px 0; margin-top: 40px; } .jump ul { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 0; padding: 0; list-style: none; } .jump a { display: inline-block; font-family: var(--cond); font-weight: 600; font-size: 15px; color: var(--dim); text-decoration: none; border: 1px solid var(--line); border-radius: 999px; padding: 5px 15px; } .jump a:hover { color: var(--text); border-color: var(--accent); } /* platform availability grid */ .plats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 24px; } .plat { background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 24px 26px; } .plat h3 { margin: 0 0 4px; font-size: 20px; color: var(--text); display: flex; align-items: center; gap: 10px; } .plat h3 svg { flex: none; } .plat .p-req { font-family: var(--mono); font-size: 12.5px; color: var(--dimmer); margin: 0 0 14px; } .plat ul { margin: 0; padding-inline-start: 18px; color: var(--dim); font-size: 15.5px; } .plat li { margin-bottom: 6px; } .plat .p-note { margin: 14px 0 0; font-size: 14.5px; color: var(--dimmer); } /* limits */ .limits { max-width: 76ch; } .limit { padding: 24px 0; border-top: 1px solid var(--line-soft); } .limit:first-child { border-top: 1px solid var(--line); } .limit h3 { margin: 0 0 9px; font-size: 20px; color: var(--text); } .limit p { margin: 0 0 10px; color: var(--dim); } .limit p:last-child { margin-bottom: 0; } .limit p b { color: var(--text); font-weight: 500; } /* closing call to action */ .closer { text-align: center; } .closer h2 { margin: 0 0 10px; font-size: clamp(26px, 3.2vw, 34px); } .closer p { margin: 0 auto 26px; color: var(--dim); max-width: 58ch; } .closer .cta-row { justify-content: center; } /* footer */ footer { border-top: 1px solid var(--line); padding: 40px 0 56px; color: var(--dimmer); font-size: 14.5px; } footer .wrap { display: flex; flex-wrap: wrap; gap: 20px 40px; justify-content: space-between; } footer p { margin: 0; } footer nav { display: flex; flex-wrap: wrap; gap: 6px 18px; } footer nav a { color: var(--dim); text-decoration: none; } footer nav a:hover { color: var(--text); text-decoration: underline; } footer .fine { font-family: var(--mono); font-size: 12.5px; line-height: 1.7; } /* The 720-unit waveform panels scale down to about 0.65 on a phone, which takes 13px callout type to roughly 8px on screen. Scale the type up inside the viewBox so it lands back near 13px rendered. Only the wide panels: the 400-unit margin diagram is already scaling *up* at these widths. */ @media (max-width: 720px) { .diagram-wide .callout { font-size: 20px; } .diagram-wide .ax { font-size: 17px; } .diagram-wide .phase-label { font-size: 16px; letter-spacing: .04em; } .diagram-wide text { stroke-width: 6px; } } @media (max-width: 900px) { .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 44px; } figure.hero-fig { max-width: 560px; } .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fact:nth-child(3) { border-inline-start: 0; padding-inline-start: 0; } .fact:nth-child(n+3) { border-top: 1px solid var(--line-soft); } .pair { grid-template-columns: minmax(0, 1fr); gap: 26px; } .split { grid-template-columns: minmax(0, 1fr); gap: 26px; } .split.flip > figure { order: 0; } .measure { grid-template-columns: minmax(0, 1fr); gap: 6px; } .measure .unit { text-align: start; } .phase { grid-template-columns: minmax(0, 1fr); gap: 4px; } } @media (max-width: 560px) { body { font-size: 16.5px; } .wrap { padding: 0 18px; } .hero { padding-top: 44px; } section { padding: 56px 0; } .facts { grid-template-columns: minmax(0, 1fr); } .fact { border-inline-start: 0; padding-inline-start: 0; border-top: 1px solid var(--line-soft); } .fact:first-child { border-top: 0; } .btn, .btn-quiet { width: 100%; justify-content: center; } .step { padding-inline-start: 46px; } .masthead .wrap { min-height: 0; padding-top: 12px; padding-bottom: 12px; } .mast-nav { gap: 16px; } .brand .brand-sub { display: none; } }