@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');

.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; }

/* 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);
}
.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); }
.casoa nav .lang-select {
  background: transparent;
  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); }
/* signed-in user chip (silhouette + name); shown only when logged in (JS toggles),
   sits just left of "Log out", opens the Account app on click. */
.casoa nav .nav-user {
  order: 1;
  display: none;
  align-items: center;
  gap: 7px;
  margin-left: 28px;
  font-family: var(--sans);
  color: var(--mute);
  font-size: calc(14 * var(--u));
  cursor: pointer;
  white-space: nowrap;
}
.casoa nav .nav-user:hover { color: var(--text); }
.casoa nav .nav-user .silo { width: calc(18 * var(--u)); height: calc(18 * var(--u)); flex: none; }

/* 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 */
}
/* 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; }

  /* nav collapses to a hamburger (same breakpoint as the hero stacking) -
     links, language + theme all go inside */
  .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; }
  /* 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; }
  .casoa nav .nav-user { order: 0; margin-left: 0; margin-right: 12px; }
  .casoa nav .nav-user-name { display: none; }   /* icon only on mobile (saves space) */
}

.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); }
.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
   BackEnd'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; }