/* ==========================================================================
   TRam theme layer — Studio grammar on the marketing site.

   PRESENTATION ONLY. This file adds no markup and changes no copy, headings,
   titles, canonicals, schema, or links, so it cannot move anything SEO
   depends on. Loaded last so it wins without needing more !important than
   the sheet it sits on.

   What it does: brings the product's visual language to the site — hairline
   panels on deep navy, mono uppercase labels, restrained accent use, pill
   status chips, and one shared type scale — so a visitor moving from the
   site into Studio doesn't feel a seam.
   ========================================================================== */

:root{
  /* Same values Studio will use after its retheme. */
  --t-bg:#06101d;
  --t-bg-2:#081426;
  --t-panel:#0e1e33;
  --t-panel-2:#12263f;
  --t-line:rgba(255,255,255,.08);
  --t-line-2:rgba(255,255,255,.14);
  --t-ink:#f7f9fc;
  --t-muted:#aebbd0;
  --t-faint:#8190a4;

  /* Light-surface counterparts. Articles and long-form copy stay light —
     dark backgrounds hurt extended reading, and those pages carry the
     fractional-CTO traffic. */
  --t-ink-l:#111827;
  --t-muted-l:#536074;
  --t-line-l:#e3e8ef;
  --t-surface-l:#ffffff;
  --t-surface-l2:#f6f7fa;

  --t-accent:#536fff;        /* fills, marks */
  --t-accent-text:#4453dd;   /* accent text on light — 5.95:1 on white */
  --t-accent-lift:#96a4ff;   /* accent text on dark — 6.9:1 on #06101d */
  --t-ok:#3ecf8e;
  --t-danger:#ff6b6b;

  --t-mono:'DM Mono',ui-monospace,'JetBrains Mono',monospace;
}

/* --------------------------------------------------------------------------
   1. Mono uppercase labels — the single strongest signal that the site and
   the product are the same system. Studio uses these for every structural
   label; the site already had the class, it just looked different.
   -------------------------------------------------------------------------- */
.section-label,
.page-hero-eyebrow,
.veyebrow,
.insight-tag,
.article-tag,
.kicker,
.uc-n,
.service-detail-num,
.function-card-eyebrow{
  font-family:var(--t-mono)!important;
  font-size:10.5px!important;
  letter-spacing:.16em!important;
  text-transform:uppercase!important;
  font-weight:400!important;
}

/* A hairline lead-in rule, as in the app's section headers. */
.section-label::before,
.veyebrow::before{
  content:"";
  display:inline-block;
  width:22px;
  height:1px;
  background:currentColor;
  vertical-align:middle;
  margin-right:10px;
  opacity:.55;
}

/* --------------------------------------------------------------------------
   2. Panels. Studio uses square hairline cards, not soft shadowed boxes.
   -------------------------------------------------------------------------- */
.package-card,
.insight-card,
.service-detail-card,
.founder-card,
.uc-card,
.tier-card,
.sidebar-cta-box,
.article-callout,
.function-card{
  border-radius:3px!important;
  border:1px solid var(--t-line-l)!important;
  box-shadow:none!important;
  transition:border-color .18s ease, transform .18s ease;
}
.package-card:hover,
.insight-card:hover,
.uc-card:hover,
.tier-card:hover,
.function-card:hover{
  border-color:var(--t-accent)!important;
  transform:translateY(-2px);
}

/* The same cards when they sit on a dark band. */
.vhero .vapp,
.vdark .vnode,
.studio-section .card,
.article-cta{
  border-radius:3px!important;
  border:1px solid var(--t-line)!important;
  box-shadow:none!important;
}

/* --------------------------------------------------------------------------
   3. Buttons. Square, mono-cased, one solid accent and one hairline ghost —
   matching the app's Run now / Edit agent pair.
   -------------------------------------------------------------------------- */
.btn{
  border-radius:2px!important;
  font-weight:500!important;
  letter-spacing:.01em!important;
  transition:background .18s ease, border-color .18s ease, color .18s ease;
}
.btn-primary,
.btn-accent,
.nav-cta:not(.nav-login){
  background:var(--t-accent)!important;
  border:1px solid var(--t-accent)!important;
  color:#fff!important;
}
.btn-primary:hover,
.btn-accent:hover,
.nav-cta:not(.nav-login):hover{
  background:var(--t-accent-text)!important;
  border-color:var(--t-accent-text)!important;
}

/* --------------------------------------------------------------------------
   4. Status chips, as used on run records.
   -------------------------------------------------------------------------- */
.tag,.pill,.status-chip,.insight-tag{
  border-radius:2px!important;
}

/* --------------------------------------------------------------------------
   5. Tables — the app's run table grammar: mono uppercase headers, hairline
   rows, no zebra striping.
   -------------------------------------------------------------------------- */
.legal-body table th,
.comparison-table th,
.pricing-table th{
  font-family:var(--t-mono)!important;
  font-size:10px!important;
  letter-spacing:.13em!important;
  text-transform:uppercase!important;
  font-weight:400!important;
  color:var(--t-muted-l)!important;
  background:transparent!important;
  border-bottom:1px solid var(--t-line-l)!important;
}
.legal-body table td,
.comparison-table td,
.pricing-table td{
  border-bottom:1px solid var(--t-line-l)!important;
  background:transparent!important;
}

/* --------------------------------------------------------------------------
   6. Numbers. Anything measured is monospaced, as in the app — prices,
   durations, counts. It reads as instrumentation rather than marketing.
   -------------------------------------------------------------------------- */
.package-price,
.stat-value,
.metric-value,
.tier-price,
.sv{
  font-family:var(--t-mono)!important;
  letter-spacing:-.01em!important;
}

/* --------------------------------------------------------------------------
   7. Footer — deep navy, hairline column rules, mono labels.
   -------------------------------------------------------------------------- */
.footer,.tram-uniform-footer,footer.ft{
  background:var(--t-bg-2)!important;
  border-top:1px solid var(--t-line)!important;
}
.footer-col h4,.tram-footer-col h4{
  font-family:var(--t-mono)!important;
  font-size:10px!important;
  letter-spacing:.16em!important;
  text-transform:uppercase!important;
  color:var(--t-faint)!important;
  font-weight:400!important;
}
.footer-col a,.tram-footer-col a{
  color:var(--t-muted)!important;
  text-decoration:none;
  border-bottom:1px solid transparent;
}
.footer-col a:hover,.tram-footer-col a:hover{
  color:var(--t-ink)!important;
  border-bottom-color:var(--t-accent)!important;
}

/* --------------------------------------------------------------------------
   8. Dark bands inherit the app's exact surface values, so a screenshot of
   Studio dropped onto studio.html or use-cases.html looks native rather
   than pasted in.
   -------------------------------------------------------------------------- */
.vhero,.vdark,.studio-section,.cta-band{
  background:var(--t-bg)!important;
}
.vapp,.vappbody,.vnode{
  background:var(--t-panel)!important;
}
.vside,.vdetails{
  background:var(--t-bg-2)!important;
}

/* --------------------------------------------------------------------------
   9. Focus states — visible, accent-coloured, keyboard-friendly.
   -------------------------------------------------------------------------- */
a:focus-visible,.btn:focus-visible,button:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--t-accent)!important;
  outline-offset:2px!important;
}

@media (prefers-reduced-motion:reduce){
  .package-card:hover,.insight-card:hover,.uc-card:hover,
  .tier-card:hover,.function-card:hover{ transform:none; }
}

/* --------------------------------------------------------------------------
   10. Use-case heroes.
   Measured: use-cases.html and all 23 use-case-*.html rendered a WHITE hero
   directly beneath the dark nav, while about / consultation / packages /
   services and the rest render dark. They were the only pages breaking the
   pattern, so the site read as two different templates. This matches them to
   the others — presentation only, no markup or copy touched.
   -------------------------------------------------------------------------- */
.uc-hero{
  background:var(--t-bg)!important;
  border-bottom:1px solid var(--t-line)!important;
}
.uc-hero h1,
.uc-hero h2{ color:var(--t-ink)!important; }
.uc-hero p,
.uc-hero .section-sub,
.uc-hero .lede{ color:var(--t-muted)!important; }
/* The eyebrow needs to out-specify .section-label rules in the sheets above,
   hence the tag+class. #96a4ff measures 8.2:1 on the hero. */
.uc-hero .section-label.reveal,
.uc-hero div.section-label,
.uc-hero .section-label,
.uc-hero .uc-eyebrow{ color:#96a4ff!important; }
.uc-hero h1 em,
.uc-hero h1 .accent,
.uc-hero .grad{ color:var(--t-accent-lift)!important; }

/* Buttons in the hero flip to the dark-surface pair. */
.uc-hero .btn-ghost,
.uc-hero .btn-ghost-dark{
  color:var(--t-ink)!important;
  border-color:rgba(255,255,255,.32)!important;
  background:transparent!important;
}
.uc-hero .btn-ghost:hover,
.uc-hero .btn-ghost-dark:hover{
  border-color:var(--t-accent)!important;
  background:rgba(255,255,255,.06)!important;
}

/* Any small print or mono label inside the hero. */
.uc-hero .mpn-line,
.uc-hero small,
.uc-hero .meta{ color:var(--t-faint)!important; }

/* --------------------------------------------------------------------------
   11. Use-case hero: two columns instead of a tall stack.
   The demo window sat BELOW the copy, so the hero ran ~1,000px and pushed the
   actual content off the first screen. Grid places the copy left and the demo
   right without touching the markup, so all 23 detail pages change together.
   -------------------------------------------------------------------------- */
@media (min-width:1000px){
  .uc-hero .studio-try-inner{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
    column-gap:52px;
    align-items:center;
    text-align:left!important;
    max-width:1180px;
  }
  .uc-hero .section-label{ grid-column:1; grid-row:1; margin-bottom:14px; }
  .uc-hero .section-title{ grid-column:1; grid-row:2; margin-bottom:16px; }
  .uc-hero .section-sub{  grid-column:1; grid-row:3; margin:0 0 24px!important; max-width:52ch; }
  .uc-hero .studio-cta-actions{
    grid-column:1; grid-row:4;
    justify-content:flex-start!important;
    margin-top:0!important;
  }

  /* The demo window fills the right column and spans the copy rows. */
  .uc-hero .studio-window{
    grid-column:2; grid-row:1 / span 4;
    margin:0!important;
    width:100%;
    align-self:center;
  }
  .uc-hero .uc-sample-note{
    grid-column:2; grid-row:5;
    margin:14px 0 0!important;
    text-align:left!important;
  }

  /* Headline sizing: it no longer needs to hold the full page width. */
  .uc-hero .section-title{ font-size:clamp(34px,3.4vw,46px)!important; line-height:1.1!important; }
  .uc-hero{ padding-top:56px!important; padding-bottom:56px!important; }
  /* Grid rows are sized by content; keep the copy column from spreading. */
  .uc-hero .studio-try-inner{ align-content:center; row-gap:0; }
}

/* Below 1000px the source order already stacks correctly — just tighten it. */
@media (max-width:999px){
  .uc-hero{ padding-top:48px!important; padding-bottom:48px!important; }
  .uc-hero .studio-window{ margin-top:26px!important; }
}

/* --------------------------------------------------------------------------
   12. Mobile navigation — the open state.
   BUG (found 2026-08-13): tram-audited.css hides the nav below 860px with
   `.nav.tram-uniform-nav .nav-links{display:none!important}` but never
   defines an OPEN state. main.js correctly toggles `.nav-open`, and nothing
   could beat that !important — so on every phone the hamburger did nothing
   and the whole menu was unreachable. These rules give the open state the
   same weight, so the toggle works again.
   -------------------------------------------------------------------------- */
@media (max-width: 860px){
  .nav.tram-uniform-nav .nav-links.nav-open,
  .nav-links.nav-open{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:0!important;
    position:absolute!important;
    top:100%!important; left:0!important; right:0!important;
    margin:0!important;
    padding:6px 22px 14px!important;
    background:var(--t-bg,#06101d)!important;
    border-bottom:1px solid var(--t-line,rgba(255,255,255,.08))!important;
    box-shadow:0 18px 40px -24px rgba(0,0,0,.65)!important;
    max-height:calc(100dvh - 60px)!important;
    overflow-y:auto!important;
    z-index:120!important;
  }
  .nav.tram-uniform-nav .nav-links.nav-open>li,
  .nav-links.nav-open>li{ width:100%!important; }
  /* Tap targets: 44px is the minimum a thumb reliably hits. */
  .nav.tram-uniform-nav .nav-links.nav-open>li>a,
  .nav-links.nav-open>li>a{
    display:flex!important;
    align-items:center!important;
    width:100%!important;
    min-height:44px!important;
    padding:0!important;
    font-size:15px!important;
    border-bottom:1px solid rgba(255,255,255,.05)!important;
  }
  /* Dropdown children read as children, not as peers. */
  .nav-links.nav-open li.has-dropdown .dropdown a{
    padding-left:14px!important;
    font-size:14px!important;
    color:var(--t-muted,#aebbd0)!important;
    border-bottom:0!important;
  }
  /* Dropdown children stack inline rather than hovering off-screen. */
  .nav-links.nav-open li.has-dropdown{ height:auto!important; display:block!important; }
  .nav-links.nav-open li.has-dropdown .dropdown{
    position:static!important; display:block!important; opacity:1!important;
    visibility:visible!important; transform:none!important; box-shadow:none!important;
    background:transparent!important; border:0!important; padding:0 0 6px 12px!important;
    min-width:0!important;
  }
  .nav-links.nav-open li.has-dropdown .dropdown a{ min-height:40px!important; font-size:14px!important; }

  /* The nav must be the positioning context for the panel. */
  .nav.tram-uniform-nav{ position:relative!important; }
}

/* --------------------------------------------------------------------------
   13. Mobile tap targets.
   Measured on a 390px viewport: the hamburger rendered 30px tall and the
   mobile-menu links 20px. Both are under the ~44px a thumb reliably hits, so
   taps missed and the nav felt broken even where the JS was working. Nothing
   here changes layout on desktop.
   -------------------------------------------------------------------------- */
@media (max-width: 860px){
  .hamburger,
  .nav.tram-uniform-nav .hamburger{
    min-width:44px!important;
    min-height:44px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:5px!important;
    padding:0!important;
    cursor:pointer!important;
  }
  .hamburger span{ display:block!important; width:22px!important; height:2px!important; margin:0!important; }

  /* The 21 pages that use a #mobileMenu panel rather than .nav-open. */
  .mobile-menu{ background:var(--t-bg,#06101d)!important; border-bottom-color:var(--t-line,rgba(255,255,255,.08))!important; }
  .mobile-menu ul{ gap:0!important; }
  .mobile-menu li{ width:100%!important; }
  .mobile-menu a{
    display:flex!important;
    align-items:center!important;
    width:100%!important;
    min-height:44px!important;
    font-size:15px!important;
  }

  /* Any primary action needs a real target too. */
  .nav-cta,
  .nav.tram-uniform-nav .nav-cta{ min-height:40px!important; display:inline-flex!important; align-items:center!important; }
}