/* =============================================================
   TechNova — style.css  (Complete rewrite v3)
   
   THEME ARCHITECTURE
   ------------------
   All colours live in CSS custom properties on :root (dark mode,
   the default). Adding .light-mode to <body> overrides them for
   the light theme. No component rule needs duplication.
   
   TOOLBAR CONTROLS (lang select + theme toggle)
   ---------------------------------------------
   The nav toolbar uses --ctrl-* tokens so both the <select> and
   <button> share the exact same border, background and text colour
   automatically when the theme switches — no JS colour logic needed.
============================================================= */

/* Google Fonts loaded via <link> in HTML <head> to avoid file:// cross-origin errors */

/* ─── DARK THEME TOKENS (default) ──────────────────────────── */
:root {
  /* Page surfaces */
  --bg-page:           #000000;
  --bg-glass:          rgba(255,255,255,0.07);
  --bg-glass-border:   rgba(255,255,255,0.16);
  --bg-nav:            rgba(0,0,0,0.75);
  --bg-nav-scroll:     rgba(0,0,0,0.94);
  --bg-input:          rgba(0,0,0,0.50);
  --bg-chat:           #0c0c0c;
  --bg-chat-bubble:    #141414;
  --bg-option:         #1a1a1a;

  /* Text */
  --text-primary:      #ffffff;
  --text-secondary:    rgba(255,255,255,0.68);
  --text-muted:        rgba(255,255,255,0.42);
  --text-placeholder:  rgba(255,255,255,0.32);

  /* Accent */
  --accent:            #3b82f6;
  --accent-dark:       #1e40af;
  --accent-glow:       rgba(59,130,246,0.38);

  /* Decorative */
  --orb-color:         rgba(59,130,246,0.22);
  --grid-color:        rgba(59,130,246,0.08);
  --code-rain-color:   rgba(59,130,246,0.50);

  /* Shadows */
  --shadow-card:       0 8px 32px rgba(0,0,0,0.40);
  --shadow-float:      0 4px 20px rgba(0,0,0,0.50);

  /* ── TOOLBAR CONTROL TOKENS ──────────────────────────────────
     These apply identically to the <select> and <button> in the
     nav toolbar, so they always look like a matching set regardless
     of theme. Changing these two variables updates both controls.
  ──────────────────────────────────────────────────────────────── */
  --ctrl-bg:           rgba(255,255,255,0.07);
  --ctrl-bg-solid:     #000000;           /* same as --bg-page dark: select blends with page */
  --ctrl-border:       rgba(59,130,246,0.30);
  --ctrl-text:         #60a5fa;           /* blue-400 */
  --ctrl-icon:         rgba(96,165,250,0.70);
  --ctrl-hover-border: #60a5fa;
  --ctrl-hover-bg:     rgba(59,130,246,0.14);

  /* Solar system canvas */
  --solar-star:        rgba(255,255,255,0.85);
  --solar-planet-1:    #3b82f6;
  --solar-planet-2:    #8b5cf6;
  --solar-planet-3:    #06b6d4;
  --solar-orbit:       rgba(255,255,255,0.06);
}

/* ─── LIGHT THEME OVERRIDES ─────────────────────────────────────
   Applied on BOTH html.light-mode and body.light-mode (via .light-mode).
   
   Why target <html>?
   The anti-FOUC inline script in <head> adds .light-mode to <html>
   synchronously, before <body> exists in the DOM. If we only target
   .light-mode on body or its descendants, the CSS variables won't be
   set during the very first paint — causing the flash we're trying to
   prevent. Targeting html.light-mode ensures the tokens are correct
   from pixel zero.
   
   Once custom.js runs (DOMContentLoaded), ThemeManager moves the class
   to <body> as well, so both selectors stay valid throughout the session.
──────────────────────────────────────────────────────────────── */
html.light-mode,
.light-mode {
  --bg-page:           #f8fafc;
  --bg-glass:          rgba(255,255,255,0.74);
  --bg-glass-border:   rgba(59,130,246,0.18);
  --bg-nav:            rgba(248,250,252,0.86);
  --bg-nav-scroll:     rgba(248,250,252,0.97);
  --bg-input:          rgba(255,255,255,0.92);
  --bg-chat:           #ffffff;
  --bg-chat-bubble:    #f1f5f9;
  --bg-option:         #ffffff;

  --text-primary:      #0f172a;
  --text-secondary:    #334155;
  --text-muted:        #64748b;
  --text-placeholder:  #94a3b8;

  --orb-color:         rgba(59,130,246,0.10);
  --grid-color:        rgba(59,130,246,0.05);
  --code-rain-color:   rgba(59,130,246,0.26);

  --shadow-card:       0 8px 32px rgba(15,23,42,0.10);
  --shadow-float:      0 4px 20px rgba(15,23,42,0.18);

  /* Toolbar controls in light mode: darker text on light bg */
  --ctrl-bg:           rgba(255,255,255,0.80);
  --ctrl-bg-solid:     #f8fafc;           /* same as --bg-page light: select blends with page */
  --ctrl-border:       rgba(59,130,246,0.25);
  --ctrl-text:         #1d4ed8;           /* blue-700 */
  --ctrl-icon:         rgba(29,78,216,0.70);
  --ctrl-hover-border: #1d4ed8;
  --ctrl-hover-bg:     rgba(59,130,246,0.08);

  --solar-star:        rgba(100,116,139,0.60);
  --solar-orbit:       rgba(15,23,42,0.06);
}


/* ─── BASE ──────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }

/*
  Long single words in the big display headings (e.g. "Transmissions"
  at text-5xl/6xl) don't have a space to wrap on, so on very narrow
  phones (~320-340px) they were being clipped at the edge — body
  already has overflow-x:hidden, so it wasn't a visible scrollbar,
  just silently cut-off text. overflow-wrap lets the browser break
  inside a word only when it has no other way to fit, so normal
  short headings are completely unaffected.
*/
h1,h2,h3,h4,h5,h6{ overflow-wrap:break-word; }

body {
  font-family:'Space Grotesk',sans-serif;
  background-color:var(--bg-page);
  color:var(--text-primary);
  overflow-x:hidden;
  transition:background-color .3s ease,color .3s ease;
}

.font-mono { font-family:'JetBrains Mono',monospace; }
.hero-sub  { color:var(--text-secondary); }
.card-sub  { color:var(--text-secondary); }
.form-label{ color:var(--text-muted); }

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
/* Focus */
:focus{outline:none;}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}


/* ─── SOLAR SYSTEM CANVAS ───────────────────────────────────────
   The <canvas id="solar-canvas"> replaces the plain code-rain
   letters in the background. The canvas is drawn by JS (SolarSystem
   class in custom.js). z-index:0 keeps it behind all page content.
──────────────────────────────────────────────────────────────── */
#solar-canvas {
  z-index:0;
  opacity:0.55;
  transition:opacity .3s ease;
}
.light-mode #solar-canvas { opacity:0.30; }


/* ─── CODE RAIN (text lines behind canvas) ──────────────────── */
.code-rain {
  position:fixed;inset:0;pointer-events:none;
  font-family:'JetBrains Mono',monospace;font-size:11px;
  color:var(--code-rain-color);overflow:hidden;z-index:0;
}
.code-line{position:absolute;white-space:nowrap;animation:rain 10s linear infinite;}
@keyframes rain{0%{transform:translateY(-100vh);opacity:1}100%{transform:translateY(100vh);opacity:0}}


/* ─── CYBER GRID ────────────────────────────────────────────── */
.cyber-grid{
  background-image:
    linear-gradient(var(--grid-color) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-color) 1px,transparent 1px);
  background-size:50px 50px;
  animation:grid-move 20s linear infinite;
}
@keyframes grid-move{0%{transform:translate(0,0)}100%{transform:translate(50px,50px)}}


/* ─── HOLOGRAPHIC ───────────────────────────────────────────── */
.holographic{
  background:linear-gradient(45deg,#3b82f6,#8b5cf6,#06b6d4,#10b981,#f59e0b);
  background-size:400% 400%;
  animation:gradient 3s ease infinite;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
@keyframes gradient{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}


/* ─── GLASS EFFECT ──────────────────────────────────────────── */
.glass-effect{
  background:var(--bg-glass);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid var(--bg-glass-border);
  transition:background .3s ease,border-color .3s ease;
}


/* ─── NEWS CARD IMAGE SLOT ──────────────────────────────────────
   The markup only carries an icon inside this div; without an
   explicit height the box collapses to the icon's own size. Fixing
   a real image-sized height here is what makes it read as a proper
   thumbnail placeholder instead of a squashed icon strip. The
   featured card (grid layout, lg:h-auto) fills its cell instead. */
.news-card__img{
  height:200px;
}
.news-card__img.lg\:h-auto{
  height:auto;
  min-height:280px;
}
@media(min-width:1024px){
  .news-card__img{height:220px;}
}


/* ─── NEON TEXT ─────────────────────────────────────────────── */
.neon-text{color:var(--accent);text-shadow:0 0 10px var(--accent),0 0 20px var(--accent),0 0 30px var(--accent);animation:glow 2s ease-in-out infinite alternate;}
.light-mode .neon-text{text-shadow:0 0 6px rgba(59,130,246,.45);}
@keyframes glow{from{text-shadow:0 0 10px var(--accent),0 0 20px var(--accent),0 0 30px var(--accent)}to{text-shadow:0 0 20px var(--accent),0 0 30px var(--accent),0 0 40px var(--accent)}}


/* ─── MORPHING SHAPE ────────────────────────────────────────── */
.morphing-shape{
  background:linear-gradient(45deg,#3b82f6,#8b5cf6,#06b6d4);
  clip-path:polygon(30% 0%,70% 0%,100% 30%,100% 70%,70% 100%,30% 100%,0% 70%,0% 30%);
  animation:morph 8s ease-in-out infinite;
}
@keyframes morph{
  0%,100%{clip-path:polygon(30% 0%,70% 0%,100% 30%,100% 70%,70% 100%,30% 100%,0% 70%,0% 30%)}
  25%{clip-path:polygon(20% 0%,80% 0%,100% 20%,100% 80%,80% 100%,20% 100%,0% 80%,0% 20%)}
  50%{clip-path:polygon(40% 0%,60% 0%,100% 40%,100% 60%,60% 100%,40% 100%,0% 60%,0% 40%)}
  75%{clip-path:polygon(25% 0%,75% 0%,100% 25%,100% 75%,75% 100%,25% 100%,0% 75%,0% 25%)}
}


/* ─── FLOATING ORBS ─────────────────────────────────────────── */
.floating-orb{
  position:fixed;border-radius:50%;
  background:radial-gradient(circle,var(--orb-color),transparent);
  animation:floatOrb 6s ease-in-out infinite;
  filter:blur(2px);pointer-events:none;z-index:0;
}
@keyframes floatOrb{0%,100%{transform:translateY(0) translateX(0)}33%{transform:translateY(-30px) translateX(20px)}66%{transform:translateY(10px) translateX(-15px)}}


/* ─── PARTICLE ──────────────────────────────────────────────── */
.particle{
  position:fixed;background:linear-gradient(45deg,#3b82f6,#8b5cf6);
  border-radius:50%;pointer-events:none;
  animation:particleFloat 8s ease-in-out infinite;z-index:0;
}
@keyframes particleFloat{0%,100%{transform:translateY(0) rotate(0deg);opacity:.7}50%{transform:translateY(-100px) rotate(180deg);opacity:.2}}

/*
  ─── GRID BLOWOUT FIX (below 1024px) ──────────────────────────
  Every "grid lg:grid-cols-*" section (hero, services/products
  panels, contact, this article layout's lg:grid-cols-[1fr_260px])
  relies on Tailwind's real lg: rule for its columns, which correctly
  uses minmax(0, ...) — but that rule only exists inside the ≥1024px
  media query. Below that, the bare ".grid" utility sets display:grid
  and nothing else, so the browser builds one implicit auto-sized
  column. Without a minmax(0, ...) floor, that column's width is
  allowed to grow to the min-content size of the widest child (a
  form input, an icon+text row, an article body), which came out
  wider than the phone screen — the actual cause of the horizontal
  overflow/cramped mobile layout, separate from the hero-orb fix
  below. Restoring the same minmax(0,1fr) track Tailwind already
  uses at lg, scoped to under 1024px, fixes it without touching the
  real lg: behaviour at desktop widths. The attribute selector
  matches any "lg:grid-cols-…" variant (including arbitrary-value
  ones like lg:grid-cols-[1fr_260px]) so new sections don't reopen
  this same bug.
*/
@media (max-width: 1023px){
  [class~="grid"][class*="lg:grid-cols-"]{ grid-template-columns:minmax(0,1fr); }
}


/* ─── NAVIGATION ────────────────────────────────────────────── */
/*
  .nav-bar carries Tailwind's ".border-b" utility, which only sets
  border-bottom-width. Tailwind's Preflight reset then fixes
  border-color to a static gray (#e5e7eb) on every element that has
  no explicit border-color of its own — it does NOT fall back to
  currentColor, so it never adapts to theme. That fixed gray reads as
  a near-white line against the dark-mode nav background. Setting the
  color explicitly here, using the same token already used for every
  other subtle border in the project, makes it themed correctly in
  both modes.
*/
.nav-bar{
  background:var(--bg-nav);
  border-bottom-color:var(--bg-glass-border);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  transition:background .3s ease;
}
.nav-bar.scrolled{ background:var(--bg-nav-scroll); }

.nav-link{
  color:var(--text-secondary);text-decoration:none;
  font-weight:500;transition:color .2s ease;
  position:relative;padding-bottom:2px;
}
.nav-link::after{
  content:'';position:absolute;bottom:-2px;left:0;width:0;height:2px;
  background:var(--accent);border-radius:1px;
  transition:width .25s ease;
}
.nav-link:hover{color:var(--text-primary);}
.nav-link:hover::after{width:100%;}

/* Active nav link (set by ScrollSpy in JS) */
.nav-link.nav-active{color:var(--accent);}
.nav-link.nav-active::after{width:100%;}


/* ─── NAV TOOLBAR (lang + theme) ───────────────────────────────
   A compact pill that groups the two display-controls together.
   Both children share --ctrl-* tokens, so they always match.
──────────────────────────────────────────────────────────────── */
.nav-toolbar{
  display:flex;align-items:center;gap:4px;
  background:var(--ctrl-bg);
  border:1px solid var(--ctrl-border);
  border-radius:10px;padding:4px 6px;
  transition:background .3s ease,border-color .3s ease;
}

/* Globe + select wrapper */
.ctrl-wrap{
  display:flex;align-items:center;gap:4px;
  position:relative;
}
.ctrl-icon{
  font-size:11px;color:var(--ctrl-icon);
  pointer-events:none;flex-shrink:0;
}

/*
  Custom-styled <select>:
  - appearance:none removes the OS arrow and border so we can overlay
    our own .ctrl-arrow chevron icon and control the border via the
    parent .nav-toolbar pill.
  - background + color use our CSS tokens so the control matches the
    theme automatically. On macOS and Firefox the dropdown inherits
    these values. On Windows/Chrome the OS ignores option backgrounds
    (browser limitation) — a future iteration can swap to a custom
    listbox if full Windows styling is required.
  - We keep the native <select> (not a div-based fake) because it gives
    full keyboard navigation, screen-reader support, and mobile pickers
    for free, with zero extra JavaScript.
*/
.ctrl-select{
  appearance:none;-webkit-appearance:none;
  /*
    Use --ctrl-bg-solid (opaque) not --ctrl-bg (semi-transparent).
    Semi-transparent backgrounds let the OS render its own default
    select background underneath, which is white on Windows dark mode
    and causes the visible mismatch. An opaque colour that matches
    the parent pill makes the select invisible as a distinct element.
  */
  background:var(--ctrl-bg-solid);
  color:var(--ctrl-text);
  border:none;outline:none;
  font-family:'JetBrains Mono',monospace;
  font-size:12px;font-weight:600;
  padding:2px 18px 2px 2px;
  cursor:pointer;
  transition:color .3s ease, background .3s ease;
  min-width:30px;
  border-radius:6px;
}
.ctrl-select:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
.ctrl-select--sm{ font-size:11px; padding-right:14px; }
/* Option elements: browser respects these on macOS/Firefox */
.ctrl-select option{
  background:var(--ctrl-bg-solid);
  color:var(--text-primary);
  font-family:'JetBrains Mono',monospace;
  font-weight:600;
}

.ctrl-arrow{
  position:absolute;right:0;top:50%;transform:translateY(-50%);
  font-size:9px;color:var(--ctrl-icon);
  pointer-events:none;
}

/* Toolbar divider */
.toolbar-divider{
  display:block;width:1px;height:16px;
  background:var(--ctrl-border);margin:0 2px;
  flex-shrink:0;
}

/* Theme toggle button inside toolbar */
.ctrl-btn{
  background:transparent;border:none;
  color:var(--ctrl-text);
  padding:2px 4px;cursor:pointer;
  font-size:13px;
  display:flex;align-items:center;
  transition:color .2s ease,transform .15s ease;
}
.ctrl-btn:hover{color:var(--ctrl-hover-border);transform:scale(1.12);}
.ctrl-btn .icon-sun { display:inline-block; }
.ctrl-btn .icon-moon{ display:none; }
.light-mode .ctrl-btn .icon-sun  { display:none; }
.light-mode .ctrl-btn .icon-moon { display:inline-block; }


/* ─── CYBER BUTTON ──────────────────────────────────────────── */
.cyber-button{
  position:relative;overflow:hidden;
  background:linear-gradient(45deg,#3b82f6,#1e40af);
  color:#fff;cursor:pointer;
  transition:transform .3s ease,box-shadow .3s ease;
}
.cyber-button::before{
  content:'';position:absolute;top:0;left:-100%;
  width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.30),transparent);
  transition:left .5s;
}
.cyber-button:hover::before{left:100%;}
.cyber-button:hover{transform:translateY(-2px);box-shadow:0 10px 30px var(--accent-glow);}
.cyber-button:active{transform:translateY(1px) scale(.98);}


/*
  Hero animated sphere — was fixed at w-64/h-64 (256px), a Tailwind
  utility pair not present in this project's purged tailwind.min.css
  (same class of gap as .logo-full and .tn-fab elsewhere). Because it
  never shrank, it forced the whole hero column — and with it the
  page — wider than the viewport on any phone under ~380px, which is
  the real cause of the horizontal overflow/cramped layout on small
  screens. clamp() keeps it perfectly square (same expression for both
  axes) while letting it scale down with the viewport instead of
  blowing out the grid.
*/
.hero-orb{
  width:clamp(160px, 42vw, 256px);
  height:clamp(160px, 42vw, 256px);
}

/* ─── HOLOGRAM EFFECT ───────────────────────────────────────── */
.hologram-effect{
  background:linear-gradient(45deg,transparent 30%,rgba(59,130,246,.07) 50%,transparent 70%);
  background-size:200% 200%;animation:hologram 3s ease-in-out infinite;
}
@keyframes hologram{0%,100%{background-position:0% 0%}50%{background-position:100% 100%}}


/* ─── SERVICE CARDS ─────────────────────────────────────────── */
.service-card{
  background:var(--bg-glass);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);
  border:1px solid var(--bg-glass-border);position:relative;overflow:hidden;
  will-change:transform,box-shadow;backface-visibility:hidden;
  transition:transform .4s cubic-bezier(.25,.46,.45,.94),box-shadow .4s cubic-bezier(.25,.46,.45,.94),border-color .4s cubic-bezier(.25,.46,.45,.94),background .3s ease;
}
.service-card:nth-child(1){animation-delay:.1s}
.service-card:nth-child(2){animation-delay:.2s}
.service-card:nth-child(3){animation-delay:.3s}
.service-card:nth-child(4){animation-delay:.4s}
.service-card:nth-child(5){animation-delay:.5s}
.service-card:nth-child(6){animation-delay:.6s}
.service-card:hover{transform:translateY(-12px) scale(1.015);box-shadow:0 20px 40px var(--accent-glow),0 0 0 1px rgba(59,130,246,.1);border-color:rgba(59,130,246,.4);}
.service-card::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent);transition:left .6s ease-out;z-index:1;}
.service-card:hover::before{left:100%;}
.service-card>*{position:relative;z-index:2;}
@media(max-width:768px){.service-card:hover{transform:translateY(-6px) scale(1.01);}}


/* ─── PRODUCT CARDS ─────────────────────────────────────────── */
.product-card{
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.product-card:hover{transform:translateY(-8px);box-shadow:0 16px 40px var(--accent-glow);}
.product-card__visual{
  height:140px;
  transition:filter .3s ease;
}
.product-card:hover .product-card__visual{filter:brightness(1.1);}

.badge{
  display:inline-block;font-size:11px;font-weight:600;
  padding:2px 8px;border-radius:20px;font-family:'JetBrains Mono',monospace;
  white-space:nowrap;
}
.badge--blue  {background:rgba(59,130,246,.15);color:#60a5fa;border:1px solid rgba(59,130,246,.30);}
.badge--red   {background:rgba(239,68,68,.15); color:#f87171;border:1px solid rgba(239,68,68,.30);}
.badge--cyan  {background:rgba(6,182,212,.15); color:#22d3ee;border:1px solid rgba(6,182,212,.30);}
.badge--pink  {background:rgba(236,72,153,.15);color:#f472b6;border:1px solid rgba(236,72,153,.30);}
.badge--purple{background:rgba(139,92,246,.15);color:#a78bfa;border:1px solid rgba(139,92,246,.30);}
.badge--green {background:rgba(16,185,129,.15);color:#34d399;border:1px solid rgba(16,185,129,.30);}

.product-link{
  display:inline-block;font-size:13px;font-weight:600;
  color:var(--accent);text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color .2s ease,color .2s ease;
}
.product-link:hover{border-bottom-color:var(--accent);color:var(--text-primary);}


/* ─── TECHNOLOGY SECTION ────────────────────────────────────── */

/* Terminal block */
.tech-terminal{font-size:13px;}
.tech-terminal__output{min-height:1.4em;}

/* Tab buttons */
.tech-tab{
  padding:8px 20px;border-radius:8px;font-size:13px;font-weight:600;
  background:var(--bg-glass);border:1px solid var(--bg-glass-border);
  color:var(--text-muted);cursor:pointer;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.tech-tab:hover{color:var(--text-primary);border-color:var(--accent);}
.tech-tab.active{
  background:linear-gradient(45deg,var(--accent),var(--accent-dark));
  color:#fff;border-color:transparent;
}
.tech-panel{animation:fadePanel .35s ease;}
@keyframes fadePanel{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* Pill tags */
.pill{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11px;font-family:'JetBrains Mono',monospace;border:1px solid transparent;}
.pill--blue  {background:rgba(59,130,246,.12);color:#60a5fa;border-color:rgba(59,130,246,.25);}
.pill--purple{background:rgba(139,92,246,.12);color:#a78bfa;border-color:rgba(139,92,246,.25);}
.pill--cyan  {background:rgba(6,182,212,.12); color:#22d3ee;border-color:rgba(6,182,212,.25);}
.pill--green {background:rgba(16,185,129,.12);color:#34d399;border-color:rgba(16,185,129,.25);}
.pill--emerald{background:rgba(5,150,105,.12);color:#6ee7b7;border-color:rgba(5,150,105,.25);}
.pill--teal  {background:rgba(20,184,166,.12);color:#5eead4;border-color:rgba(20,184,166,.25);}
.pill--red   {background:rgba(239,68,68,.12); color:#f87171;border-color:rgba(239,68,68,.25);}
.pill--pink  {background:rgba(236,72,153,.12);color:#f472b6;border-color:rgba(236,72,153,.25);}
.pill--orange{background:rgba(249,115,22,.12);color:#fb923c;border-color:rgba(249,115,22,.25);}

/* Feature row */
.tech-feature{display:flex;align-items:center;gap:10px;font-size:14px;}
.tech-feature i{flex-shrink:0;}

/* Timeline */
.tech-timeline{display:flex;flex-direction:column;gap:16px;}
.tech-timeline__item{display:flex;align-items:flex-start;gap:12px;}
.tech-timeline__dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;margin-top:4px;}

/* Counter animation */
.counter{display:inline-block;}


/* ─── FORM ──────────────────────────────────────────────────── */
input,select,textarea{
  background:var(--bg-input);color:var(--text-primary);
  font-family:'Space Grotesk',sans-serif;
  transition:border-color .3s ease,box-shadow .3s ease,background .3s ease;
}
input:hover,select:hover,textarea:hover{border-color:rgba(59,130,246,.5);}
@media(max-width:768px){input,select,textarea{font-size:16px;}}
::placeholder{color:var(--text-placeholder);}
select option{background:var(--bg-option);color:var(--text-primary);}

.form-input{background:var(--bg-input);color:var(--text-primary);}
.input-error{border-color:#ef4444!important;box-shadow:0 0 0 2px rgba(239,68,68,.25)!important;animation:shake .3s ease-in-out;}
.input-success{border-color:#10b981!important;box-shadow:0 0 0 2px rgba(16,185,129,.25)!important;}
.error-message{font-size:.75rem;color:#ef4444;}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}

.btn-loading{pointer-events:none;opacity:.7;}
.btn-loading .btn-text{opacity:0;}
.btn-loading::after{content:'';position:absolute;top:50%;left:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border:2px solid transparent;border-top-color:#fff;border-radius:50%;animation:spin 1s linear infinite;}
@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
@keyframes slideDown{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:translateY(0)}}
#form-messages{animation:slideDown .4s ease-out;}


/* ─── FLOATING BUTTONS ──────────────────────────────────────── */
.floating-buttons{
  position:fixed;bottom:2rem;right:2rem;z-index:1000;
  display:flex;flex-direction:column;gap:1rem;
}
.floating-btn{
  position:relative;width:56px;height:56px;border-radius:50%;border:none;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:transform .3s ease,box-shadow .3s ease;
  box-shadow:var(--shadow-float);
}
.floating-btn i{font-size:22px;color:#fff;pointer-events:none;}
.whatsapp-btn{background:linear-gradient(45deg,#25d366,#20c653);}
.chat-btn    {background:linear-gradient(45deg,#3b82f6,#1e40af);}
.floating-btn:hover{transform:translateY(-5px) scale(1.1);}
.floating-btn::before{content:'';position:absolute;inset:0;border-radius:50%;background:inherit;animation:pulseRing 2s cubic-bezier(.455,.03,.515,.955) infinite;z-index:-1;}
@keyframes pulseRing{0%{transform:scale(.33);opacity:1}80%,100%{transform:scale(2.33);opacity:0}}
@media(max-width:768px){.floating-buttons{bottom:1rem;right:1rem;}.floating-btn{width:48px;height:48px;}.floating-btn i{font-size:18px;}}


/* ─── CHAT POPOVER ──────────────────────────────────────────────
   POSITIONING:
   The FAB group stacks WhatsApp (top) then Chat (bottom).
   The chat button bottom-edge is at: 2rem from page bottom.
   We anchor the popover just above the chat button only:
     bottom = 2rem (group margin) + 56px (chat btn) + 8px gap
   This means the popover overlaps the WhatsApp button — that is
   intentional. The popover is contextually linked to the chat FAB,
   not to both buttons.

   HEIGHT:
   Capped with min() so it never overflows past the top nav (80px):
     height = min(520px, 100dvh - bottom_anchor - nav - safety)
   dvh (dynamic viewport height) accounts for mobile browser chrome.

   MOBILE (≤480px): covers the entire screen — full-screen chat.
──────────────────────────────────────────────────────────────── */
.chat-popover{
  position:fixed;
  bottom:calc(2rem + 56px + 8px);   /* just above the chat FAB */
  right:2rem;
  width:340px;
  height:min(520px, calc(100dvh - 2rem - 56px - 8px - 80px - 16px));
  background:var(--bg-chat);
  border:1px solid var(--bg-glass-border);
  border-radius:16px;
  box-shadow:0 20px 60px rgba(0,0,0,.50);
  display:flex;flex-direction:column;overflow:hidden;
  z-index:1001;
  transform:scale(.92) translateY(12px);
  opacity:0;
  pointer-events:none;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1),opacity .2s ease;
}
.chat-popover.open{
  transform:scale(1) translateY(0);
  opacity:1;pointer-events:all;
}
/* Mobile: full-screen, covers everything */
@media(max-width:480px){
  .chat-popover{
    position:fixed;
    inset:0;
    width:100%;
    height:100dvh;
    max-height:100dvh;
    bottom:0;right:0;
    border-radius:0;
    z-index:1002;
  }
}

.chat-popover__header{
  display:flex;align-items:center;gap:10px;
  padding:12px 14px;border-bottom:1px solid var(--bg-glass-border);
  background:var(--bg-chat);flex-shrink:0;
}
.chat-close-btn{
  background:transparent;border:none;
  color:var(--text-muted);cursor:pointer;
  font-size:14px;padding:4px;border-radius:6px;
  transition:color .2s ease,background .2s ease;
}
.chat-close-btn:hover{color:var(--text-primary);background:var(--bg-glass);}

#chat-messages{
  flex:1;overflow-y:auto;overflow-x:hidden;
  padding:12px;display:flex;flex-direction:column;gap:10px;
}
#chat-messages::-webkit-scrollbar{width:4px;}
#chat-messages::-webkit-scrollbar-track{background:transparent;}
#chat-messages::-webkit-scrollbar-thumb{background:var(--accent);border-radius:2px;}

.chat-msg{display:flex;gap:8px;align-items:flex-start;}
.chat-msg .bubble{
  background:var(--bg-chat-bubble);
  border:1px solid var(--bg-glass-border);
  color:var(--text-primary);
  border-radius:12px;padding:8px 11px;
  font-size:13px;line-height:1.45;
  max-width:82%;word-break:break-word;
  white-space:pre-wrap; /* preserves line breaks (Shift+Enter) from the composer */
}
.chat-msg.user{flex-direction:row-reverse;}
.chat-msg.user .bubble{background:linear-gradient(135deg,rgba(59,130,246,.2),rgba(139,92,246,.2));border-color:rgba(59,130,246,.30);}
.chat-msg .ts{font-size:10px;color:var(--text-muted);margin-top:3px;}

.chat-popover__input-area{
  padding:8px 12px;border-top:1px solid var(--bg-glass-border);
  background:var(--bg-chat);flex-shrink:0;
}
.chat-composer{
  display:flex;align-items:flex-end;gap:2px;
  background:var(--bg-chat-bubble);
  border:1px solid var(--bg-glass-border);border-radius:16px;
  padding:5px 6px;
  transition:border-color .2s ease;
}
.chat-composer:focus-within{border-color:var(--accent);}
.chat-textarea{
  flex:1;background:transparent;color:var(--text-primary);
  border:none;outline:none;
  padding:6px 4px;font-size:13px;font-family:'Space Grotesk',sans-serif;
  line-height:1.4;
  resize:none;overflow-y:auto;
  /* Collapsed: ~1 line. Grows with content up to ~4 lines, then scrolls
     internally instead of growing further — mirrors Claude's composer.
     `field-sizing:content` (where supported) grows the box natively;
     the JS in custom.js (autoResizeInput) is the fallback for browsers
     that don't support it yet — both are capped by this max-height. */
  field-sizing:content;
  min-height:24px;max-height:100px;
}
.chat-textarea::-webkit-scrollbar{width:4px;}
.chat-textarea::-webkit-scrollbar-track{background:transparent;}
.chat-textarea::-webkit-scrollbar-thumb{background:var(--accent);border-radius:2px;}
.chat-textarea{scrollbar-width:thin;} /* Firefox */
.chat-textarea::placeholder{color:var(--text-placeholder);}
.chat-icon-btn{
  width:26px;height:26px;min-width:26px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;padding:0;
  border:none;background:transparent;
  color:#fff; /* dark theme (default): plain white icon, no button chrome */
  font-size:13px;
  transition:opacity .15s ease;
}
.light-mode .chat-icon-btn{ color:var(--accent); } /* light theme: blue icon */
.chat-voice-btn{ opacity:.85; cursor:default; } /* decorative for now — see note in custom.js */
.chat-send-btn:disabled{opacity:.35;cursor:not-allowed;}
.chat-send-btn:not(:disabled):hover{opacity:.75;}
.chat-popover__hint{
  display:flex;justify-content:space-between;
  padding:4px 12px 8px;color:var(--text-muted);
  background:var(--bg-chat);flex-shrink:0;
}

/* Typing indicator */
.typing-indicator{display:flex;align-items:center;gap:4px;padding:2px 0;}
.typing-indicator span{width:6px;height:6px;background:var(--accent);border-radius:50%;animation:typingBounce 1.2s ease-in-out infinite;}
.typing-indicator span:nth-child(2){animation-delay:.2s}
.typing-indicator span:nth-child(3){animation-delay:.4s}
@keyframes typingBounce{0%,80%,100%{transform:translateY(0);opacity:.5}40%{transform:translateY(-5px);opacity:1}}

/* Streaming cursor */
.streaming-cursor::after{content:'|';color:var(--accent);animation:cursorBlink .7s step-end infinite;}
@keyframes cursorBlink{from,to{opacity:1}50%{opacity:0}}



/* ─── SCROLL PROGRESS BAR ────────────────────────────────────────
   Fixed at the very top of the page (above the nav).
   Width is driven by a CSS custom property --scroll-pct that is
   updated by JS on every scroll event. Using a CSS variable + width
   transition is more performant than animating left/transform
   because the browser can compositor-thread this without layout.
   
   The bar uses the same holographic gradient as the hero text so it
   feels native to the design language.
   z-index:9999 keeps it above the nav (z-index:50).
──────────────────────────────────────────────────────────────── */
#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--scroll-pct, 0%);
  height: 3px;
  background: linear-gradient(90deg, #3b82f6, #8b5cf6, #06b6d4, #10b981);
  background-size: 200% 100%;
  animation: progressShimmer 2s linear infinite;
  z-index: 9999;
  pointer-events: none;
  /* Smooth width changes — 60fps JS updates feel instant at 80ms */
  transition: width 80ms linear;
  /* Hide when at top (pct = 0) */
  opacity: var(--scroll-pct-raw, 0);
}

@keyframes progressShimmer {
  0%   { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}

/* ─── FOOTER ─────────────────────────────────────────────────── */
footer{border-top:1px solid var(--bg-glass-border);}
footer a{color:var(--text-muted);text-decoration:none;transition:color .2s ease;}
footer a:hover{color:var(--accent);}


/* ─── SCROLLBAR ─────────────────────────────────────────────── */
::-webkit-scrollbar{width:7px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:linear-gradient(45deg,var(--accent),#8b5cf6);border-radius:4px;}


/* ─── UTILITY ANIMATIONS ────────────────────────────────────── */
.animate-spin-slow  {animation:spin 8s linear infinite;}
.animate-pulse-slow {animation:pulseSlow 3s ease-in-out infinite;}
.animate-bounce-slow{animation:bounceSlow 2s ease-in-out infinite;}
.animate-float      {animation:floatOrb 6s ease-in-out infinite;}
@keyframes pulseSlow {0%,100%{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(.97)}}
@keyframes bounceSlow{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes fadeIn    {from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
@keyframes ripple    {to{transform:scale(2.5);opacity:0}}

/* High-contrast mode */
@media(prefers-contrast:high){.glass-effect{background:var(--bg-page);border:2px solid var(--text-primary);}.cyber-button{border:2px solid #fff;}}

/* ─── COOKIE BANNER ─────────────────────────────────────────────
   Fixed at the bottom of the viewport, above the FAB buttons.
   Slides in on page load if consent has not been given yet.
   Disappears (slides out) after accept or decline.
──────────────────────────────────────────────────────────────── */
#cookie-banner {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 2000;
  background: var(--bg-nav-scroll);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--bg-glass-border);
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  transform: translateY(100%);
  transition: transform .4s cubic-bezier(.25,.46,.45,.94);
  box-shadow: 0 -8px 32px rgba(0,0,0,.15);
}
#cookie-banner.visible { transform: translateY(0); }
#cookie-banner.dismissed { transform: translateY(110%); transition: transform .3s ease; }
.cookie-banner__text {
  font-size: .875rem;
  color: var(--text-secondary);
  flex: 1;
  min-width: 200px;
}
.cookie-banner__text a { color: var(--accent); text-decoration: none; }
.cookie-banner__text a:hover { text-decoration: underline; }
.cookie-banner__actions { display: flex; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }
.cookie-btn-accept {
  padding: 8px 20px; border-radius: 8px; font-size: .85rem; font-weight: 600;
  background: linear-gradient(45deg,#3b82f6,#1e40af); color: #fff;
  border: none; cursor: pointer; transition: transform .2s, box-shadow .2s;
  font-family: 'Space Grotesk', sans-serif;
}
.cookie-btn-accept:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(59,130,246,.4); }
.cookie-btn-decline {
  padding: 8px 20px; border-radius: 8px; font-size: .85rem; font-weight: 600;
  background: transparent; color: var(--text-muted);
  border: 1px solid var(--bg-glass-border); cursor: pointer;
  transition: border-color .2s, color .2s;
  font-family: 'Space Grotesk', sans-serif;
}
.cookie-btn-decline:hover { border-color: var(--accent); color: var(--text-primary); }
@media (max-width: 600px) {
  #cookie-banner { flex-direction: column; align-items: flex-start; }
  .cookie-banner__actions { width: 100%; }
  .cookie-btn-accept, .cookie-btn-decline { flex: 1; text-align: center; }
}

/* -----------------------------------------------------------------------
   Nav logo — the full wordmark (logo.png) is shown at every breakpoint,
   including mobile. It used to swap to a square icon-only image below
   1024px, but that read as "the wrong logo" on phones — this just sizes
   the same full logo down for smaller screens instead of swapping images.
------------------------------------------------------------------------ */
.logo-full {
  height: 30px;
  width: auto;
}
@media (min-width: 480px) {
  .logo-full { height: 34px; }
}
@media (min-width: 768px) {
  .logo-full { height: 38px; }
}
@media (min-width: 1024px) {
  .logo-full { height: 44px; }
}

/* Dark variant (white "TECH", logo-dark.png) shown by default — dark is
   this project's base theme. .light-mode is the only class ThemeManager
   reliably keeps in sync (it never re-adds .dark-mode after the initial
   anti-FOUC script), so the light variant is a .light-mode override
   rather than the reverse. Without this, the near-black "TECH" text in
   the original logo.png was unreadable against the dark nav background.
------------------------------------------------------------------------ */
.logo-full--dark  { display: block; }
.logo-full--light { display: none; }
.light-mode .logo-full--dark  { display: none; }
.light-mode .logo-full--light { display: block; }

/* Same root cause as above: "hidden lg:block" was never compiled by
   Tailwind, so anything else in the project relying on it (e.g. the
   legal-toc sidebar on Privacy/Terms/Cookies) is also stuck at
   display:none. This generic replacement covers those other cases. */
.lg-block { display: none; }
@media (min-width: 1024px) {
  .lg-block { display: block; }
}

/* -----------------------------------------------------------------------
   Long-form article typography — shared by .legal-body (Terms/Privacy/
   Cookies) and .article-body (blog post). Neither had its own rules, so
   Tailwind's preflight reset was left in charge: h2/h3 get
   font-weight:inherit (same weight as body text) and ul/li/p all get
   margin:0 / list-style:none. Result: titles unreadable, no breathing
   room between paragraphs. These rules restore both.
------------------------------------------------------------------------ */
.legal-body h2, .article-body h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-top: 2.5rem;
  margin-bottom: 0.9rem;
}
.legal-body h2:first-child, .article-body h2:first-child { margin-top: 0; }
.article-body h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-top: 1.75rem;
  margin-bottom: 0.75rem;
}
.legal-body p, .article-body p {
  color: var(--text-secondary);
  line-height: 1.75;
  margin-bottom: 1.1rem;
}
.legal-body ul, .article-body ul {
  list-style: disc;
  padding-left: 1.4rem;
  margin-bottom: 1.1rem;
}
.legal-body li, .article-body li {
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 0.5rem;
}
.legal-body strong, .article-body strong {
  color: var(--text-primary);
  font-weight: 700;
}
.legal-body a, .article-body a { color: var(--accent); }
.article-body pre {
  margin-bottom: 1.25rem;
  padding: 18px 20px;
  border-radius: 12px;
  background: rgba(0,0,0,.32);
  border: 1px solid var(--bg-glass-border);
  overflow-x: auto;
}
.article-body pre code {
  font-family: 'JetBrains Mono', monospace;
  font-size: .82rem;
  line-height: 1.6;
  color: #93c5fd;
}
.article-body code {
  font-family: 'JetBrains Mono', monospace;
  font-size: .85em;
  color: #93c5fd;
  background: rgba(0,0,0,.25);
  padding: 2px 6px;
  border-radius: 4px;
}

/* -----------------------------------------------------------------------
   Article sidebar TOC (post.html only) — desktop / lg+ via .lg-block.
------------------------------------------------------------------------ */
nav[aria-label="Table of contents"] {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.toc-link {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.85rem;
  line-height: 1.4;
  transition: color .2s;
}
.toc-link:hover { color: var(--accent); }

/* -----------------------------------------------------------------------
   Legal pages (Terms/Privacy/Cookies) — accordion layout. Single column,
   one section open at a time, no sidebar at any breakpoint. Replaces the
   sidebar+article grid, which never sat right: a permanent list next to
   a wall of legal text. Collapsing everything except the section someone
   actually wants turns a long document into something scannable instead.
------------------------------------------------------------------------ */
.legal-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.legal-item {
  background: var(--bg-glass);
  backdrop-filter: blur(12px);
  border: 1px solid var(--bg-glass-border);
  border-radius: 14px;
  overflow: hidden;
}
.legal-item[open] {
  border-color: var(--accent);
}
.legal-item__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px;
  cursor: pointer;
  list-style: none;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-primary);
}
.legal-item__summary::-webkit-details-marker { display: none; }
.legal-item__summary::marker { content: ''; }
.legal-item__chevron {
  color: var(--text-muted);
  transition: transform .2s;
  flex-shrink: 0;
}
.legal-item[open] .legal-item__chevron { transform: rotate(180deg); color: var(--accent); }
.legal-item__content {
  padding: 0 22px 22px;
}
.legal-item__content p {
  color: var(--text-secondary);
  line-height: 1.75;
  margin-bottom: 1.1rem;
}
.legal-item__content p:last-child { margin-bottom: 0; }
.legal-item__content ul {
  list-style: disc;
  padding-left: 1.4rem;
  margin-bottom: 1.1rem;
}
.legal-item__content li {
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 0.5rem;
}
.legal-item__content strong { color: var(--text-primary); font-weight: 700; }
.legal-item__content a { color: var(--accent); }

/* -----------------------------------------------------------------------
   Search FAB + modal — jumps straight to a matching accordion item and
   opens it. Shown at every breakpoint now: legal pages have no desktop
   sidebar to fall back on any more.
------------------------------------------------------------------------ */
.search-btn { background: linear-gradient(45deg,#8b5cf6,#6d28d9); }
.search-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 12vh 20px 20px;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.search-modal.open { opacity: 1; pointer-events: all; }
.search-modal__panel {
  width: 100%;
  max-width: 480px;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-chat);
  border: 1px solid var(--bg-glass-border);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  overflow: hidden;
  transform: translateY(-16px);
  transition: transform .2s ease;
}
.search-modal.open .search-modal__panel { transform: translateY(0); }
.search-modal__input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--bg-glass-border);
  flex-shrink: 0;
}
.search-modal__input-row i { color: var(--text-muted); }
.search-modal__input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-size: 1rem;
  font-family: 'Space Grotesk', sans-serif;
}
.search-modal__close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
}
.search-modal__close:hover { color: var(--text-primary); background: var(--bg-glass); }
.search-modal__results {
  overflow-y: auto;
  padding: 8px;
}
.search-result {
  display: block;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border-radius: 10px;
  background: transparent;
  border: none;
  color: var(--text-primary);
  cursor: pointer;
  text-decoration: none;
}
.search-result:hover { background: var(--bg-glass); }
.search-result__title { font-weight: 700; font-size: .9rem; margin-bottom: 2px; }
.search-result__snippet { font-size: .8rem; color: var(--text-muted); line-height: 1.4; }
.search-modal__empty { padding: 24px 16px; text-align: center; color: var(--text-muted); font-size: .9rem; }

/* -----------------------------------------------------------------------
   Cookie table (cookies.html) — overflow-x-auto, pr-4 and border-white/5
   were never compiled by Tailwind (same root cause as elsewhere: they
   weren't in the HTML at build time), so the table had no horizontal
   scroll on narrow screens and its cells had zero right padding/spacing.
------------------------------------------------------------------------ */
.table-scroll { overflow-x: auto; }
.legal-table th, .legal-table td { padding-right: 1rem; }
.legal-table th:last-child, .legal-table td:last-child { padding-right: 0; }
.legal-table .row-faint { border-bottom-color: hsla(0,0%,100%,.05); }

/* -----------------------------------------------------------------------
   Careers page — job cards. The Apply button is absolutely positioned
   at the vertical center of the right edge instead of being its own
   flex row: a flex-column layout (tried previously) made the card's
   height grow to fit the button as a separate row, leaving a large
   empty gap above it. Absolute positioning keeps the card's height
   driven only by the text content, while centering the button
   vertically against that text.
------------------------------------------------------------------------ */
.job-card {
  position: relative;
  padding-right: 150px;
}
.job-card__apply {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
}
@media (max-width: 639px) {
  .job-card { padding-right: 24px; }
  .job-card__apply { position: static; top: auto; transform: none; margin-top: 16px; display: flex; justify-content: flex-end; }
}

/* -----------------------------------------------------------------------
   Careers page — section headings and Apply button text. sm:text-4xl,
   sm:text-3xl and whitespace-nowrap were never compiled by Tailwind
   (same root cause as elsewhere in this project), so section titles
   never scaled up on larger screens and button text had no wrap
   protection. Custom classes replace them.
------------------------------------------------------------------------ */
.heading-lg { font-size: 1.875rem; font-weight: 700; margin-bottom: 1rem; }
@media (min-width: 640px) { .heading-lg { font-size: 2.25rem; } }
.heading-md { font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; }
@media (min-width: 640px) { .heading-md { font-size: 1.875rem; } }
.nowrap { white-space: nowrap; }
