/* Website Assistant demo page (Spanfold brand: paper, forest, ink; IBM Plex). The clinic inside the frame keeps its own look. */
@font-face{font-family:"IBM Plex Sans";src:url("/static/spanfold/ibm-plex-sans-var.woff2") format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/static/spanfold/ibm-plex-mono-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/static/spanfold/ibm-plex-mono-600.woff2") format("woff2");font-weight:600;font-display:swap}
:root{--paper:#F6F1E6;--surface:#FBF8F1;--sand:#EFE8D9;--sage-wash:#E3ECE5;--ink:#24221F;--ink-soft:#3A3732;--muted:#4D4840;--forest:#245A41;--forest-d:#1A4430;--sage:#7E9A8A;--line:#CBBFA6;--caution:#6E4508;--caution-w:#F1DFC0}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.55 "IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--forest)}
:focus-visible{outline:3px solid var(--forest);outline-offset:2px}
.skip{position:absolute;left:-999px;top:8px;padding:8px 12px;background:#fff;z-index:10}.skip:focus{left:8px}
.muted{color:var(--muted)}
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:1440px;margin:0 auto;padding:14px 24px}
.logo img{display:block;height:24px;width:auto}
.top nav{display:flex;gap:18px;flex-wrap:wrap}
.top nav a{font-size:15px;font-weight:600;text-decoration:none;color:var(--ink-soft)}
.top nav a:hover{color:var(--forest);text-decoration:underline}

.hero{padding:28px 24px 34px}
.hero-in{max-width:1040px;margin:0 auto;text-align:center}
.kicker{display:inline-block;margin:0 0 14px;padding:4px 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);font:600 13px/1.4 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.04em;text-transform:uppercase;color:var(--forest)}
.kicker span{color:var(--muted)}
.hero h1{margin:0 auto 22px;max-width:920px;font-size:clamp(30px,4.4vw,52px);line-height:1.1;letter-spacing:-.02em;font-weight:700}
.proof{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0 0 24px;padding:0;list-style:none;text-align:left}
.proof li{padding:14px 16px;background:var(--surface);border:1px solid var(--line);border-radius:14px;font-size:15px;color:var(--ink-soft)}
.proof b{display:block;margin-bottom:2px;color:var(--ink);font-size:16px}
.cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:0 0 18px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 26px;border:2px solid var(--forest);border-radius:999px;background:var(--forest);color:#fff;font:inherit;font-size:17px;font-weight:700;text-decoration:none;cursor:pointer}
.btn:hover{background:var(--forest-d);border-color:var(--forest-d);color:#fff}
.btn-ghost{background:transparent;color:var(--forest)}
.btn-ghost:hover{background:var(--sage-wash);color:var(--forest-d)}
.meter{display:flex;justify-content:center}
.meter .sf-meter{background:var(--surface);border-color:var(--line);color:var(--ink-soft);font-family:inherit;justify-content:center}
.meter .sf-meter-bar i{background:var(--forest)}
.meter .sf-meter-l{color:var(--forest)}

/* ---- the split: clinic site in a browser frame (60%) + Under the hood (40%) ---- */
.stage{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:20px;max-width:1440px;margin:0 auto;padding:0 24px 40px;scroll-margin-top:12px}
.frame{display:flex;flex-direction:column;height:clamp(640px,calc(100vh - 40px),920px);background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 18px 50px rgba(36,34,31,.12)}
.frame-bar{display:flex;align-items:center;gap:14px;padding:10px 14px;background:var(--sand);border-bottom:1px solid var(--line)}
.dots{display:flex;gap:6px}.dots i{width:11px;height:11px;border-radius:50%;background:#D9CFBD}
.addr{flex:1;max-width:420px;margin:0 auto;padding:5px 14px;border-radius:999px;background:#fff;border:1px solid var(--line);font:13px "IBM Plex Mono",ui-monospace,monospace;color:var(--muted);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.frame-label{margin:0;padding:6px 14px;background:var(--surface);border-bottom:1px solid var(--line);font:600 12.5px/1.4 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.03em;color:var(--forest);text-align:center}
.frame iframe{flex:1;width:100%;border:0;background:#fff}

.hood{display:flex;flex-direction:column;height:clamp(640px,calc(100vh - 40px),920px);background:#F7F8FB;border:1px solid #D7DCE5;border-radius:16px;overflow:hidden}
.hood-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:16px 18px 12px;background:#1F2A37;color:#fff}
.hood-head h2{margin:0;font-size:20px;letter-spacing:-.01em}
.hood-head p{margin:2px 0 0;font-size:14px;color:#C6D0DD}
.link{border:0;background:none;color:#C6D0DD;font:inherit;font-size:14px;text-decoration:underline;cursor:pointer;padding:6px}
.link[hidden]{display:none}
.hood-list{flex:1;overflow-y:auto;padding:14px}
.hood-empty p{margin:0 0 10px;color:#3E4A57;font-size:15px}
.try-h{font-weight:700;color:#1F2937!important;margin-top:14px!important}
.tries{display:grid;gap:8px}
.tries button{display:block;width:100%;padding:10px 14px;text-align:left;background:#fff;border:1px solid #D7DCE5;border-radius:12px;font:inherit;font-size:15px;color:#1F2937;cursor:pointer}
.tries button:hover{border-color:var(--forest);background:#F3F8F4}
.tries b{display:block;font:600 11.5px/1.4 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.05em;text-transform:uppercase;color:var(--forest)}
.hood .uth-card{font-family:"IBM Plex Sans",system-ui,sans-serif}

/* ---- bands below ---- */
.band{padding:44px 24px;border-top:1px solid var(--line)}
.band.alt{background:var(--surface)}
.wrap{max-width:1100px;margin:0 auto}
.band h2{margin:0 0 16px;font-size:26px;letter-spacing:-.01em}
.scores{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.score{padding:16px 18px;background:#fff;border:1px solid var(--line);border-radius:14px}
.score p{margin:0;font-size:15px;color:var(--ink-soft)}
.score .big{font:600 34px/1.1 "IBM Plex Mono",ui-monospace,monospace;color:var(--forest);margin-bottom:6px}
.scores .misses,.scores .note{grid-column:1/-1}
.misses summary{cursor:pointer;font-weight:700;color:var(--forest)}
.misses ul{margin:10px 0;padding-left:20px;font-size:15px}
.misses li{margin:4px 0}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.ints,.limits{margin:0 0 12px;padding:0;list-style:none}
.ints li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:15px;color:var(--ink-soft)}
.ints b{color:var(--ink)}
.ints .pill{margin-left:auto}
.limits li{position:relative;padding:6px 0 6px 20px;font-size:15px}
.limits li::before{content:"";position:absolute;left:2px;top:15px;width:8px;height:2px;background:var(--caution)}
.pill{display:inline-block;padding:2px 10px;border-radius:999px;background:var(--sand);font:600 12px/1.6 "IBM Plex Mono",ui-monospace,monospace;color:var(--muted);white-space:nowrap}
.pill.ok{background:var(--sage-wash);color:var(--forest)}
.pill.warn{background:var(--caution-w);color:var(--caution)}
.next{text-align:center}
.next p{max-width:640px;margin:0 auto 18px;color:var(--ink-soft)}
.foot{padding:22px 24px 90px;text-align:center;font-size:13.5px;color:var(--muted);border-top:1px solid var(--line)}

/* ---- tablets and phones: no split. Try it now opens the clinic site with the assistant full screen. ---- */
@media (max-width:1023px){
  .stage{display:none}
  .proof{grid-template-columns:1fr}
  .scores{grid-template-columns:1fr}
  .cols{grid-template-columns:1fr;gap:20px}
}
@media (max-width:560px){
  .top{padding:12px 16px}
  .top nav{gap:12px}.top nav a{font-size:14px}
  .hero{padding:18px 16px 26px}
  .hero-in{text-align:left}
  .cta{justify-content:flex-start}
  .cta .btn{width:100%}
  .band{padding:32px 16px}
  .meter{justify-content:flex-start}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}