/* DeepDoctor PRO site stylesheet. Values reconciled against the Figma export (deepdoctor-landing-prototype-v1). Inlined into by main.py via ui.add_css (no extra network round-trip). */ *,*::before,*::after{box-sizing:border-box;} body{margin:0;min-height:100vh;width:100%;background:#F4F6F7;font-family:'IBM Plex Sans',sans-serif;color:#15242B;} /* Replaces the Tailwind `inline` utility — the only one the site used — so the whole Tailwind runtime can stay disabled (ui.run(tailwind=False) in main.py). ui.label renders a

; this class lets labels flow as inline text. */ .inline{display:inline;} .nicegui-content{padding:0!important;max-width:none!important;width:100%!important;align-items:stretch!important;} .q-page{padding:0!important;width:100%!important;} /* scrollbar-gutter:stable always reserves the scrollbar track, so centered .pw content never jumps left when expanding a section adds a scrollbar. */ html{scroll-behavior:smooth;scrollbar-gutter:stable;} /* NiceGUI's ui.html() wrapper is transparent inside button */ button.btn>div{display:contents;} /* ── Typography ──────────────────────────────── */ .h1{font-family:'Spectral',serif;font-size:clamp(32px,3.5vw,56px);font-weight:500;line-height:1.125;letter-spacing:-.01em;color:#15242B;margin-bottom:22px;} .h1 em{font-style:italic;font-weight:400;color:#94A2A9;} /* .h2/.h3 render as real

/

elements (semantic headings), so their margins are pinned on all sides — UA heading margins must not leak in. / .h2{font-family:'Spectral',serif;font-size:clamp(26px,2.8vw,41.6px);font-weight:500;line-height:1.13;letter-spacing:-.01em;color:#15242B;margin:0 0 14px;} .h2w{color:#fff;} .h3{font-family:'IBM Plex Sans',sans-serif;font-size:16.3px;font-weight:600;line-height:1.1;letter-spacing:-.01em;color:#15242B;margin:0 0 8px;} .slabel{font-family:'IBM Plex Mono',monospace;font-size:11.5px;font-weight:500;line-height:18px;letter-spacing:.18em;text-transform:uppercase;color:#1F7A68;margin-bottom:14px;} .slabel-w{color:#79C9B6;} .blg{font-size:18.9px;line-height:1.59;color:#46585F;} .bmd{font-size:15.5px;line-height:1.61;color:#46585F;} .bsm{font-size:13.3px;line-height:1.5;color:#46585F;} .cap-desc{font-size:13.9px;line-height:1.51;color:#46585F;} .tl-desc{font-size:14.4px;line-height:1.53;color:#46585F;} .step-note{font-family:'Spectral',serif;font-style:italic;font-weight:400;font-size:19.5px;line-height:31px;text-align:center;color:#15242B;} / ── Heading & paragraph instance modifiers ───── / .h2-mb40{margin-bottom:40px;} .h2-mb24{margin-bottom:24px;} .h2-mb6{margin-bottom:6px;} .h2-sm{font-size:24px;line-height:1.13;} .h2-lg{font-size:38.4px;} .hero-lede{margin-bottom:32px;max-width:500px;} .how-lede{max-width:560px;margin-bottom:48px;} .ev-lede{font-size:17px;line-height:1.59;color:#AEBCC1;margin-bottom:28px;} .fork-lede{margin-bottom:28px;} .pu-lede{max-width:380px;margin-bottom:24px;font-size:16.8px;line-height:1.61;} .try-lede{font-size:17px;line-height:1.59;max-width:389px;margin-bottom:10px;} .badge-mb{margin-bottom:28px;} .field-mb{margin-bottom:24px;} / ── Page wrapper (content 1064px inside 28px gutters → 1120px) ─ / .pw{max-width:1120px;margin:0 auto;padding:0 28px;} / ── Buttons ──────────────────────────────────── / .btn{display:inline-flex;align-items:center;justify-content:center;font-family:'IBM Plex Sans',sans-serif;font-size:15.2px;font-weight:500;line-height:24px;border-radius:7px;padding:14px 23px;border:none;cursor:pointer;text-decoration:none;white-space:nowrap;transition:opacity .15s;} .btn:hover{opacity:.82;} .btn-d{background:#15242B;color:#fff;} .btn-t{background:#1F7A68;color:#fff;} .btn-o{background:transparent;color:#15242B;border:1px solid #DCE2E4;} / ── Cards ────────────────────────────────────── / .card{background:#fff;border:1px solid #DCE2E4;border-radius:12px;padding:24px;} .card-dark{background:#1C2E36;border:1px solid #2C424C;border-radius:12px;padding:24px;} .fork-card{padding:35px 33px;border-radius:14px;display:flex;flex-direction:column;} .fork-card .btn{margin-top:auto;align-self:flex-start;} / ── Badge ────────────────────────────────────── / .badge{display:inline-flex;align-items:center;gap:8px;background:#E4F0EC;border:1px solid #CFE3DC;border-radius:100px;padding:7px 14px 7px 10px;font-family:'IBM Plex Mono',monospace;font-size:11.8px;letter-spacing:.04em;color:#12544A;} .bdot{width:7px;height:7px;background:#1F7A68;border-radius:50%;flex-shrink:0;} / ── Grids ────────────────────────────────────── / .g2{display:grid;grid-template-columns:1fr 1fr;gap:20px;} .g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;} / ── Header ───────────────────────────────────── / .header{position:sticky;top:0;z-index:100;background:rgba(244,246,247,.86);backdrop-filter:blur(5px);border-bottom:1px solid #DCE2E4;height:67px;display:flex;align-items:center;} .header-inner{display:flex;align-items:center;justify-content:space-between;width:100%;} .logo{display:inline-flex;align-items:center;text-decoration:none;} .logo-mark{display:block;height:34px;width:230px;} .nav-row{display:flex;gap:28px;} .nav-link{font-size:14.7px;color:#46585F;text-decoration:none;} .nav-link:hover{color:#15242B;} .header-actions{display:flex;align-items:center;gap:12px;} / Mobile burger menu. State = the #nav-toggle checkbox (pure CSS, static-safe); the input stays focusable for keyboard users but is visually hidden. The .burger label and the in-menu CTA only appear in the mobile media query. / .nav-toggle{position:absolute;width:1px;height:1px;opacity:0;} .burger{display:none;} .nav-cta{display:none;} .lang-sw{border:1px solid #DCE2E4;border-radius:6px;display:flex;height:31px;overflow:hidden;} .lang-btn{padding:0 10px;display:flex;align-items:center;font-family:'IBM Plex Mono',monospace;font-size:11.8px;color:#7C8B91;cursor:pointer;} .lang-btn-on{background:#15242B;color:#fff;} / ── Section variants ─────────────────────────── / / Anchor jumps (/#how, /#evidence, /#pilot, #try …) clear the 67px sticky header. / section[id]{scroll-margin-top:84px;} .sec-pad{padding:80px 0;} .sec-pb{padding:0 0 80px;} .sec-pb72{padding:0 0 72px;} .sec-try{padding:94px 0;} .sec-dark{background:#15242B;} .notify-dark{background:#15242B!important;color:#fff!important;} .notify-dark .q-notification__message{color:#fff!important;} .sec-green{background:#E4F0EC;border-top:1px solid #CFE3DC;border-bottom:1px solid #CFE3DC;} / ── Hero ─────────────────────────────────────── / .hero-cols{display:flex;gap:48px;align-items:center;} .hero-copy{flex:1;min-width:0;} .hero-cta{display:flex;gap:12px;flex-wrap:wrap;} .mock{flex:1;min-width:0;max-width:475px;background:#fff;border:1px solid #DCE2E4;box-shadow:0 24px 60px -34px rgba(21,36,43,.4);border-radius:14px;overflow:hidden;} .mock-top{background:#15242B;padding:11px 16px;display:flex;align-items:center;gap:10px;} .mock-dot{width:8px;height:8px;background:#1F7A68;border-radius:50%;} .mock-top-text{font-family:'IBM Plex Mono',monospace;font-size:11.8px;color:#CDD8DC;} .mock-body{padding:16px 20px;} .dx-label{font-family:'IBM Plex Mono',monospace;font-size:11.2px;letter-spacing:.14em;text-transform:uppercase;color:#7C8B91;margin-bottom:12px;} .dxc{background:#FCFDFD;border:1px solid #DCE2E4;border-radius:9px;padding:14px 15px;margin-bottom:10px;} .dxhead{display:flex;align-items:center;gap:10px;margin-bottom:6px;} .dxcheck{position:relative;display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;background:#1F7A68;border-radius:4px;flex-shrink:0;} .dxcheck::after{content:'';display:block;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);margin-top:-2px;} .dxn{font-size:15.7px;font-weight:600;color:#15242B;} .dxb{font-size:13.3px;line-height:1.5;color:#46585F;margin-bottom:10px;} / text-decoration:none + hover affordance: the chip may render as a live to the cited guideline (see dx_card's chip_href). / .dxchip{display:inline-flex;align-items:center;background:#E4F0EC;border:1px solid #CFE3DC;border-radius:4px;padding:4px 10px;font-family:'IBM Plex Mono',monospace;font-size:11.8px;color:#12544A;text-decoration:none;} a.dxchip:hover{border-color:#1F7A68;} / ── How it works ─────────────────────────────── / .how-steps{margin-bottom:14px;} .how-grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:720px;margin:0 auto 36px;} / ── Step cards ───────────────────────────────── / .step-card{padding:21px 19px;} .snum{font-family:'IBM Plex Mono',monospace;font-size:12.5px;font-weight:500;color:#1F7A68;margin-bottom:12px;} .sph{background:#fff;border:1px solid #DCE2E4;border-radius:7px;height:140px;overflow:hidden;position:relative;margin-bottom:14px;cursor:pointer;transition:border-color .15s,box-shadow .15s;} .sph:hover{border-color:#1F7A68;box-shadow:0 4px 14px rgba(21,36,43,.10);} .sph-img{position:absolute;inset:0;width:100%;height:100%;} .sph-img .q-imgimage{object-fit:cover;object-position:top center;} .sph-zoom{position:absolute;top:8px;right:8px;width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:6px;background:rgba(21,36,43,.62);color:#fff;font-size:14px;line-height:1;opacity:0;transition:opacity .15s;pointer-events:none;} .sph:hover .sph-zoom{opacity:1;} / ── Step screenshot popup ────────────────────── / .step-modal{width:min(760px,92vw);padding:22px 22px 20px;gap:6px;border-radius:12px;} .step-modal .snum{margin-bottom:6px;} .step-modal-img{width:100%;border:1px solid #DCE2E4;border-radius:8px;margin:6px 0 4px;} .step-modal-close{align-self:flex-end;margin-top:8px;} / ── Capability icon ──────────────────────────── / .cicon{width:34px;height:34px;background:#E4F0EC;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:17px;color:#12544A;margin-bottom:12px;} / ── Evidence ─────────────────────────────────── / .ev-cols{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start;} .ev-quote{border-left:2px solid #2F4651;padding-left:16px;margin-bottom:28px;} .ev-quote-text{font-family:'IBM Plex Mono',monospace;font-size:12.8px;line-height:1.56;color:#AEBCC1;} .ev-chips{display:flex;flex-wrap:wrap;gap:8px;} .ev-chip{border:1px solid #2F4651;border-radius:5px;padding:6px 10px;font-family:'IBM Plex Mono',monospace;font-size:11.2px;color:#BFCACE;} / ── Accuracy bar chart ───────────────────────── / .chart-head{font-size:14.4px;font-weight:600;color:#fff;margin-bottom:4px;} .chart-note{font-family:'IBM Plex Mono',monospace;font-size:10.6px;line-height:1.5;color:#7F939A;margin-bottom:22px;} .chart-disc{font-family:'IBM Plex Mono',monospace;font-size:9.9px;line-height:1.6;color:#6C8088;margin-top:14px;} .bar-row{display:grid;grid-template-columns:110px 1fr 38px;gap:10px;align-items:center;margin-bottom:12px;} .bar-spec{font-family:'IBM Plex Sans',sans-serif;font-size:12.5px;color:#CDD8DC;text-align:right;} .bar-val{font-family:'IBM Plex Mono',monospace;font-size:11.8px;color:#9FDCCE;} .btrack{background:#13232A;border-radius:5px;height:18px;overflow:hidden;} .bfill{background:linear-gradient(90deg,#1F7A68,#2C9C85);border-radius:5px;height:100%;} / ── Platform updates (NiceGUI ui.timeline) ───── / / min-width:0 lets the 1fr tracks shrink below the min-content width of long unwrappable news URLs (which otherwise force horizontal overflow on mobile). / .pu-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 56px;align-items:start;} .pu-cols>div{min-width:0;} .pu-timeline.q-timeline{padding-top:5px;} .pu-timeline .q-timelinesubtitle{font-family:'IBM Plex Mono',monospace;font-weight:400;font-size:11.5px;line-height:18px;letter-spacing:0;text-transform:none;opacity:1;margin:0 0 4px;color:#7C8B91;} .pu-timeline .q-timelinetitle{font-family:'IBM Plex Sans',sans-serif;font-size:16.6px;font-weight:600;line-height:1.14;letter-spacing:-.01em;margin:0 0 4px;color:#15242B;} .pu-timeline .q-timelinecontent{padding-bottom:26px;font-family:'IBM Plex Sans',sans-serif;font-size:14.4px;line-height:1.53;color:#46585F;} / ::before = dot (solid green + page-coloured ring) · ::after = connector line (light grey) / .pu-timeline .q-timelinedot::before{background:#1F7A68;width:10px;height:10px;left:2.5px;top:5px;box-shadow:0 0 0 3px #F4F6F7;} .pu-timeline .q-timelinedot::after{background:#DCE2E4;width:2px;left:6.5px;} .pu-seeall{padding-left:40px;margin-top:2px;} .see-all{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:#12544A;text-decoration:none;cursor:pointer;} / "See more" expander shared by both sites: native
, so it survives the static IIS snapshot (no server round-trip). Structure, under a .pu-feed wrapper: the always-visible timeline, then holding the summary trigger and the collapsed timeline. / .pu-more>summary{list-style:none;cursor:pointer;padding-left:40px;font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:#12544A;} .pu-more>summary::-webkit-details-marker{display:none;} .pu-more[open]>summary{display:none;} / once open, the two
lists must read as one timeline: drop the inter-list gap (ul margins + the .pu-timeline 5px padding) and restore the connector line Quasar removes from the last entry of every list (.q-timelineentry:last-child) so it bridges into the expanded part / .pu-feed:has(>.pu-more[open])>.pu-timeline{margin-bottom:0;} .pu-feed:has(>.pu-more[open])>.pu-timeline .q-timelineentry:last-child .q-timelinedot::after{content:"";} .pu-more[open] .pu-timeline.q-timeline{margin-top:0;padding-top:0;} .news-link{display:inline-block;margin-top:6px;font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:#12544A;text-decoration:none;overflow-wrap:anywhere;} .news-link:hover{text-decoration:underline;} / ── Try it ───────────────────────────────────── / .try-row{display:flex;justify-content:space-between;align-items:center;gap:40px;flex-wrap:wrap;} .also-avail{font-family:'IBM Plex Mono',monospace;font-size:11.8px;line-height:19px;color:#46585F;} .also-avail a{color:#12544A;text-decoration:underline;text-decoration-color:#BCDACF;} / ── Trust ────────────────────────────────────── / .trust-cat{font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:#1F7A68;margin-bottom:20px;} .trust-div{border-top:1px dashed #DCE2E4;margin-top:24px;padding-top:18px;} .trust-note{font-family:'IBM Plex Mono',monospace;font-size:11.2px;line-height:1.6;color:#7C8B91;} .chi{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px;} .chk{width:18px;height:18px;background:#E4F0EC;border:1px solid #1F7A68;border-radius:50%;flex-shrink:0;margin-top:3px;} .chi-text{font-size:15.2px;line-height:1.58;color:#46585F;} / ── Pilot form ───────────────────────────────── / .pilot-form{max-width:660px;} .btn-pilot{box-sizing:border-box;width:203px;height:48px;background:#1F7A68;border-radius:7px;} .pilot-desc{font-size:18.9px;line-height:1.587;color:#AEBCC1;max-width:580px;margin-bottom:48px;} .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px;} .flabel{display:block;font-family:'IBM Plex Mono',monospace;font-size:11.2px;line-height:18px;letter-spacing:.08em;text-transform:uppercase;color:#8AA0A7;margin-bottom:6px;} .finput, .finput .q-fieldcontrol::before, .finput .q-fieldcontrol::after { border: none !important; } .finput .q-fieldcontrol { background: #1C2E36; border: 1px solid #2F4651; border-radius: 7px; padding: 0 14px; height: 44px !important; transition: border-color .15s; } .finput:has(textarea) .q-fieldcontrol { height: 84px !important; } .finput:focus-within .q-fieldcontrol { border-color: #AEBCC1 !important; } .finput .q-fieldnative { font-family: 'IBM Plex Sans', sans-serif; font-size: 15.2px; line-height: 20px; color: #CDD8DC; padding: 12px 0 0 !important; } .finput input.q-fieldnative { padding: 0 !important; } .finput .q-fieldnative::placeholder { color: #757575 !important; opacity: 1; } .finput textarea { resize: none !important; scrollbar-width: none; -ms-overflow-style: none; } .finput textarea::-webkit-scrollbar { display: none; } .pilot-consent{margin-top:14px;font-family:'IBM Plex Sans',sans-serif;font-weight:400;font-size:10px;line-height:13px;color:#757575;} .pilot-consent a{color:#757575;text-decoration:underline;} .pilot-consent a:hover{color:#AEBCC1;} / ── Footer ───────────────────────────────────── / .footer{background:#F4F6F7;border-top:1px solid #DCE2E4;padding:56px 0 40px;} .footer-avail-row{display:flex;align-items:center;gap:10px;margin-bottom:40px;flex-wrap:wrap;} .footer-avail{font-family:'IBM Plex Mono',monospace;font-size:12.5px;font-weight:500;color:#15242B;} .footer-bottom{border-top:1px solid #DCE2E4;padding-top:30px;display:flex;justify-content:space-between;align-items:stretch;flex-wrap:wrap;gap:24px;} .footer-brand-col{max-width:420px;} .footer-brand{font-family:'Spectral',serif;font-size:16.8px;font-weight:400;color:#15242B;margin-bottom:8px;} .footer-tagline{font-size:13.1px;line-height:1.6;color:#7C8B91;margin:0;} .footer-year{font-size:13.1px;color:#7C8B91;margin-top:28px;} .footer-links-col{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;} .footer-links-group{display:flex;flex-direction:column;gap:4px;} .footer-link{font-size:14.1px;line-height:1.4;color:#46585F;text-decoration:none;} .footer-email{font-family:'IBM Plex Mono',monospace;font-size:11.2px;color:#7C8B91;} .footer-legal{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;margin-top:28px;font-family:'IBM Plex Sans',sans-serif;font-weight:400;font-size:11px;line-height:21px;color:#7C8B91;} .footer-legal a{color:#7C8B91;text-decoration:none;} .footer-legal a:hover{color:#46585F;} .cc-settings{cursor:pointer;} .footer-legal .cc-settings:hover{color:#46585F;} / ── Legal pages (Medical Disclaimer, Privacy Policy, Terms) ── / .legal{max-width:760px;} .legal-meta{margin-bottom:22px;} .legal-meta-line{display:block;font-family:'IBM Plex Mono',monospace;font-size:12.5px;line-height:1.7;color:#7C8B91;} .legal-sec{margin-top:34px;} .legal-sec:first-of-type{margin-top:6px;} / legal-head/legal-sub render as real
/
— margins pinned (see .h2). / .legal-head{display:block;font-family:'Spectral',serif;font-size:21px;font-weight:500;line-height:1.2;letter-spacing:-.01em;color:#15242B;margin:0 0 12px;} .legal-sub{display:block;font-family:'IBM Plex Sans',sans-serif;font-size:15.4px;font-weight:600;line-height:1.3;color:#15242B;margin:22px 0 10px;} .legal-p{display:block;font-size:15.5px;line-height:1.68;color:#46585F;margin-bottom:14px;} .legal-p:last-child{margin-bottom:0;} .legal-lead{margin-bottom:8px;} .legal-p a{color:#1F7A68;text-decoration:underline;text-decoration-color:#BCDACF;} .legal-p a:hover{text-decoration-color:#1F7A68;} .legal-list{margin:0 0 14px;padding-left:20px;list-style:disc;} .legal-list:last-child{margin-bottom:0;} .legal-li{font-size:15.5px;line-height:1.68;color:#46585F;} .legal-li::marker{color:#1F7A68;} / ── Desktop app downloads ────────────────────── / .dl-wrap{max-width:760px;} / Quasar expansion shell — one bordered card per OS. scroll-margin clears the 67px sticky header on #windows/#macos/#linux jumps. / .dl-exp{background:#fff;border:1px solid #DCE2E4;border-radius:10px;margin-bottom:12px;overflow:hidden;scroll-margin-top:84px;} .dl-exp .q-item{display:flex;align-items:center;min-height:52px;padding:8px 16px;} .dl-exp .q-itemsection--side{min-width:0;color:#7C8B91;} .dl-exp-ic{font-size:20px;color:#46585F;margin-right:11px;} .dl-exp-title{flex:1;font-family:'IBM Plex Sans',sans-serif;font-size:15px;color:#15242B;} .dl-exp-title b{font-weight:600;} / padding-top is 2× the 12px badge→buttons gap, for extra breathing room below the expansion header. / .dl-exp .nicegui-expansion-content{padding:24px 16px 18px;gap:0;} / Processor-architecture groups inside the open card / .dl-row{display:flex;flex-wrap:wrap;gap:22px 56px;} .dl-group{display:flex;flex-direction:column;gap:12px;} / Single on-palette green badge (matches the site's .badge / .ev-chip accent). / .dl-badge{align-self:flex-start;border-radius:6px;padding:5px 10px;font-family:'IBM Plex Mono',monospace;font-size:11.8px;line-height:1.2;background:#E4F0EC;color:#12544A;} .dl-badge b{font-weight:600;} / Download buttons (styled ui.link) / .dl-btns{display:flex;flex-wrap:wrap;gap:10px;} .dl-btn{display:inline-flex;align-items:center;gap:8px;font-family:'IBM Plex Sans',sans-serif;font-size:14px;font-weight:500;line-height:1;border:1px solid #DCE2E4;border-radius:7px;padding:10px 15px;background:#fff;color:#15242B;text-decoration:none;white-space:nowrap;transition:opacity .15s,border-color .15s;} .dl-btn:hover{border-color:#1F7A68;} .dl-btn-primary{background:#15242B;border-color:#15242B;color:#fff;} .dl-btn-primary:hover{border-color:#15242B;opacity:.85;} .dl-btn-ic{font-size:17px;} / ── Cookie consent (GDPR opt-in) ─────────────── / .cc-banner{position:fixed;left:0;right:0;bottom:0;z-index:300;background:#15242B;border-top:1px solid #2C424C;padding:16px 0;box-shadow:0 -12px 32px -22px rgba(0,0,0,.55);} .cc-hidden{display:none!important;} .cc-inner{max-width:1120px;margin:0 auto;padding:0 28px;display:flex;align-items:center;gap:20px 28px;flex-wrap:wrap;} .cc-text{flex:1;min-width:260px;font-family:'IBM Plex Sans',sans-serif;font-size:13.3px;line-height:1.55;color:#AEBCC1;} .cc-text a{color:#79C9B6;text-decoration:underline;} .cc-text a:hover{color:#9FDCCE;} .cc-actions{display:flex;gap:10px;flex-shrink:0;} .cc-btn{font-family:'IBM Plex Sans',sans-serif;font-size:13.6px;font-weight:500;line-height:1;border-radius:7px;padding:11px 20px;border:1px solid transparent;cursor:pointer;white-space:nowrap;transition:opacity .15s,border-color .15s;} .cc-accept{background:#1F7A68;color:#fff;} .cc-accept:hover{opacity:.85;} .cc-decline{background:transparent;color:#CDD8DC;border-color:#2F4651;} .cc-decline:hover{border-color:#AEBCC1;} / ── R&D / Research page ──────────────────────── / / Hero: full-width intro + a mono availability line under a hairline rule. / .rd-hero-copy{max-width:840px;} .rd-hero-lede{max-width:660px;margin-bottom:0;} .rd-avail{border-top:1px solid #DCE2E4;margin-top:36px;padding-top:26px;} .rd-avail-line{font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:500;letter-spacing:.02em;color:#15242B;} / Block rhythm; --div adds the hairline dividers between the mockup's sections. / .rd-block{margin-top:66px;} .rd-block--div{margin-top:64px;padding-top:56px;border-top:1px solid #DCE2E4;} / Status pill spacing + a muted (grey) variant for "Research in progress". / .rd-pill{margin-bottom:18px;} .badge-mute{background:#EEF1F1;border-color:#DDE3E4;color:#5B6570;} .badge-mute .bdot{background:#7C8B91;} / Grey section label (the mockup uses grey, not green, for these three). / .slabel-mute{color:#5B6570;} / Spectral sub-heading (mockup H3 — heavier + smaller than .h2). / .rd-subhead{font-family:'Spectral',serif;font-size:21px;font-weight:600;line-height:1.25;letter-spacing:-.01em;color:#15242B;margin:0 0 22px;} / Two-column split: copy on the left, a document mock-up on the right. / .rd-split{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:start;margin-bottom:44px;} .rd-copy .rd-lede{max-width:520px;} .rd-fig-col{display:flex;flex-direction:column;gap:14px;} / Figures / .rd-figure{display:block;width:100%;} .rd-figure svg{display:block;width:100%;height:auto;} .rd-fig-cap{font-family:'IBM Plex Mono',monospace;font-size:12px;line-height:1.6;color:#7C8B91;} .rd-fig-cap-center{text-align:center;max-width:680px;margin:2px auto 0;} .rd-graph{background:#fff;border:1px solid #DCE2E4;border-radius:12px;padding:34px 34px 26px;display:flex;flex-direction:column;gap:20px;margin-bottom:52px;} / Document mock-up — a parsed clinical PDF (cream "paper", mono type). / .rd-doc{background:#FBFAF5;border:1px solid #E6E1D5;border-radius:8px;padding:22px;font-family:'IBM Plex Mono',monospace;} .rd-doc-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px;} .rd-doc-cell{display:flex;flex-direction:column;} .rd-doc-field{flex:1;background:#fff;border:1px solid #D8D4C6;border-radius:4px;padding:10px 12px;} .rd-doc-fh{font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:#5B6570;margin-bottom:8px;} .rd-doc-fv{font-size:11.5px;line-height:1.5;color:#1E2D3B;} .rd-doc-fs{font-size:9.5px;color:#9A917F;margin-top:1px;} .rd-doc-coord{font-size:9px;color:#AFA98F;margin-top:7px;} .rd-doc-hist{background:#1F7A68;border-radius:4px;padding:12px 13px;margin-bottom:18px;} .rd-doc-hist-h{font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:#BFE0D3;margin-bottom:8px;} .rd-doc-hist-b{font-size:11px;line-height:1.62;color:#EAF3EF;} .rd-doc-dxh{font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:#5B6570;margin-bottom:6px;} .rd-doc-dxv{font-size:11px;color:#1E2D3B;} / Document mock-up — the guideline section navigator. / .rd-nav{background:#FBFAF5;border:1px solid #E6E1D5;border-radius:8px;padding:22px;font-family:'IBM Plex Mono',monospace;} .rd-nav-match{display:flex;align-items:center;justify-content:space-between;gap:12px;background:rgba(31,122,104,.14);border-radius:3px;padding:9px 12px;margin-bottom:16px;} .rd-nav-match-t{font-size:11px;font-weight:500;color:#1F7A68;} .rd-nav-tag{font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:#1F7A68;opacity:.75;white-space:nowrap;} .rd-nav-bar{height:6px;background:#E7E4D8;border-radius:3px;margin:10px 0;} .rd-nav-indent{margin-left:22px;} .rd-nav-h{margin:16px 0 0 22px;font-size:10.5px;line-height:1.4;} .rd-nav-h1{color:#1E2D3B;} .rd-nav-h2{color:#5B6570;} / Comparison table — classic flat RAG vs hierarchical graph RAG. / .rd-cmp-wrap{margin-top:8px;} .rd-cmp-head{display:grid;grid-template-columns:1fr 1fr;gap:44px;padding-bottom:12px;} .rd-cmp-h{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;} .rd-cmp-h-l{color:#5B6570;} .rd-cmp-h-r{color:#1F7A68;} .rd-cmp-row{display:grid;grid-template-columns:1fr 1fr;gap:44px;padding:17px 0;border-top:1px solid #E1E4E0;} .rd-cmp-l{font-size:14.5px;line-height:1.5;color:#5B6570;} .rd-cmp-r{display:flex;gap:12px;font-size:14.5px;line-height:1.5;color:#1E2D3B;} .rd-cmp-dot{width:6px;height:6px;border-radius:50%;background:#1F7A68;flex-shrink:0;margin-top:8px;} / Infrastructure cards / .rd-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;} .rd-card{background:#fff;border:1px solid #DCE2E4;border-radius:8px;padding:22px 20px;display:flex;flex-direction:column;gap:12px;} .rd-card-tag{font-family:'IBM Plex Mono',monospace;font-size:13.5px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:#5B6570;} .rd-card-text{font-size:14px;line-height:1.57;color:#46585F;} / "Currently in development" cards (arrow · heading · blurb). / .rd-dev-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;} .rd-dev-card{background:#fff;border:1px solid #DCE2E4;border-radius:8px;padding:23px 24px;display:grid;grid-template-columns:auto 1fr;column-gap:16px;row-gap:8px;} .rd-dev-arrow{grid-column:1;grid-row:1;font-family:'IBM Plex Mono',monospace;font-size:12px;color:#5B6570;opacity:.6;padding-top:3px;} .rd-dev-h{grid-column:2;grid-row:1;margin:0;font-family:'IBM Plex Sans',sans-serif;font-size:15px;font-weight:600;line-height:1.5;color:#15242B;} .rd-dev-text{grid-column:2;grid-row:2;font-size:13.5px;line-height:1.55;color:#46585F;} / Closing CTA / .rd-cta-box{background:#15242B;border-radius:12px;padding:38px 46px;display:flex;align-items:center;justify-content:space-between;gap:28px 40px;flex-wrap:wrap;} .rd-cta-h{margin:0;max-width:400px;font-family:'Spectral',serif;font-size:26px;font-weight:500;line-height:1.19;color:#F4F6F7;} .rd-cta-actions{display:flex;gap:14px;flex-wrap:wrap;} / ── Responsive ───────────────────────────────── / @media(max-width:768px){ .g2,.g3,.ev-cols,.form-grid,.pu-cols,.rd-split,.rd-dev-grid{grid-template-columns:1fr!important;} .rd-grid{grid-template-columns:1fr 1fr!important;} / Comparison table stacks: hide the paired header, tighten the row gap. / .rd-cmp-head{display:none!important;} .rd-cmp-row{grid-template-columns:1fr!important;gap:8px!important;} .rd-cta-box{padding:30px 26px;} .hero-cols,.try-row,.dl-row{flex-direction:column!important;} .footer-bottom{flex-direction:column!important;} .cc-actions{width:100%;} .cc-btn{flex:1;} / Header: burger menu; nav becomes a dropdown under the sticky bar. The logo keeps its desktop size — it fits: 230px logo + 40px burger + 56px gutters = 326px < 375px. / .header-actions .btn{display:none;} .burger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;margin-right:-8px;cursor:pointer;} .burger-bar{display:block;width:20px;height:2px;background:#15242B;margin:0 auto;border-radius:1px;transition:transform .2s,opacity .2s;} / .header is position:sticky, so it is the containing block for the panel. / .nav-row{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:#F4F6F7;border-bottom:1px solid #DCE2E4;padding:6px 28px 18px;box-shadow:0 18px 30px -24px rgba(21,36,43,.35);} .nav-link{padding:12px 0;font-size:15.5px;} .nav-cta{display:inline-flex;justify-content:center;margin-top:10px;} .nav-toggle:checked ~ .nav-row{display:flex;} / Burger morphs into an X while the menu is open. */ .nav-toggle:checked ~ .header-actions .burger-bar:nth-child(1){transform:translateY(7px) rotate(45deg);} .nav-toggle:checked ~ .header-actions .burger-bar:nth-child(2){opacity:0;} .nav-toggle:checked ~ .header-actions .burger-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg);} .nav-toggle:focus-visible ~ .header-actions .burger{outline:2px solid #1F7A68;outline-offset:2px;border-radius:6px;} }