Spaces:
Sleeping
Sleeping
| /* CarePath demo site — clinical-trust design system. | |
| * | |
| * Tokens: brand palette stays fixed; semantic tokens swap per color scheme. | |
| * Radius rule: panels 0.75rem · controls 0.5rem · status chips pill. | |
| * Breakpoints: 1023px (laptop collapse) · 760px (phone collapse). | |
| */ | |
| :root { | |
| color-scheme: light dark; | |
| font-family: "Geist", ui-sans-serif, system-ui, sans-serif; | |
| font-synthesis: none; | |
| /* brand */ | |
| --ink: #102a2e; | |
| --ivory: #f4f1e8; | |
| --teal: #0f766e; | |
| --mist: #ddeae7; | |
| --amber: #a86300; | |
| --critical: #9b1c1c; | |
| /* semantic (light) */ | |
| --bg: var(--ivory); | |
| --text: var(--ink); | |
| --muted: color-mix(in srgb, var(--ink) 72%, var(--ivory)); | |
| --faint: color-mix(in srgb, var(--ink) 60%, var(--ivory)); | |
| --line: color-mix(in srgb, var(--ink) 16%, transparent); | |
| --line-strong: color-mix(in srgb, var(--ink) 40%, transparent); | |
| --surface: color-mix(in srgb, var(--ivory), white 50%); | |
| --surface-2: var(--ivory); | |
| --tint: color-mix(in srgb, var(--mist), transparent 45%); | |
| --tint-section: var(--mist); | |
| --accent-ink: #0d6a63; | |
| --critical-text: var(--critical); | |
| --amber-text: #704300; | |
| --input-bg: white; | |
| --nav-bg: rgb(244 241 232 / 0.92); | |
| --shadow: 0 1rem 3rem rgb(16 42 46 / 0.09); | |
| /* fixed dark panels (safety section, footer, evidence card) */ | |
| --deep: #102a2e; | |
| --on-deep: #f4f1e8; | |
| --on-deep-muted: rgb(244 241 232 / 0.72); | |
| --accent-on-deep: #66d8cc; | |
| /* geometry */ | |
| --container: 74rem; | |
| --r-panel: 0.75rem; | |
| --r-control: 0.5rem; | |
| --section-pad: clamp(4rem, 7vw, 6rem); | |
| } | |
| @media (prefers-color-scheme: dark) { | |
| :root { | |
| --bg: #0b2125; | |
| --text: #e9efec; | |
| --muted: rgb(233 239 236 / 0.76); | |
| --faint: rgb(233 239 236 / 0.62); | |
| --line: rgb(233 239 236 / 0.16); | |
| --line-strong: rgb(233 239 236 / 0.42); | |
| --surface: #122c31; | |
| --surface-2: #0f272c; | |
| --tint: rgb(221 234 231 / 0.07); | |
| --tint-section: #133136; | |
| --accent-ink: #6fd8cc; | |
| --critical-text: #f2a0a0; | |
| --amber-text: #ffce8a; | |
| --input-bg: #0e252a; | |
| --nav-bg: rgb(11 33 37 / 0.92); | |
| --shadow: 0 1rem 3rem rgb(0 0 0 / 0.4); | |
| --deep: #0e2a2f; | |
| } | |
| } | |
| * { | |
| box-sizing: border-box; | |
| } | |
| html { | |
| background: var(--bg); | |
| color: var(--text); | |
| scroll-behavior: smooth; | |
| } | |
| body { | |
| min-width: 320px; | |
| min-height: 100vh; | |
| margin: 0; | |
| line-height: 1.6; | |
| } | |
| button, | |
| input, | |
| select, | |
| textarea { | |
| font: inherit; | |
| } | |
| .site-shell { | |
| overflow-x: clip; | |
| width: 100%; | |
| max-width: 100%; | |
| } | |
| /* ---------- shared bits ---------- */ | |
| .kicker { | |
| margin: 0 0 0.9rem; | |
| color: var(--accent-ink); | |
| font-size: 0.72rem; | |
| font-weight: 700; | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| } | |
| .button:focus-visible, | |
| .button-link:focus-visible, | |
| .scenario:focus-visible, | |
| .nav-cta:focus-visible, | |
| a:focus-visible, | |
| input:focus-visible, | |
| textarea:focus-visible { | |
| outline: 3px solid color-mix(in srgb, var(--teal), white 30%); | |
| outline-offset: 2px; | |
| } | |
| /* ---------- navigation ---------- */ | |
| .site-nav { | |
| position: sticky; | |
| top: 0; | |
| z-index: 20; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 1.25rem; | |
| padding: 0.7rem max(1.5rem, calc((100vw - var(--container)) / 2)); | |
| border-bottom: 1px solid var(--line); | |
| background: var(--nav-bg); | |
| backdrop-filter: blur(0.5rem); | |
| box-shadow: 0 1px 0 var(--line), 0 10px 24px -18px rgb(16 42 46 / 0.45); | |
| } | |
| .site-nav__brand { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.6rem; | |
| min-width: 0; | |
| color: var(--text); | |
| font-weight: 700; | |
| text-decoration: none; | |
| white-space: nowrap; | |
| } | |
| .site-nav__brand img { | |
| width: 2.4rem; | |
| height: auto; | |
| } | |
| .site-nav__links { | |
| display: flex; | |
| gap: clamp(1rem, 2vw, 1.8rem); | |
| } | |
| .site-nav__links a { | |
| color: var(--muted); | |
| font-size: 0.85rem; | |
| font-weight: 600; | |
| text-decoration: none; | |
| white-space: nowrap; | |
| } | |
| .site-nav__links a:hover { | |
| color: var(--text); | |
| text-decoration: underline; | |
| text-underline-offset: 0.3rem; | |
| } | |
| .site-nav__actions { | |
| display: flex; | |
| flex-shrink: 0; | |
| align-items: center; | |
| gap: 0.7rem; | |
| } | |
| .nav-cta { | |
| padding: 0.6rem 1rem; | |
| border-radius: var(--r-control); | |
| background: var(--text); | |
| color: var(--bg); | |
| font-size: 0.82rem; | |
| font-weight: 700; | |
| text-decoration: none; | |
| white-space: nowrap; | |
| } | |
| /* ---------- hero ---------- */ | |
| .hero { | |
| width: min(100% - 3rem, var(--container)); | |
| margin: 0 auto; | |
| padding: clamp(3rem, 5vw, 4.5rem) 0 clamp(2.5rem, 4vw, 3.5rem); | |
| } | |
| .hero__copy { | |
| max-width: 56rem; | |
| } | |
| .hero-title { | |
| max-width: 52rem; | |
| margin: 0; | |
| font-size: clamp(2.3rem, 4.2vw, 3.5rem); | |
| font-weight: 700; | |
| letter-spacing: -0.03em; | |
| line-height: 1.12; | |
| text-wrap: balance; | |
| } | |
| .hero__body { | |
| max-width: 44rem; | |
| margin: 1.4rem 0 0; | |
| color: var(--muted); | |
| font-size: clamp(1rem, 1.4vw, 1.15rem); | |
| line-height: 1.7; | |
| } | |
| .hero__actions { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 0.8rem; | |
| margin-top: 1.8rem; | |
| } | |
| .button-link { | |
| display: inline-flex; | |
| min-height: 3rem; | |
| align-items: center; | |
| padding: 0.75rem 1.25rem; | |
| border: 1px solid transparent; | |
| border-radius: var(--r-control); | |
| font-weight: 700; | |
| text-decoration: none; | |
| transition: background 200ms ease, border-color 200ms ease; | |
| } | |
| .button-link:active { | |
| transform: translateY(1px); | |
| } | |
| .button-link--secondary { | |
| border-color: var(--line-strong); | |
| background: transparent; | |
| color: var(--text); | |
| } | |
| .button-link--secondary:hover { | |
| border-color: var(--text); | |
| } | |
| /* ---------- demo stage ---------- */ | |
| .demo { | |
| overflow: hidden; | |
| border: 1px solid var(--line); | |
| border-radius: var(--r-panel); | |
| background: var(--surface); | |
| box-shadow: var(--shadow); | |
| } | |
| .demo__header, | |
| .demo__controls, | |
| .transcript, | |
| .readback, | |
| .custom-input, | |
| .escalation { | |
| padding: 1.25rem 1.5rem; | |
| } | |
| .demo__header { | |
| display: flex; | |
| align-items: flex-start; | |
| justify-content: space-between; | |
| gap: 1.5rem; | |
| border-bottom: 1px solid var(--line); | |
| } | |
| .demo__header h2, | |
| .demo__header p { | |
| margin: 0; | |
| } | |
| .demo__header h2 { | |
| margin-top: 0.35rem; | |
| font-size: clamp(1.25rem, 2vw, 1.6rem); | |
| letter-spacing: -0.01em; | |
| } | |
| .demo__brand { | |
| color: var(--accent-ink); | |
| font-size: 0.7rem; | |
| font-weight: 700; | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| } | |
| .demo__disclosure { | |
| margin-top: 0.4rem ; | |
| color: var(--muted); | |
| font-size: 0.82rem; | |
| } | |
| .demo__privacy { | |
| padding: 0.5rem 0.75rem; | |
| border: 1px solid var(--accent-ink); | |
| border-radius: 999px; | |
| color: var(--accent-ink); | |
| font-size: 0.74rem; | |
| font-weight: 600; | |
| white-space: nowrap; | |
| } | |
| .demo__specialty { | |
| margin: 0.25rem 0 0 ; | |
| color: var(--muted); | |
| font-size: 0.82rem; | |
| } | |
| .demo-customization { | |
| display: grid; | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| gap: 1rem; | |
| padding: 1.1rem 1.5rem; | |
| border-bottom: 1px solid var(--line); | |
| background: var(--tint); | |
| } | |
| .demo-customization label { | |
| display: grid; | |
| gap: 0.35rem; | |
| color: var(--muted); | |
| font-size: 0.78rem; | |
| font-weight: 600; | |
| } | |
| .scenario-picker { | |
| display: grid; | |
| grid-template-columns: repeat(3, minmax(0, 1fr)); | |
| border-bottom: 1px solid var(--line); | |
| } | |
| .scenario { | |
| display: grid; | |
| align-content: start; | |
| gap: 0.4rem; | |
| padding: 1.1rem 1.25rem; | |
| border: 0; | |
| border-right: 1px solid var(--line); | |
| background: transparent; | |
| color: var(--text); | |
| cursor: pointer; | |
| text-align: left; | |
| transition: background 200ms ease; | |
| } | |
| .scenario:last-child { | |
| border-right: 0; | |
| } | |
| .scenario:hover, | |
| .scenario:focus-visible { | |
| background: var(--tint); | |
| } | |
| .scenario:active { | |
| transform: scale(0.995); | |
| } | |
| .scenario.is-selected { | |
| background: var(--text); | |
| color: var(--bg); | |
| } | |
| .scenario strong { | |
| font-size: 0.92rem; | |
| } | |
| .scenario span { | |
| font-size: 0.78rem; | |
| line-height: 1.5; | |
| opacity: 0.85; | |
| } | |
| .progress-rail { | |
| display: grid; | |
| grid-template-columns: repeat(4, minmax(0, 1fr)); | |
| margin: 0; | |
| padding: 1.1rem 1.5rem; | |
| border-bottom: 1px solid var(--line); | |
| list-style: none; | |
| } | |
| .progress-rail li { | |
| position: relative; | |
| display: grid; | |
| grid-template-columns: auto 1fr; | |
| align-items: center; | |
| gap: 0.55rem; | |
| color: var(--muted); | |
| font-size: 0.76rem; | |
| font-weight: 600; | |
| } | |
| .progress-rail li:not(:last-child)::after { | |
| position: absolute; | |
| z-index: 0; | |
| top: 50%; | |
| right: 0.75rem; | |
| left: 2.2rem; | |
| height: 1px; | |
| background: var(--line); | |
| content: ""; | |
| } | |
| .progress-rail li span { | |
| z-index: 1; | |
| display: inline-grid; | |
| width: 1.7rem; | |
| height: 1.7rem; | |
| place-items: center; | |
| border: 1px solid currentcolor; | |
| border-radius: 50%; | |
| background: var(--surface); | |
| font-weight: 700; | |
| } | |
| .progress-rail li.is-complete { | |
| color: var(--accent-ink); | |
| } | |
| .progress-rail li.is-complete span { | |
| border-color: var(--teal); | |
| background: var(--teal); | |
| color: white; | |
| } | |
| .progress-check::before { | |
| width: 0.65rem; | |
| height: 0.35rem; | |
| border-bottom: 2px solid white; | |
| border-left: 2px solid white; | |
| content: ""; | |
| transform: translateY(-0.08rem) rotate(-45deg); | |
| } | |
| .demo__controls, | |
| .readback__actions { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 0.65rem; | |
| } | |
| .button { | |
| min-height: 2.75rem; | |
| padding: 0.65rem 1rem; | |
| border: 1px solid transparent; | |
| border-radius: var(--r-control); | |
| cursor: pointer; | |
| font-weight: 600; | |
| transition: background 200ms ease, border-color 200ms ease; | |
| } | |
| .button:active:not(:disabled) { | |
| transform: translateY(1px); | |
| } | |
| .button:disabled { | |
| cursor: not-allowed; | |
| opacity: 0.45; | |
| } | |
| .button--primary { | |
| background: var(--teal); | |
| color: white; | |
| } | |
| .button--primary:hover:not(:disabled) { | |
| background: color-mix(in srgb, var(--teal), black 14%); | |
| } | |
| .button--secondary { | |
| border-color: var(--line-strong); | |
| background: transparent; | |
| color: var(--text); | |
| } | |
| .button--secondary:hover:not(:disabled) { | |
| border-color: var(--text); | |
| } | |
| .button--danger { | |
| border-color: var(--critical-text); | |
| background: transparent; | |
| color: var(--critical-text); | |
| } | |
| .button--text { | |
| background: transparent; | |
| color: var(--muted); | |
| } | |
| .button--text:hover:not(:disabled) { | |
| color: var(--text); | |
| } | |
| .button--download { | |
| margin: 0 1.5rem 1.5rem; | |
| background: var(--text); | |
| color: var(--bg); | |
| } | |
| .transcript { | |
| display: grid; | |
| gap: 0.85rem; | |
| min-height: 14rem; | |
| background: var(--tint); | |
| } | |
| .transcript__empty { | |
| align-self: center; | |
| color: var(--muted); | |
| text-align: center; | |
| } | |
| .turn { | |
| padding: 1rem 1.15rem; | |
| border-left: 3px solid var(--line-strong); | |
| border-radius: var(--r-control); | |
| background: var(--surface); | |
| } | |
| .turn--medium { | |
| border-left-color: #4b76a8; | |
| } | |
| .turn--high { | |
| border-left-color: var(--amber); | |
| } | |
| .turn--critical { | |
| border-left-color: var(--critical); | |
| } | |
| .turn--custom { | |
| border: 1px dashed var(--teal); | |
| } | |
| .turn header { | |
| display: flex; | |
| justify-content: space-between; | |
| gap: 1rem; | |
| margin-bottom: 0.65rem; | |
| } | |
| .turn header strong { | |
| font-size: 0.85rem; | |
| } | |
| .turn header span { | |
| color: var(--muted); | |
| font-size: 0.72rem; | |
| font-weight: 600; | |
| letter-spacing: 0.04em; | |
| text-transform: uppercase; | |
| } | |
| .turn__columns { | |
| display: grid; | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| gap: 1.25rem; | |
| } | |
| .turn__columns p { | |
| margin: 0; | |
| font-size: 0.95rem; | |
| line-height: 1.6; | |
| } | |
| .turn__columns p + p { | |
| padding-left: 1.25rem; | |
| border-left: 1px solid var(--line); | |
| } | |
| .risk-list { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 0.4rem; | |
| margin: 0.8rem 0 0; | |
| padding: 0; | |
| list-style: none; | |
| } | |
| .risk-list li { | |
| padding: 0.28rem 0.55rem; | |
| border: 1px solid color-mix(in srgb, var(--amber) 60%, transparent); | |
| border-radius: 999px; | |
| color: var(--amber-text); | |
| font-size: 0.72rem; | |
| font-weight: 600; | |
| } | |
| /* readback + escalation stay light in both schemes: fixed alert surfaces */ | |
| .readback { | |
| border-block: 1px solid var(--amber); | |
| background: #fff7e3; | |
| color: var(--ink); | |
| } | |
| .safety-dialog { | |
| width: min(100% - 2rem, 52rem); | |
| max-height: calc(100vh - 2rem); | |
| padding: 0; | |
| border: 0; | |
| border-radius: var(--r-panel); | |
| background: transparent; | |
| color: var(--ink); | |
| box-shadow: 0 2rem 6rem rgb(0 0 0 / 0.35); | |
| } | |
| .safety-dialog::backdrop { | |
| background: rgb(5 23 26 / 0.72); | |
| backdrop-filter: blur(0.2rem); | |
| } | |
| .safety-dialog .readback, | |
| .safety-dialog .escalation { | |
| border: 0; | |
| border-radius: var(--r-panel); | |
| } | |
| .readback h3, | |
| .readback__flag { | |
| margin-top: 0; | |
| } | |
| .readback h3 { | |
| font-size: 1.3rem; | |
| } | |
| .readback__flag { | |
| color: #704300; | |
| font-size: 0.74rem; | |
| font-weight: 700; | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| } | |
| .readback table { | |
| width: 100%; | |
| margin-bottom: 1rem; | |
| border-collapse: collapse; | |
| font-size: 0.92rem; | |
| } | |
| .readback th, | |
| .readback td { | |
| padding: 0.65rem; | |
| border-bottom: 1px solid rgb(112 67 0 / 0.2); | |
| text-align: left; | |
| } | |
| .readback label { | |
| display: grid; | |
| gap: 0.4rem; | |
| margin-bottom: 1rem; | |
| font-size: 0.85rem; | |
| font-weight: 600; | |
| } | |
| .readback textarea, | |
| .readback input { | |
| border-color: rgb(16 42 46 / 0.4); | |
| background: white; | |
| color: var(--ink); | |
| } | |
| textarea, | |
| input { | |
| width: 100%; | |
| min-height: 2.75rem; | |
| padding: 0.65rem 0.75rem; | |
| border: 1px solid var(--line-strong); | |
| border-radius: var(--r-control); | |
| background: var(--input-bg); | |
| color: var(--text); | |
| } | |
| input::placeholder, | |
| textarea::placeholder { | |
| color: var(--faint); | |
| } | |
| textarea { | |
| min-height: 5.5rem; | |
| resize: vertical; | |
| } | |
| .escalation { | |
| border-block: 3px solid var(--critical); | |
| background: #fff2f2; | |
| color: var(--ink); | |
| } | |
| .escalation h3 { | |
| max-width: 38rem; | |
| font-size: clamp(1.35rem, 2.4vw, 1.8rem); | |
| } | |
| .escalation .button--primary { | |
| background: var(--teal); | |
| color: white; | |
| } | |
| .custom-input { | |
| display: grid; | |
| gap: 0.5rem; | |
| border-top: 1px solid var(--line); | |
| } | |
| .custom-input label { | |
| font-size: 0.88rem; | |
| font-weight: 600; | |
| } | |
| .custom-input div { | |
| display: grid; | |
| grid-template-columns: 1fr auto; | |
| gap: 0.65rem; | |
| } | |
| .custom-input small { | |
| color: var(--muted); | |
| } | |
| /* ---------- scribe showcase ---------- */ | |
| .scribe-panel { | |
| overflow: hidden; | |
| margin-top: clamp(2.25rem, 4vw, 3rem); | |
| border: 1px solid var(--line); | |
| border-radius: var(--r-panel); | |
| background: var(--surface); | |
| box-shadow: var(--shadow); | |
| } | |
| .scribe-panel__header { | |
| display: flex; | |
| flex-wrap: wrap; | |
| align-items: baseline; | |
| justify-content: space-between; | |
| gap: 0.5rem 1.5rem; | |
| padding: 1.1rem 1.5rem; | |
| border-bottom: 1px solid var(--line); | |
| } | |
| .scribe-panel__header p { | |
| margin: 0; | |
| } | |
| .scribe-tabs { | |
| display: grid; | |
| grid-template-columns: repeat(3, minmax(0, 1fr)); | |
| border-bottom: 1px solid var(--line); | |
| } | |
| .scribe-tab { | |
| padding: 0.9rem 1.1rem; | |
| border: 0; | |
| border-right: 1px solid var(--line); | |
| background: transparent; | |
| color: var(--muted); | |
| cursor: pointer; | |
| font-size: 0.85rem; | |
| font-weight: 600; | |
| text-align: left; | |
| transition: background 200ms ease; | |
| } | |
| .scribe-tab:last-child { | |
| border-right: 0; | |
| } | |
| .scribe-tab:hover { | |
| background: var(--tint); | |
| color: var(--text); | |
| } | |
| .scribe-tab:active { | |
| transform: scale(0.995); | |
| } | |
| .scribe-tab[aria-pressed="true"] { | |
| background: var(--text); | |
| color: var(--bg); | |
| } | |
| .scribe-tab:focus-visible { | |
| outline: 3px solid color-mix(in srgb, var(--teal), white 30%); | |
| outline-offset: -3px; | |
| } | |
| .scribe-doc { | |
| display: grid; | |
| gap: 1.1rem; | |
| align-content: start; | |
| min-height: 17rem; | |
| padding: 1.5rem; | |
| background: var(--tint); | |
| } | |
| .scribe-doc__text { | |
| max-width: 46rem; | |
| margin: 0; | |
| font-size: 1rem; | |
| line-height: 1.9; | |
| } | |
| mark.scribe-mark { | |
| border-radius: 0.2rem; | |
| background: transparent; | |
| color: inherit; | |
| } | |
| .scribe-mark--miss { | |
| color: var(--amber-text); | |
| font-weight: 600; | |
| text-decoration: underline dashed var(--amber); | |
| text-decoration-thickness: 2px; | |
| text-underline-offset: 0.28rem; | |
| } | |
| .scribe-mark--fix { | |
| padding: 0.05rem 0.3rem; | |
| background: color-mix(in srgb, var(--teal) 16%, transparent); | |
| color: var(--accent-ink); | |
| font-weight: 700; | |
| } | |
| .soap-note { | |
| display: grid; | |
| gap: 1px; | |
| overflow: hidden; | |
| margin: 0; | |
| border: 1px solid var(--line); | |
| border-radius: var(--r-control); | |
| background: var(--line); | |
| } | |
| .soap-note > div { | |
| display: grid; | |
| grid-template-columns: 9.5rem minmax(0, 1fr); | |
| gap: 1rem; | |
| padding: 0.95rem 1.15rem; | |
| background: var(--surface); | |
| } | |
| .soap-note dt { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.55rem; | |
| font-size: 0.8rem; | |
| font-weight: 700; | |
| } | |
| .soap-note dt span { | |
| display: inline-grid; | |
| width: 1.7rem; | |
| height: 1.7rem; | |
| place-items: center; | |
| border: 1px solid var(--teal); | |
| border-radius: var(--r-control); | |
| color: var(--accent-ink); | |
| font-size: 0.78rem; | |
| font-weight: 700; | |
| } | |
| .soap-note dd { | |
| margin: 0; | |
| font-size: 0.95rem; | |
| line-height: 1.65; | |
| } | |
| .scribe-status { | |
| justify-self: start; | |
| margin: 0; | |
| padding: 0.4rem 0.75rem; | |
| border: 1px solid var(--amber); | |
| border-radius: 999px; | |
| color: var(--amber-text); | |
| font-size: 0.74rem; | |
| font-weight: 700; | |
| } | |
| .scribe-caption { | |
| margin: 0; | |
| color: var(--muted); | |
| font-size: 0.8rem; | |
| } | |
| .scribe-note { | |
| max-width: 44rem; | |
| margin: 1.2rem 0 0; | |
| color: var(--muted); | |
| font-size: 0.85rem; | |
| line-height: 1.65; | |
| } | |
| /* ---------- scribe tool page (#/scribe) ---------- */ | |
| .tool-shell { | |
| width: min(100% - 3rem, 52rem); | |
| margin: 0 auto; | |
| padding: clamp(2.5rem, 4vw, 3.5rem) 0 clamp(3rem, 5vw, 4rem); | |
| } | |
| .tool-header h1 { | |
| max-width: 40rem; | |
| margin: 0; | |
| font-size: clamp(1.9rem, 3.4vw, 2.7rem); | |
| font-weight: 700; | |
| letter-spacing: -0.02em; | |
| line-height: 1.15; | |
| text-wrap: balance; | |
| } | |
| .tool-header__intro { | |
| max-width: 40rem; | |
| margin: 1.1rem 0 0; | |
| color: var(--muted); | |
| line-height: 1.7; | |
| } | |
| .health-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| margin: 1.2rem 0 0; | |
| padding: 0.35rem 0.75rem; | |
| border: 1px solid var(--line-strong); | |
| border-radius: 999px; | |
| font-size: 0.78rem; | |
| font-weight: 600; | |
| } | |
| .health-badge__dot { | |
| width: 0.55rem; | |
| height: 0.55rem; | |
| border-radius: 50%; | |
| background: var(--faint); | |
| } | |
| .health-badge--ready .health-badge__dot { | |
| background: var(--teal); | |
| } | |
| .health-badge--demo .health-badge__dot, | |
| .health-badge--degraded .health-badge__dot { | |
| background: var(--amber); | |
| } | |
| .health-badge--down .health-badge__dot { | |
| background: var(--critical); | |
| } | |
| .tool-panel { | |
| display: grid; | |
| gap: 1.1rem; | |
| margin-top: clamp(1.6rem, 3vw, 2.2rem); | |
| padding: clamp(1.4rem, 2.5vw, 2rem); | |
| } | |
| .dropzone { | |
| display: grid; | |
| gap: 0.4rem; | |
| justify-items: center; | |
| padding: clamp(1.8rem, 4vw, 2.8rem) 1.5rem; | |
| border: 2px dashed var(--line-strong); | |
| border-radius: var(--r-panel); | |
| cursor: pointer; | |
| text-align: center; | |
| transition: border-color 200ms ease, background 200ms ease; | |
| } | |
| .dropzone:hover, | |
| .dropzone.is-drag, | |
| .dropzone:focus-within { | |
| border-color: var(--teal); | |
| background: var(--tint); | |
| } | |
| .dropzone span { | |
| color: var(--muted); | |
| font-size: 0.85rem; | |
| } | |
| .dropzone input { | |
| position: absolute; | |
| width: 1px; | |
| height: 1px; | |
| min-height: 0; | |
| padding: 0; | |
| border: 0; | |
| clip-path: inset(50%); | |
| } | |
| .file-chip { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 1rem; | |
| margin: 0; | |
| padding: 0.55rem 0.9rem; | |
| border: 1px solid var(--line); | |
| border-radius: 999px; | |
| background: var(--tint); | |
| font-size: 0.85rem; | |
| overflow-wrap: anywhere; | |
| } | |
| .file-chip button { | |
| padding: 0.2rem 0.6rem; | |
| border: 1px solid var(--line-strong); | |
| border-radius: 999px; | |
| background: transparent; | |
| color: var(--text); | |
| cursor: pointer; | |
| font-size: 0.74rem; | |
| font-weight: 600; | |
| white-space: nowrap; | |
| } | |
| .tool-context { | |
| display: grid; | |
| gap: 0.4rem; | |
| font-size: 0.85rem; | |
| font-weight: 600; | |
| } | |
| .tool-panel .button--primary { | |
| justify-self: start; | |
| } | |
| .progress-rail--tool { | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| gap: 1.1rem 2rem; | |
| padding: 0.3rem 0.5rem 1.1rem; | |
| border-bottom: 0; | |
| } | |
| .progress-rail--tool li:not(:last-child)::after { | |
| content: none; | |
| } | |
| .tool-error strong { | |
| color: var(--critical-text); | |
| } | |
| .tool-error p { | |
| margin: 0; | |
| color: var(--muted); | |
| overflow-wrap: anywhere; | |
| } | |
| .tool-error .button { | |
| justify-self: start; | |
| } | |
| .tool-missing { | |
| padding: 0.9rem 1.15rem; | |
| border: 1px solid color-mix(in srgb, var(--amber) 60%, transparent); | |
| border-radius: var(--r-control); | |
| font-size: 0.9rem; | |
| } | |
| .tool-missing ul { | |
| margin: 0.5rem 0 0; | |
| padding-left: 1.2rem; | |
| } | |
| .tool-missing p, | |
| .tool-evidence p { | |
| margin: 0.5rem 0 0; | |
| color: var(--muted); | |
| } | |
| .tool-review-title, | |
| .tool-evidence h3 { | |
| margin: 0; | |
| } | |
| .tool-review-title { | |
| font-size: 1rem; | |
| } | |
| .tool-evidence { | |
| display: grid; | |
| gap: 0.5rem; | |
| padding: 0.9rem 1.15rem; | |
| border: 1px solid var(--line); | |
| border-radius: var(--r-control); | |
| background: var(--surface); | |
| } | |
| .tool-evidence h3 { | |
| font-size: 0.85rem; | |
| } | |
| .tool-evidence > p { | |
| line-height: 1.65; | |
| } | |
| .tool-terms { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 0.45rem; | |
| margin: 0; | |
| padding: 0; | |
| list-style: none; | |
| } | |
| .tool-terms li { | |
| padding: 0.3rem 0.55rem; | |
| border-radius: 999px; | |
| background: var(--tint); | |
| font-size: 0.85rem; | |
| } | |
| .tool-actions { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 0.65rem; | |
| } | |
| .soap-note dd p, | |
| .soap-note dd ul { | |
| margin: 0 0 0.4rem; | |
| } | |
| .soap-note dd ul { | |
| padding-left: 1.2rem; | |
| } | |
| .soap-note dd > :last-child { | |
| margin-bottom: 0; | |
| } | |
| .tool-disclaimer { | |
| margin: 1.6rem 0 0; | |
| color: var(--muted); | |
| font-size: 0.8rem; | |
| } | |
| .tool-prestart .tool-disclaimer { | |
| margin-top: 0; | |
| } | |
| /* ---------- chapters ---------- */ | |
| .chapter { | |
| width: min(100% - 3rem, var(--container)); | |
| margin: 0 auto; | |
| padding: var(--section-pad) 0; | |
| scroll-margin-top: 4.5rem; | |
| } | |
| /* ---------- pilot + form ---------- */ | |
| .pilot { | |
| display: grid; | |
| grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); | |
| gap: clamp(2.5rem, 5vw, 5rem); | |
| align-items: start; | |
| } | |
| .pilot__copy { | |
| position: sticky; | |
| top: 5.5rem; | |
| } | |
| .pilot__copy h2 { | |
| max-width: 30rem; | |
| margin: 0; | |
| font-size: clamp(1.9rem, 3vw, 2.5rem); | |
| font-weight: 700; | |
| letter-spacing: -0.02em; | |
| line-height: 1.15; | |
| text-wrap: balance; | |
| } | |
| .pilot__copy > p:not(.kicker) { | |
| max-width: 34rem; | |
| margin: 1.2rem 0 0; | |
| color: var(--muted); | |
| line-height: 1.7; | |
| } | |
| .pilot__configuration { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 0.45rem; | |
| margin: 1.6rem 0 0.9rem; | |
| } | |
| .pilot__configuration span { | |
| padding: 0.4rem 0.7rem; | |
| border: 1px solid var(--line-strong); | |
| border-radius: 999px; | |
| font-size: 0.74rem; | |
| font-weight: 600; | |
| } | |
| .pilot__copy small { | |
| color: var(--muted); | |
| line-height: 1.6; | |
| } | |
| .lead-form { | |
| display: grid; | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| gap: 1rem; | |
| padding: clamp(1.4rem, 2.5vw, 2rem); | |
| border: 1px solid var(--line); | |
| border-radius: var(--r-panel); | |
| background: var(--surface); | |
| box-shadow: var(--shadow); | |
| } | |
| .lead-form label { | |
| display: grid; | |
| gap: 0.4rem; | |
| font-size: 0.82rem; | |
| font-weight: 600; | |
| } | |
| .lead-form__message, | |
| .lead-form__context, | |
| .lead-form .button, | |
| .lead-form > p { | |
| grid-column: 1 / -1; | |
| } | |
| .lead-form > p { | |
| min-height: 1.5rem; | |
| margin: 0; | |
| color: var(--accent-ink); | |
| font-size: 0.82rem; | |
| font-weight: 600; | |
| } | |
| .field-error, | |
| .form-status.is-error { | |
| color: var(--critical-text); | |
| } | |
| .field-error { | |
| font-size: 0.74rem; | |
| font-weight: 600; | |
| } | |
| /* ---------- footer ---------- */ | |
| .site-footer { | |
| display: grid; | |
| grid-template-columns: 1fr 1.5fr auto; | |
| gap: clamp(1.5rem, 4vw, 4rem); | |
| align-items: start; | |
| margin-top: var(--section-pad); | |
| padding: clamp(2.5rem, 5vw, 4rem) max(1.5rem, calc((100vw - var(--container)) / 2)); | |
| background: var(--deep); | |
| color: var(--on-deep); | |
| } | |
| .site-footer div { | |
| display: grid; | |
| gap: 0.75rem; | |
| } | |
| .site-footer img { | |
| width: 4.5rem; | |
| } | |
| .site-footer p { | |
| margin: 0; | |
| color: var(--on-deep-muted); | |
| font-size: 0.8rem; | |
| line-height: 1.7; | |
| } | |
| .site-footer a { | |
| color: var(--on-deep); | |
| font-size: 0.82rem; | |
| text-underline-offset: 0.28rem; | |
| } | |
| /* ---------- laptop collapse ---------- */ | |
| @media (max-width: 1023px) { | |
| .site-nav__links { | |
| display: none; | |
| } | |
| .pilot { | |
| grid-template-columns: 1fr; | |
| } | |
| .pilot__copy { | |
| position: static; | |
| } | |
| .site-footer { | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| } | |
| } | |
| /* ---------- phone collapse ---------- */ | |
| @media (max-width: 760px) { | |
| .site-nav { | |
| padding-inline: 1rem; | |
| } | |
| .site-nav__brand span { | |
| display: none; | |
| } | |
| .nav-cta { | |
| display: none; | |
| } | |
| .hero, | |
| .chapter { | |
| width: min(100% - 1.5rem, var(--container)); | |
| } | |
| .tool-shell { | |
| width: min(100% - 1.5rem, 52rem); | |
| } | |
| .scribe-tabs { | |
| grid-template-columns: 1fr; | |
| } | |
| .scribe-tab { | |
| border-right: 0; | |
| border-bottom: 1px solid var(--line); | |
| } | |
| .scribe-tab:last-child { | |
| border-bottom: 0; | |
| } | |
| .soap-note > div { | |
| grid-template-columns: 1fr; | |
| gap: 0.45rem; | |
| } | |
| .demo__header { | |
| flex-direction: column; | |
| gap: 0.9rem; | |
| } | |
| .demo__controls { | |
| display: grid; | |
| grid-template-columns: 1fr; | |
| } | |
| .scenario-picker, | |
| .demo-customization, | |
| .turn__columns, | |
| .site-footer, | |
| .lead-form { | |
| grid-template-columns: 1fr; | |
| } | |
| .scenario { | |
| border-right: 0; | |
| border-bottom: 1px solid var(--line); | |
| } | |
| .scenario:last-child { | |
| border-bottom: 0; | |
| } | |
| .progress-rail { | |
| grid-template-columns: 1fr; | |
| gap: 0.6rem; | |
| } | |
| .progress-rail li::after { | |
| display: none; | |
| } | |
| .turn__columns p + p { | |
| padding-top: 0.75rem; | |
| padding-left: 0; | |
| border-top: 1px solid var(--line); | |
| border-left: 0; | |
| } | |
| .custom-input div { | |
| grid-template-columns: 1fr; | |
| } | |
| .lead-form__message, | |
| .lead-form .button, | |
| .lead-form > p { | |
| grid-column: 1; | |
| } | |
| } | |
| /* ---------- reduced motion ---------- */ | |
| @media (prefers-reduced-motion: reduce) { | |
| html { | |
| scroll-behavior: auto; | |
| } | |
| *, | |
| *::before, | |
| *::after { | |
| scroll-behavior: auto ; | |
| transition-duration: 0.01ms ; | |
| animation-duration: 0.01ms ; | |
| animation-iteration-count: 1 ; | |
| } | |
| } | |
| /* ---------- CP-UX-11 compact Vietnamese onboarding ---------- */ | |
| .site-nav__menu { | |
| display: none; | |
| } | |
| .product-breadcrumb { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.45rem; | |
| min-width: 0; | |
| } | |
| .product-breadcrumb > span { | |
| color: var(--muted); | |
| font-weight: 500; | |
| } | |
| .product-breadcrumb > span:last-child { | |
| overflow: hidden; | |
| min-width: 0; | |
| white-space: nowrap; | |
| text-overflow: ellipsis; | |
| } | |
| .product-shell-status { | |
| color: var(--muted); | |
| font-size: 0.75rem; | |
| font-weight: 600; | |
| white-space: nowrap; | |
| } | |
| .landing-main { | |
| overflow-x: clip; | |
| width: 100%; | |
| max-width: 100%; | |
| } | |
| .interpreter-status { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 0.35rem 1rem; | |
| align-items: baseline; | |
| width: min(100% - 3rem, var(--container)); | |
| margin: 1.25rem auto 0; | |
| padding: 0.75rem 1.1rem; | |
| border: 1px solid var(--line); | |
| background: var(--surface); | |
| } | |
| .interpreter-status strong { | |
| font-size: 0.8rem; | |
| } | |
| .interpreter-status span { | |
| color: var(--muted); | |
| font-size: 0.8rem; | |
| font-weight: 500; | |
| } | |
| .button-link--primary { | |
| border-color: var(--deep); | |
| background: var(--deep); | |
| color: var(--on-deep); | |
| } | |
| .button-link--primary:hover { | |
| background: color-mix(in srgb, var(--deep), black 16%); | |
| } | |
| .button-link--light { | |
| margin-top: 1.6rem; | |
| border-color: var(--on-deep); | |
| background: var(--on-deep); | |
| color: var(--deep); | |
| } | |
| .onboarding-hero, | |
| .burden-section, | |
| .demo-section, | |
| .evidence-section { | |
| width: min(100% - 3rem, var(--container)); | |
| margin: 0 auto; | |
| scroll-margin-top: 5rem; | |
| } | |
| .onboarding-hero { | |
| padding: clamp(4rem, 7vw, 6rem) 0 clamp(4rem, 7vw, 6rem); | |
| } | |
| .onboarding-hero > h1 { | |
| max-width: 72rem; | |
| margin: 0; | |
| font-size: clamp(2.7rem, 5.4vw, 4.9rem); | |
| font-weight: 700; | |
| letter-spacing: -0.065em; | |
| line-height: 0.98; | |
| text-wrap: balance; | |
| } | |
| .onboarding-hero__body { | |
| display: grid; | |
| grid-template-columns: minmax(20rem, 1fr) minmax(24rem, 1fr); | |
| gap: clamp(2.5rem, 5vw, 5rem); | |
| align-items: start; | |
| margin-top: clamp(2.25rem, 4.5vw, 3.75rem); | |
| } | |
| .onboarding-hero__copy > p { | |
| max-width: 34rem; | |
| margin: 0; | |
| color: var(--muted); | |
| font-size: clamp(1.02rem, 1.6vw, 1.22rem); | |
| line-height: 1.65; | |
| } | |
| .onboarding-hero__copy > small { | |
| display: block; | |
| max-width: 34rem; | |
| margin-top: 1.1rem; | |
| color: var(--muted); | |
| font-size: 0.78rem; | |
| line-height: 1.55; | |
| } | |
| .onboarding-hero__actions { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 0.75rem; | |
| margin-top: 1.7rem; | |
| } | |
| .hero-proof { | |
| border: 1px solid var(--line); | |
| background: var(--surface); | |
| box-shadow: var(--shadow); | |
| } | |
| .hero-proof__title { | |
| margin: 0; | |
| padding: 0.8rem 1.1rem; | |
| border-bottom: 1px solid var(--line); | |
| color: var(--accent-ink); | |
| font-size: 0.75rem; | |
| font-weight: 700; | |
| } | |
| .hero-proof__stage { | |
| padding: 1rem 1.1rem; | |
| } | |
| .hero-proof__stage > span { | |
| display: block; | |
| margin-bottom: 0.5rem; | |
| color: var(--muted); | |
| font-size: 0.72rem; | |
| font-weight: 650; | |
| letter-spacing: 0.04em; | |
| text-transform: uppercase; | |
| } | |
| .hero-proof__stage > p { | |
| margin: 0; | |
| padding: 0.7rem 0.85rem; | |
| border-left: 3px solid var(--teal); | |
| background: var(--surface-2); | |
| font-size: 0.88rem; | |
| line-height: 1.6; | |
| } | |
| .hero-proof__stage--draft { | |
| border-top: 1px solid var(--line); | |
| } | |
| .hero-proof__stage--draft > span { | |
| color: var(--accent-ink); | |
| } | |
| .hero-proof__stage dl { | |
| display: grid; | |
| gap: 0.75rem; | |
| margin: 0; | |
| } | |
| .hero-proof__stage dt { | |
| font-size: 0.72rem; | |
| font-weight: 700; | |
| color: var(--muted); | |
| } | |
| .hero-proof__stage dd { | |
| margin: 0.15rem 0 0; | |
| font-size: 0.88rem; | |
| line-height: 1.55; | |
| } | |
| .hero-proof__caption { | |
| margin: 0; | |
| padding: 0.8rem 1.1rem; | |
| border-top: 1px solid var(--line); | |
| color: var(--muted); | |
| font-size: 0.75rem; | |
| line-height: 1.55; | |
| } | |
| .burden-section, | |
| .demo-section, | |
| .evidence-section { | |
| padding: clamp(3.5rem, 6vw, 5.5rem) 0; | |
| } | |
| .burden-section { | |
| border-top: 1px solid var(--line); | |
| } | |
| .compact-heading { | |
| max-width: 50rem; | |
| } | |
| .compact-heading--wide { | |
| max-width: 61rem; | |
| } | |
| .compact-heading h2, | |
| .trust-section h2, | |
| .start-section h2 { | |
| margin: 0; | |
| font-size: clamp(2rem, 4.2vw, 3.9rem); | |
| font-weight: 680; | |
| letter-spacing: -0.055em; | |
| line-height: 1.04; | |
| text-wrap: balance; | |
| } | |
| .compact-heading > p, | |
| .trust-section > header > p, | |
| .start-section__copy > p { | |
| max-width: 46rem; | |
| margin: 1.1rem 0 0; | |
| color: var(--muted); | |
| line-height: 1.7; | |
| } | |
| .burden-layout { | |
| display: grid; | |
| grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.85fr); | |
| gap: 1px; | |
| margin-top: 2.5rem; | |
| border: 1px solid var(--line); | |
| background: var(--line); | |
| } | |
| .burden-calculator, | |
| .workflow-comparison { | |
| padding: clamp(1.5rem, 3.5vw, 3rem); | |
| background: var(--surface); | |
| } | |
| .burden-calculator h3, | |
| .workflow-comparison h3, | |
| .evidence-grid h3, | |
| .trust-grid h3, | |
| .review-checklist h3 { | |
| margin: 0; | |
| font-size: 1.05rem; | |
| } | |
| .burden-calculator > p { | |
| margin: 0.55rem 0 0; | |
| color: var(--muted); | |
| font-size: 0.86rem; | |
| } | |
| .calculator-fields { | |
| display: grid; | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| gap: 1rem; | |
| margin-top: 1.5rem; | |
| } | |
| .calculator-fields label { | |
| display: grid; | |
| gap: 0.45rem; | |
| min-width: 0; | |
| color: var(--muted); | |
| font-size: 0.78rem; | |
| font-weight: 650; | |
| } | |
| .calculator-fields input, | |
| .calculator-fields select { | |
| width: 100%; | |
| min-height: 2.9rem; | |
| padding: 0.65rem 0.75rem; | |
| border: 1px solid var(--line-strong); | |
| border-radius: var(--r-control); | |
| background: var(--input-bg); | |
| color: var(--text); | |
| } | |
| .calculator-result { | |
| display: grid; | |
| gap: 0.3rem; | |
| margin-top: 1.5rem; | |
| padding: 1.25rem; | |
| background: var(--deep); | |
| color: var(--on-deep); | |
| } | |
| .calculator-result span, | |
| .calculator-result small { | |
| color: var(--on-deep-muted); | |
| font-size: 0.76rem; | |
| } | |
| .calculator-result strong { | |
| font-size: clamp(1.55rem, 3vw, 2.35rem); | |
| letter-spacing: -0.04em; | |
| line-height: 1.1; | |
| } | |
| .burden-calculator .calculator-formula { | |
| margin-top: 0.9rem; | |
| font-size: 0.75rem; | |
| line-height: 1.55; | |
| } | |
| .workflow-comparison { | |
| display: grid; | |
| align-content: start; | |
| gap: 0; | |
| } | |
| .workflow-comparison article { | |
| padding: 1.4rem 0; | |
| border-bottom: 1px solid var(--line); | |
| } | |
| .workflow-comparison article:first-child { | |
| padding-top: 0; | |
| } | |
| .workflow-comparison article p, | |
| .workflow-comparison > p { | |
| margin: 0.65rem 0 0; | |
| color: var(--muted); | |
| font-size: 0.9rem; | |
| line-height: 1.65; | |
| } | |
| .workflow-comparison > p { | |
| padding-top: 1.4rem; | |
| color: var(--accent-ink); | |
| font-weight: 650; | |
| } | |
| .guided-sample { | |
| margin-top: 2.5rem; | |
| } | |
| .guided-sample .scribe-tabs { | |
| grid-template-columns: repeat(4, minmax(0, 1fr)); | |
| } | |
| .sample-speaker { | |
| max-width: 50rem; | |
| margin: 0; | |
| padding: 0.9rem 1rem; | |
| border-left: 3px solid var(--teal); | |
| background: var(--surface); | |
| line-height: 1.65; | |
| } | |
| .review-checklist ul { | |
| display: grid; | |
| gap: 0.65rem; | |
| max-width: 48rem; | |
| margin: 1rem 0 1.4rem; | |
| padding-left: 1.25rem; | |
| } | |
| .evidence-section { | |
| border-top: 1px solid var(--line); | |
| } | |
| .evidence-grid { | |
| display: grid; | |
| grid-template-columns: repeat(3, minmax(0, 1fr)); | |
| gap: 1px; | |
| margin-top: 2.5rem; | |
| border: 1px solid var(--line); | |
| background: var(--line); | |
| } | |
| .evidence-grid article { | |
| padding: clamp(1.4rem, 3vw, 2.4rem); | |
| background: var(--surface); | |
| } | |
| .evidence-grid p { | |
| margin: 0.9rem 0 0; | |
| color: var(--muted); | |
| font-size: 0.86rem; | |
| line-height: 1.7; | |
| } | |
| .evidence-grid a { | |
| display: inline-block; | |
| margin-top: 1rem; | |
| color: var(--accent-ink); | |
| font-size: 0.8rem; | |
| font-weight: 700; | |
| text-underline-offset: 0.24rem; | |
| } | |
| .evidence-links { | |
| display: grid; | |
| justify-items: start; | |
| } | |
| .evidence-links a + a { | |
| margin-top: 0.45rem; | |
| } | |
| .trust-section, | |
| .start-section { | |
| width: min(100% - 2rem, calc(var(--container) + 3rem)); | |
| margin: 0 auto; | |
| padding: clamp(2.5rem, 6vw, 5rem); | |
| } | |
| .trust-section { | |
| border: 1px solid var(--line); | |
| background: var(--surface); | |
| } | |
| .trust-section > header { | |
| max-width: 50rem; | |
| } | |
| .trust-grid { | |
| display: grid; | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| gap: 1px; | |
| margin-top: 2rem; | |
| border: 1px solid var(--line); | |
| background: var(--line); | |
| } | |
| .trust-grid article { | |
| padding: clamp(1.4rem, 3vw, 2rem); | |
| background: var(--surface-2); | |
| } | |
| .trust-grid ul { | |
| display: grid; | |
| gap: 0.75rem; | |
| margin: 1rem 0 0; | |
| padding-left: 1.1rem; | |
| } | |
| .trust-grid li { | |
| color: var(--muted); | |
| font-size: 0.88rem; | |
| line-height: 1.6; | |
| } | |
| .start-section { | |
| display: grid; | |
| grid-template-columns: minmax(18rem, 0.8fr) minmax(0, 1.2fr); | |
| gap: clamp(2.5rem, 6vw, 6rem); | |
| margin-top: 1.25rem; | |
| scroll-margin-top: 5rem; | |
| background: var(--deep); | |
| color: var(--on-deep); | |
| } | |
| .start-section__copy > p { | |
| color: var(--on-deep-muted); | |
| } | |
| .pilot-disclosure { | |
| align-self: start; | |
| background: var(--surface); | |
| color: var(--text); | |
| } | |
| .pilot-disclosure > summary { | |
| padding: 1.2rem 1.35rem; | |
| cursor: pointer; | |
| font-weight: 700; | |
| } | |
| .pilot-disclosure > div { | |
| padding: 0 1.35rem 1.35rem; | |
| } | |
| .pilot-disclosure > div > p { | |
| margin: 0 0 1rem; | |
| color: var(--muted); | |
| font-size: 0.86rem; | |
| } | |
| .pilot-disclosure .lead-form { | |
| padding: 0; | |
| border: 0; | |
| box-shadow: none; | |
| } | |
| .tool-start-guide { | |
| padding-bottom: 1.2rem; | |
| border-bottom: 1px solid var(--line); | |
| } | |
| .tool-start-guide h2 { | |
| margin: 0; | |
| font-size: 1rem; | |
| } | |
| .tool-start-guide ol { | |
| display: grid; | |
| grid-template-columns: repeat(3, minmax(0, 1fr)); | |
| gap: 0.75rem; | |
| margin: 1rem 0 0; | |
| padding: 0; | |
| list-style: none; | |
| } | |
| .tool-start-guide li { | |
| display: grid; | |
| grid-template-columns: 1.6rem minmax(0, 1fr); | |
| gap: 0.55rem; | |
| align-items: start; | |
| font-size: 0.78rem; | |
| line-height: 1.5; | |
| } | |
| .tool-start-guide li > span { | |
| display: grid; | |
| width: 1.6rem; | |
| height: 1.6rem; | |
| place-items: center; | |
| border-radius: 50%; | |
| background: var(--text); | |
| color: var(--bg); | |
| font-weight: 700; | |
| } | |
| .tool-start-guide p { | |
| margin: 1rem 0 0; | |
| color: var(--muted); | |
| font-size: 0.78rem; | |
| line-height: 1.55; | |
| } | |
| .tool-start-guide > a { | |
| display: inline-block; | |
| margin-top: 0.7rem; | |
| color: var(--accent-ink); | |
| font-size: 0.8rem; | |
| font-weight: 700; | |
| } | |
| @media (max-width: 1023px) { | |
| .site-nav__menu { | |
| display: block; | |
| } | |
| .site-nav__menu summary { | |
| position: relative; | |
| padding: 0.55rem 0.75rem; | |
| border: 1px solid var(--line-strong); | |
| border-radius: var(--r-control); | |
| cursor: pointer; | |
| font-size: 0.78rem; | |
| font-weight: 650; | |
| list-style: none; | |
| } | |
| .site-nav__menu summary::-webkit-details-marker { | |
| display: none; | |
| } | |
| .site-nav__menu > div { | |
| position: absolute; | |
| top: calc(100% + 0.75rem); | |
| right: max(1.5rem, calc((100vw - var(--container)) / 2)); | |
| display: grid; | |
| width: min(19rem, calc(100vw - 2rem)); | |
| padding: 0.65rem; | |
| border: 1px solid var(--line); | |
| background: var(--surface); | |
| box-shadow: var(--shadow); | |
| } | |
| .site-nav__menu a { | |
| padding: 0.8rem; | |
| border-bottom: 1px solid var(--line); | |
| color: var(--text); | |
| font-size: 0.85rem; | |
| font-weight: 600; | |
| text-decoration: none; | |
| } | |
| .site-nav__menu a:last-child { | |
| border-bottom: 0; | |
| } | |
| .onboarding-hero__body, | |
| .burden-layout, | |
| .trust-grid, | |
| .start-section { | |
| grid-template-columns: 1fr; | |
| } | |
| .evidence-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| @media (max-width: 760px) { | |
| .site-nav__brand > span:not(.product-breadcrumb) { | |
| display: none; | |
| } | |
| .site-nav__brand .product-breadcrumb, | |
| .site-nav__brand .product-breadcrumb span { | |
| display: flex; | |
| } | |
| .product-breadcrumb strong, | |
| .product-shell-status { | |
| display: none; | |
| } | |
| .site-nav__menu summary { | |
| overflow: hidden; | |
| width: 2.6rem; | |
| color: transparent; | |
| white-space: nowrap; | |
| } | |
| .site-nav__menu summary::after { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| width: 1rem; | |
| height: 0.65rem; | |
| border-block: 2px solid var(--text); | |
| color: var(--text); | |
| content: ""; | |
| transform: translate(-50%, -50%); | |
| } | |
| .site-nav__menu > div { | |
| right: 1rem; | |
| } | |
| .interpreter-status { | |
| width: min(100% - 1.5rem, var(--container)); | |
| } | |
| .onboarding-hero, | |
| .burden-section, | |
| .demo-section, | |
| .evidence-section { | |
| width: min(100% - 1.5rem, var(--container)); | |
| } | |
| .onboarding-hero { | |
| padding-block: 3rem 3.5rem; | |
| } | |
| .onboarding-hero > h1 { | |
| font-size: clamp(1.65rem, 8.2vw, 3.15rem); | |
| letter-spacing: -0.055em; | |
| line-height: 1; | |
| } | |
| .onboarding-hero__body { | |
| gap: 2rem; | |
| margin-top: 2rem; | |
| } | |
| .calculator-fields { | |
| grid-template-columns: 1fr; | |
| } | |
| .site-footer { | |
| grid-template-columns: 1fr; | |
| gap: 1.5rem; | |
| } | |
| .burden-section, | |
| .demo-section, | |
| .evidence-section { | |
| padding-block: 3.5rem; | |
| } | |
| .guided-sample .scribe-tabs { | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| } | |
| .guided-sample .scribe-tab:nth-child(2) { | |
| border-right: 0; | |
| } | |
| .guided-sample .scribe-tab:nth-child(3) { | |
| border-bottom: 0; | |
| } | |
| .trust-section, | |
| .start-section { | |
| width: calc(100% - 1rem); | |
| padding: 2rem 1.25rem; | |
| } | |
| .tool-start-guide ol { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |