@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,300;0,400;0,500;0,600;1,400&family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

/* The page is held back until casoa.js has localised it and knows who is signed in —
   the markup ships English and says "Log in", so showing it first means every visitor
   watches it change under them. casoa.js adds body.ready when the boot is done, or when
   it fails: a page that cannot localise must still be readable. This stylesheet is a
   <link> in <head>, which the browser waits for before painting, so it holds from the
   first paint; if it ever fails to load, the page is simply visible. */
body { opacity: 0; transition: opacity .18s ease-out; }
body.ready { opacity: 1; }

.casoa {
  /* Design system cloned from Ivana's casoa-ivana.html (dark / neuro) */
  --bg: #15273A;
  --bg-soft: #1A2F45;
  --surface: #1F374F;
  --surface-2: #26415C;
  --line: rgba(150, 180, 200, .12);
  --line-2: rgba(150, 190, 210, .22);
  --text: #EAF0F4;
  --mute: #9FB0BC;
  --text-3: #647480;
  --accent: #41C8BF;
  --accent2: #67E6DC;
  --accent-deep: #15807A;
  --ochre: #D69152;
  --danger: #e8590c;
  --nav-bg: rgba(21, 39, 58, .82);
  --on-accent: #062420;   /* text colour on accent-filled buttons - dark in dark mode (bright cyan reads better with dark text) */
  --ghost-bg: #0f0f0f;    /* ghost/outline buttons - almost black (15,15,15) in dark mode */
  --ghost-fg: var(--text);
  --link: #ffb100;        /* in-text links - amber in dark mode */
  --link-hover: #ffc94d;
  --footer-fg: #93a1ad;   /* footer text - brighter again so it reads clearly on the dark bg */

  /* Overall type-scale lever. Every font-size is calc(<px-number> * var(--u)),
     so changing --u scales the whole site at once. Kept scoped to .casoa (not
     html) so it can't affect the rest of the Warp UI. Overridden per breakpoint
     below: smaller on small phones, larger on large screens. */
  --u: 1px;

  --serif: "Spectral", Georgia, serif;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: calc(16.5 * var(--u));
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;

  scrollbar-width: thin;
  scrollbar-color: var(--line-2) var(--bg);
}

/* Full-page treatment - ONLY the marketing pages (body.casoa.page), NOT app
   windows: fill the viewport + the fixed neuro gradient. Kept OFF base .casoa so
   apps (which are .casoa <appname> inside a window) don't inherit a 100vh root. */
.casoa.page {
  min-height: 100vh;
  background-image:
    radial-gradient(900px 520px at 82% -8%, rgba(65, 200, 191, .10), transparent 60%),
    radial-gradient(700px 600px at -10% 18%, rgba(40, 120, 160, .07), transparent 55%);
  background-attachment: fixed, fixed;
}

/* type-scale lever: smaller on small phones, larger on large screens.
   (The wider container at >=1920 lives at the end of this file, after .wrap is
   defined, so it wins the cascade.) */
@media (max-width: 465px)  { .casoa { --u: .82px; } }
@media (min-width: 1920px) { .casoa { --u: 1.12px; } }

/* Light theme - white background; toggled on by the header switch
   (Web.js adds .light to <body class="casoa"> based on the visitor's pick
   or the browser/OS prefers-color-scheme). */
.casoa.light {
  --bg: #eff4f7;
  --bg-soft: #f2f6f9;
  --surface: #ffffff;
  --surface-2: #eef3f7;
  --line: rgba(20, 40, 60, .12);
  --line-2: rgba(20, 60, 80, .20);
  --text: #16242e;
  --mute: #51616d;
  --text-3: #8a98a4;
  --accent: #0e8f86;
  --accent2: #0b7268;
  --nav-bg: rgba(239, 244, 247, .88);
  --on-accent: #ffffff;   /* deeper teal accent in light mode - white text reads well */
  --ghost-bg: #0f0f0f;    /* ghost buttons - same near-black (15,15,15) in light mode; the dark look reads well */
  --ghost-fg: #ffffff;
  --link: #0073ee;        /* in-text links - blue in light mode (amber is dark-mode only) */
  --link-hover: #0059c0;
  --footer-fg: #3f4951;   /* dark grey reads fine on the light footer */

  background-image:
    radial-gradient(900px 520px at 82% -8%, rgba(14, 143, 134, .06), transparent 60%),
    radial-gradient(700px 600px at -10% 18%, rgba(40, 120, 160, .05), transparent 55%);
}

.casoa::-webkit-scrollbar,
.casoa *::-webkit-scrollbar { width: 8px; height: 8px; }
.casoa::-webkit-scrollbar-track,
.casoa *::-webkit-scrollbar-track { background: var(--bg); }
.casoa::-webkit-scrollbar-thumb,
.casoa *::-webkit-scrollbar-thumb { background: var(--surface-2); border-radius: 4px; }
.casoa::-webkit-scrollbar-thumb:hover,
.casoa *::-webkit-scrollbar-thumb:hover { background: var(--mute); }

/* Chromium doesn't resolve var() inside ::-webkit-scrollbar reliably (like the
   autofill box-shadow), so the light theme keeps the dark colours - override with
   concrete light values. */
.casoa.light::-webkit-scrollbar-track,
.casoa.light *::-webkit-scrollbar-track { background: #eff4f7; }
.casoa.light::-webkit-scrollbar-thumb,
.casoa.light *::-webkit-scrollbar-thumb { background: #c3d0da; }
.casoa.light::-webkit-scrollbar-thumb:hover,
.casoa.light *::-webkit-scrollbar-thumb:hover { background: #a9bac6; }
.casoa::-webkit-scrollbar-corner,
.casoa *::-webkit-scrollbar-corner { background: var(--bg); }

.casoa *, .casoa *::before, .casoa *::after { box-sizing: border-box; }
.casoa * { margin: 0; padding: 0; }
.casoa ::selection { background: rgba(65, 200, 191, .28); }

/* Native <select> dropdown: Windows/Chrome paints the open option list with the
   control's dark background but leaves option TEXT black (invisible in dark mode).
   Force readable, theme-aware colours for every select's options. Tokens flip with
   .casoa / .casoa.light, so this works in both themes. (The nav language select
   keeps its own explicit option rule below.) */
.casoa select option { background: var(--surface); color: var(--text); }

/* opacity utility */
.casoa .op8 { opacity: .8; }

/* Scoped to .casoa so it cannot reach the engine's own windows, which use the same
   word inside their shadow root. For a page element that is in the markup but not
   meant to be seen yet. */
.casoa .hidden { display: none !important; }

/* password reveal eye (reusable). Height-agnostic: the button fills the input
   height (top/bottom:0) and flex-centres the glyph, so it sits correctly on inputs
   of ANY height. The small translate compensates the icon font's low baseline
   (bump it here if it needs to go higher). The show/hide TOGGLE is JS - CSS can't
   change an input's type. */
.casoa .pwbox { position: relative; display: block; }
.casoa .pwbox > input { width: 100%; box-sizing: border-box; padding-right: 40px; }
.casoa .pw-eye {
  position: absolute; right: 4px; top: 0; bottom: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; padding: 0;
  background: transparent; border: 0; cursor: pointer;
  color: var(--mute); font-size: calc(16 * var(--u));
}
.casoa .pw-eye:hover { color: var(--text); }
.casoa .pw-eye .icon { display: block; line-height: 1; transform: translateY(-1px); }

/* Smooth the light/dark skin change, but ONLY when the visitor clicks the theme
   toggle: Web.js adds .animate-skin to the body for the duration of the switch,
   then removes it. This keeps page navigations - which re-apply the theme on a
   fresh srcdoc - instant and flicker-free, instead of animating dark->light on
   every load. Fades background and text (and border) colour over 0.3s. */
.casoa.animate-skin, .casoa.animate-skin * {
  transition: background-color .5s ease, color .5s ease, border-color .5s ease;
}

.casoa a { color: var(--link); text-decoration: none; }
.casoa a:hover { color: var(--link-hover); text-decoration: none; }
.casoa a[code] { cursor: pointer; }

.casoa .wrap { max-width: 1140px; margin: 0 auto; padding: 30px 30px; }

/* nav */
.casoa nav {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid var(--line);
  background: var(--nav-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
/* under the pointer the nav comes to the front — over the app windows, so its menus
   can be reached — and goes back to 40 when the pointer leaves */
.casoa nav:hover,
.casoa nav.open { z-index: 9999; }   /* and while the hamburger menu is open (no hover on a phone) */
.casoa .nav-in {
  max-width: 1140px;
  margin: 0 auto;
  padding: 14px 30px 16px;
  display: flex;
  align-items: center;
  gap: 22px;
}
.casoa .nav-in .brand { margin-right: auto; }
.casoa .nav-menu { display: flex; align-items: center; gap: 18px; }
.casoa nav .brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: calc(40 * var(--u));
  letter-spacing: -0.02em;
  color: var(--text);
}
.casoa nav .brand .logo {
  height: 60px;
  width: 60px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.casoa nav .brand span { color: var(--accent); }
.casoa nav .links a {
  font-family: var(--sans);
  color: var(--mute);
  margin-left: 28px;
  font-size: calc(14 * var(--u));
}
.casoa nav .links a:hover { color: var(--text); }
.casoa nav .links a.active { color: var(--text); }
.casoa nav .nav-toggle {
  display: none;
  background: transparent;
  border: 0;
  color: var(--text);
  font-size: calc(26 * var(--u));
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
}
.casoa nav .theme-toggle {
  background: transparent;
  border: 0;
  color: var(--mute);
  font-size: calc(19 * var(--u));
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
}
.casoa nav .theme-toggle:hover { color: var(--text); }
/* fullscreen, beside the theme switch and drawn like it */
.casoa nav .fs-toggle {
  background: transparent;
  border: 0;
  color: var(--mute);
  line-height: 0;
  cursor: pointer;
  padding: 4px 6px;
}
.casoa nav .fs-toggle:hover { color: var(--text); }
.casoa nav .fs-toggle svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
.casoa nav .fs-toggle .fs-off,
.casoa.fullscreen nav .fs-toggle .fs-on { display: none; }
.casoa.fullscreen nav .fs-toggle .fs-off { display: inline; }
.casoa nav .lang-select {
  background: var(--surface);   /* a field, standing out of the nav like the apps' fields */
  border: 1px solid var(--line-2);
  color: var(--text);
  font-family: var(--sans);
  font-size: calc(13 * var(--u));
  border-radius: 4px;
  padding: 5px 8px;
  cursor: pointer;
}
.casoa nav .lang-select option { color: #16242e; background: #ffffff; }
/* "Log in" sits in the header but OUTSIDE .nav-menu, so it never collapses into
   the hamburger. Styled like a nav link. Desktop: order:1 puts it after the menu
   => far right. Mobile override (860px block) drops it beside the hamburger. */
.casoa nav .nav-login {
  order: 2;
  margin-left: 28px;
  font-family: var(--sans);
  color: var(--mute);
  font-size: calc(14 * var(--u));
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.casoa nav .nav-login:hover { color: var(--text); }
/* ── the nav's two link groups ─────────────────────────────────────────────────
   .web-links (the site's pages) and .user-links (Exams, New exam), switched by
   body.signed-in, which casoa.js sets from the session. Signed in, the pages fold into
   a "Web" menu: its label shows, the items drop down under it on hover or focus. */
.casoa nav .web-links { position: relative; }
.casoa nav .web-label, .casoa nav .user-links { display: none; }
.casoa.signed-in nav .user-links { display: inline; }
.casoa.signed-in nav .web-label { display: inline; cursor: pointer; }
.casoa.signed-in nav .web-items {
  display: none;
  position: absolute; top: 100%; right: 0; z-index: 5;
  min-width: 180px;
  padding: 8px 0;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 10px;
}
.casoa.signed-in nav .web-links:hover .web-items,
.casoa.signed-in nav .web-links:focus-within .web-items { display: block; }
.casoa.signed-in nav .web-items a { display: block; margin: 0; padding: 8px 16px; }
.casoa.signed-in nav .web-items a.hidden { display: none; }

.casoa nav .user-links a { cursor: pointer; }
.casoa nav .user-links .admin { display: none; }
.casoa.is-admin nav .user-links .admin { display: inline; }
/* New exam: the obvious thing to press — a solid dark pill, white text */
.casoa nav .links .new-exam {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: 28px;
  padding: 8px 16px; border-radius: 999px;
  background-color: #0f0f0f; color: #ffffff;
  font-size: 14px; white-space: nowrap; cursor: pointer;
}
.casoa nav .links .new-exam:hover { background-color: #1c1c1c; color: #ffffff; }
.casoa nav .new-exam svg { width: 14px; height: 14px; flex: 0 0 auto; }

/* The Examination window hides the page behind it and lays the paw tile over what is
   left (casoa.js toggleWeb). On a fixed layer under the app windows, not on body's own
   background, which carries the theme's two radial tints. */
.casoa .wrap.casoa-hidden { display: none; }
.casoa.casoa-paws::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("/resources/images/paws-tile.png");
  background-repeat: repeat; background-size: 260px 260px;
}

/* hero */
.casoa .hero {
  padding: 56px 0 54px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 56px;
}
.casoa .hero-row {
  display: flex;
  align-items: center;
  gap: 50px;
  margin: 0 0 30px;
}
.casoa .hero-lead { flex: 1 1 50%; min-width: 0; }
.casoa .hero-art { flex: 1 1 50%; min-width: 0; }
/* Hero mockup (casoa_mobile_mockup.png, 409x656 portrait). For this particular
   image and its ratio the overall hero layout reads better when the image is a
   little smaller than the full column - so we cap below native size, and tighten
   it further on mobile/tablet. Never upscale past the original dimensions. */
.casoa .hero-art .shot {
  display: block;
  width: 100%;
  max-width: 409px;   /* native size - never larger; scales down only */
  height: auto;       /* keeps the 409x656 ratio, so height stays <= 656 */
  margin-left: auto;  /* align to the right of the column */
  opacity: .95;       /* slight transparency so it blends into both the light and dark theme backgrounds */
}
/* Placeholder laid exactly over the mockup's screen - the future live GUI. An
   iPhone-ratio (393x852) content box sized by casoa.js to the screen's on-page
   width and mapped onto the screen with matrix3d. The transparent --pad around it
   only absorbs Chrome's clipping of perspective boxes; .phone-gui is the screen, and
   holds a snapshot of the Examination app drawn at 393x852 and zoomed to fit. */
.casoa .hero-art, .casoa .bullets-art { position: relative; }
.casoa .phone-screen {
  position: absolute;
  box-sizing: content-box;
  padding: var(--pad, 0);
  transform-origin: 0 0;
  pointer-events: none;
}
.casoa .phone-gui {
  position: absolute;
  inset: var(--pad, 0);
  background: #fff;
  border-radius: var(--radius, 0);
  overflow: hidden;
}
/* a second copy of the hero image that only appears on mobile, beside the bullets */
.casoa .shot-mobile { display: none; }
/* mobile + tablet: this image's proportions sit better a bit smaller */
@media (max-width: 1024px) {
  .casoa .hero-art .shot { max-width: 320px; }
}
.casoa .hero h1 {
  font-family: var(--serif);
  font-size: clamp(calc(41.6 * var(--u)), 5.6vw, calc(70.4 * var(--u)));
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin-bottom: 22px;
}
/* each colored part of the headline on its own row, in italic accent */
.casoa .hero h1 span { display: block; font-style: italic; color: var(--accent); font-weight: 400; }
.casoa .hero h1 em { font-style: italic; color: var(--accent); }
.casoa .credit { font-size: calc(14.5 * var(--u)); color: var(--text-3); margin: 0 0 26px; font-family: var(--mono); letter-spacing: 0.01em; }
.casoa .credit b { color: var(--text); font-weight: 500; font-family: var(--sans); }
.casoa .hero p.lede {
  font-size: calc(19 * var(--u));
  color: var(--mute);
  max-width: 720px;
  margin-bottom: 16px;
  text-align: justify;
}
.casoa .hero-bullets { margin: 16px 0 28px; max-width: 720px; }
.casoa .hero-bullets li { font-size: calc(18 * var(--u)); padding: 8px 0 8px 32px; color: var(--text); }
.casoa .hero-bullets li::before { font-size: calc(20 * var(--u)); top: 6px; }
.casoa .hero .tagline { margin-top: 4px; margin-bottom: 28px; }
@media (max-width: 860px) {
  /* keep the hero inline (image stays to the right), don't stack to a new row;
     give the text two-thirds and the image the last third. The image renders at
     half its native width (~205px) - fine since tablets/phones are ~2x DPR. */
  .casoa .hero-row { gap: 24px; }
  .casoa .hero-lead { flex: 2 1 0; }
  .casoa .hero-art { flex: 1 1 0; }
  .casoa .hero-art .shot { max-width: 205px; }

}

/* the nav collapses to a hamburger */
@media (max-width: 1100px) {
  /* links, language + theme all go inside the hamburger. Earlier than the hero's 860px:
     signed in, the nav holds more than a narrow desktop row fits */
  .casoa .nav-in { flex-wrap: wrap; }
  .casoa nav .nav-toggle { display: block; }
  .casoa .nav-menu {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    margin-top: 10px;
  }
  .casoa nav.open .nav-menu { display: flex; }
  .casoa nav .links a {
    display: block;
    margin-left: 0;
    padding: 11px 2px;
    font-size: calc(15 * var(--u));
    border-top: 1px solid var(--line);
  }
  .casoa nav .lang-select { width: 100%; margin-top: 6px; }
  .casoa nav .theme-toggle { align-self: flex-start; font-size: calc(22 * var(--u)); padding: 6px 2px; }
  .casoa nav .fs-toggle { align-self: flex-start; padding: 6px 2px; }
  .casoa nav .fs-toggle svg { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
  /* Log in: not floated here - natural order (brand | Log in | hamburger), so it
     sits just left of the hamburger, which stays in the right corner. */
  .casoa nav .nav-login { order: 0; margin-left: 0; margin-right: 16px; }
  /* in the hamburger the "Web" menu is a heading with its pages listed under it */
  .casoa.signed-in nav .web-label { display: block; color: var(--text-3); pointer-events: none; }
  .casoa.signed-in nav .web-items { display: block; position: static; padding: 0; background: none; border: 0; }
  /* every row the same: 11px 2px like the rest of the menu, the pill a row's height */
  .casoa.signed-in nav .web-items a { padding: 11px 2px; }
  .casoa.signed-in nav .user-links { display: block; }
  .casoa.is-admin nav .user-links .admin { display: block; }
  .casoa nav .links .new-exam { margin: 2px 0; padding: 8px 16px; border-top: 0; }
}

.casoa .price {
  display: inline-block;

  color: var(--accent-deep);
  padding: 6px 14px;
  border-radius: 3px;
  font-weight: 600;
  font-size: calc(14 * var(--u));
  letter-spacing: 0.02em;
  font-family: var(--mono);
}

.casoa .tagline {
  font-size: calc(18 * var(--u));
  color: var(--accent);
  margin-top: 24px;
  font-style: italic;
  font-family: var(--serif);
}

/* headings + prose */
/* standalone page title on content pages (terms, etc.); the hero h1 is styled separately above */
.casoa .wrap > h1 {
  font-family: var(--serif);
  font-size: clamp(calc(33.6 * var(--u)), 4.4vw, calc(52 * var(--u)));
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin: 8px 0 24px;
}
.casoa h2 {
  font-family: var(--serif);
  font-size: clamp(calc(28.8 * var(--u)), 3.4vw, calc(41.6 * var(--u)));
  font-weight: bold;
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin: 56px 0 20px;
}
.casoa h3 { font-family: var(--serif); font-size: calc(20 * var(--u)); margin: 0 0 8px; font-weight: 500; }

.casoa p { margin-bottom: 14px; color: var(--text); }
.casoa p.mute { color: var(--mute); }
.casoa .section-intro { color: var(--mute); max-width: 720px; margin-bottom: 24px; font-size: calc(18 * var(--u)); }

/* cards */
.casoa .grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin: 24px 0;
}
.casoa .card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 22px;
}
.casoa .card h3 { color: var(--accent2); }
.casoa .card ul { margin-top: 8px; padding-left: 18px; color: var(--mute); font-size: calc(14.5 * var(--u)); }
.casoa .card ul li { margin-bottom: 4px; }

/* ── team page ─────────────────────────────────────────────────────────── */
.casoa .t-member { display: flow-root; text-align: left; }   /* box wraps its floated avatar */
.casoa .t-member > .t-avatar { float: left; margin: 0 16px 10px 0; }   /* text flows beside + below the image, no empty gap */
.casoa .t-avatar {
  width: 96px; height: 96px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--mute);
  display: flex; align-items: center; justify-content: center;
  margin: 0;
  overflow: hidden;
  flex: none;
}
.casoa .t-avatar.company { border-radius: 18px; }
.casoa .t-avatar svg { width: 56%; height: 56%; }
.casoa .t-avatar img { width: 100%; height: 100%; object-fit: cover; }   /* drop-in real photos */
.casoa .t-member h3 { color: var(--text); font-size: calc(19 * var(--u)); }
.casoa .t-title { color: var(--accent); font-size: calc(13 * var(--u)); font-weight: 600; margin-bottom: 2px; }
.casoa .t-role { margin-top: 2px; }
.casoa .t-loc { color: var(--text-3); font-size: calc(12.5 * var(--u)); margin-top: 1px; }
.casoa .t-loc:empty { display: none; }   /* hide until a location is set */
.casoa .t-bio { margin-top: 12px; color: var(--mute); font-size: calc(14.5 * var(--u)); line-height: 1.62; text-align: justify; }
.casoa .t-link { display: inline-block; margin-top: 14px; color: var(--accent); font-weight: 600; font-size: calc(13.5 * var(--u)); }
.casoa .t-link:hover { color: var(--accent2); }

/* lead member (Ronaldo): avatar left, bio right; stacks on small screens */
.casoa .t-lead { display: flex; gap: 30px; align-items: flex-start; text-align: left; margin: 24px 0 6px; }
.casoa .t-lead > .t-avatar { float: none; width: 150px; height: 150px; margin: 4px 0 0; }
.casoa .t-lead .t-body { flex: 1; min-width: 0; }
.casoa .t-lead h3 { font-size: calc(28 * var(--u)); }
@media (max-width: 640px) {
  /* mobile: lead becomes the same compact image-left card as the rest */
  .casoa .t-lead { gap: 16px; }
  .casoa .t-lead > .t-avatar { width: 96px; height: 96px; }
}

/* product page: "problem" | "product" side by side, then a 3-box row
   (who-it's-for + the two tiers). Collapses to one column at 860px, the same
   breakpoint where the menu turns into a hamburger. */
.casoa .duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin: 24px 0 40px;
}
.casoa .duo h2, .casoa .trio h2 { margin-top: 0; }
.casoa .trio {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  margin: 24px 0;
  align-items: start;
}
@media (max-width: 860px) {
  .casoa .duo, .casoa .trio { grid-template-columns: 1fr; }
}

/* arrow bullets */
.casoa .bullets { list-style: none; margin: 16px 0; }
.casoa .bullets li { padding: 8px 0 8px 28px; position: relative; color: var(--text); }
.casoa .bullets li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}

.casoa .kbd {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 2px 8px;
  font-family: var(--mono);
  font-size: calc(13 * var(--u));
  color: var(--accent2);
}

/* buttons */
.casoa .cta {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 500;
  font-size: calc(15.5 * var(--u));
  letter-spacing: 0.01em;
  background: var(--accent);
  color: var(--on-accent);
  padding: 15px 40px;
  border-radius: 999px;
  border: 0;
  margin-top: 16px;
  margin-right: 12px;
  cursor: pointer;
  transition: all .2s ease;
}
.casoa .cta:hover {
  background: var(--accent2);
  border-color: var(--accent2);
  color: var(--on-accent);
  transform: translateY(-1px);
  box-shadow: 0 10px 30px -10px rgba(65, 200, 191, .5);
}
.casoa .cta.ghost { background: var(--ghost-bg); color: var(--ghost-fg); border-color: var(--line-2); }

/* The same button, tool-window sized. The apps had each grown their own .btn —
   same job, three shapes, none of them the site's. This is a size, not a button. */
.casoa .cta.sm {
  font-size: calc(12.5 * var(--u));
  padding: 6px 16px;
  margin: 0;
}
.casoa .cta.ghost:hover {
  background: rgba(65, 200, 191, .07);
  border-color: var(--accent);
  color: var(--accent2);
  box-shadow: none;
}

/* pills / chips */
.casoa .pillrow { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0; }
.casoa .pill {
  font-family: var(--mono);
  font-size: calc(11.5 * var(--u));
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 9px 14px;
  color: var(--mute);
}
.casoa .pill.on { color: var(--accent2); border-color: var(--accent); box-shadow: 0 0 22px -8px var(--accent); }

.casoa blockquote {
  border-left: 3px solid var(--accent);
  padding: 6px 0 6px 18px;
  margin: 28px 0;
  color: var(--text);
  font-size: calc(20 * var(--u));
  font-style: italic;
  font-family: var(--serif);
}

.casoa footer {
  border-top: 1px solid var(--line);
  margin-top: 80px;
  padding: 40px 0;
  color: var(--text-3);
  font-size: calc(13 * var(--u));
  text-align: center;
}
.casoa footer a { color: var(--text-3); text-decoration: underline; }
.casoa footer a:hover { color: var(--accent); }

@media (max-width: 640px) {
  .casoa { font-size: calc(15.5 * var(--u)); }
  .casoa .wrap { padding: 20px 18px; }

  /* mobile: title + credit fill the width; below them the bullets (2/3) sit
     beside a small copy of the image (1/3). The big right-column image is hidden
     and replaced by the otherwise-hidden .shot-mobile. */
  .casoa .hero-row { flex-direction: column; align-items: stretch; }
  .casoa .hero-art { display: none; }
  .casoa .bullets-art { display: flex; align-items: center; gap: 16px; }
  .casoa .bullets-art .hero-bullets { flex: 2 1 0; min-width: 0; margin: 0; }
  .casoa .bullets-art .shot-mobile {
    display: block;
    flex: 1 1 0;
    width: 100%;
    max-width: 200px;
    height: auto;
    margin-left: auto;
    opacity: .95;
  }

  /* small-screen size tweaks (the hamburger itself kicks in at 860px above) */
  .casoa .nav-in { padding: 12px 18px 14px; }
  .casoa nav .brand { font-size: calc(30 * var(--u)); gap: 9px; }
  .casoa nav .brand .logo { height: 48px; width: 48px; }

  .casoa .hero { padding: 16px 0 36px; margin-bottom: 36px; }
  .casoa h2 { font-size: calc(24 * var(--u)); margin: 36px 0 16px; }
  .casoa .section-intro,
  .casoa .hero p.lede { font-size: calc(16 * var(--u)); }
  .casoa .hero-bullets li { font-size: calc(16 * var(--u)); }
}

/* very small phones: halve the inline mobile image so the bullets keep room */
@media (max-width: 465px) {
  .casoa .bullets-art .shot-mobile { max-width: 102px; }
}

/* Tech page - pillars */
.casoa .pillars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 24px 0 40px;
}
.casoa .pillar {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 24px;
}
.casoa .pillar h3 { color: var(--accent2); font-size: calc(20 * var(--u)); margin-bottom: 10px; }
.casoa .pillar p { color: var(--mute); font-size: calc(15 * var(--u)); }
.casoa .pillar .pcomp { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.casoa .pillar .pcomp span {
  font-family: var(--mono);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 4px 10px;
  font-size: calc(12 * var(--u));
  color: var(--accent2);
}
@media (max-width: 720px) { .casoa .pillars { grid-template-columns: 1fr; } }

/* Tech page - stack */
.casoa .stack {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin: 16px 0 30px;
}
.casoa .stack .item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  padding: 16px;
}
.casoa .stack .item h4 { font-family: var(--sans); font-size: calc(14 * var(--u)); color: var(--text); margin-bottom: 4px; font-weight: 600; }
.casoa .stack .item p { color: var(--mute); font-size: calc(13.5 * var(--u)); margin: 0; }

/* Roomier container on large screens (1140 -> 1440, +300px). Kept at the end of
   the file so it overrides the base .wrap / .nav-in max-width (same specificity,
   wins by being later in source). */
@media (min-width: 1920px) {
  .casoa .wrap, .casoa .nav-in { max-width: 1440px; }
}

/* ── tabs (reusable component) ────────────────────────────────────────────────
   A row of tab buttons; the app toggles `.active` on the selected one. No border,
   no radius. Inactive = dark see-through fill; active = no background. Used by
   Admin's SystemSettings (which borrows this layout's CSS). */
.casoa .tabs { display: flex; gap: 2px; }
.casoa .tab {
  background: rgba(0, 0, 0, 0.22);        /* dark see-through on inactive */
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--mute);
  font-family: var(--sans);
  font-weight: 600;
  font-size: calc(12.5 * var(--u));
  padding: 8px 14px;
  cursor: pointer;
  white-space: nowrap;
}
.casoa .tab:hover { color: var(--text); }
.casoa .tab:focus, .casoa .tab:active { box-shadow: none; }   /* kill any focus/active shadow */
.casoa .tab.active { background: transparent; color: var(--text); box-shadow: none; }   /* default text color, no bg, no shadow */
.casoa .tab.danger { color: color-mix(in srgb, var(--danger) 70%, var(--mute)); }
.casoa .tab.danger.active { background: transparent; color: var(--danger); box-shadow: none; }

/* ── the neurological examination form (materials/neuro-exam-form.html) ──────
   One page, 31 lines, every answer a chip. The chips carry the meaning: a chip
   that means "normal" is tinted so a normal exam reads as a quiet row and an
   abnormal finding stands out of it without anyone having to read the labels.
   Colour is the skin's, not this block's — everything here is a var(). */
.casoa .nf { margin-top: 10px; }
.casoa .nf-credit { font-size: calc(13 * var(--u)); color: var(--text-3); margin-bottom: 18px; }

.casoa .nf-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 0 16px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 18px;
}
.casoa .nf-progress { color: var(--mute); font-family: var(--mono); font-size: calc(13 * var(--u)); }
.casoa .nf-clear { margin-left: auto; }

.casoa .nf-sec, .casoa .nf-text-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 16px;
}
.casoa .nf-sec-h { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 10px; }
.casoa .nf-sec-t { min-width: 0; }
.casoa .nf-sec h3, .casoa .nf-text-panel h3 {
  font-family: var(--sans);
  font-size: calc(13 * var(--u));
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--accent2);
  margin: 0;
}
.casoa .nf-sub { color: var(--mute); font-size: calc(13.5 * var(--u)); margin: 2px 0 0; }
.casoa .nf-sec-r { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
.casoa .nf-count { color: var(--text-3); font-family: var(--mono); font-size: calc(12 * var(--u)); }
.casoa .nf-scale-hint, .casoa .nf-hint {
  color: var(--text-3);
  font-size: calc(12.5 * var(--u));
  margin: 0 0 10px;
}
.casoa .nf-scale-hint { font-family: var(--mono); }
.casoa .nf-group-h {
  font-family: var(--sans);
  font-size: calc(12 * var(--u));
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mute);
  margin: 16px 0 2px;
}

/* a line: label row, then the controls */
.casoa .nf-line { padding: 12px 0; border-top: 1px solid var(--line); }
.casoa .nf-line-h { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.casoa .nf-label { font-size: calc(14.5 * var(--u)); color: var(--text); font-weight: 500; }
.casoa .nf-opt {
  margin-left: 6px;
  font-size: calc(11 * var(--u));
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.casoa .nf-nerves { color: var(--text-3); font-size: calc(12.5 * var(--u)); font-style: italic; }
.casoa .nf-note-btn { margin-left: auto; }
.casoa .nf-note { margin-top: 8px; }
.casoa .nf-note.hidden { display: none; }
/* a line that has been answered gets a quiet marker, so an unfinished form shows
   at a glance where the gaps are */
.casoa .nf-line.done .nf-label::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 8px;
  vertical-align: middle;
}

.casoa .nf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.casoa .nf-group { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.casoa .nf-group-l {
  min-width: 64px;
  color: var(--mute);
  font-family: var(--mono);
  font-size: calc(11.5 * var(--u));
  letter-spacing: .06em;
  text-transform: uppercase;
}
.casoa .nf-more {
  margin-top: 10px;
  padding-left: 12px;
  border-left: 2px solid var(--line-2);
}

.casoa .nf-chip {
  background: transparent;
  border: 1px solid var(--line-2);
  /* 4px, not the site's pill: these are marks on a form, dozens to a section, and the
     original paper-style form reads as a grid of small squares rather than a row of
     pills. The rest of the site keeps its 999px. */
  border-radius: 4px;
  color: var(--mute);
  font-family: var(--sans);
  font-size: calc(13 * var(--u));
  padding: 5px 12px;
  cursor: pointer;
  line-height: 1.3;
}
.casoa .nf-chip:hover { color: var(--text); border-color: var(--mute); }
.casoa .nf-chip.on { color: var(--on-accent); background: var(--accent); border-color: var(--accent); font-weight: 600; }
.casoa .nf-chip.normal.on { background: var(--accent-deep); border-color: var(--accent-deep); color: #ffffff; }
.casoa .nf-num { min-width: 38px; font-family: var(--mono); text-align: center; }

/* "Rest normal" is an action, not an answer — it fills in every unmarked line in the
   section. It cannot look like a marked chip (those are accent-filled), so it is the
   accent in outline: clearly primary, clearly not a value. It fills on hover, which is
   also what it does to the section. */
.casoa .nf-chip.nf-rest {
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}
.casoa .nf-chip.nf-rest:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

/* The Summary / Full switch: one box, the current reading filled. Neutral and not the
   accent, because accent-filled is what a MARKED answer looks like on this page — this
   is a view, not a finding. */
.casoa .nf-seg {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--line-2);
  border-radius: 6px;
}
.casoa .nf-seg .nf-chip {
  border: 0;
  border-radius: 4px;
  padding: 4px 10px;
  font-weight: 600;
}
.casoa .nf-seg .nf-chip.on {
  background: var(--surface-2);
  color: var(--text);
}
.casoa .nf-seg .nf-chip:not(.on):hover { background: transparent; color: var(--text); }

.casoa .nf-in {
  width: 100%;
  background: var(--bg-soft);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  color: var(--text);
  font-family: var(--sans);
  font-size: calc(13.5 * var(--u));
  padding: 7px 10px;
}
.casoa .nf-in:focus { outline: none; border-color: var(--accent); }
.casoa .nf-in-s { width: 140px; }
.casoa textarea.nf-in { min-height: 72px; resize: vertical; }

.casoa .nf-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.casoa .nf-field { display: flex; flex-direction: column; gap: 4px; }
.casoa .nf-field.wide { grid-column: 1 / -1; }
.casoa .nf-field label, .casoa .nf-concl h4 {
  color: var(--mute);
  font-family: var(--sans);
  font-size: calc(12.5 * var(--u));
  font-weight: 500;
}
.casoa .nf-concl { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }

/* The exam text is the whole point of the form, so it never leaves the screen. Two
   shapes for that. On a phone it is a strip stuck to the bottom of a single column; on
   a desktop it is a column of its own on the right, stuck below the nav, with the form
   narrowing to make room. Mobile is the base case and desktop is the media query,
   because the form is filled on a phone at least as often as at a desk. */
.casoa .nf-text-panel { position: sticky; bottom: 0; }
/* The panel's toolbar goes on its own line under the heading. Beside it, it fits in
   English and overflows in German — "Zusammenfassung" alone is as wide as the switch
   is in English — and a 380px column is never getting wider. */
.casoa .nf-text-panel .nf-sec-h { flex-wrap: wrap; gap: 8px; }
.casoa .nf-text-panel .nf-sec-r {
  margin-left: 0;
  width: 100%;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.casoa .nf-text {
  white-space: pre-wrap;
  font-family: var(--mono);
  font-size: calc(13 * var(--u));
  line-height: 1.65;
  color: var(--text);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  max-height: 42vh;
  overflow: auto;
}
.casoa .nf-text.nf-empty { color: var(--text-3); font-style: italic; }

@media (max-width: 720px) {
  .casoa .nf-fields { grid-template-columns: minmax(0, 1fr); }
  .casoa .nf-group-l { min-width: 0; }
  .casoa .nf-text { max-height: 34vh; }
}

/* ── two columns, once there is room for them ───────────────────────────── */
/* 1020px is where 380px of exam text still leaves the form enough width for a row of
   chips to stay a row. Below it the single column is the better shape, not a
   compromise. */
@media (min-width: 1020px) {
  .casoa .nf {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 20px;
    align-items: start;
  }
  .casoa .nf-head { grid-column: 1 / -1; }
  .casoa .nf-form { min-width: 0; }
  .casoa .nf-text-panel {
    position: sticky;
    /* --nf-sticky is the nav's real height plus a gap, measured and set by
       neuro-exam-form-ui.js: the nav grows with the type scale, so a fixed number here
       is wrong at some width or other and the panel slides under it. */
    top: var(--nf-sticky, 78px);
    bottom: auto;
    margin-bottom: 0;
    max-height: calc(100vh - var(--nf-sticky, 78px) - 24px);
    display: flex;
    flex-direction: column;
  }
  /* the panel owns the height; the text takes what is left of it */
  .casoa .nf-text-panel .nf-sec-h { flex: 0 0 auto; }
  .casoa .nf-text { max-height: none; flex: 1 1 auto; }
}

/* On a wide screen the form has room to be wider than the rest of the site: it is a
   working surface, not a column of prose. */
@media (min-width: 1280px) {
  .casoa.nf-page .wrap { max-width: 1320px; }
}

/* Printing gives the record, not the form: the chips are an input device and have no
   business on paper. */
@media print {
  .casoa.nf-page nav,
  .casoa.nf-page footer,
  .casoa.nf-page .nf-head,
  .casoa.nf-page .nf-form,
  .casoa.nf-page .nf-sec-r,
  .casoa.nf-page .section-intro { display: none !important; }
  .casoa.nf-page .nf-text-panel { position: static; border: 0; padding: 0; background: none; }
  .casoa.nf-page .nf-text { max-height: none; overflow: visible; border: 0; background: none; padding: 0; }
  .casoa.nf-page, .casoa.nf-page .nf-text { color: #000; background: #fff; }
}

/* Signed in, the nav spans the whole width: the pages read best at paper width, the
   app windows want the room. casoa.js sets body.signed-in from the session; the higher
   specificity beats both the base and the large-screen max-width at every size. */
.casoa.signed-in .nav-in { max-width: none; }