/* Goldmine Labs site. Dark ink ground, white line figures, one purple.
   Layout: a 1120px column; each page is a hero (words left, live figure right) then plain sections. */
:root {
  --ink: #06060A;
  --raised: #0D0D13;
  --raised-2: #14141C;
  --paper: #F4F3F0;
  --dim: #8C8A96;
  --faint: #55535E;
  --line: rgba(244, 243, 240, 0.12);
  --line-strong: rgba(244, 243, 240, 0.26);
  --accent: #9D63E2;
  --accent-ink: #8E52D4;
  --ok: #5FC79A;
  --warn: #E6A85A;

  --display: "Chakra Petch", "Eurostile", "Trebuchet MS", sans-serif;
  --body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --step--1: 0.84rem;
  --step-0: 1rem;
  --step-1: 1.2rem;
  --step-2: 1.5rem;
  --step-3: clamp(1.7rem, 3.4vw, 2.3rem);
  --step-4: clamp(2.2rem, 5.4vw, 3.6rem);

  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img, svg { max-width: 100%; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.wrap { max-width: 1120px; margin: 0 auto; padding-inline: 20px; }

/* header */
.site-head { border-bottom: 1px solid var(--line); position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: rgba(6, 6, 10, 0.92); backdrop-filter: blur(8px); }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-block: 14px; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand svg { width: 28px; height: 28px; flex: none; }
.brand circle { fill: none; stroke: var(--paper); stroke-width: 6; }
.brand .core { fill: var(--paper); stroke: none; }
.brand span { font-family: var(--display); font-weight: 600; font-size: 1.08rem; letter-spacing: 0.01em; }
.nav { display: flex; align-items: center; gap: 4px 20px; flex-wrap: wrap; font-size: 0.93rem; }
.nav a { text-decoration: none; color: var(--dim); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--paper); }
.nav .cta-small { color: var(--paper); border: 1px solid var(--line-strong); padding: 6px 12px; }
.nav .cta-small:hover { border-color: var(--accent); }

/* type */
.eyebrow { font-family: var(--display); font-weight: 600; font-size: 0.76rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); margin: 0 0 14px; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; line-height: 1.12; text-wrap: balance; margin: 0; }
h1 { font-size: var(--step-4); letter-spacing: -0.01em; }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); }
.lead { font-size: var(--step-1); color: #D8D6DD; max-width: 58ch; margin: 18px 0 0; }
p { margin: 0; }
.prose p + p { margin-top: 14px; }
.prose { max-width: 66ch; color: #D8D6DD; }
.muted { color: var(--dim); }
.mono { font-family: var(--mono); font-size: 0.82rem; }

/* buttons */
.ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.btn { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-family: var(--display); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.02em; padding: 12px 18px; border: 1px solid var(--line-strong); }
.btn.primary { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn.primary:hover { background: #fff; }
.btn:hover { border-color: var(--accent); }

/* hero */
.hero .wrap { display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; padding-block: 56px 40px; }
.hero .copy { min-width: 0; }
@media (max-width: 860px) { .hero .wrap { grid-template-columns: 1fr; padding-block: 36px 24px; } }

/* figures */
.figure { position: relative; min-width: 0; --hairline-plate: var(--ink); --hairline-hi: #FFFFFF; --hairline-edge: #B9B6C2; --hairline-mid: #5E5C68; --hairline-lo: #26252D; --hairline-stroke: 0.9; }
.figure .fig { width: 100%; }
.figure .fig-meta { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; font-family: var(--mono); font-size: 0.74rem; color: var(--faint); letter-spacing: 0.02em; }
.figure .fig-read { color: var(--accent); }
.on-raised .figure, .card .figure { --hairline-plate: var(--raised); }

/* sections */
section.block { padding-block: 56px; border-top: 1px solid var(--line); }
section.block.tight { padding-block: 40px; }
.block-head { display: grid; gap: 12px; margin-bottom: 30px; max-width: 760px; }
.block-head p { color: var(--dim); }

/* chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font-size: 0.86rem; padding: 6px 12px; border: 1px solid var(--line); color: #D8D6DD; text-decoration: none; }
a.chip:hover { border-color: var(--accent); color: var(--paper); }
.tag { display: inline-block; font-family: var(--display); font-weight: 600; font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; padding: 3px 8px; border: 1px solid var(--accent); color: var(--accent); }
.tag.plain { border-color: var(--line-strong); color: var(--dim); }

/* cards */
.grid { display: grid; gap: 16px; }
.grid.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .grid.c3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .grid.c2, .grid.c3 { grid-template-columns: 1fr; } }
.card { background: var(--raised); border: 1px solid var(--line); padding: 22px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.card p { color: #C9C7CF; font-size: 0.96rem; }
.card .more { margin-top: auto; padding-top: 8px; font-family: var(--display); font-weight: 600; font-size: 0.88rem; text-decoration: none; color: var(--paper); }
.card .more:hover { color: var(--accent); }
a.card { text-decoration: none; }
a.card:hover { border-color: var(--line-strong); }
.card .kicker { font-family: var(--display); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); }

/* flow: who does what, in order */
.flow { list-style: none; margin: 0; padding: 0; counter-reset: f; display: grid; gap: 0; max-width: 760px; }
.flow li { position: relative; padding: 0 0 22px 52px; counter-increment: f; }
.flow li::before { content: counter(f); position: absolute; left: 0; top: 0; width: 32px; height: 32px; border: 1.5px solid var(--paper); border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-weight: 600; font-size: 0.85rem; background: var(--ink); z-index: 1; }
.flow li::after { content: ""; position: absolute; left: 15.5px; top: 32px; bottom: 0; width: 1.5px; background: var(--line-strong); }
.flow li:last-child::after { display: none; }
.flow .who { font-family: var(--display); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); }
.flow .who.ai { color: var(--accent); }
.flow .what { margin-top: 2px; color: #E4E2E8; }

/* lists */
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.ticks li { padding-left: 26px; position: relative; color: #D8D6DD; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 10px; height: 10px; border: 1.5px solid var(--accent); border-radius: 50%; }
.ticks.never li::before { border-radius: 0; border-color: var(--faint); width: 10px; height: 1.5px; top: 0.8em; background: var(--faint); }

/* spec table */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); }
table.spec { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
table.spec th, table.spec td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.spec tr:last-child th, table.spec tr:last-child td { border-bottom: 0; }
table.spec th { font-family: var(--display); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
table.spec thead th { background: var(--raised); }
table.spec td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* split */
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; align-items: start; }
@media (max-width: 760px) { .split { grid-template-columns: 1fr; gap: 28px; } }
.split > * { min-width: 0; }

/* faq */
details.faq { border-top: 1px solid var(--line); padding-block: 14px; max-width: 760px; }
details.faq:last-of-type { border-bottom: 1px solid var(--line); }
details.faq summary { cursor: pointer; font-family: var(--display); font-weight: 600; font-size: 1.05rem; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
details.faq summary::after { content: "+"; color: var(--accent); }
details.faq[open] summary::after { content: "\2212"; }
details.faq p { margin-top: 10px; color: #C9C7CF; max-width: 66ch; }

/* mock UIs: always labelled as examples */
.mock { background: var(--raised); border: 1px solid var(--line); min-width: 0; }
.mock-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 0.85rem; }
.mock-bar b { font-family: var(--display); font-weight: 600; }
.mock-body { padding: 16px; display: grid; gap: 10px; }
.example-note { font-family: var(--mono); font-size: 0.72rem; color: var(--faint); padding: 8px 14px; border-top: 1px solid var(--line); }
.bubble { max-width: 86%; padding: 9px 12px; font-size: 0.92rem; line-height: 1.45; }
.bubble.in { background: var(--raised-2); justify-self: start; border: 1px solid var(--line); }
.bubble.out { background: #24183A; justify-self: end; border: 1px solid rgba(157, 99, 226, 0.4); }
.bubble .meta { display: block; margin-top: 4px; font-family: var(--mono); font-size: 0.68rem; color: var(--dim); }
.voice { display: flex; align-items: center; gap: 10px; }
.voice .wave { flex: 1; height: 18px; background: repeating-linear-gradient(90deg, var(--dim) 0 2px, transparent 2px 5px); mask: linear-gradient(90deg, #000 0 100%); opacity: 0.7; min-width: 80px; }
.voice .play { width: 0; height: 0; border-left: 9px solid var(--paper); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.sys { justify-self: center; font-family: var(--mono); font-size: 0.72rem; color: var(--accent); }
.rows { display: grid; gap: 0; font-size: 0.88rem; }
.rows .r { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.rows .r:last-child { border-bottom: 0; }
.rows .r .s { font-family: var(--mono); font-size: 0.74rem; }
.s.ok { color: var(--ok); } .s.warn { color: var(--warn); } .s.new { color: var(--accent); }

/* demo on the home page */
.demo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .demo { grid-template-columns: 1fr; } }
.demo [data-step] { transition: opacity 0.5s ease, transform 0.5s ease; }
.demo.playing [data-step].pending { opacity: 0; transform: translateY(6px); }
.demo-controls { display: flex; align-items: center; gap: 14px; margin-top: 18px; flex-wrap: wrap; }
.demo-controls button { font-family: var(--display); font-weight: 600; font-size: 0.9rem; background: transparent; color: var(--paper); border: 1px solid var(--line-strong); padding: 9px 16px; cursor: pointer; }
.demo-controls button:hover { border-color: var(--accent); }
.demo-clock { font-family: var(--mono); font-size: 0.82rem; color: var(--dim); }

/* band */
.band { background: var(--raised); border-block: 1px solid var(--line); }
.band .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; padding-block: 52px; }
@media (max-width: 760px) { .band .wrap { grid-template-columns: 1fr; } }
.band .figure { --hairline-plate: var(--raised); }

/* final cta: the one purple section */
.final { padding-block: 64px; background: var(--accent-ink); color: #fff; }
.final .wrap { display: grid; gap: 10px; justify-items: start; }
.final .final-text { max-width: 60ch; color: rgba(255, 255, 255, 0.86); }
.final .btn { border-color: rgba(255, 255, 255, 0.6); color: #fff; }
.final .btn:hover { border-color: #fff; }
.final .btn.primary { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.final :focus-visible { outline-color: #fff; }

/* home hero: the three desks in one glance */
.hero-points { list-style: none; margin: 22px 0 0; padding: 0; display: grid; max-width: 58ch; }
.hero-points li { display: grid; grid-template-columns: 8.5em 1fr; gap: 14px; padding-block: 12px; border-top: 1px solid var(--line); color: #D8D6DD; }
.hero-points li:last-child { border-bottom: 1px solid var(--line); }
.hero-points b { font-family: var(--display); font-weight: 600; font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); padding-top: 4px; }
.hero-note { margin-top: 14px; color: var(--dim); font-size: 0.95rem; }
@media (max-width: 520px) { .hero-points li { grid-template-columns: 1fr; gap: 4px; } }
.check-pitch { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
@media (max-width: 760px) { .check-pitch { grid-template-columns: 1fr; } }
.ticks b { color: var(--paper); font-weight: 600; }
html { scroll-behavior: smooth; }

/* footer */
.site-foot { border-top: 1px solid var(--line); padding-block: 40px 56px; font-size: 0.9rem; color: var(--dim); }
.foot-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 28px; }
@media (max-width: 760px) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.foot-grid h4 { font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--paper); margin-bottom: 10px; }
.foot-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.foot-grid a { text-decoration: none; }
.foot-grid a:hover { color: var(--paper); }
.foot-note { margin-top: 30px; font-size: 0.8rem; color: var(--faint); }

@media (prefers-reduced-motion: reduce) {
  .demo [data-step] { transition: none; }
  * { scroll-behavior: auto !important; }
}

/* the stack: three desks on one shared record */
.stack { display: grid; gap: 10px; }
.stack .layer { display: grid; grid-template-columns: 9.5rem 1fr; gap: 4px 16px; align-items: baseline; padding: 16px 18px; border: 1px solid var(--line-strong); background: var(--raised); text-decoration: none; position: relative; transition: transform 0.25s ease, border-color 0.25s ease; }
.stack .layer.l3 { margin-left: 0; margin-right: 36px; }
.stack .layer.l2 { margin-left: 12px; margin-right: 24px; }
.stack .layer.l1 { margin-left: 24px; margin-right: 12px; }
.stack .layer.l0 { margin-left: 36px; margin-right: 0; background: transparent; border-style: dashed; border-color: var(--faint); }
.stack a.layer:hover, .stack a.layer:focus-visible { border-color: var(--accent); transform: translateY(-3px); }
.stack .for { font-family: var(--display); font-weight: 600; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.stack .l0 .for { color: var(--dim); }
.stack .name { font-family: var(--display); font-weight: 600; font-size: 1.1rem; }
.stack .does { grid-column: 2; color: #C9C7CF; font-size: 0.92rem; }
@media (max-width: 600px) {
  .stack .layer { grid-template-columns: 1fr; margin: 0 !important; }
  .stack .does { grid-column: 1; }
}
.stack-split { align-items: center; }
.stack-wide { max-width: 760px; margin-bottom: 28px; }
.stack .for { grid-row: span 2; }
.stack-home { margin-bottom: 32px; }
@media (max-width: 600px) { .stack .for { grid-row: auto; } }

/* social links in the header */
.nav .social { display: inline-flex; gap: 6px; }
.nav .social a { font-size: 0.82rem; color: var(--paper); border: 1px solid var(--line); padding: 5px 10px; }
.nav .social a:hover { border-color: var(--accent); }

/* interest form */
.interest { display: grid; gap: 22px; max-width: 900px; }
.interest fieldset { border: 1px solid var(--line); background: var(--raised); padding: 18px 20px 20px; margin: 0; min-width: 0; }
.interest legend { font-family: var(--display); font-weight: 600; font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); padding: 0 6px; }
.interest .fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
@media (max-width: 640px) { .interest .fields { grid-template-columns: 1fr; } }
.interest label { display: grid; gap: 6px; font-size: 0.9rem; color: #D8D6DD; }
.interest .opt { color: var(--faint); font-size: 0.8rem; }
.interest input, .interest select { width: 100%; min-width: 0; font: inherit; font-size: 0.95rem; color: var(--paper); background: var(--ink); border: 1px solid var(--line-strong); padding: 10px 12px; border-radius: 0; }
.interest select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--dim) 50%), linear-gradient(135deg, var(--dim) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 34px; }
.interest input:focus, .interest select:focus { outline: none; border-color: var(--accent); }
.interest .hp { position: absolute; left: -9999px; }
.form-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.form-foot .btn { cursor: pointer; }
[data-form-status].ok { color: var(--ok); }
[data-form-status].err { color: var(--warn); }
.interest label { display: block; }
.interest input, .interest select { display: block; margin-top: 6px; }
.interest .opt { margin-left: 6px; }
button.btn { background: transparent; color: var(--paper); cursor: pointer; }
#interest { scroll-margin-top: 96px; }
/* tiny purple social buttons */
.nav .social { gap: 5px; }
.nav .social a { font-family: var(--display); font-weight: 600; font-size: 0.66rem; letter-spacing: 0.08em; color: #fff; background: var(--accent-ink); border: 0; width: 26px; height: 26px; padding: 0; display: inline-grid; place-items: center; border-radius: 6px; text-decoration: none; }
.nav .social a:hover { background: var(--accent); }
.nav .social a img { display: block; width: 14px; height: auto; max-width: none; }

/* products dropdown */
.dd { position: relative; display: inline-flex; align-items: center; gap: 2px; }
.dd-btn { background: none; border: 0; padding: 4px; cursor: pointer; color: var(--dim); display: inline-grid; place-items: center; }
.dd-btn svg { width: 10px; height: 6px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform 0.2s ease; }
.dd:hover .dd-btn, .dd-btn[aria-expanded="true"] { color: var(--paper); }
.dd-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.dd-menu { position: absolute; top: calc(100% + 10px); left: -14px; min-width: 260px; background: var(--raised); border: 1px solid var(--line-strong); padding: 6px; display: none; z-index: 30; }
.dd-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.dd:hover .dd-menu, .dd:focus-within .dd-menu, .dd.open .dd-menu { display: grid; }
.dd-menu a { display: grid; gap: 1px; padding: 9px 10px; color: var(--paper) !important; text-decoration: none; }
.dd-menu a b { font-family: var(--display); font-weight: 600; font-size: 0.95rem; }
.dd-menu a span { font-size: 0.8rem; color: var(--dim); }
.dd-menu a:hover, .dd-menu a:focus-visible { background: var(--raised-2); outline: none; }
@media (max-width: 600px) { .dd-menu { left: 0; min-width: 230px; } }

/* logo: a drop falls in the centre and rings ripple out */
.brand svg { overflow: visible; }
.brand .ring, .brand .core, .brand .rip { transform-box: fill-box; transform-origin: center; }
.brand .rip { fill: none; stroke: var(--paper); stroke-width: 1.6; vector-effect: non-scaling-stroke; opacity: 0; }
.brand:hover .core, .brand.ripple .core { animation: gl-drop 1.8s ease-out infinite; }
.brand:hover .rip, .brand.ripple .rip { animation: gl-rip 1.8s cubic-bezier(.2,.6,.3,1) infinite; }
.brand:hover .r2, .brand.ripple .r2 { animation-delay: 0.45s; }
.brand:hover .ring.i, .brand.ripple .ring.i { animation: gl-swell 1.8s ease-out infinite; animation-delay: 0.18s; }
.brand:hover .ring.o, .brand.ripple .ring.o { animation: gl-swell 1.8s ease-out infinite; animation-delay: 0.42s; }
@keyframes gl-drop { 0% { transform: scale(1); } 10% { transform: scale(0.55); } 22% { transform: scale(1.18); } 34%, 100% { transform: scale(1); } }
@keyframes gl-rip { 0% { transform: scale(1); opacity: 0; } 6% { opacity: 1; } 60% { opacity: 0.55; } 100% { transform: scale(8); opacity: 0; } }
@keyframes gl-swell { 0%, 100% { transform: scale(1); } 14% { transform: scale(1.07); } 30% { transform: scale(0.98); } 44% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .brand:hover .core, .brand:hover .rip, .brand:hover .ring, .brand.ripple .core, .brand.ripple .rip, .brand.ripple .ring { animation: none; }
}

/* WhatsApp-style demo */
.wa-phone { background: #EFEAE2; color: #111B21; border-radius: 22px; overflow: hidden; display: flex; flex-direction: column; min-width: 0; box-shadow: 0 18px 50px rgba(0,0,0,.35); }
.wa-phone .example-note, .gs-sheet .example-note { background: var(--raised); color: var(--faint); border-top: 0; }
.wa-head { background: #008069; color: #fff; display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.wa-head b { display: block; font-weight: 600; font-size: .95rem; }
.wa-head small { display: block; font-size: .72rem; opacity: .85; }
.wa-ava { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none; font-weight: 600; font-size: .8rem; }
.wa-ava.gs { background: #F7D6E0; color: #7A2E4A; }
.wa-ava.gm { background: #06060A; color: #F4F3F0; }
.wa-ava.gm svg { width: 22px; height: 22px; }
.wa-body { flex: 1; padding: 12px 12px 14px; display: grid; gap: 8px; align-content: start; background-image: radial-gradient(rgba(0,0,0,.04) 1.5px, transparent 2px); background-size: 22px 22px; }
.wa-day { justify-self: center; background: #fff; color: #54656F; font-size: .68rem; padding: 3px 9px; border-radius: 7px; box-shadow: 0 1px .5px rgba(11,20,26,.13); }
.wb { max-width: 88%; padding: 7px 9px 5px; border-radius: 9px; font-size: .86rem; line-height: 1.4; box-shadow: 0 1px .5px rgba(11,20,26,.13); }
.wb.in { background: #fff; justify-self: start; border-top-left-radius: 2px; }
.wb.out { background: #D9FDD3; justify-self: end; border-top-right-radius: 2px; }
.wb b { font-weight: 600; }
.wt { display: flex; justify-content: flex-end; align-items: center; gap: 4px; font-size: .64rem; color: #667781; margin-top: 2px; }
.tk { width: 15px; height: 10px; fill: none; stroke: #53BDEB; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.wv { display: flex; align-items: center; gap: 8px; min-width: 190px; }
.wplay { width: 0; height: 0; border-left: 11px solid #54656F; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.wwave { display: flex; gap: 2px; align-items: center; height: 24px; flex: 1; }
.wwave i { display: block; width: 3px; border-radius: 2px; background: #8696A0; }
.wlen { font-size: .7rem; color: #667781; }
.wtr { justify-self: start; max-width: 88%; font-size: .74rem; font-style: italic; color: #3B4A54; background: rgba(255,255,255,.7); padding: 5px 9px; border-radius: 8px; }
.wbtns { display: grid; gap: 4px; justify-self: start; width: 88%; }
.wbtns span { background: #fff; border-radius: 8px; text-align: center; color: #008069; font-weight: 600; font-size: .8rem; padding: 7px; box-shadow: 0 1px .5px rgba(11,20,26,.13); }
.wa-input { background: #F0F2F5; padding: 8px 10px; }
.wa-input span { display: block; background: #fff; border-radius: 18px; padding: 7px 14px; font-size: .78rem; color: #8696A0; }
.gs-sheet { background: #fff; color: #202124; border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; min-width: 0; box-shadow: 0 18px 50px rgba(0,0,0,.35); }
.gs-bar { display: flex; align-items: center; gap: 9px; padding: 12px 14px; border-bottom: 1px solid #E0E0E0; }
.gs-bar b { font-weight: 600; font-size: .95rem; } .gs-bar small { margin-left: auto; font-size: .7rem; color: #5F6368; }
.gs-icon { width: 16px; height: 20px; background: #0F9D58; border-radius: 2px; position: relative; }
.gs-icon::after { content: ""; position: absolute; inset: 7px 3px 4px; border: 1.5px solid #fff; }
.gs-grid { flex: 1; font-size: .8rem; }
.gs-row { display: grid; grid-template-columns: .8fr 1.2fr 1fr; border-bottom: 1px solid #E0E0E0; }
.gs-row span { padding: 9px 8px; border-right: 1px solid #E0E0E0; min-width: 0; overflow-wrap: anywhere; }
.gs-row span:last-child { border-right: 0; }
.gs-h { background: #F8F9FA; color: #5F6368; font-weight: 600; font-size: .72rem; }
.gs-new { background: #F3EAFE; }
.gs-sheet .s { font-family: var(--mono); font-size: .7rem; }
.gs-sheet .s.ok { color: #1E8E3E; } .gs-sheet .s.warn { color: #B06000; } .gs-sheet .s.new { color: #7B3FC4; }

/* no mouse-only captions or readouts under figures */
.figure .fig-meta { display: none; }

/* proof strip under the hero */
.stats { border-bottom: 1px solid var(--line); }
.stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.stat b { display: block; font-family: var(--display); font-weight: 600; font-size: clamp(2.4rem, 5vw, 3.4rem); line-height: 1; color: var(--accent); letter-spacing: -0.01em; }
.stat p { margin-top: 12px; color: var(--paper); line-height: 1.5; font-size: 0.98rem; max-width: 34ch; }
.stat-note { margin-top: 22px; font-family: var(--mono); font-size: 0.78rem; color: var(--faint); }
@media (max-width: 760px) { .stat-grid { grid-template-columns: 1fr; gap: 22px; } }

/* more builds, in action */
.uc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 28px; }
@media (max-width: 900px) { .uc-grid { grid-template-columns: 1fr; } }
.uc { min-width: 0; display: flex; flex-direction: column; }
.uc-k { font-family: var(--mono); font-size: .78rem; color: var(--accent); text-transform: uppercase; letter-spacing: .06em; }
.uc-d { margin: 6px 0 16px; color: var(--paper); line-height: 1.5; max-width: 46ch; }
.app { background: #fff; color: #1F2328; border-radius: 12px; overflow: hidden; box-shadow: 0 18px 50px rgba(0,0,0,.35); display: flex; flex-direction: column; flex: 1; min-width: 0; }
.app-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #F1F3F5; border-bottom: 1px solid #E3E6EA; }
.app-bar i { width: 9px; height: 9px; border-radius: 50%; background: #D0D4D9; }
.app-bar span { margin-left: 8px; font-size: .7rem; color: #6A737D; background: #fff; border-radius: 6px; padding: 3px 10px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-title { padding: 12px 14px 4px; font-size: .95rem; }
.app-title b { font-weight: 600; }
.app-body { padding: 8px 14px 14px; flex: 1; font-size: .8rem; }
.app .example-note { background: var(--raised); color: var(--faint); border-top: 0; }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.kpis div { background: #F6F7F9; border-radius: 8px; padding: 8px 10px; }
.kpis b { display: block; font-size: 1.3rem; font-weight: 600; line-height: 1.1; }
.kpis small { color: #6A737D; font-size: .7rem; }
.kpis .hot { background: #FFF4E5; } .kpis .hot b { color: #B06000; }
.ptable { border: 1px solid #E3E6EA; border-radius: 8px; overflow: hidden; }
.pr { display: grid; grid-template-columns: 1fr 1.4fr .9fr; border-top: 1px solid #E3E6EA; }
.pr:first-child { border-top: 0; }
.pr span { padding: 7px 8px; min-width: 0; overflow-wrap: anywhere; line-height: 1.35; }
.pr small { color: #6A737D; font-size: .7rem; }
.ph { background: #F6F7F9; color: #6A737D; font-weight: 600; font-size: .7rem; }
.app .s { font-family: var(--mono); font-size: .7rem; }
.app .s.ok { color: #1E8E3E; } .app .s.warn { color: #B06000; } .app .s.new { color: #7B3FC4; }
.run, .mrec { display: flex; align-items: center; gap: 8px; color: #3B4A54; margin-bottom: 10px; font-size: .76rem; }
.run .dot { width: 8px; height: 8px; border-radius: 50%; background: #1E8E3E; flex: none; }
.recdot { width: 8px; height: 8px; border-radius: 50%; background: #D93025; flex: none; }
.mh { font-weight: 600; font-size: .72rem; color: #6A737D; text-transform: uppercase; letter-spacing: .05em; margin: 8px 0 4px; }
.mlist { margin: 0; padding-left: 18px; line-height: 1.5; }
.mlist.acts { list-style: none; padding-left: 0; }
.mlist.acts li { display: flex; gap: 6px; padding: 5px 0; border-bottom: 1px solid #EEF0F2; }
.mlist.acts li span { margin-left: auto; color: #B06000; font-family: var(--mono); font-size: .7rem; white-space: nowrap; }
.mlist.acts b { font-weight: 600; }
.msent { margin-top: 10px; background: #D9FDD3; color: #111B21; border-radius: 8px; padding: 7px 10px; font-size: .76rem; }

/* practice dashboard example (light clinic style) */
.uc.wide { grid-column: 1 / -1; }
@media (min-width: 1100px) { .uc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rd-wrap { border-radius: 14px; overflow: hidden; box-shadow: 0 18px 50px rgba(0,0,0,.35); }
.rd-wrap .example-note { background: var(--raised); color: var(--faint); border-top: 0; }
.rd { display: grid; grid-template-columns: 210px 1fr; background: #F6FAF9; color: #1D2B2A; font-size: .82rem; }
.rd svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.rd-side { background: #fff; border-right: 1px solid #E4ECEA; padding: 18px 14px; display: flex; flex-direction: column; gap: 18px; }
.rd-brand { display: flex; gap: 10px; align-items: center; }
.rd-brand b { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: 1.05rem; display: block; }
.rd-brand small, .rd-me small { color: #6B7B79; font-size: .7rem; }
.rd-logo { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid #1F5C5E; color: #1F5C5E; display: grid; place-items: center; font-family: Georgia, serif; flex: none; }
.rd nav { display: grid; gap: 4px; }
.rd nav span { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; font-weight: 600; color: #2C3D3B; }
.rd nav span.on { background: #E1F0EE; color: #1F5C5E; }
.rd nav em { margin-left: auto; font-style: normal; font-size: .7rem; background: #FDF0D8; color: #8A5300; border: 1px solid #F1D49C; border-radius: 999px; width: 20px; height: 20px; display: grid; place-items: center; }
.rd-new { margin-top: auto; background: #1F5C5E; color: #fff; text-align: center; font-weight: 600; padding: 10px; border-radius: 10px; }
.rd-me { display: flex; gap: 9px; align-items: center; background: #F2F7F6; border-radius: 10px; padding: 9px; }
.rd-me b { display: block; font-weight: 600; }
.rd-av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: .7rem; flex: none; }
.rd-av.d { background: #F3DCCB; color: #7A3F1D; }
.rd-av.s { background: #D7E6E4; color: #1F5C5E; width: 24px; height: 24px; }
.rd-av.big { width: 64px; height: 64px; font-size: 1.2rem; background: #F3DCCB; color: #7A3F1D; border: 2px solid #1F5C5E; font-family: Georgia, serif; }
.rd-main { padding: 14px 18px 18px; min-width: 0; }
.rd-top { display: flex; align-items: center; gap: 10px; }
.rd-search { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #E4ECEA; border-radius: 999px; padding: 8px 14px; color: #8A9896; white-space: nowrap; overflow: hidden; }
.rd-tag { border: 1.5px dashed #8A9896; border-radius: 999px; padding: 5px 10px; font-weight: 700; font-size: .66rem; letter-spacing: .08em; color: #3C4C4A; white-space: nowrap; }
.rd-bell { position: relative; background: #fff; border: 1px solid #E4ECEA; border-radius: 50%; width: 34px; height: 34px; display: grid; place-items: center; flex: none; }
.rd-bell i { position: absolute; top: -4px; right: -4px; background: #A35F00; color: #fff; font-style: normal; font-size: .62rem; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; }
.rd-who { display: flex; align-items: center; gap: 6px; background: #fff; border: 1px solid #E4ECEA; border-radius: 999px; padding: 4px 12px 4px 4px; font-weight: 600; white-space: nowrap; }
.rd-hello { display: flex; align-items: center; gap: 16px; margin: 18px 0; }
.rd-hello h4 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: 1.7rem; margin: 0; line-height: 1.15; color: #1D2B2A; }
.rd-hello p { margin: 4px 0 0; color: #4B5B59; }
.rd-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.rd-kpis .k { border-radius: 14px; padding: 12px; }
.rd-kpis .a { background: #FDF1DE; } .rd-kpis .b { background: #E8EEFA; } .rd-kpis .c { background: #EFEAF9; } .rd-kpis .d { background: #E2F1EE; }
.kh { display: flex; gap: 8px; align-items: center; font-weight: 600; color: #2C3D3B; line-height: 1.25; }
.kh svg { background: #fff; border-radius: 8px; padding: 5px; width: 26px; height: 26px; }
.rd-kpis b { display: block; font-family: Georgia, serif; font-weight: 400; font-size: 2rem; margin: 8px 0 4px; line-height: 1; }
.rd-kpis .a b { color: #8A5300; }
.rd-kpis small { color: #3C4C4A; font-size: .74rem; }
.rd-row { display: grid; grid-template-columns: 1.15fr 1fr; gap: 10px; margin-top: 10px; }
.rd-card { background: #fff; border: 1px solid #E4ECEA; border-radius: 14px; padding: 14px 16px; min-width: 0; }
.ch { font-weight: 600; color: #2C3D3B; margin: 0; }
.appt { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.appt b { display: block; font-family: Georgia, serif; font-weight: 400; font-size: 2.2rem; line-height: 1.1; margin: 4px 0; }
.appt small, .stock small { color: #4B5B59; }
.ring { --p: 60; width: 76px; height: 76px; border-radius: 50%; background: conic-gradient(#1E7A4C calc(var(--p) * 1%), #E4ECEA 0); display: grid; place-items: center; flex: none; }
.ring span { width: 60px; height: 60px; border-radius: 50%; background: #fff; display: grid; place-items: center; align-content: center; font-family: Georgia, serif; font-size: 1rem; line-height: 1; }
.ring small { font-family: sans-serif; font-size: .6rem; color: #6B7B79; margin-top: 2px; }
.stock h5 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: 1.15rem; margin: 6px 0 4px; color: #1D2B2A; }
.rd-btn { display: inline-block; margin-top: 10px; border: 1px solid #D5DFDD; border-radius: 9px; padding: 5px 12px; font-weight: 600; }
@media (max-width: 760px) {
  .rd { grid-template-columns: 1fr; }
  .rd-side { display: none; }
  .rd-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rd-row { grid-template-columns: 1fr; }
  .rd-search, .rd-who { display: none; }
  .rd-top { justify-content: flex-end; }
  .rd-hello h4 { font-size: 1.3rem; }
  .rd-av.big { width: 48px; height: 48px; }
}

/* team portraits */
.card .portrait { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; display: block; margin-bottom: 8px; filter: grayscale(0.15); }

/* stepped interest form */
.interest.stepped fieldset[hidden] { display: none; }
.steps-bar { display: flex; gap: 6px; margin-bottom: 14px; }
.steps-bar span { flex: 1; font-family: var(--display); font-weight: 600; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); padding-top: 10px; border-top: 2px solid var(--line-strong); transition: color .2s ease, border-color .2s ease; }
.steps-bar span.on { color: var(--accent); border-color: var(--accent); }
.steps-bar span.done { color: var(--dim); border-color: var(--dim); }
@media (max-width: 640px) { .steps-bar span { font-size: 0.62rem; letter-spacing: 0.08em; } }
.steps-nav { display: flex; gap: 10px; }
.steps-nav [hidden], .form-foot button[hidden] { display: none; }
.btn.ghost { background: transparent; border: 1px solid var(--line-strong); color: var(--paper); cursor: pointer; }