/* ============================================================================================= console.css — Superscript API & SDK page. Design language is the "Console" direction from the ecosystem explorations: near-black ground, hairline rules, mono-forward chrome, data density, two accents. Light and dark are both first class and driven off data-theme on ; every colour is a token, none are hardcoded outside the two token blocks. The one deliberate exception is the code and terminal surfaces, which stay dark in both themes the way our own dev center does. ============================================================================================= */ @font-face { font-family:"suisseIntl"; font-weight:400; src:url("/assets/fonts/SuisseIntl_Regular-s.p.fbe3d914.otf") format("opentype"); font-display:swap; } @font-face { font-family:"suisseIntl"; font-weight:600; src:url("/assets/fonts/SuisseIntl_SemiBold-s.p.7dc3bb91.woff2") format("woff2"); font-display:swap; } @font-face { font-family:"suisseIntl"; font-weight:700; src:url("/assets/fonts/SuisseIntl_Bold-s.p.e242c6e1.otf") format("opentype"); font-display:swap; } @font-face { font-family:"suisseMono"; font-weight:400; src:url("/assets/fonts/SuisseIntlMono_Regular-s.p.eca58c1e.otf") format("opentype"); font-display:swap; } :root { --sans:"suisseIntl","Helvetica Neue",Helvetica,Arial,sans-serif; --mono:"suisseMono",ui-monospace,"SF Mono",Menlo,monospace; --pad:clamp(20px,4.4vw,72px); /* code surfaces: identical in both themes */ --code-bg:#0E1013; --code-bg-2:#16191E; --code-line:#252A31; --code-fg:#DDE3EB; --code-dim:#6E7885; --code-key:#57C1FF; --code-str:#CDF23A; --code-acid:#CDF23A; } /* ---------- dark (default) ---------- */ :root, [data-theme="dark"] { --bg:#08090B; --bg-2:#0E1013; --bg-3:#14171B; --bg-4:#1B1F25; --fg:#E9ECF1; --fg-2:rgba(255,255,255,.60); --fg-3:rgba(255,255,255,.36); --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.20); --blue:#00A3FF; --blue-soft:rgba(0,163,255,.14); --acid:#CDF23A; --acid-soft:rgba(205,242,58,.14); --sheen:rgba(255,255,255,.04); --shadow:0 30px 70px -34px rgba(0,0,0,.9); color-scheme: dark; } /* ---------- light ---------- */ [data-theme="light"] { --bg:#FAFAF8; --bg-2:#FFFFFF; --bg-3:#F1F2F5; --bg-4:#E7E9ED; --fg:#0B1220; --fg-2:rgba(11,18,32,.62); --fg-3:rgba(11,18,32,.40); --line:rgba(11,18,32,.12); --line-2:rgba(11,18,32,.22); --blue:#0080D6; --blue-soft:rgba(0,128,214,.10); --acid:#4A7C00; --acid-soft:rgba(74,124,0,.12); --sheen:rgba(11,18,32,.03); --shadow:0 30px 60px -34px rgba(11,18,32,.35); color-scheme: light; } * { box-sizing:border-box; } body { margin:0; background:var(--bg); color:var(--fg); font-family:var(--sans); overflow-x:hidden; -webkit-font-smoothing:antialiased; transition:background .35s ease, color .35s ease; } img { max-width:100%; display:block; } a { color:inherit; } ::selection { background:var(--blue); color:#fff; } .mono { font-family:var(--mono); font-size:11px; letter-spacing:-.03em; text-transform:uppercase; font-weight:400; } .wrap { max-width:1480px; margin:0 auto; padding:0 var(--pad); width:100%; } .dotmark { display:inline-block; width:11px; height:11px; margin-right:9px; vertical-align:-1px; background: radial-gradient(circle 1.4px at 1.5px 5.5px, currentColor 99%, transparent 100%), radial-gradient(circle 1.4px at 5.5px 1.5px, currentColor 99%, transparent 100%), radial-gradient(circle 1.4px at 5.5px 9.5px, currentColor 99%, transparent 100%), radial-gradient(circle 1.4px at 9.5px 5.5px, currentColor 99%, transparent 100%); } .kicker { margin:0 0 20px; display:flex; align-items:center; color:var(--fg-2); } .kicker .dotmark { color:var(--blue); } .h2 { margin:0; font-weight:600; letter-spacing:-.033em; line-height:1.02; font-size:clamp(29px,3.9vw,56px); max-width:22ch; } .lede { margin:22px 0 0; max-width:64ch; font-size:clamp(14.5px,1.08vw,18px); line-height:1.55; color:var(--fg-2); } .sec { padding:clamp(84px,13vh,152px) 0; border-top:1px solid var(--line); } .rv { opacity:0; transform:translateY(20px); } .rv.is-in { opacity:1; transform:none; transition:opacity .7s ease, transform .8s cubic-bezier(.16,1,.3,1); } @media (prefers-reduced-motion:reduce) { .rv { opacity:1; transform:none; } * { animation:none !important; transition-duration:.01ms !important; } } /* ============================================ nav */ .nav { position:fixed; top:0; left:0; right:0; z-index:60; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:13px var(--pad); background:color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); } .nav__mark { height:15px; width:auto; } [data-theme="dark"] .nav__mark, [data-theme="dark"] .foot__mark { filter:brightness(0) invert(1); } .nav__right { display:flex; align-items:center; gap:16px; } .nav__meta { color:var(--fg-3); } .tgl { display:inline-flex; align-items:center; gap:0; border:1px solid var(--line-2); border-radius:999px; padding:2px; background:transparent; cursor:pointer; } .tgl button { appearance:none; border:0; background:transparent; color:var(--fg-3); font-family:var(--mono); font-size:10px; letter-spacing:.02em; text-transform:uppercase; padding:5px 11px; border-radius:999px; cursor:pointer; transition:background .2s ease, color .2s ease; } .tgl button.on { background:var(--fg); color:var(--bg); } /* ============================================ hero */ .hero { position:relative; min-height:100svh; display:flex; align-items:center; padding:96px 0 48px; overflow:hidden; } .hero__grid { position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(to right, var(--line) 1px, transparent 1px), linear-gradient(to bottom, var(--line) 1px, transparent 1px); background-size:88px 88px; -webkit-mask-image:radial-gradient(72% 62% at 46% 45%, #000 18%, transparent 100%); mask-image:radial-gradient(72% 62% at 46% 45%, #000 18%, transparent 100%); } .hero__wrap { position:relative; display:grid; grid-template-columns:1fr .95fr; gap:clamp(28px,4vw,76px); align-items:center; } .hero__h1 { margin:0; font-weight:600; letter-spacing:-.038em; line-height:.99; font-size:clamp(34px,4.5vw,70px); } .hero__sub { margin:24px 0 0; max-width:46ch; font-size:clamp(14.5px,1.08vw,17.5px); line-height:1.55; color:var(--fg-2); } .hero__meta { display:grid; grid-template-columns:repeat(3,1fr); margin-top:38px; border-top:1px solid var(--line); } .hero__meta div { padding:16px 18px 0 0; } .hero__meta div + div { border-left:1px solid var(--line); padding-left:18px; } .hero__meta span { display:block; color:var(--fg-3); } .hero__meta b { display:block; margin-top:8px; font-weight:600; font-size:clamp(20px,1.9vw,30px); letter-spacing:-.03em; } .hero__meta div:first-child b { color:var(--blue); } /* terminal: theme-invariant */ .term { background:var(--code-bg); border:1px solid var(--code-line); font-family:var(--mono); box-shadow:var(--shadow); } .term__bar { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border-bottom:1px solid var(--code-line); color:var(--code-dim); } .term__st { color:var(--code-acid); display:inline-flex; align-items:center; gap:7px; } .term__st i { width:6px; height:6px; border-radius:50%; background:currentColor; animation:pulse 1.9s ease-in-out infinite; } @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.25} } .term__log { text-transform:none; letter-spacing:0; margin:0; padding:16px 14px; font-size:11.5px; line-height:2.05; min-height:212px; white-space:pre-wrap; color:var(--code-dim); } .term__log .l { display:block; opacity:0; transform:translateY(3px); } .term__log .l.on { opacity:1; transform:none; transition:opacity .25s ease, transform .3s ease; } .term__log b { color:var(--code-key); font-weight:400; } .term__log em { font-style:normal; color:var(--code-fg); } .term__log i { font-style:normal; color:var(--code-acid); } .term__out { display:flex; align-items:baseline; justify-content:space-between; gap:14px; padding:15px 14px; border-top:1px solid var(--code-line); background:var(--code-bg-2); } .term__out span { color:var(--code-dim); } .term__out b { font-family:var(--sans); font-weight:600; font-size:clamp(28px,3vw,44px); letter-spacing:-.04em; color:var(--code-acid); } /* ============================================ the six prices */ .px { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:clamp(30px,4.5vw,52px); } .px__c { background:var(--bg); padding:clamp(16px,1.6vw,22px); display:flex; flex-direction:column; gap:11px; transition:background .3s ease; } .px__c:hover { background:var(--bg-2); } .px__c--sp { background:var(--sheen); } .px__top { display:flex; align-items:baseline; justify-content:space-between; gap:10px; } .px__payer { color:var(--fg); } .px__rate { color:var(--fg-3); letter-spacing:-.01em; text-transform:none; white-space:nowrap; } .px__state { font-size:clamp(12.5px,1vw,15px); line-height:1.35; color:var(--fg-2); } .px__owes { display:flex; align-items:baseline; justify-content:space-between; gap:10px; border-top:1px solid var(--line); padding-top:11px; margin-top:auto; } .px__owes .mono { color:var(--fg-3); } .px__owes b { font-weight:600; font-size:clamp(21px,2vw,33px); letter-spacing:-.035em; line-height:1; color:var(--blue); } .px__owes b.zero { color:var(--acid); } .axes { display:flex; align-items:center; gap:clamp(8px,1vw,15px); margin-top:26px; color:var(--fg-3); } .axes i { font-style:normal; color:var(--blue); } .foot-note { margin:18px 0 0; color:var(--fg-3); } /* ============================================ protocol */ .eq { display:flex; flex-wrap:wrap; border:1px solid var(--line-2); margin-top:clamp(30px,4.5vw,52px); background:var(--bg-2); } .eq__part { padding:20px 24px; flex:1 1 210px; min-width:0; } .eq__part .mono { display:block; margin-bottom:10px; color:var(--fg-3); } .eq__part b { display:block; font-weight:600; font-size:clamp(16px,1.5vw,23px); letter-spacing:-.03em; line-height:1.16; } .eq__part--out b { color:var(--acid); } .eq__op { display:flex; align-items:center; padding:0 18px; color:var(--fg-3); border-left:1px solid var(--line-2); border-right:1px solid var(--line-2); } .engines { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:clamp(30px,4.5vw,52px); } .engine { background:var(--bg); padding:24px 22px 28px; } .engine__num { display:block; color:var(--blue); } .engine h4 { margin:26px 0 0; font-weight:600; font-size:clamp(21px,2vw,31px); letter-spacing:-.03em; } .engine__sub { margin:7px 0 0; color:var(--fg-3); } .engine p:last-child { margin:14px 0 0; font-size:13.5px; line-height:1.5; color:var(--fg-2); } /* ============================================ api reference */ .eps { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:clamp(30px,4.5vw,52px); } .ep { background:var(--bg); padding:clamp(16px,1.5vw,22px); display:flex; flex-direction:column; gap:8px; } .ep__l { display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .ep__v { color:var(--acid); } .ep__p { color:var(--fg); letter-spacing:-.01em; text-transform:none; font-size:12.5px; } .ep__n { margin:0; font-weight:600; font-size:clamp(15px,1.25vw,19px); letter-spacing:-.025em; } .ep__d { margin:0; font-size:13.5px; line-height:1.5; color:var(--fg-2); } .apinote { display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:22px; color:var(--fg-3); } .apinote b { color:var(--blue); font-weight:400; } /* ============================================ configurator */ .cfg { margin-top:clamp(30px,4.5vw,52px); border:1px solid var(--line-2); background:var(--bg-2); box-shadow:var(--shadow); overflow:hidden; } .cfg__bar { display:flex; align-items:center; gap:10px 14px; flex-wrap:wrap; padding:10px 14px; border-bottom:1px solid var(--line); background:var(--bg-3); } .cfg__file { color:var(--fg-3); text-transform:none; } .cfg__presets { display:flex; gap:6px; flex-wrap:wrap; order:3; flex-basis:100%; } .cfg__presets button { appearance:none; border:1px solid var(--line-2); background:transparent; color:var(--fg-2); font-family:var(--mono); font-size:10px; letter-spacing:-.02em; text-transform:uppercase; padding:6px 11px; cursor:pointer; display:flex; gap:7px; align-items:center; transition:background .2s ease, color .2s ease, border-color .2s ease; white-space:nowrap; } .cfg__presets button:hover { color:var(--fg); border-color:var(--fg-3); } .cfg__presets button i { font-style:normal; color:var(--fg-3); } .cfg__presets button.on { background:var(--blue); border-color:var(--blue); color:#fff; } .cfg__presets button.on i { color:rgba(255,255,255,.68); } .cfg__meter { display:flex; align-items:center; gap:10px; color:var(--fg-3); order:2; margin-left:auto; } .cfg__track { width:82px; height:3px; background:var(--line-2); position:relative; } .cfg__track i { position:absolute; inset:0 auto 0 0; width:var(--p,0%); background:var(--blue); transition:width .45s cubic-bezier(.16,1,.3,1); } /* The module rail is the tallest column by a long way, so it is the one that scrolls. Capping the body against the viewport keeps the whole instrument on one screen; the other two columns hang from the top rather than centring, so nothing floats in the middle of a tall column. */ .cfg__body { display:grid; grid-template-columns:.86fr 1fr 1.14fr; grid-template-rows:minmax(0,1fr); /* a definite height, not max-height: an auto grid row sizes to its tallest child and then spills past the container, so the row has to be 1fr of something real before overflow can clip */ height:min(720px, calc(100svh - 202px)); min-height:430px; } .cfg__col { overflow:hidden; } #cfgMods { flex:1; min-height:0; overflow-y:auto; padding-right:8px; margin-right:-8px; -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 10px, #000 calc(100% - 14px), transparent 100%); mask-image:linear-gradient(180deg, transparent 0, #000 10px, #000 calc(100% - 14px), transparent 100%); } #cfgMods::-webkit-scrollbar { width:3px; } #cfgMods::-webkit-scrollbar-thumb { background:var(--line-2); } .cfg__col { padding:clamp(14px,1.4vw,20px); border-right:1px solid var(--line); min-width:0; display:flex; flex-direction:column; } .cfg__col:last-child { border-right:0; } .cfg__lab { color:var(--fg-3); margin-bottom:14px; display:flex; justify-content:space-between; gap:10px; } .mg { margin-bottom:2px; } .mg + .mg { margin-top:15px; padding-top:15px; border-top:1px solid var(--line); } .mg__h { font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-3); margin-bottom:7px; } .md { display:flex; align-items:flex-start; gap:11px; padding:7px 8px 7px 0; cursor:pointer; border:0; background:transparent; text-align:left; width:100%; transition:background .15s ease; } .md:hover { background:var(--sheen); } .md__sw { flex:0 0 auto; width:24px; height:13px; border-radius:999px; border:1px solid var(--line-2); position:relative; margin-top:2px; transition:background .22s ease, border-color .22s ease; } .md__sw::after { content:""; position:absolute; top:1px; left:1px; width:9px; height:9px; border-radius:50%; background:var(--fg-3); transition:transform .24s cubic-bezier(.2,.8,.2,1), background .22s ease; } .md.on .md__sw { background:var(--blue); border-color:var(--blue); } .md.on .md__sw::after { transform:translateX(11px); background:#fff; } .md__t { min-width:0; } .md__n { display:block; font-family:var(--mono); font-size:11px; letter-spacing:-.02em; color:var(--fg-3); transition:color .22s ease; } .md.on .md__n { color:var(--fg); } .md__d { display:block; font-size:11.5px; line-height:1.32; color:var(--fg-3); margin-top:2px; } .md.on .md__d { color:var(--fg-2); } /* The dependency is a hover detail, not a permanent third line: 22 modules each carrying a "needs" row turns the rail into noise. Locked rows swap their description for it on hover, so the list stays two lines high and the rule is still discoverable. */ .md__req { display:none; margin-top:2px; font-family:var(--mono); font-size:9.5px; letter-spacing:-.02em; color:var(--blue); } .md.locked:hover .md__d { display:none; } .md.locked:hover .md__req { display:block; } .md.locked .md__sw { border-style:dashed; } .md.locked .md__n, .md.locked .md__d { opacity:.7; } .md.just { animation:mdjust 1.1s ease; } .md.just .md__sw { box-shadow:0 0 0 3px var(--blue-soft); } @keyframes mdjust { 0% { background:var(--blue-soft); } 100% { background:transparent; } } /* middle column: config + call trace, both theme-invariant code surfaces */ .cfg__code, .cfg__trace { background:var(--code-bg); border:1px solid var(--code-line); font-family:var(--mono); } .cfg__midscroll { flex:1; min-height:0; overflow-y:auto; padding-right:8px; margin-right:-8px; display:flex; flex-direction:column; } .cfg__midscroll::-webkit-scrollbar { width:3px; } .cfg__midscroll::-webkit-scrollbar-thumb { background:var(--line-2); } .cfg__code { flex:0 0 auto; padding:12px 14px; font-size:11px; line-height:1.62; color:var(--code-dim); white-space:pre-wrap; overflow-wrap:anywhere; margin:0; } .cfg__code .k { color:var(--code-key); } .cfg__code .s { color:var(--code-str); } .cfg__code .c { color:#4B535E; } .cfg__trace { margin-top:12px; flex:0 0 auto; display:flex; flex-direction:column; } .cfg__tracehead { flex:0 0 auto; display:flex; justify-content:space-between; gap:10px; padding:8px 12px; border-bottom:1px solid var(--code-line); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--code-dim); } .cfg__tracebody { text-transform:none; letter-spacing:0; padding:10px 12px; font-size:11px; line-height:1.95; color:var(--code-dim); } .tr { display:flex; gap:10px; align-items:baseline; opacity:0; transform:translateY(3px); } .tr.on { opacity:1; transform:none; transition:opacity .28s ease, transform .3s ease; } .tr__m { color:var(--code-acid); flex:0 0 auto; width:38px; } .tr__p { color:var(--code-fg); flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .tr__t { color:var(--code-dim); flex:0 0 auto; } .tr--out { align-items:flex-start; } .tr--out .tr__m { color:var(--code-key); } .tr--out .tr__p { white-space:normal; overflow:visible; text-overflow:clip; } .tr--out .tr__p { color:var(--code-acid); } /* ---- where it is embedded, and whose brand it wears ---- */ /* .segs and .seg set display, which beats the UA [hidden] rule, so hiding needs saying twice */ .segs[hidden], .seg[hidden] { display:none; } .segs { display:flex; flex-direction:column; gap:7px; margin-bottom:clamp(12px,1.6vh,18px); } .seg { display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .seg__l { flex:0 0 74px; color:var(--fg-3); } .seg button { appearance:none; border:1px solid var(--line-2); border-right:0; background:transparent; color:var(--fg-2); font-family:var(--mono); font-size:9.5px; letter-spacing:-.02em; padding:6px 9px; cursor:pointer; white-space:nowrap; transition:background .18s ease, color .18s ease; } .seg button:last-child { border-right:1px solid var(--line-2); } .seg button:hover { color:var(--fg); } .seg button.on { background:var(--fg); border-color:var(--fg); color:var(--bg); } .seg button[disabled] { opacity:.34; cursor:not-allowed; } .seg button[disabled]:hover { color:var(--fg-2); } /* ---- the four frames the price card can sit inside ---- */ .frm { display:none; border-radius:10px; overflow:hidden; background:#fff; border:1px solid rgba(11,18,32,.12); box-shadow:0 16px 28px -16px rgba(11,18,32,.34); } [data-where="ehr"] .frm[data-frm="ehr"], [data-where="dashboard"] .frm[data-frm="dashboard"], [data-where="portal"] .frm[data-frm="portal"], [data-where="website"] .frm[data-frm="website"] { display:block; } .frm__bar { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:7px 10px; font-family:var(--mono); font-size:9px; letter-spacing:-.02em; } .frm__bar--ehr { background:#4B2E83; color:rgba(255,255,255,.72); } .frm__bar--brand { background:var(--br-bg); color:rgba(255,255,255,.7); } .frm__bar--url { background:#F7F7F8; border-bottom:1px solid #EDEDEF; color:rgba(11,18,32,.45); } .frm__brand { color:#fff; font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:-.02em; } .frm__bar--url .frm__dot { width:7px; height:7px; border-radius:50%; background:rgba(11,18,32,.14); } .frm__url { margin-left:6px; } .frm__slot { min-width:0; } .frm__ehrbody { display:grid; grid-template-columns:minmax(0,1fr) 228px; } .frm__ehrlist { padding:8px; display:flex; flex-direction:column; gap:5px; } .frm__ehrrow { display:flex; align-items:center; gap:8px; border:1px solid #ECEEF1; border-radius:6px; padding:6px 8px; font-size:10px; color:rgba(11,18,32,.6); } .frm__ehrrow b { font-weight:600; color:#0B1220; flex:1; } .frm__ehrrow--dim { opacity:.5; } .frm__chip { font-style:normal; font-family:var(--mono); font-size:8.5px; letter-spacing:-.02em; border-radius:999px; background:#EAF6FF; color:#0072BF; padding:3px 7px; } .frm__chip--wait { background:#F1F2F5; color:rgba(11,18,32,.5); } .frm__slot--rail { border-left:1px solid #ECEEF1; background:#FAFBFC; padding:9px; } /* Inside a host UI the card is a component, not the page. It renders a size down from the standalone version so the host's own chrome still reads as the bigger thing around it. The rail overrides below are narrower still, and follow this block so they win. */ .frm .sk { padding:11px; border-radius:16px; box-shadow:0 8px 18px -10px rgba(11,18,32,.30); border:1px solid #ECEEF1; } .frm .sk__pill { font-size:10px; padding:3px 9px; } .frm .sk__mark { width:20px; height:20px; } .frm .sk__h { font-size:13.5px; margin-top:10px; } .frm .sk__card { margin-top:10px; border-radius:12px; } .frm .sk__appt { padding:8px 11px; font-size:10.5px; } .frm .sk__rows { padding:2px 11px; } .frm .sk__row { padding:4px 0; font-size:10.5px; } .frm .sk__ins { font-size:9.5px; } .frm .sk__pay { padding:9px 11px; } .frm .sk__amtlab { font-size:8.5px; } .frm .sk__amt { font-size:18px; } .frm .sk.is-pay .sk__btn { padding:7px 12px; font-size:10.5px; } .frm .sk__bal { margin-top:8px; padding:8px 11px; border-radius:11px; } .frm .sk__ballab { font-size:10px; } .frm .sk__balamt { font-size:12px; } .frm .sk__step i { width:17px; height:17px; font-size:11px; } .frm .sk__chips { margin-top:8px; gap:4px; } .frm .sk__chip { font-size:8.5px; padding:3px 7px; } .frm__portalmain { padding:11px; } /* the EHR dock is a narrow rail, so the same card renders compact in it rather than wrapping */ .frm__slot--rail .sk { padding:11px; border-radius:16px; box-shadow:none; border:1px solid #ECEEF1; } .frm__slot--rail .sk__h { font-size:13px; margin-top:11px; } .frm__slot--rail .sk__card { margin-top:11px; } .frm__slot--rail .sk__appt, .frm__slot--rail .sk__row { font-size:10.5px; } .frm__slot--rail .sk__ins { font-size:9.5px; } .frm__slot--rail .sk__pay { flex-direction:column; align-items:stretch; gap:9px; } .frm__slot--rail .sk__amt { font-size:21px; } .frm__slot--rail .sk.is-pay .sk__btn { max-width:none; text-align:center; padding:8px 12px; font-size:11px; } .frm__slot--rail .sk__bal { padding:9px 11px; border-radius:12px; } .frm__slot--rail .sk__ballab { font-size:10px; } .frm__slot--rail .sk__balamt { font-size:13px; } .frm__slot--rail .sk__step i { width:19px; height:19px; } .frm__slot--rail .sk__chips { display:none; } .frm__dashbody { padding:9px; } .frm__kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-bottom:9px; } .frm__kpis div { border:1px solid #ECEEF1; border-radius:6px; padding:6px 8px; } .frm__kpis span { display:block; font-family:var(--mono); font-size:7.5px; letter-spacing:.12em; color:rgba(11,18,32,.45); } .frm__kpis b { display:block; margin-top:2px; font-size:12.5px; font-weight:600; letter-spacing:-.02em; color:#0B1220; } .frm__portalbody { display:grid; grid-template-columns:96px minmax(0,1fr); } .frm__nav { border-right:1px solid #ECEEF1; padding:11px 0; display:flex; flex-direction:column; } .frm__nav span { padding:7px 11px; font-size:10.5px; color:rgba(11,18,32,.55); border-left:2px solid transparent; } .frm__nav .on { color:#0B1220; font-weight:600; border-left-color:var(--br-accent); } .frm__portalmain { padding:9px; } .frm__h { font-size:11.5px; font-weight:600; letter-spacing:-.02em; color:#0B1220; margin-bottom:9px; } .frm__sitehdr { background:var(--br-bg); padding:9px 12px; display:flex; align-items:center; justify-content:space-between; gap:10px; } .frm__sitenav { display:flex; align-items:center; gap:9px; font-family:var(--mono); font-size:8.5px; letter-spacing:.05em; color:rgba(255,255,255,.6); } .frm__sitenav i { width:2px; height:2px; border-radius:50%; background:rgba(255,255,255,.35); } .frm__sitebody { padding:11px 12px 13px; } /* right column: the surface stage */ /* Everything is sized to fit, so the stage never needs a visible scrollbar. It stays scrollable with the chrome hidden, purely as a safety net on very short viewports. */ .stage { position:relative; flex:1; min-height:0; display:flex; align-items:flex-start; justify-content:center; overflow-y:auto; scrollbar-width:none; -ms-overflow-style:none; } .stage::-webkit-scrollbar { display:none; } .sc { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:12px; opacity:0; visibility:hidden; transform:translateY(10px) scale(.985); transition:opacity .4s ease, transform .5s cubic-bezier(.16,1,.3,1), visibility 0s linear .45s; } .sc.on { opacity:1; visibility:visible; transform:none; transition-delay:0s; } /* a short beat on every change, so a modifier that only edits the current surface still registers */ @keyframes stagebeat { 0% { opacity:.55; } 100% { opacity:1; } } .stage.beat .sc.on { animation:stagebeat .32s ease; } .scwrap { width:100%; max-width:398px; } [data-where="ehr"] #cardWrap { max-width:100%; } .sccap { color:var(--fg-3); text-align:center; } /* raw json surface */ .rawjson { background:var(--code-bg); border:1px solid var(--code-line); font-family:var(--mono); font-size:10px; line-height:1.55; color:var(--code-dim); padding:12px; white-space:pre-wrap; margin:0; } .rawjson b { color:var(--code-acid); font-weight:400; } .rawjson .c { color:#4B535E; } .rawjson .k { color:var(--code-key); } /* ============================================================================================= Product surfaces. These are our real product UI, rebuilt to the specs in the Superscript design system skill (prototypes/skylight, /storefront, /kiosk): the Skylight widget's soft two-layer shadow over 14px inner cards on #E5E5E5, black pill buttons at 12px/500, the #C0E7EB insurance toggle, the 15px storefront tile on 0 2px 10px, and the kiosk's 46px phone chassis with its 6px Superscript-blue bezel. They stay light in both themes because the products are light; only the page around them flips. ============================================================================================= */ /* Valley Heights Health is the single fictional customer used everywhere a visual is meant to be the partner's rather than ours. Its palette is deliberately nothing like Superscript blue, so "ours" and "theirs" are never ambiguous in a screenshot. */ [data-brand="ours"] { --br-bg:#0B1220; --br-accent:#00A3FF; --br-btn:#000000; } [data-brand="theirs"] { --br-bg:#12463C; --br-accent:#1B7F6B; --br-btn:#12463C; } .pr { --pr-blue:var(--br-accent, #00A3FF); --pr-btn:var(--br-btn, #000); --pr-line:#E5E5E5; --pr-hair:#F1F1F1; --pr-lg:0 16px 26px -14px rgba(11,18,32,.30), 0 4px 9px -6px rgba(11,18,32,.14); --pr-sm:0 10px 15px -3px rgba(0,0,0,.06), 0 4px 6px -4px rgba(0,0,0,.06); font-family:var(--sans); color:#000; } /* ---- Skylight price card ---- */ .sk { background:#fff; border-radius:20px; box-shadow:var(--pr-lg); padding:13px; } .sk__top { display:flex; align-items:center; gap:8px; } .sk__mark { width:22px; height:22px; border-radius:999px; background:#F5F5F5; display:flex; align-items:center; justify-content:center; flex:0 0 auto; } .sk__pill { display:inline-flex; align-items:center; gap:6px; border-radius:999px; border:.5px solid #000; background:#fff; padding:4px 10px; font-size:11px; font-weight:600; line-height:1; box-shadow:inset 0 .4px 2.25px rgba(0,0,0,.25); } .sk__pill i { width:6px; height:6px; border-radius:999px; background:var(--pr-blue); display:inline-block; } .sk__mark svg circle:first-child { fill:var(--pr-blue); } .sk__ins svg { color:var(--pr-blue); } .sk__x { margin-left:auto; width:20px; height:20px; display:flex; align-items:center; justify-content:center; color:rgba(0,0,0,.4); font-size:13px; line-height:1; } .sk__h { margin:11px 0 0; font-size:15.5px; font-weight:600; line-height:1.18; letter-spacing:-.2px; } .sk__card { margin-top:11px; border-radius:14px; border:1px solid var(--pr-line); background:#fff; box-shadow:var(--pr-sm); overflow:hidden; } .sk__appt { padding:9px 12px; border-bottom:1px solid var(--pr-hair); font-size:12px; font-weight:600; line-height:1.2; } .sk__appt span { font-weight:400; color:rgba(0,0,0,.55); } .sk__rows { padding:3px 12px; } .sk__row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:5px 0; font-size:11.5px; line-height:1.2; } .sk__ins { display:inline-flex; align-items:center; gap:4px; font-size:11px; color:var(--pr-blue); flex:0 0 auto; } .sk__pay { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border-top:1px solid var(--pr-hair); } .sk__amtwrap { display:flex; flex-direction:column; gap:3px; } .sk__amtlab { font-family:var(--mono); font-size:9.5px; letter-spacing:-.02em; text-transform:uppercase; color:rgba(0,0,0,.5); } .sk__amt { font-size:21px; font-weight:600; letter-spacing:-.5px; line-height:1; } .sk__btn { border-radius:999px; background:var(--pr-btn); color:#fff; padding:8px 0; font-size:11.5px; font-weight:500; line-height:1; white-space:nowrap; opacity:0; max-width:0; overflow:hidden; transition:opacity .3s ease, max-width .45s cubic-bezier(.16,1,.3,1), padding .45s ease; } .sk.is-pay .sk__btn { opacity:1; max-width:180px; padding:8px 14px; } .sk__chips { display:flex; gap:5px; margin-top:9px; flex-wrap:wrap; } .sk__chip { display:inline-flex; align-items:center; gap:5px; border-radius:999px; background:#F5F5F5; padding:3px 8px; font-size:9px; line-height:1; color:rgba(0,0,0,.7); } .sk__chip b { font-weight:600; color:#000; } /* sms, on the page's own theme rather than the product's */ .smsb { margin-top:22px; display:flex; flex-direction:column; gap:5px; opacity:0; max-height:0; overflow:hidden; transition:opacity .35s ease, max-height .45s cubic-bezier(.16,1,.3,1); } .smsb.on { opacity:1; max-height:130px; } .smsb__b { align-self:flex-start; max-width:94%; background:var(--bg-3); border:1px solid var(--line); border-radius:13px 13px 13px 3px; padding:9px 12px; font-family:var(--sans); font-size:12px; line-height:1.35; color:var(--fg); } .smsb__b b { font-weight:600; } .smsb__c { color:var(--fg-3); } /* ---- outstanding balance + card-present, both inside the Skylight card ---- */ .sk__bal { display:none; align-items:center; justify-content:space-between; gap:10px; margin-top:9px; border:1px solid var(--pr-line); border-radius:12px; background:#fff; box-shadow:var(--pr-sm); padding:9px 12px; } .sk.is-bal .sk__bal { display:flex; } .sk__ballab { display:block; font-size:11px; color:rgba(0,0,0,.55); } .sk__balamt { display:block; margin-top:2px; font-size:13px; font-weight:600; letter-spacing:-.2px; } .sk__step { display:flex; gap:6px; } .sk__step i { width:19px; height:19px; border-radius:999px; border:1px solid var(--pr-line); display:flex; align-items:center; justify-content:center; font-style:normal; font-size:12px; color:rgba(0,0,0,.6); } .sk__chip--term, .sk__chip--rcpt { display:none; } .sk.is-pos .sk__chip--term { display:inline-flex; } .sk.is-rcpt .sk__chip--rcpt { display:inline-flex; } /* ---- public price estimator ---- */ .est { border-radius:12px; overflow:hidden; background:#fff; border:1px solid rgba(11,18,32,.1); box-shadow:0 16px 28px -16px rgba(11,18,32,.34); } .est__bar { background:var(--br-bg); color:#fff; padding:10px 12px; font-size:11.5px; font-weight:600; letter-spacing:-.02em; } .est__body { padding:11px; } .est__field { display:flex; align-items:center; justify-content:space-between; gap:10px; border:1px solid rgba(11,18,32,.16); border-radius:8px; padding:8px 11px; font-size:11.5px; color:#0B1220; } .est__cpt { font-family:var(--mono); font-size:10px; color:rgba(11,18,32,.45); } .est__row { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:8px; } .est__sel { border:1px solid rgba(11,18,32,.16); border-radius:8px; padding:7px 9px; font-size:10.5px; color:#0B1220; } .est__sellab { display:block; font-family:var(--mono); font-size:8px; letter-spacing:.14em; color:rgba(11,18,32,.45); margin-bottom:3px; } .est__res { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-top:11px; border-top:1px solid rgba(11,18,32,.1); padding-top:10px; } .est__reslab { display:block; font-family:var(--mono); font-size:8.5px; letter-spacing:.14em; color:rgba(11,18,32,.45); margin-bottom:4px; } .est__amt { font-size:25px; font-weight:600; letter-spacing:-.7px; line-height:1; color:var(--br-bg); } .est__badge { border-radius:999px; background:color-mix(in srgb, var(--br-accent) 12%, transparent); color:var(--br-accent); font-family:var(--mono); font-size:8.5px; letter-spacing:.06em; text-transform:uppercase; padding:5px 9px; } .est__note { margin:10px 0 0; font-size:9.5px; line-height:1.45; color:rgba(11,18,32,.55); } /* ---- rate intelligence: an internal instrument, so it keeps the page's own theme ---- */ .rint { border:1px solid var(--line-2); background:var(--bg-2); } .rint__hd { display:flex; justify-content:space-between; gap:10px; padding:8px 12px; border-bottom:1px solid var(--line); color:var(--fg-3); } .rint__rows { padding:8px 0; } .rint__r { display:grid; grid-template-columns:60px minmax(0,1fr) 54px; align-items:center; gap:10px; padding:6px 12px; } .rint__r i { font-style:normal; font-family:var(--mono); font-size:10px; letter-spacing:-.02em; color:var(--fg-2); } .rint__bar { position:relative; height:6px; background:var(--line); } .rint__bar::after { content:""; position:absolute; top:-3px; bottom:-3px; left:100%; width:1px; background:var(--fg-3); } .rint__bar b { position:absolute; inset:0 auto 0 0; width:min(var(--w),100%); background:var(--blue); } .rint__r em { font-style:normal; text-align:right; font-family:var(--mono); font-size:10.5px; letter-spacing:-.02em; color:var(--fg-2); } .rint__r em.down { color:#E5484D; } .rint__r em.up { color:var(--acid); } .rint__ft { padding:9px 12px; border-top:1px solid var(--line); font-size:8px; line-height:1.5; color:var(--fg-3); } /* ---- Storefront ---- */ .sfx { border-radius:15px; overflow:hidden; background:#fff; box-shadow:0 16px 30px -16px rgba(11,18,32,.36); } .sfx__bar { display:flex; align-items:center; gap:6px; background:#F7F7F8; border-bottom:1px solid #EDEDEF; padding:8px 12px; } .sfx__dot { width:7px; height:7px; border-radius:50%; background:rgba(0,0,0,.14); flex:0 0 auto; } .sfx__url { margin-left:6px; font-family:var(--mono); font-size:9px; letter-spacing:-.02em; color:rgba(0,0,0,.45); } .sfx__hero { background:linear-gradient(112deg, var(--br-bg) 0%, var(--br-accent) 62%, color-mix(in srgb, var(--br-accent) 35%, #fff) 100%); padding:11px 12px; display:flex; align-items:center; justify-content:space-between; gap:10px; } .sfx__brand { color:#fff; font-size:13px; font-weight:600; letter-spacing:-.02em; } .sfx__conn--off { display:none; border-radius:999px; background:#000; color:#fff; padding:6px 11px; font-size:10.5px; line-height:1; } .sfx:not(.is-conn) .sfx__conn--on { display:none; } .sfx:not(.is-conn) .sfx__conn--off { display:inline-flex; } .sfx:not(.is-conn) .sfx__pcol:not(.sfx__pcol--self) { display:none; } .sfx.is-conn .sfx__pcol--self { display:none; } .sfx:not(.is-conn) .sfx__cta--ins, .sfx.is-conn .sfx__cta--self { display:none; } .sfx.is-conn .sfx__conn--off, .sfx:not(.is-conn) .sfx__conn--on { display:none; } .sfx__conn { display:inline-flex; align-items:center; gap:5px; border-radius:999px; background:#fff; padding:5px 10px 5px 6px; font-size:11px; line-height:1; color:#000; } .sfx__body { padding:11px; } .sfx__tile { border-radius:15px; background:#fff; box-shadow:0 2px 10px rgba(0,0,0,.12); overflow:hidden; } .sfx__img { height:60px; background:linear-gradient(135deg,#DCE7F2,#B9CBDE 60%,#8FA6BD); position:relative; } .sfx__img::after { content:""; position:absolute; inset:0; background:radial-gradient(60% 80% at 30% 30%, rgba(255,255,255,.55), transparent 70%); } .sfx__tb { padding:9px; display:flex; flex-direction:column; gap:7px; } .sfx__ttl { margin:0; font-size:13px; font-weight:600; line-height:1.12; } .sfx__desc { margin:0; font-size:9.5px; line-height:1.45; color:rgba(0,0,0,.7); } .sfx__prow { display:flex; align-items:flex-end; justify-content:space-between; gap:8px; } .sfx__pcol { display:flex; flex-direction:column; gap:2px; } .sfx__was { font-size:11px; line-height:1; color:rgba(0,0,0,.4); text-decoration:line-through; } .sfx__price { font-size:19px; font-weight:600; letter-spacing:-.5px; line-height:1; } .sfx__plab { font-size:9px; line-height:1; color:rgba(0,0,0,.75); } .sfx__tog { width:24px; height:12px; border-radius:999px; background:#C0E7EB; display:flex; align-items:center; justify-content:flex-end; padding:0 1.5px; flex:0 0 auto; margin-bottom:2px; } .sfx__knob { width:9px; height:9px; border-radius:999px; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.25); } .sfx__slots { display:flex; gap:5px; } .sfx__slots span { flex:1; text-align:center; border:1px solid rgba(0,0,0,.14); border-radius:999px; padding:5px 2px; font-family:var(--mono); font-size:8.5px; letter-spacing:-.02em; color:rgba(0,0,0,.55); } .sfx__slots .on { border-color:#000; color:#000; } .sfx__cta { border-radius:999px; background:var(--pr-btn); color:#fff; text-align:center; padding:9px; font-size:11px; font-weight:500; line-height:1; } /* ---- Kiosk: the real phone chassis ---- */ /* Real phone proportions: the design system's kiosk screen is aspect-ratio 8/17, and the corner radius has to scale with the width or a 200px-wide phone reads as a squat tile. */ .kio { position:relative; width:176px; margin:0 auto; background:#fff; border-radius:40px; border:6px solid var(--pr-blue); box-shadow:0 18px 34px -16px rgba(11,18,32,.34); } .kio__island { position:absolute; left:50%; top:10px; transform:translateX(-50%); width:50px; height:14px; border-radius:999px; background:#000; z-index:5; } .kio__screen { border-radius:34px; overflow:hidden; background:#fff; aspect-ratio:8/17; display:flex; flex-direction:column; } .kio__hdr { display:flex; align-items:center; justify-content:space-between; padding:27px 12px 8px; flex:0 0 auto; } .kio__brand { font-size:11px; font-weight:600; letter-spacing:-.02em; } .kio__scan { width:20px; height:20px; border-radius:999px; background:rgba(0,0,0,.05); display:flex; align-items:center; justify-content:center; } .kio__prog { background:#F9F9F9; padding:9px 14px; display:flex; justify-content:center; flex:0 0 auto; } .kio__track { display:flex; align-items:center; gap:5px; width:74%; } .kio__step { height:3px; flex:1; border-radius:999px; background:#E1E1E1; } .kio__step.on { background:var(--pr-blue); } .kio__body { padding:12px 12px 15px; flex:1; display:flex; flex-direction:column; min-height:0; } .kio__t { font-family:var(--mono); font-size:9px; letter-spacing:-.02em; text-transform:uppercase; color:rgba(0,0,0,.5); } .kio__ttl { margin:7px 0 0; font-size:13.5px; font-weight:600; line-height:1.14; letter-spacing:-.2px; } .kio__amt { margin-top:10px; font-size:27px; font-weight:600; letter-spacing:-.8px; line-height:1; } .kio__lab { margin-top:5px; font-size:9.5px; line-height:1.35; color:rgba(0,0,0,.65); } .kio__row { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:14px; padding-top:12px; border-top:1px solid #F1F1F1; } .kio__rowl { font-size:11px; color:rgba(0,0,0,.7); } .kio__tog { width:32px; height:18px; border-radius:999px; background:#C0E7EB; display:flex; align-items:center; justify-content:flex-end; padding:0 2px; flex:0 0 auto; } .kio__knob { width:14px; height:14px; border-radius:999px; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.25); } .kio__pill { margin-top:auto; border-radius:999px; background:var(--pr-btn); color:#fff; text-align:center; padding:10px; font-size:11.5px; font-weight:500; line-height:1; } /* ops / forecast */ .ops { background:var(--bg-2); border:1px solid var(--line-2); } .ops__hd { display:flex; justify-content:space-between; gap:10px; padding:11px 14px; border-bottom:1px solid var(--line); color:var(--fg-3); } .ops__big { padding:13px 12px; display:flex; align-items:baseline; justify-content:space-between; gap:12px; border-bottom:1px solid var(--line); } .ops__big b { font-weight:600; font-size:34px; letter-spacing:-.04em; line-height:1; color:var(--acid); } .ops__big span { color:var(--fg-3); } .ops__rows { padding:6px 0; } .ops__r { display:flex; align-items:center; gap:10px; padding:6px 12px; font-family:var(--mono); font-size:10.5px; letter-spacing:-.02em; color:var(--fg-2); } .ops__r i { font-style:normal; color:var(--fg-3); flex:0 0 52px; } .ops__r em { font-style:normal; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ops__r b { font-weight:400; color:var(--fg); } .ops__bar { height:3px; background:var(--line); position:relative; margin:0 14px 12px; } .ops__bar i { position:absolute; inset:0 auto 0 0; width:var(--w); background:var(--blue); } /* ============================================ use cases: a docs explorer, not a card grid */ .ucx { display:grid; grid-template-columns:288px minmax(0,1fr); border:1px solid var(--line); margin-top:clamp(30px,4.5vw,52px); background:var(--bg-2); } .ucx__rail { border-right:1px solid var(--line); padding:10px 0 16px; position:sticky; top:53px; align-self:start; max-height:calc(100svh - 66px); overflow-y:auto; } .ucg { font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-3); padding:16px 18px 7px; } .ucn { display:block; width:100%; text-align:left; border:0; background:transparent; border-left:2px solid transparent; padding:10px 18px; cursor:pointer; transition:background .2s ease, border-color .2s ease; } .ucn:hover { background:var(--sheen); } .ucn__n { font-family:var(--mono); font-size:10px; letter-spacing:-.02em; color:var(--fg-3); } .ucn__t { display:block; margin-top:2px; font-size:13px; font-weight:600; letter-spacing:-.02em; line-height:1.25; color:var(--fg-2); } .ucn__w { display:none; } .ucn.on { background:var(--sheen); border-left-color:var(--blue); } .ucn.on .ucn__n { color:var(--blue); } .ucn.on .ucn__t { color:var(--fg); } .ucp { padding:clamp(20px,2.4vw,36px); min-width:0; } .ucp__top { display:flex; align-items:baseline; gap:12px; } .ucp__n { font-family:var(--mono); font-size:11px; letter-spacing:-.02em; color:var(--blue); } .ucp__who { font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-3); } .ucp__h { margin:10px 0 0; font-weight:600; font-size:clamp(21px,2.1vw,32px); letter-spacing:-.03em; line-height:1.08; } .ucp__p { margin:14px 0 0; font-size:clamp(13.5px,1.02vw,16.5px); line-height:1.55; color:var(--fg-2); max-width:62ch; } .flow { display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin-top:clamp(18px,2.4vh,26px); } .flow span { font-family:var(--mono); font-size:10px; letter-spacing:-.02em; border:1px solid var(--line-2); padding:6px 10px; color:var(--fg-2); white-space:nowrap; } .flow i { font-style:normal; color:var(--blue); } .flow .out { color:var(--acid); border-color:var(--acid-soft); background:var(--acid-soft); } .fld { margin-top:clamp(18px,2.4vh,26px); border:1px solid var(--line); } .fld__h { display:flex; align-items:baseline; gap:10px; padding:9px 14px; border-bottom:1px solid var(--line); background:var(--sheen); font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-3); } .fld__h b { color:var(--fg-2); font-weight:400; letter-spacing:-.02em; text-transform:none; font-size:10.5px; } .fld__r { display:grid; grid-template-columns:minmax(0,1fr) 104px minmax(0,1.85fr); gap:14px; padding:9px 14px; border-bottom:1px solid var(--line); align-items:baseline; } .fld__r:last-child { border-bottom:0; } .fld__n { font-family:var(--mono); font-size:11.5px; letter-spacing:-.02em; color:var(--blue); overflow-wrap:anywhere; } .fld__t { font-family:var(--mono); font-size:10px; letter-spacing:-.02em; color:var(--fg-3); } .fld__d { font-size:12.5px; line-height:1.45; color:var(--fg-2); } .ucproof { display:flex; align-items:baseline; gap:16px; margin-top:clamp(18px,2.4vh,26px); border-left:2px solid var(--blue); padding:2px 0 2px 16px; } .ucproof b { font-weight:600; font-size:clamp(17px,1.7vw,26px); letter-spacing:-.035em; line-height:1; color:var(--blue); white-space:nowrap; } .ucproof span { font-size:12.5px; line-height:1.45; color:var(--fg-2); } .ucp__note { margin-top:14px; font-family:var(--mono); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--fg-3); } /* ============================================ cta */ .cta { padding:clamp(84px,13vh,152px) 0 0; border-top:1px solid var(--line); position:relative; overflow:hidden; } .cta__canvas { position:absolute; inset:0; width:100%; height:100%; opacity:.5; } .cta__wrap { position:relative; z-index:2; } .cta__h { margin:0; display:flex; flex-wrap:wrap; align-items:center; gap:0 26px; } .cta__big { font-weight:600; font-size:clamp(74px,14vw,206px); letter-spacing:-.05em; line-height:.84; color:var(--blue); } .cta__h2 { font-weight:600; font-size:clamp(17px,1.8vw,26px); letter-spacing:-.032em; line-height:1.06; max-width:16ch; } .cta__p { margin:clamp(22px,2.8vw,34px) 0 0; max-width:58ch; font-size:clamp(14.5px,1.1vw,18px); line-height:1.55; color:var(--fg-2); } .proof { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:clamp(30px,4vw,46px); } .proof__c { background:var(--bg); padding:clamp(16px,1.5vw,22px); } .proof__v { font-weight:600; font-size:clamp(20px,2.1vw,33px); letter-spacing:-.035em; line-height:1.05; } .proof__v i { font-style:normal; color:var(--blue); } .proof__l { font-size:13px; line-height:1.45; color:var(--fg-2); margin-top:7px; } .proof__n { color:var(--fg-3); margin-top:7px; } .cta__acts { display:flex; gap:12px; flex-wrap:wrap; margin:clamp(26px,3.4vw,40px) 0 0; } .btn { display:inline-block; background:var(--blue); color:#fff; text-decoration:none; padding:14px 28px; border-radius:76px; font-size:14.5px; border:1px solid var(--blue); font-weight:600; transition:background .2s ease, color .2s ease; } .btn:hover { background:transparent; color:var(--blue); } .btn--ghost { background:transparent; color:var(--fg); border-color:var(--line-2); font-weight:400; } .btn--ghost:hover { border-color:var(--fg); color:var(--fg); } .logos { display:flex; align-items:center; gap:clamp(22px,3.4vw,52px); flex-wrap:wrap; margin:clamp(46px,7vh,84px) 0 0; padding-top:24px; border-top:1px solid var(--line); } .logos img { height:20px; width:auto; opacity:.5; } [data-theme="dark"] .logos img { filter:brightness(0) invert(1); } .foot { position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:clamp(46px,7vh,80px); padding:20px var(--pad); border-top:1px solid var(--line); } .foot__mark { height:14px; width:auto; opacity:.6; } .foot .mono { color:var(--fg-3); } /* ============================================ responsive */ @media (max-width:1180px) { .cfg__body { grid-template-columns:1fr 1fr; } .cfg__col--stage { grid-column:1 / -1; border-right:0; border-top:1px solid var(--line); } .cfg__col--mid { border-right:0; } } @media (max-width:900px) { .hero { min-height:0; padding:110px 0 60px; } .hero__wrap { grid-template-columns:1fr; gap:38px; } .hero__meta { grid-template-columns:1fr; } .hero__meta div + div { border-left:0; border-top:1px solid var(--line); padding-left:0; } .px, .engines, .eps, .proof { grid-template-columns:1fr; } .ucx { grid-template-columns:1fr; } .ucx__rail { position:static; max-height:none; border-right:0; border-bottom:1px solid var(--line); display:flex; gap:0; overflow-x:auto; padding:0; } .ucg { display:none; } .ucn { width:auto; white-space:nowrap; border-left:0; border-bottom:2px solid transparent; } .ucn.on { border-left-color:transparent; border-bottom-color:var(--blue); } .ucn__w { display:none; } .fld__r { grid-template-columns:1fr; gap:3px; } .ucproof { flex-direction:column; gap:6px; padding-left:13px; } .flow { gap:6px; } .flow i { display:none; } .flow span { flex:0 0 auto; } .eq { flex-direction:column; } .eq__op { border:0; border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2); padding:8px 24px; } /* The desktop instrument is one screen tall with three scrolling columns. Stacked on a phone that fixed height crushes all three into it and the surface panel collapses to zero, so the body goes back to auto height and every inner scroller becomes a plain block. */ .cfg__body { grid-template-columns:1fr; height:auto; min-height:0; } .cfg__col { border-right:0; border-top:1px solid var(--line); overflow:visible; } #cfgMods, .cfg__midscroll { overflow:visible; max-height:none; -webkit-mask-image:none; mask-image:none; padding-right:0; margin-right:0; } /* the scenes are absolutely stacked on desktop, which needs a fixed stage height. On a phone the visible one goes static so the stage is exactly as tall as whatever surface is showing. */ .stage { min-height:0; overflow:visible; } .sc.on { position:static; } /* on a phone the surface comes before the 25-module rail, so the result is the first thing seen */ .cfg__col--stage { order:-1; border-top:0; } .cfg__col--mods { border-top:1px solid var(--line); } .seg__l { flex:0 0 100%; margin-bottom:2px; } .cfg__col:first-child { border-top:0; } .cfg__presets { margin-left:0; width:100%; } .cta__h { flex-direction:column; align-items:flex-start; gap:10px; } .nav__meta { display:none; } }