:root {
    --cyt-green: #1db886;
    --cyt-green-dark: #17a374;
    --cyt-green-glow: rgba(29,184,134,0.18);
    --gold: #c9a84c;
    --gold-light: rgba(201,168,76,0.12);
    --border-gold: rgba(201,168,76,0.25);
    --cyt-dark: #080f18;
    --cyt-navy: #0d1e2e;
    --cyt-navy-mid: #0f2438;
    --cyt-navy-light: #132d45;
    --text-primary: #ffffff;
    --text-secondary: rgba(255,255,255,0.72);
    --text-muted: rgba(255,255,255,0.42);
    --border: rgba(29,184,134,0.18);
    --border-light: rgba(255,255,255,0.08);
  }
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body { font-family: 'Montserrat', sans-serif; background: var(--cyt-dark); color: var(--text-primary); overflow-x: hidden; -webkit-font-smoothing: antialiased; }

  /* TOPBAR */
  .topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(8,15,24,0.92); backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; padding: 0 40px; height: 68px; }
  .nav-brand { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; font-weight: 600; color: #fff; text-decoration: none; white-space: nowrap; }
  .nav-brand span { color: var(--cyt-green); font-style: italic; }
  .topbar-actions { display: flex; align-items: center; gap: 22px; }
  .nav-cyt-endorser { display: inline-flex; align-items: center; flex-shrink: 0; opacity: 0.92; transition: opacity 0.2s; }
  .nav-cyt-endorser:hover { opacity: 1; }
  .nav-cyt-logo { height: 20px; width: auto; display: block; }
  .nav-links { display: flex; align-items: center; gap: 6px; }
  .nav-link { color: var(--text-secondary); text-decoration: none; font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; padding: 8px 14px; border-radius: 6px; transition: all 0.2s; }
  .nav-link:hover { color: var(--cyt-green); background: var(--cyt-green-glow); }
  .btn-nav { background: var(--cyt-green); color: #000; text-decoration: none; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 10px 18px; border-radius: 6px; transition: all 0.2s; white-space: nowrap; }
  .btn-nav:hover { background: var(--cyt-green-dark); transform: translateY(-1px); }

  /* HERO */
  .hero { position: relative; min-height: 100vh; display: flex; align-items: flex-end; padding-bottom: 80px; overflow: hidden; }
  .hero-bg { position: absolute; inset: 0; background-image: url('/assets/hero-bg.jpg'); background-size: cover; background-position: center 45%; transform: scale(1.04); animation: heroZoom 20s ease-in-out infinite alternate; }
  @keyframes heroZoom { from { transform: scale(1.04); } to { transform: scale(1.10); } }
  .hero-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(8,15,24,0.25) 0%, rgba(8,15,24,0.15) 35%, rgba(8,15,24,0.70) 65%, rgba(8,15,24,0.97) 100%); }
  .hero-overlay-left { position: absolute; inset: 0; background: linear-gradient(to right, rgba(8,15,24,0.65) 0%, transparent 60%); }
  .hero-inner { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; padding: 0 24px; width: 100%; }
  .hero-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(8,15,24,0.70); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(201,168,76,0.45); border-radius: 100px; padding: 8px 18px; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; margin-bottom: 28px; animation: fadeUp 0.8s ease both; }
  .hero-badge-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px var(--gold); animation: pulse 2s ease-in-out infinite; }
  @keyframes pulse { 0%, 100% { opacity:1; transform:scale(1); } 50% { opacity:0.5; transform:scale(0.8); } }
  .hero h1 { font-family: 'Cormorant Garamond', serif; font-size: clamp(52px, 7vw, 96px); font-weight: 300; line-height: 1.0; color: #fff; margin-bottom: 12px; animation: fadeUp 0.8s 0.1s ease both; }
  .hero h1 em { font-style: italic; color: var(--cyt-green); }
  .hero-sub { font-size: 15px; color: var(--text-secondary); max-width: 580px; line-height: 1.7; margin-bottom: 12px; animation: fadeUp 0.8s 0.2s ease both; }
  .hero-trust { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cyt-green); margin-bottom: 32px; animation: fadeUp 0.8s 0.25s ease both; }
  .hero-ctas { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; animation: fadeUp 0.8s 0.3s ease both; }
  .btn-primary { background: var(--cyt-green); color: #000; font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 18px 36px; border-radius: 8px; border: none; cursor: pointer; text-decoration: none; display: inline-block; transition: all 0.2s; box-shadow: 0 0 30px rgba(29,184,134,0.3); }
  .btn-primary:hover { background: var(--cyt-green-dark); transform: translateY(-2px); }
  .btn-secondary { color: var(--text-secondary); font-size: 13px; font-weight: 500; text-decoration: none; padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,0.25); transition: all 0.2s; }
  .btn-secondary:hover { color: #fff; border-color: var(--cyt-green); }
  .hero-stats { display: flex; gap: 0; margin-top: 56px; border-top: 1px solid var(--border-light); padding-top: 40px; animation: fadeUp 0.8s 0.4s ease both; }
  .hero-stat { flex: 1; padding-right: 32px; border-right: 1px solid var(--border-light); margin-right: 32px; }
  .hero-stat:last-child { border-right: none; margin-right: 0; padding-right: 0; }
  .hero-stat-num { font-family: 'Cormorant Garamond', serif; font-size: 42px; font-weight: 300; color: var(--cyt-green); line-height: 1; margin-bottom: 6px; }
  .hero-stat-label { font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
  @keyframes fadeUp { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:translateY(0); } }

  /* SECTIONS */
  section { padding: 100px 24px; }
  .container { max-width: 1200px; margin: 0 auto; }
  .section-label { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cyt-green); margin-bottom: 16px; display: flex; align-items: center; gap: 10px; }
  .section-label::before { content: ''; display: block; width: 28px; height: 1px; background: var(--cyt-green); }
  .section-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(36px, 4vw, 58px); font-weight: 300; line-height: 1.1; color: #fff; margin-bottom: 20px; }
  .section-title em { font-style: italic; color: var(--cyt-green); }
  .section-body { font-size: 15px; color: var(--text-secondary); line-height: 1.8; max-width: 600px; }

  /* PROBLEM */
  .problem-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; margin-top: 64px; }
  .problem-quote { font-family: 'Cormorant Garamond', serif; font-size: clamp(20px, 2.2vw, 30px); font-weight: 300; font-style: italic; color: #fff; line-height: 1.5; border-left: 3px solid var(--cyt-green); padding-left: 28px; margin-bottom: 32px; }
  .pain-points { list-style: none; display: flex; flex-direction: column; gap: 14px; }
  .pain-point { display: flex; gap: 16px; align-items: flex-start; padding: 18px; background: rgba(255,255,255,0.03); border: 1px solid var(--border-light); border-radius: 10px; transition: all 0.3s; }
  .pain-point:hover { border-color: var(--border); background: rgba(29,184,134,0.05); }
  .pain-icon { width: 36px; height: 36px; border-radius: 8px; background: rgba(29,184,134,0.1); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
  .pain-text { font-size: 13px; color: var(--text-muted); line-height: 1.6; }
  .pain-text strong { color: #fff; display: block; font-size: 13px; font-weight: 600; margin-bottom: 3px; }

  /* WHAT WE COVER */
  .cover-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 56px; }
  .cover-card { background: var(--cyt-navy); border: 1px solid var(--border-light); border-radius: 14px; padding: 28px 24px; transition: all 0.3s; opacity: 0; transform: translateY(20px); }
  .cover-card.visible { opacity: 1; transform: translateY(0); }
  .cover-card:hover { border-color: var(--border); background: var(--cyt-navy-light); transform: translateY(-4px) !important; }
  .cover-icon { font-size: 32px; margin-bottom: 16px; display: block; }
  .cover-title { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 6px; }
  .cover-domain { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; color: var(--cyt-green); margin-bottom: 12px; }
  .cover-body { font-size: 13px; color: var(--text-muted); line-height: 1.6; }

  /* SLIDERS */
  .slider-section { padding: 80px 24px; }
  .slider-header { margin-bottom: 32px; }
  .slider-tag { display: inline-flex; align-items: center; gap: 8px; background: rgba(29,184,134,0.08); border: 1px solid var(--border); border-radius: 100px; padding: 6px 16px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cyt-green); margin-bottom: 16px; }
  .ba-wrap { position: relative; width: 100%; border-radius: 20px; overflow: hidden; cursor: ew-resize; user-select: none; box-shadow: 0 40px 80px rgba(0,0,0,0.6); border: 1px solid var(--border-light); aspect-ratio: 16/7; }
  .ba-after, .ba-before { position: absolute; inset: 0; }
  .ba-after img, .ba-before img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; display: block; pointer-events: none; -webkit-user-drag: none; user-select: none; }
  .ba-before { width: 100%; overflow: hidden; clip-path: inset(0 50% 0 0); }
  .ba-before img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; max-width: none; }
  .ba-label { position: absolute; bottom: 20px; padding: 8px 16px; border-radius: 100px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; backdrop-filter: blur(10px); }
  .ba-label-before { left: 16px; background: rgba(0,0,0,0.6); color: rgba(255,255,255,0.8); border: 1px solid rgba(255,255,255,0.2); }
  .ba-label-after { right: 16px; background: rgba(29,184,134,0.2); color: var(--cyt-green); border: 1px solid rgba(29,184,134,0.4); }
  .ba-handle { position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; z-index: 10; }
  .ba-handle-line { flex: 1; width: 3px; background: rgba(255,255,255,0.9); box-shadow: 0 0 10px rgba(0,0,0,0.5); }
  .ba-handle-btn { width: 48px; height: 48px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; gap: 4px; flex-shrink: 0; box-shadow: 0 4px 20px rgba(0,0,0,0.4); font-size: 12px; color: #000; font-weight: 700; }
  .slider-caption { margin-top: 16px; font-size: 13px; color: var(--text-muted); text-align: center; }
  .slider-caption strong { color: var(--text-secondary); }

  /* STEPS */
  .steps-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; margin-top: 64px; background: var(--border-light); border-radius: 16px; overflow: hidden; }
  .step { background: var(--cyt-navy); padding: 36px 24px; transition: all 0.3s; }
  .step:hover { background: var(--cyt-navy-light); }
  .step-num { font-family: 'Cormorant Garamond', serif; font-size: 64px; font-weight: 300; color: rgba(29,184,134,0.12); line-height: 1; margin-bottom: 12px; }
  .step-icon { font-size: 28px; margin-bottom: 16px; display: block; }
  .step-title { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; color: #fff; margin-bottom: 10px; text-transform: uppercase; }
  .step-body { font-size: 13px; color: var(--text-muted); line-height: 1.6; }

  /* OFFICER */
  .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
  .officer-img { border-radius: 20px; overflow: hidden; box-shadow: 0 32px 64px rgba(0,0,0,0.5); position: relative; }
  .officer-img img { width: 100%; height: auto; display: block; }
  .resp-point { display: flex; gap: 18px; align-items: flex-start; padding: 18px; background: rgba(255,255,255,0.02); border: 1px solid var(--border-light); border-radius: 12px; margin-bottom: 14px; transition: all 0.2s; }
  .resp-point:hover { border-color: var(--border); }
  .resp-icon { width: 42px; height: 42px; border-radius: 10px; background: rgba(29,184,134,0.1); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
  .resp-title { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 4px; }
  .resp-body { font-size: 13px; color: var(--text-muted); line-height: 1.6; }

  /* NETWORK */
  .trades-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
  .trade-card { background: rgba(255,255,255,0.03); border: 1px solid var(--border-light); border-radius: 12px; padding: 24px 16px; text-align: center; transition: all 0.3s; }
  .trade-card:hover { border-color: var(--border); background: rgba(29,184,134,0.06); transform: translateY(-4px); }
  .trade-icon { font-size: 28px; margin-bottom: 12px; display: block; }
  .trade-name { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); line-height: 1.4; }
  .trade-card:hover .trade-name { color: var(--cyt-green); }

  /* FAQ */
  .faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 64px; }
  .faq-item { background: rgba(255,255,255,0.02); border: 1px solid var(--border-light); border-radius: 12px; overflow: hidden; transition: all 0.3s; }
  .faq-item:hover { border-color: var(--border); }
  .faq-q { padding: 24px; font-size: 14px; font-weight: 600; color: #fff; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; user-select: none; }
  .faq-q::after { content: '+'; color: var(--cyt-green); font-size: 20px; font-weight: 300; flex-shrink: 0; transition: transform 0.3s; }
  .faq-item.open .faq-q::after { transform: rotate(45deg); }
  .faq-a { padding: 0 24px; max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.3s; font-size: 14px; color: var(--text-muted); line-height: 1.7; }
  .faq-item.open .faq-a { max-height: 300px; padding: 0 24px 24px; }

  /* FORM */
  .form-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
  .form-card { background: var(--cyt-navy); border: 1px solid var(--border-light); border-radius: 20px; padding: 40px; }
  .form-card h3 { font-family: 'Cormorant Garamond', serif; font-size: 28px; font-weight: 300; color: #fff; margin-bottom: 28px; }
  .form-group { margin-bottom: 14px; }
  .form-group label { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; }
  .form-group input, .form-group select, .form-group textarea { width: 100%; background: rgba(255,255,255,0.04); border: 1px solid var(--border-light); border-radius: 8px; padding: 14px 16px; color: #fff; font-family: 'Montserrat', sans-serif; font-size: 14px; outline: none; transition: all 0.2s; -webkit-appearance: none; }
  .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--cyt-green); background: rgba(29,184,134,0.05); }
  .form-group select option { background: var(--cyt-navy); color: #fff; }
  .form-group textarea { resize: vertical; min-height: 90px; }
  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .form-submit { width: 100%; background: var(--cyt-green); color: #000; border: none; border-radius: 8px; padding: 18px; font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; margin-top: 8px; transition: all 0.2s; box-shadow: 0 0 30px rgba(29,184,134,0.25); }
  .form-submit:hover { background: var(--cyt-green-dark); transform: translateY(-1px); }
  .form-reassurance { text-align: center; font-size: 12px; color: var(--text-muted); margin-top: 14px; }

  /* FOOTER */
  footer { background: var(--cyt-dark); padding: 48px 24px 32px; border-top: 1px solid var(--border-light); }
  .footer-inner { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
  .footer-logo { height: 28px; width: auto; opacity: 0.8; }
  .footer-links { display: flex; gap: 24px; flex-wrap: wrap; }
  .footer-link { font-size: 12px; color: var(--text-muted); text-decoration: none; transition: color 0.2s; }
  .footer-link:hover { color: var(--cyt-green); }
  .footer-bottom { max-width: 1200px; margin: 24px auto 0; padding-top: 24px; border-top: 1px solid var(--border-light); font-size: 12px; color: var(--text-muted); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }

  /* RESPONSIVE */
  @media(max-width: 900px) {
    .problem-grid, .two-col, .form-inner { grid-template-columns: 1fr; gap: 40px; }
    .steps-grid { grid-template-columns: 1fr 1fr; }
    .cover-grid, .trades-grid { grid-template-columns: repeat(2, 1fr); }
    .faq-grid { grid-template-columns: 1fr; }
    .nav-links { display: none; flex-direction: column; position: absolute; top: 68px; left: 0; right: 0; background: rgba(8,15,24,0.97); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); padding: 8px 24px 24px; gap: 2px; border-bottom: 1px solid rgba(29,184,134,0.18); z-index: 99; max-height: calc(100vh - 68px); overflow-y: auto; box-shadow: 0 12px 40px rgba(0,0,0,0.4); }
    .nav-links.open { display: flex !important; }
    .hamburger { display: flex; }
    .topbar-actions { gap: 14px; }
    .nav-cyt-logo { height: 16px; }
    .nav-links.open > * { opacity: 0; transform: translateY(-8px); animation: mobileNavIn 0.3s ease forwards; }
    .nav-links.open > *:nth-child(1) { animation-delay: 0.03s; }
    .nav-links.open > *:nth-child(2) { animation-delay: 0.06s; }
    .nav-links.open > *:nth-child(3) { animation-delay: 0.09s; }
    .nav-links.open > *:nth-child(4) { animation-delay: 0.12s; }
    .nav-links.open > *:nth-child(5) { animation-delay: 0.15s; }
    .nav-links.open > *:nth-child(6) { animation-delay: 0.18s; }
    .nav-links.open a, .nav-links.open .nav-link { display: block; padding: 14px 16px; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; border-radius: 8px; transition: background 0.2s; }
    .nav-links.open a:hover, .nav-links.open .nav-link:hover { background: rgba(29,184,134,0.08); }
    .nav-links.open .btn-nav { display: block; text-align: center; margin-top: 8px; padding: 16px 24px; border-radius: 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; }
    .hero-stats { flex-wrap: wrap; }
    .hero-stat { flex: 1 1 calc(50% - 40px); }
  }
  @media(max-width: 600px) {
    .nav-cyt-logo { height: 14px; }
    .topbar { padding: 0 18px; }
    .steps-grid { grid-template-columns: 1fr; }
    .cover-grid, .trades-grid { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; }
    section { padding: 64px 20px; }
  }
  .hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; z-index: 101; -webkit-tap-highlight-color: transparent; }
  .hamburger span { display: block; width: 24px; height: 2px; background: var(--text-secondary); border-radius: 2px; transition: transform 0.35s cubic-bezier(0.77,0,0.18,1), opacity 0.25s ease; transform-origin: center center; }
  .hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
  .hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
  .hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
  body.mobile-menu-open { overflow: hidden; position: fixed; width: 100%; }
  .mobile-menu-backdrop { display: none; position: fixed; inset: 0; top: 68px; background: rgba(0,0,0,0.5); z-index: 98; opacity: 0; transition: opacity 0.3s ease; }
  .mobile-menu-backdrop.open { display: block; opacity: 1; }
  @keyframes mobileNavIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
  @media(max-width: 900px) { .hamburger { display: flex; } }

  /* ===== TURNKEY CALCULATOR SECTION ===== */
  .vt-calculator { background: var(--cyt-dark); }
  .vt-calculator .vt-section-header { text-align: center; max-width: 720px; margin: 0 auto 48px; }
  .vt-calculator .vt-live-total { padding: 60px 40px; text-align: center; max-width: 1200px; margin: 0 auto; }
  .vt-calculator .vt-live-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cyt-green); margin-bottom: 14px; }
  .vt-calculator .vt-live-number { font-family: 'Cormorant Garamond', serif; font-size: clamp(4rem, 10vw, 7rem); font-weight: 700; color: var(--cyt-green); line-height: 1; margin-bottom: 8px; transition: color 0.3s; }
  .vt-calculator .vt-live-number.gold { color: #c9a84c; }
  .vt-calculator .vt-live-sub { font-size: 0.88rem; color: #7a90a8; margin-bottom: 8px; }
  .vt-calculator .vt-controls-bg { background: var(--cyt-navy-mid); border-top: 1px solid rgba(255,255,255,0.06); border-bottom: 1px solid rgba(255,255,255,0.06); }
  .vt-calculator .vt-controls-inner { max-width: 1200px; margin: 0 auto; padding: 60px 40px; }
  .vt-calculator .vt-controls-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
  .vt-calculator .vt-field { margin-bottom: 24px; }
  .vt-calculator .vt-field label { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #7a90a8; margin-bottom: 8px; }
  .vt-calculator .vt-field input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 3px; background: #2a3a4a; cursor: pointer; outline: none; }
  .vt-calculator .vt-field input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #1db886; border: 2px solid #1db886; box-shadow: 0 0 8px rgba(29,184,134,0.4); cursor: pointer; margin-top: -7px; }
  .vt-calculator .vt-field input[type=range]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #1db886; border: 2px solid #1db886; box-shadow: 0 0 8px rgba(29,184,134,0.4); cursor: pointer; }
  .vt-calculator .vt-field input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; }
  .vt-calculator .vt-field input[type=range]::-moz-range-track { height: 6px; border-radius: 3px; background: #2a3a4a; }
  .vt-calculator .vt-field input[type=range]::-moz-range-progress { height: 6px; border-radius: 3px; background: #1db886; }
  .vt-calculator .vt-range-val { font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; font-weight: 600; color: var(--cyt-green); margin-bottom: 6px; display: block; }
  .vt-calculator .vt-toggle-group { display: flex; gap: 0; }
  .vt-calculator .vt-toggle-btn { flex: 1; padding: 12px 20px; border: 1px solid rgba(255,255,255,0.06); background: var(--cyt-navy); color: #7a90a8; font-family: 'Montserrat', sans-serif; font-size: 0.78rem; font-weight: 600; cursor: pointer; transition: all 0.2s; text-align: center; }
  .vt-calculator .vt-toggle-btn:first-child { border-radius: 6px 0 0 6px; }
  .vt-calculator .vt-toggle-btn:last-child { border-radius: 0 6px 6px 0; }
  .vt-calculator .vt-toggle-btn.active { border-color: var(--cyt-green); color: var(--cyt-green); background: var(--cyt-green-glow); }
  .vt-calculator .vt-tier-group { display: flex; gap: 0; }
  .vt-calculator .vt-tier-btn { flex: 1; min-width: 0; padding: 12px 8px; border: 1px solid rgba(255,255,255,0.06); background: var(--cyt-navy); color: #7a90a8; font-family: 'Montserrat', sans-serif; font-size: 0.7rem; font-weight: 600; cursor: pointer; transition: all 0.2s; text-align: center; letter-spacing: 0.04em; }
  .vt-calculator .vt-tier-btn:first-child { border-radius: 6px 0 0 6px; }
  .vt-calculator .vt-tier-btn:last-child { border-radius: 0 6px 6px 0; }
  .vt-calculator .vt-tier-btn.active { border-color: var(--cyt-green); color: var(--cyt-green); background: var(--cyt-green-glow); }
  .vt-calculator .vt-tier-btn[data-tier="ultimate"].active { border-color: #c9a84c; color: #c9a84c; background: rgba(201,168,76,0.12); }
  .vt-calculator .vt-stepper { display: flex; align-items: center; gap: 12px; }
  .vt-calculator .vt-stepper-btn { width: 40px; height: 40px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.06); background: var(--cyt-navy); color: var(--cyt-green); font-size: 1.2rem; font-weight: 700; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; justify-content: center; }
  .vt-calculator .vt-stepper-btn:hover { border-color: var(--cyt-green); background: var(--cyt-green-glow); }
  .vt-calculator .vt-stepper-val { font-family: 'Cormorant Garamond', serif; font-size: 1.6rem; font-weight: 600; color: var(--cyt-green); min-width: 30px; text-align: center; }
  .vt-calculator .vt-pool-wrap { margin-top: 16px; transition: opacity 0.3s, max-height 0.3s; overflow: hidden; }
  .vt-calculator .vt-pool-wrap.hidden { opacity: 0; max-height: 0; pointer-events: none; margin: 0; }
  .vt-calculator .vt-project-group { display: flex; gap: 12px; }
  .vt-calculator .vt-project-btn { flex: 1; padding: 20px 16px; border: 1px solid rgba(255,255,255,0.06); background: var(--cyt-navy); color: #7a90a8; font-family: 'Montserrat', sans-serif; font-size: 0.82rem; font-weight: 700; cursor: pointer; transition: all 0.2s; text-align: center; border-radius: 8px; }
  .vt-calculator .vt-project-btn:hover { border-color: rgba(255,255,255,0.15); }
  .vt-calculator .vt-project-btn.active { border-color: var(--cyt-green); color: var(--cyt-green); background: var(--cyt-green-glow); }
  .vt-calculator .vt-project-btn-sub { display: block; font-size: 0.65rem; font-weight: 400; color: #7a90a8; margin-top: 4px; letter-spacing: 0; }
  .vt-calculator .vt-project-btn.active .vt-project-btn-sub { color: inherit; opacity: 0.7; }
  .vt-calculator .vt-reno-group { display: flex; gap: 0; margin-top: 16px; }
  .vt-calculator .vt-reno-btn { flex: 1; padding: 14px 10px; border: 1px solid rgba(255,255,255,0.06); background: var(--cyt-navy); color: #7a90a8; font-family: 'Montserrat', sans-serif; font-size: 0.72rem; font-weight: 600; cursor: pointer; transition: all 0.2s; text-align: center; letter-spacing: 0.03em; }
  .vt-calculator .vt-reno-btn:first-child { border-radius: 6px 0 0 6px; }
  .vt-calculator .vt-reno-btn:last-child { border-radius: 0 6px 6px 0; }
  .vt-calculator .vt-reno-btn.active { border-color: var(--cyt-green); color: var(--cyt-green); background: var(--cyt-green-glow); }
  .vt-calculator .vt-reno-wrap { transition: opacity 0.3s, max-height 0.3s; overflow: hidden; }
  .vt-calculator .vt-reno-wrap.hidden { opacity: 0; max-height: 0; pointer-events: none; margin: 0; }
  .vt-calculator .vt-reno-desc { font-size: 0.72rem; color: #7a90a8; line-height: 1.6; margin-top: 12px; font-style: italic; border-left: 3px solid rgba(29,184,134,0.18); padding-left: 14px; }
  .vt-calculator .vt-reno-disclaimer { max-width: 1200px; margin: 0 auto; padding: 20px 40px 20px; }
  .vt-calculator .vt-reno-disclaimer-inner { display: flex; align-items: flex-start; gap: 12px; padding: 20px 24px; background: rgba(201,168,76,0.08); border: 1px solid rgba(201,168,76,0.25); border-radius: 10px; }
  .vt-calculator .vt-reno-disclaimer-inner .vt-warn-icon { font-size: 1.2rem; flex-shrink: 0; line-height: 1.4; }
  .vt-calculator .vt-reno-disclaimer-inner p { font-size: 0.72rem; color: #c9a84c; line-height: 1.7; }
  .vt-calculator .vt-reno-disclaimer.hidden { display: none; }
  .vt-calculator .vt-breakdown-inner { max-width: 1200px; margin: 0 auto; padding: 60px 40px; }
  .vt-calculator .vt-section-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cyt-green); margin-bottom: 14px; }
  .vt-calculator .vt-section-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(2rem, 3.5vw, 2.8rem); color: #fff; margin-bottom: 16px; font-weight: 400; }
  .vt-calculator .vt-table-wrap { overflow-x: auto; margin-top: 20px; }
  .vt-calculator table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
  .vt-calculator thead th { background: var(--cyt-navy-light); color: #e2ecf5; padding: 14px 18px; text-align: left; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; border-bottom: 2px solid rgba(29,184,134,0.18); }
  .vt-calculator thead th:last-child { text-align: right; }
  .vt-calculator tbody tr { border-bottom: 1px solid rgba(255,255,255,0.06); transition: background 0.15s; }
  .vt-calculator tbody tr:hover { background: rgba(255,255,255,0.02); }
  .vt-calculator tbody td { padding: 14px 18px; color: #7a90a8; vertical-align: top; }
  .vt-calculator tbody td:first-child { color: #e2ecf5; font-weight: 600; }
  .vt-calculator tbody td:last-child { text-align: right; font-family: 'Cormorant Garamond', serif; font-size: 1.05rem; font-weight: 600; color: var(--cyt-green); }
  .vt-calculator tbody tr.vt-subtotal-row td { border-top: 1px solid rgba(29,184,134,0.18); font-weight: 700; }
  .vt-calculator tbody tr.vt-subtotal-row td:first-child { color: var(--cyt-green); }
  .vt-calculator tfoot td { padding: 18px; font-weight: 700; border-top: 2px solid rgba(29,184,134,0.18); }
  .vt-calculator tfoot td:last-child { font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; font-weight: 700; color: var(--cyt-green); text-align: right; }
  .vt-calculator tfoot td:last-child.gold { color: #c9a84c; }
  .vt-calculator .vt-disclaimer { font-size: 0.72rem; color: #7a90a8; text-align: center; max-width: 720px; margin: 0 auto; padding: 20px 40px 48px; line-height: 1.8; }
  .vt-calculator .vt-cta { text-align: center; padding: 50px 40px 20px; max-width: 1200px; margin: 0 auto; }
  .vt-calculator .vt-cta h3 { font-family: 'Cormorant Garamond', serif; font-size: clamp(2rem, 3.5vw, 2.8rem); color: #fff; margin-bottom: 28px; font-weight: 400; }
  .vt-calculator .vt-btn-cta { display: inline-block; padding: 16px 48px; background: #1db886; color: #fff; font-family: 'Montserrat', sans-serif; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; border-radius: 6px; transition: all 0.25s; border: none; cursor: pointer; }
  .vt-calculator .vt-btn-cta:hover { background: #17a374; transform: translateY(-2px); box-shadow: 0 8px 30px rgba(29,184,134,0.3); }
  .vt-calculator .vt-expander-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 1200px; margin: 0 auto; padding: 40px 40px 0; }
  .vt-calculator .vt-expander-card { background: var(--cyt-navy); border: 1px solid var(--border-light); border-radius: 12px; padding: 28px 24px; text-align: center; cursor: pointer; transition: all 0.3s; }
  .vt-calculator .vt-expander-card:hover { border-color: var(--border); background: rgba(29,184,134,0.06); transform: translateY(-3px); }
  .vt-calculator .vt-expander-card.active { border-color: var(--cyt-green); background: var(--cyt-green-glow); }
  .vt-calculator .vt-expander-card h4 { font-family: 'Montserrat', sans-serif; font-size: 0.82rem; font-weight: 700; color: #fff; margin-bottom: 6px; }
  .vt-calculator .vt-expander-card p { font-size: 0.72rem; color: #7a90a8; line-height: 1.5; margin-bottom: 12px; }
  .vt-calculator .vt-expander-btn { background: var(--cyt-green); color: #000; border: none; border-radius: 6px; padding: 8px 20px; font-family: 'Montserrat', sans-serif; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; transition: all 0.2s; }
  .vt-calculator .vt-expander-btn:hover { background: var(--cyt-green-dark); }
  .vt-calculator .vt-expander-panel { max-width: 1200px; margin: 0 auto; padding: 0 40px; max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.4s ease; }
  .vt-calculator .vt-expander-panel.open { max-height: 3000px; padding: 40px; }
  .vt-calculator .vt-ind-controls { background: var(--cyt-navy-mid); border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; padding: 40px; }
  .vt-calculator .vt-ind-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
  .vt-calculator .vt-ind-result { text-align: center; padding: 40px 20px; }
  .vt-calculator .vt-ind-total { font-family: 'Cormorant Garamond', serif; font-size: clamp(2.5rem, 6vw, 4rem); font-weight: 700; color: var(--cyt-green); }
  .vt-calculator .vt-ind-total.gold { color: #c9a84c; }
  .vt-calculator .vt-ind-desc { font-size: 0.82rem; color: #7a90a8; margin-top: 8px; }
  @media(max-width: 900px) {
    .vt-calculator .vt-controls-grid { grid-template-columns: 1fr; gap: 20px; }
    .vt-calculator .vt-live-total { padding: 40px 20px; }
    .vt-calculator .vt-breakdown-inner { padding: 40px 20px; }
    .vt-calculator .vt-controls-inner { padding: 40px 20px; }
    .vt-calculator .vt-expander-grid { grid-template-columns: 1fr 1fr; padding: 20px 20px 0; }
    .vt-calculator .vt-expander-panel { padding-left: 20px; padding-right: 20px; }
    .vt-calculator .vt-ind-grid { grid-template-columns: 1fr; }
  }
  @media(max-width: 600px) {
    .vt-calculator .vt-expander-grid { grid-template-columns: 1fr; }
    .vt-calculator .vt-tier-group { flex-wrap: wrap; }
    .vt-calculator .vt-tier-btn { min-width: 48%; border-radius: 4px !important; margin: 2px; }
    .vt-calculator .vt-cta { padding: 30px 20px 10px; }
    .vt-calculator .vt-disclaimer { padding: 20px 20px 40px; }
  }
  .vt-sticky-total { position: fixed; top: 68px; left: 0; right: 0; z-index: 99; background: rgba(8,15,24,0.95); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(29,184,134,0.2); padding: 12px 24px; display: flex; align-items: center; justify-content: center; gap: 16px; transform: translateY(-100%); transition: transform 0.3s ease; }
  .vt-sticky-total.visible { transform: translateY(0); }
  .vt-sticky-total .vt-sticky-label { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cyt-green); }
  .vt-sticky-total .vt-sticky-number { font-family: 'Cormorant Garamond', serif; font-size: 1.8rem; font-weight: 700; color: var(--cyt-green); line-height: 1; transition: color 0.3s; }
  .vt-sticky-total .vt-sticky-number.gold { color: #c9a84c; }

.scope-chip-link:hover { border-color: var(--cyt-green) !important; background: rgba(29,184,134,0.12) !important; }

/* ============ SPOKE (service page) ============ */
.spoke-hero { padding-top: 132px; padding-bottom: 80px; }
.breadcrumb { font-size: 12px; letter-spacing: 0.04em; color: var(--text-muted); margin-bottom: 28px; }
.breadcrumb a { color: var(--text-secondary); text-decoration: none; transition: color 0.2s; }
.breadcrumb a:hover { color: var(--cyt-green); }
.breadcrumb span { margin: 0 8px; color: var(--text-muted); }
.breadcrumb .breadcrumb-current { color: var(--cyt-green); margin: 0; }
.spoke-h1 { font-family: 'Cormorant Garamond', serif; font-size: clamp(42px, 6vw, 78px); font-weight: 300; line-height: 1.02; color: #fff; margin-bottom: 18px; }
.spoke-h1 em { font-style: italic; color: var(--cyt-green); }
.spoke-sub { font-size: clamp(16px, 2vw, 20px); color: var(--text-secondary); max-width: 720px; line-height: 1.55; margin-bottom: 40px; }
.spoke-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.spoke-hero-ctas { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 28px; }
.spoke-hero-figure { margin: 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--border); box-shadow: 0 30px 80px rgba(0,0,0,0.5); }
.spoke-hero-figure img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* prose */
.prose { max-width: 780px; }
.prose p { font-size: 16px; color: var(--text-secondary); line-height: 1.85; margin-bottom: 20px; }
.prose h2 { font-family: 'Cormorant Garamond', serif; font-size: clamp(28px, 3.2vw, 44px); font-weight: 300; line-height: 1.12; color: #fff; margin-bottom: 22px; }
.prose h2 em { font-style: italic; color: var(--cyt-green); }
.prose ul { list-style: none; margin: 0 0 22px; padding: 0; }
.prose li { font-size: 15px; color: var(--text-secondary); line-height: 1.7; padding-left: 26px; position: relative; margin-bottom: 12px; }
.prose li::before { content: ''; position: absolute; left: 0; top: 11px; width: 12px; height: 1px; background: var(--cyt-green); }
.prose strong { color: #fff; font-weight: 600; }
.cost-bands li::before { top: 13px; }
.cost-bands strong { color: var(--cyt-green); }

.spoke-disclaimer { font-size: 12px; color: var(--text-muted); line-height: 1.6; margin-top: 22px; max-width: 720px; }

/* deliver badges */
.deliver-badges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; max-width: 780px; }
.deliver-badge { background: rgba(255,255,255,0.03); border: 1px solid var(--border-light); border-radius: 12px; padding: 26px 22px; transition: all 0.3s; }
.deliver-badge:hover { border-color: var(--border); background: rgba(29,184,134,0.05); }
.deliver-badge-num { font-family: 'Cormorant Garamond', serif; font-size: 34px; font-weight: 300; color: var(--cyt-green); line-height: 1; margin-bottom: 12px; }
.deliver-badge-label { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }

/* CTA band */
.cta-band { background: linear-gradient(135deg, var(--cyt-navy) 0%, var(--cyt-navy-light) 100%); text-align: center; }
.cta-band-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(34px, 4.5vw, 56px); font-weight: 300; color: #fff; margin-bottom: 16px; }
.cta-band-title em { font-style: italic; color: var(--cyt-green); }
.cta-band-sub { font-size: 16px; color: var(--text-secondary); line-height: 1.7; max-width: 560px; margin: 0 auto 36px; }

/* related services */
.related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 44px; }
.related-card { position: relative; display: block; background: rgba(255,255,255,0.03); border: 1px solid var(--border-light); border-radius: 12px; padding: 28px 24px 48px; text-decoration: none; transition: all 0.3s; }
.related-card:hover { border-color: var(--cyt-green); background: rgba(29,184,134,0.06); transform: translateY(-3px); }
.related-card h3 { font-family: 'Cormorant Garamond', serif; font-size: 24px; font-weight: 400; color: #fff; margin-bottom: 10px; }
.related-card p { font-size: 13px; color: var(--text-muted); line-height: 1.6; }
.related-arrow { position: absolute; bottom: 22px; left: 24px; color: var(--cyt-green); font-size: 18px; }
.related-all { display: inline-block; margin-top: 36px; color: var(--cyt-green); text-decoration: none; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; border-bottom: 1px solid var(--border); padding-bottom: 4px; transition: all 0.2s; }
.related-all:hover { border-color: var(--cyt-green); }

@media (max-width: 900px) {
  .spoke-hero { padding-top: 108px; }
  .spoke-hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .spoke-hero-figure { order: -1; }
  .deliver-badges { grid-template-columns: 1fr; }
  .related-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .related-grid { grid-template-columns: 1fr; }
}

.spoke-figcaption { font-size: 12px; color: var(--text-muted); text-align: center; padding: 12px 16px; letter-spacing: 0.02em; font-style: italic; background: rgba(0,0,0,0.25); }

/* ============ SPOKE CALCULATOR (tiling, gypsum, …) ============ */
.tiling-calc-banner, .calc-banner { margin: 0 0 28px; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); }
.tiling-calc-banner img, .calc-banner img { display: block; width: 100%; height: auto; }
.calc-select { width: 100%; padding: 13px 16px; background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 8px; color: #fff; font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 400; cursor: pointer; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%231db886' d='M6 8L0 0h12z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; transition: border-color 0.2s; }
.calc-select:focus { outline: none; border-color: var(--cyt-green); }
.calc-select option { background: var(--cyt-navy); color: #fff; }
.vt-field-hint { color: var(--text-muted); font-weight: 400; font-size: 11px; text-transform: none; letter-spacing: 0; }
.tile-breakdown, .calc-breakdown { list-style: none; margin: 22px 0 0; padding: 22px 0 0; border-top: 1px solid var(--border-light); }
.tile-breakdown li, .calc-breakdown li { display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; align-items: baseline; font-size: 13px; color: var(--text-secondary); padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
.tile-breakdown li span:first-child, .calc-breakdown li span:first-child { color: #fff; font-weight: 500; }
.tile-breakdown .tile-bd-detail, .calc-breakdown .calc-bd-detail { grid-column: 1; font-size: 11px; color: var(--text-muted); }
.tile-breakdown .tile-bd-val, .calc-breakdown .calc-bd-val { grid-column: 2; grid-row: 1 / span 2; text-align: right; color: var(--cyt-green); font-weight: 500; white-space: nowrap; }

.prose-figure { margin: 32px 0 8px; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); }
.prose-figure img { display: block; width: 100%; height: auto; }
.prose-figure figcaption { font-size: 12px; color: var(--text-muted); text-align: center; padding: 12px 16px; font-style: italic; background: rgba(0,0,0,0.25); }

/* ============================================================
   JOURNAL — editorial layer (estate standard, TNT-DESIGN-SYSTEM.md §11)
   Generated pages only: build_journal.py writes journal/**. Uses the CYT
   tokens above so the Journal is visibly the same site, not a bolt-on blog.
   ============================================================ */
.jr-wrap{max-width:760px;margin:0 auto;padding:0 24px}
.jr-hub,.jr-article{padding:120px 0 96px;background:var(--cyt-navy)}
.jr-crumbs{font-size:.78rem;color:var(--text-muted);margin-bottom:28px;letter-spacing:.02em}
.jr-crumbs a{color:var(--text-secondary);text-decoration:none}
.jr-crumbs a:hover{color:var(--cyt-green)}
.jr-eyebrow{font-family:'Montserrat',sans-serif;font-size:.68rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.jr-hub h1,.jr-article h1{font-family:'Cormorant Garamond',serif;font-weight:400;
  font-size:clamp(2rem,4.6vw,3.1rem);line-height:1.14;color:var(--text-primary);margin:0 0 20px}
.jr-hub h1 em,.jr-article h1 em{font-style:italic;color:var(--cyt-green)}
.jr-summary{color:var(--text-secondary);font-size:1.02rem;line-height:1.85;margin:0 0 22px}
.jr-byline{font-size:.8rem;color:var(--text-muted);margin:0 0 36px;
  padding-bottom:22px;border-bottom:1px solid var(--border-light)}
.jr-byline strong{color:var(--text-secondary);font-weight:600}

/* ⚠️ The draft notice must be impossible to mistake for a finished page — it is the
   visible half of the publication gate. Gold, not green: green reads as approved. */
.jr-draft{background:var(--gold-light);border:1px solid var(--border-gold);
  border-left:3px solid var(--gold);border-radius:8px;padding:16px 20px;margin:0 0 32px;
  font-size:.86rem;line-height:1.7;color:var(--text-secondary)}
.jr-draft strong{color:var(--gold)}

.jr-banner{margin:0 0 40px}
.jr-banner img{width:100%;height:auto;border-radius:12px;display:block;
  border:1px solid var(--border-light)}
.jr-banner figcaption{font-size:.72rem;color:var(--text-muted);margin-top:10px;text-align:right}

.jr-body{color:var(--text-secondary);font-size:1rem;line-height:1.9}
.jr-body h2{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:1.72rem;
  color:var(--text-primary);margin:48px 0 16px;line-height:1.25}
.jr-body h3{font-family:'Montserrat',sans-serif;font-weight:600;font-size:1.02rem;
  color:var(--text-primary);margin:34px 0 12px;letter-spacing:-.01em}
.jr-body p{margin:0 0 20px}
.jr-body ul,.jr-body ol{margin:0 0 22px 22px}
.jr-body li{margin-bottom:9px}
.jr-body a{color:var(--cyt-green);text-decoration:none;border-bottom:1px solid var(--border)}
.jr-body a:hover{border-bottom-color:var(--cyt-green)}
.jr-body b,.jr-body strong{color:var(--text-primary);font-weight:600}
/* ⚠️ Tables scroll inside their own box. A cost table on a 375px phone is the most
   likely thing on this site to force the whole page sideways. */
.jr-table{overflow-x:auto;margin:0 0 26px;-webkit-overflow-scrolling:touch}
.jr-body table{border-collapse:collapse;width:100%;min-width:460px;font-size:.9rem}
.jr-body th{text-align:left;padding:11px 14px;background:var(--cyt-navy-mid);
  color:var(--text-primary);font-family:'Montserrat',sans-serif;font-size:.74rem;
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  border-bottom:1px solid var(--border)}
.jr-body td{padding:11px 14px;border-bottom:1px solid var(--border-light)}

.jr-faq,.jr-sources,.jr-gaps,.jr-related{margin:52px 0 0;padding-top:34px;
  border-top:1px solid var(--border-light)}
.jr-faq h2,.jr-sources h2,.jr-gaps h2,.jr-related h2{font-family:'Cormorant Garamond',serif;
  font-weight:600;font-size:1.5rem;color:var(--text-primary);margin:0 0 20px}
.jr-faq dt{color:var(--text-primary);font-weight:600;font-size:.95rem;margin:22px 0 7px}
.jr-faq dd{margin:0;color:var(--text-secondary);font-size:.94rem;line-height:1.8}
.jr-sources ol,.jr-gaps ul{margin:0 0 0 20px;color:var(--text-secondary);font-size:.86rem;
  line-height:1.75}
.jr-sources li,.jr-gaps li{margin-bottom:11px}
.jr-sources a{color:var(--cyt-green);text-decoration:none}
.jr-related ul{list-style:none;margin:0;padding:0}
.jr-related li{margin-bottom:11px}
.jr-related a{color:var(--cyt-green);text-decoration:none;font-size:.95rem}
.jr-provenance{margin-top:34px;padding:16px 20px;background:rgba(255,255,255,.03);
  border:1px solid var(--border-light);border-radius:8px;font-size:.8rem;
  color:var(--text-muted);line-height:1.75}

.jr-cluster{margin:56px 0 0}
.jr-cluster h2{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:1.6rem;
  color:var(--text-primary);margin:0 0 6px}
.jr-cluster-blurb{color:var(--text-muted);font-size:.86rem;margin:0 0 22px}
.jr-list{list-style:none;margin:0;padding:0}
.jr-list li{margin-bottom:12px}
.jr-list a{display:block;padding:20px 22px;background:var(--cyt-navy-mid);
  border:1px solid var(--border-light);border-radius:10px;text-decoration:none;
  transition:border-color .2s,transform .2s}
.jr-list a:hover{border-color:var(--border);transform:translateY(-2px)}
.jr-list-title{display:block;color:var(--text-primary);font-weight:600;font-size:1rem;
  margin-bottom:6px}
.jr-list-desc{display:block;color:var(--text-secondary);font-size:.88rem;line-height:1.7}
.jr-list-meta{display:block;color:var(--text-muted);font-size:.72rem;margin-top:10px}
.jr-badge{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:100px;
  background:var(--gold-light);border:1px solid var(--border-gold);color:var(--gold);
  font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  vertical-align:middle}
.jr-drafts .jr-list a{opacity:.72}
.jr-empty{background:var(--cyt-navy-mid);border:1px solid var(--border-light);
  border-radius:10px;padding:26px 24px;margin-top:34px;color:var(--text-secondary);
  font-size:.94rem;line-height:1.8}
.jr-empty a{color:var(--cyt-green);text-decoration:none}
.jr-cta{margin:56px 0 0;padding:34px 28px;text-align:center;border-radius:12px;
  background:linear-gradient(135deg,var(--cyt-navy-mid) 0%,var(--cyt-dark) 100%);
  border:1px solid var(--border)}
.jr-cta h3{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:1.5rem;
  color:var(--text-primary);margin:0 0 8px}
.jr-cta p{color:var(--text-secondary);font-size:.9rem;margin:0 0 20px}

@media(max-width:640px){
  .jr-hub,.jr-article{padding:96px 0 72px}
  .jr-wrap{padding:0 18px}
  .jr-body{font-size:.96rem}
}

/* Top Build Awards section — three fact cards. Same visual language as
   .trade-card so it reads as part of the network story, not a bolt-on. */
.awards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.awards-card{background:var(--cyt-navy-mid);border:1px solid var(--border-light);
  border-radius:12px;padding:28px 24px}
.awards-num{font-family:'Cormorant Garamond',serif;font-size:2.1rem;font-weight:600;
  color:var(--cyt-green);line-height:1;margin-bottom:8px}
.awards-label{font-family:'Montserrat',sans-serif;font-size:.7rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-primary);margin-bottom:12px}
.awards-card p{color:var(--text-secondary);font-size:.86rem;line-height:1.75;margin:0}

/* Individual-calculator panel heroes.
   ⚠️ loading="lazy" is load-bearing, not decoration: all four panels are
   collapsed on arrival and the calculator now sits directly under the hero, so
   eagerly fetching four 1400px photos would cost the first screen for images
   nobody has asked to see yet. */
.vt-panel-hero{margin:0 0 28px;border-radius:12px;overflow:hidden;
  border:1px solid var(--border-light);line-height:0}
.vt-panel-hero img{width:100%;height:200px;object-fit:cover;display:block}
@media(max-width:640px){ .vt-panel-hero img{height:150px} }

/* The Shell Form panel carries the before/after comparison slider rather than a
   still. Same .ba-* component as the transformations section — only the wrapper
   spacing differs, so the two never drift apart visually. */
.vt-panel-slider{margin:0 0 28px}
.vt-panel-slider .ba-wrap{box-shadow:none;border-radius:12px}
.vt-panel-slider .slider-caption{margin-top:12px;font-size:12px}

/* A trade card that is a link must LOOK like one — the ten without pages sit
   right beside these, so the difference has to be visible, not just hoverable. */
.trade-card-link{text-decoration:none;position:relative;cursor:pointer;
  border-color:var(--border);transition:transform .2s,border-color .2s,background .2s}
.trade-card-link:hover{transform:translateY(-3px);border-color:var(--cyt-green);
  background:rgba(29,184,134,.06)}
.trade-go{display:block;margin-top:8px;font-size:11px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--cyt-green)}

/* ============================================================
   GENERATED SERVICE PAGES + /services/ hub (build_services.py)
   Deliberately reuses .spoke-hero, .breadcrumb, .cta-band and .container from
   the hand-written spokes, so a generated page and a hand-written one are the
   same site rather than two.
   ============================================================ */
.svc-hero-img{margin:36px 0 0;border-radius:16px;overflow:hidden;line-height:0;
  border:1px solid var(--border-light)}
.svc-hero-img img{width:100%;height:auto;display:block}

/* The stand-in when there is no photograph for a trade. Designed, not empty. */
.svc-hero-panel{margin:36px 0 0;border-radius:16px;min-height:220px;display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:linear-gradient(135deg,var(--cyt-navy-mid) 0%,var(--cyt-dark) 100%);
  border:1px solid var(--border)}
.svc-hero-icon{font-size:56px;line-height:1;filter:saturate(.9)}
.svc-hero-word{font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--text-muted)}

.svc-body{padding:72px 24px 88px;background:var(--cyt-navy)}
.svc-body .container{max-width:820px}
.svc-body p{color:var(--text-secondary);font-size:16px;line-height:1.85;margin:0 0 20px}
.svc-body h2{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:28px;
  color:#fff;margin:48px 0 16px;line-height:1.25}
.svc-list{margin:0 0 24px;padding:0;list-style:none}
.svc-list li{position:relative;padding-left:26px;margin-bottom:11px;
  color:var(--text-secondary);font-size:15px;line-height:1.75}
.svc-list li::before{content:"\2713";position:absolute;left:0;top:0;
  color:var(--cyt-green);font-weight:700}
.svc-cta-link{color:var(--cyt-green);text-decoration:none;font-weight:600;font-size:15px}
.svc-cta-link:hover{text-decoration:underline}
.svc-faq dt{color:#fff;font-weight:600;font-size:15px;margin:22px 0 7px}
.svc-faq dd{margin:0;color:var(--text-secondary);font-size:15px;line-height:1.8}
.svc-related{list-style:none;margin:0;padding:0}
.svc-related li{margin-bottom:12px}
.svc-related a{display:block;padding:18px 20px;background:var(--cyt-navy-mid);
  border:1px solid var(--border-light);border-radius:10px;text-decoration:none;
  transition:border-color .2s,transform .2s}
.svc-related a:hover{border-color:var(--cyt-green);transform:translateY(-2px)}
.svc-related strong{display:block;color:#fff;font-size:15px;margin-bottom:4px}
.svc-related span{display:block;color:var(--text-secondary);font-size:13.5px;
  line-height:1.65}
.svc-hub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:12px}
.svc-hub-grid li{margin:0}
.svc-back{margin-top:44px;padding-top:24px;border-top:1px solid var(--border-light)}
.svc-back a{color:var(--cyt-green);text-decoration:none;font-size:14px}
@media(max-width:640px){
  .svc-body{padding:56px 20px 64px}
  .svc-body h2{font-size:24px;margin-top:38px}
}

/* Links inside the "what we cover" tiles. The tiles themselves stay divs: two of
   the six cover two services each, so a whole-card link would have to guess. */
.cover-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.cover-links a{font-size:12px;font-weight:600;color:var(--cyt-green);text-decoration:none;
  background:rgba(29,184,134,.08);border:1px solid var(--border);border-radius:100px;
  padding:7px 14px;transition:background .2s,border-color .2s}
.cover-links a:hover{background:rgba(29,184,134,.16);border-color:var(--cyt-green)}

/* Top Build Awards — badge, heading and pull quote. The badge is CheckYourTraders'
   own published copy (see the comment in index.html), not lifted from the awards site. */
.awards-head{display:flex;align-items:center;gap:24px;margin-bottom:28px;flex-wrap:wrap}
.awards-badge{width:76px;height:76px;flex-shrink:0;border-radius:14px;
  background:#fff;padding:6px;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.awards-quote{margin:0 0 40px;padding:22px 26px;border-left:3px solid var(--cyt-green);
  background:rgba(255,255,255,.03);border-radius:0 10px 10px 0;
  color:var(--text-secondary);font-size:1rem;line-height:1.85;font-style:italic}
.awards-quote cite{display:block;margin-top:14px;font-style:normal;font-size:.8rem;
  font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--cyt-green)}
@media(max-width:640px){ .awards-badge{width:60px;height:60px} .awards-head{gap:16px} }

/* ============================================================
   PWA CONTROLS — home, back, install (js/pwa.js)
   ⚠️ Installed, the site runs standalone: no address bar, no browser back arrow.
   Every route out of a page has to be in the page. Green throughout, matching
   the CYT livery — the estate pattern is orange on the T&T properties and green
   here (Neil, 2026-09-01).
   ============================================================ */
.fab-home,.fab-back{position:fixed;bottom:18px;z-index:900;width:48px;height:48px;
  border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:var(--cyt-green);color:#fff;text-decoration:none;border:none;cursor:pointer;
  box-shadow:0 12px 30px -8px rgba(29,184,134,.65);
  transition:transform .15s ease,background .2s}
.fab-home{left:18px}
/* ⚠️ Back sits NEXT TO home, not opposite it. Two controls that do the same kind of
   thing belong together and within one thumb's reach; the far corner is where a
   right-handed user's thumb does not go. */
.fab-back{left:76px}
.fab-home:hover,.fab-back:hover{background:var(--cyt-green-dark);transform:translateY(-2px);color:#fff}
.fab-home svg,.fab-back svg{width:21px;height:21px}
@media(max-width:640px){
  .fab-home,.fab-back{bottom:12px;width:44px;height:44px}
  .fab-home{left:12px} .fab-back{left:64px}
  .fab-home svg,.fab-back svg{width:19px;height:19px}
}

/* The install pill, in the hero next to the survey button. */
.pill-app{display:inline-flex;align-items:center;gap:9px;background:var(--cyt-green);
  color:#fff;border:none;border-radius:999px;padding:13px 22px;font-family:inherit;
  font-size:14px;font-weight:600;letter-spacing:.02em;cursor:pointer;text-decoration:none;
  box-shadow:0 12px 30px -8px rgba(29,184,134,.6);transition:transform .15s ease,background .2s}
.pill-app:hover{background:var(--cyt-green-dark);transform:translateY(-2px);color:#fff}
.pill-app svg{width:17px;height:17px}

/* Install instructions sheet — shown only where the browser gives us no real prompt. */
.appsheet{position:fixed;inset:0;z-index:1000;background:rgba(8,15,24,.78);
  display:none;align-items:center;justify-content:center;padding:18px}
.appsheet.on{display:flex}
.appsheet-in{background:var(--cyt-navy-mid);border:1px solid var(--border);
  border-radius:16px;max-width:440px;width:100%;padding:24px;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.7)}
.appsheet h3{font-family:'Cormorant Garamond',serif;font-size:22px;color:#fff;margin:0 0 6px}
.appsheet p{font-size:14px;color:var(--text-muted);margin:0 0 16px}
.appsheet ol{font-size:14.5px;color:var(--text-secondary);padding-left:20px;margin:0;
  line-height:1.85}
.appsheet ol b{color:#fff}
.appsheet .close{margin-top:18px;width:100%;padding:12px;border-radius:10px;border:none;
  background:var(--cyt-green);color:#fff;font-family:inherit;font-size:14.5px;
  font-weight:600;cursor:pointer}

/* Whole "what we cover" tile is clickable, and so is each green pill inside it.
   ⚠️ TWO TILES COVER TWO SERVICES ("Kitchen & Bathroom", "Interior Design &
   Finishing"), so the card cannot simply BE a link — it would have to guess which
   half you wanted. Instead the FIRST pill stretches an invisible overlay across the
   whole card, and every pill sits above that overlay on its own z-index. Press the
   card anywhere and you get the primary service; press a specific pill and you get
   that one. No markup change, so nothing to keep in sync. */
.cover-card{position:relative;transition:border-color .2s,transform .2s,background .2s}
.cover-card:hover{border-color:var(--cyt-green);transform:translateY(-3px);
  background:rgba(29,184,134,.04)}
/* ⚠️ THE FIRST PILL MUST NOT BE POSITIONED. An absolutely-positioned ::after resolves
   against the nearest POSITIONED ancestor, so giving every pill position:relative — as
   the first version of this did — made the overlay stretch to the 120px pill instead of
   the card, and nothing outside the pill was clickable at all. The first pill stays
   static so its ::after resolves against .cover-card.
   ⚠️ And no border-radius:inherit on the overlay: it would inherit the pill's 100px
   radius and leave the card's corners dead. */
.cover-links a:first-child::after{content:"";position:absolute;inset:0;z-index:1}
/* Only the SECONDARY pills are lifted above the overlay. The first one does not need
   lifting — clicking it lands on its own overlay, which is the same link. */
.cover-links a:not(:first-child){position:relative;z-index:2}
/* ⚠️ The overlay swallows pointer events across the card, so the card itself must
   show a pointer cursor or it looks inert while behaving as a link. */
.cover-card{cursor:pointer}

/* ============================================================
   AI BUDGET ASSISTANT
   ============================================================ */
.ax-panel{background:var(--cyt-navy-mid);border:1px solid var(--border);border-radius:16px;
  padding:22px;max-width:820px}
.ax-log{max-height:340px;overflow-y:auto;display:flex;flex-direction:column;gap:12px;
  margin-bottom:16px;padding-right:4px}
.ax-msg{padding:12px 16px;border-radius:12px;font-size:15px;line-height:1.7;max-width:88%;
  white-space:pre-wrap}
.ax-ai{background:rgba(255,255,255,.04);border:1px solid var(--border-light);
  color:var(--text-secondary);align-self:flex-start;border-bottom-left-radius:4px}
.ax-you{background:rgba(29,184,134,.12);border:1px solid var(--border);color:#fff;
  align-self:flex-end;border-bottom-right-radius:4px}
.ax-err{color:var(--gold);border-color:var(--border-gold)}
/* ⚠️ A visible waiting state matters more here than anywhere else on the site: the
   model takes a second or two to start, and silence reads as a broken button. */
.ax-thinking::after{content:"…";animation:axpulse 1.2s ease-in-out infinite}
@keyframes axpulse{0%,100%{opacity:.35}50%{opacity:1}}
.ax-form{display:flex;gap:10px}
.ax-form input{flex:1;background:var(--cyt-dark);border:1px solid var(--border-light);
  border-radius:100px;padding:13px 20px;color:#fff;font-family:inherit;font-size:15px}
.ax-form input:focus{outline:none;border-color:var(--cyt-green)}
.ax-form button{white-space:nowrap}
.ax-form button:disabled{opacity:.5;cursor:default}
.ax-disclaimer{margin:14px 0 0;font-size:12.5px;color:var(--text-muted);line-height:1.7}
.ax-quote{margin-top:4px;background:var(--cyt-dark);border:1px solid var(--border);
  border-radius:12px;padding:20px}
.ax-quote-head{font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--cyt-green);margin-bottom:14px}
.ax-quote table{width:100%;border-collapse:collapse;font-size:14px}
.ax-quote td{padding:8px 0;border-bottom:1px solid var(--border-light);
  color:var(--text-secondary)}
.ax-quote .ax-detail{color:var(--text-muted);font-size:13px}
.ax-quote .ax-amt{text-align:right;color:#fff;white-space:nowrap}
.ax-quote .ax-total td{border-bottom:none;padding-top:14px;color:#fff;font-weight:600}
.ax-quote .ax-total .ax-amt{font-family:'Cormorant Garamond',serif;font-size:26px;
  color:var(--cyt-green)}
.ax-note{font-size:12.5px;color:var(--text-muted);line-height:1.7;margin:14px 0 16px}
.ax-cta{color:var(--cyt-green);text-decoration:none;font-weight:600;font-size:14px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:640px){ .ax-panel{padding:16px} .ax-msg{max-width:94%;font-size:14.5px} }

/* ---- Ask AI: the sparkle button, and the entry point above the planner ---- */
.ax-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.ax-spark { width: 15px; height: 15px; flex-shrink: 0; }

.ax-invite { background: linear-gradient(135deg, var(--cyt-navy) 0%, var(--cyt-navy-mid) 100%);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 56px 24px; }
.ax-invite-in { display: grid; grid-template-columns: 1fr minmax(320px, 46%); gap: 40px;
  align-items: center; }
.ax-invite-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: 11px;
  font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cyt-green);
  margin-bottom: 14px; }
.ax-invite-h { font-family: 'Cormorant Garamond', serif; font-weight: 300; line-height: 1.1;
  font-size: clamp(28px, 3.4vw, 42px); color: #fff; margin-bottom: 12px; }
.ax-invite-h em { font-style: italic; color: var(--cyt-green); }
.ax-invite-p { color: var(--text-secondary); font-size: 0.92rem; line-height: 1.8; max-width: 44ch; }
.ax-invite-form { display: flex; gap: 12px; }
.ax-invite-form input { flex: 1; min-width: 0; background: rgba(8,15,24,0.72);
  border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; color: #fff;
  font-family: 'Montserrat', sans-serif; font-size: 14px; }
.ax-invite-form input::placeholder { color: var(--text-muted); }
.ax-invite-form input:focus { outline: none; border-color: var(--cyt-green);
  box-shadow: 0 0 0 3px var(--cyt-green-glow); }
.ax-invite-form .btn-primary { padding: 16px 24px; white-space: nowrap; }

/* ⚠️ Stack BEFORE the two columns get too narrow to read. At 900px the heading was
   already wrapping every two or three words against a squeezed input. */
@media (max-width: 900px) {
  .ax-invite-in { grid-template-columns: 1fr; gap: 26px; }
  .ax-invite { padding: 44px 24px; }
}
@media (max-width: 560px) {
  .ax-invite-form { flex-direction: column; }
  .ax-invite-form .btn-primary { width: 100%; }
}

/* ---- Ask AI attachments ---- */
.ax-clip {
  flex-shrink: 0; width: 44px; height: 52px; display: grid; place-items: center;
  background: none; border: 1px solid var(--border); border-radius: 10px;
  color: var(--text-secondary); cursor: pointer; transition: all 0.2s;
}
.ax-clip:hover { color: var(--cyt-green); border-color: var(--cyt-green); background: var(--cyt-green-glow); }
.ax-clip svg { width: 19px; height: 19px; }
.ax-files { display: none; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.ax-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--cyt-green-glow); border: 1px solid var(--border);
  border-radius: 100px; padding: 6px 8px 6px 14px; font-size: 12px; color: #fff;
  max-width: 100%;
}
.ax-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 190px; }
.ax-chip-size { color: var(--text-muted); font-size: 11px; flex-shrink: 0; }
.ax-chip-x {
  background: none; border: 0; color: var(--text-secondary); cursor: pointer;
  font-size: 17px; line-height: 1; padding: 0 4px; flex-shrink: 0;
}
.ax-chip-x:hover { color: #fff; }
/* An error chip is a message, not an attachment — no remove button, and it says so. */
.ax-chip-err {
  background: rgba(201,168,76,0.12); border-color: var(--border-gold);
  color: var(--gold); padding: 6px 14px; white-space: normal;
}
.ax-msg.ax-attached { opacity: 0.75; font-size: 13px; }
@media (max-width: 560px) {
  .ax-clip { height: 46px; width: 40px; }
  .ax-chip-name { max-width: 130px; }
}

/* ---- Privacy notice ---- */
.prose { max-width: 760px; }
.prose h2 { font-family: 'Cormorant Garamond', serif; font-size: 30px; font-weight: 400;
  color: #fff; margin: 48px 0 14px; }
.prose h3 { font-size: 15px; font-weight: 700; color: var(--cyt-green); margin: 30px 0 10px;
  letter-spacing: 0.01em; }
.prose p, .prose li { color: var(--text-secondary); font-size: 15px; line-height: 1.85; }
.prose p { margin-bottom: 14px; }
.prose ul { margin: 0 0 18px 20px; }
.prose li { margin-bottom: 9px; }
.prose strong { color: #fff; font-weight: 600; }
.pv-flag { background: rgba(201,168,76,0.10); border: 1px solid var(--border-gold);
  border-left: 3px solid var(--gold); border-radius: 8px; padding: 16px 20px; margin-bottom: 8px;
  color: var(--text-secondary); font-size: 14px; line-height: 1.7; }
.pv-flag strong { color: var(--gold); }
.scroll-x { overflow-x: auto; margin: 0 0 16px; }
.pv-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 480px; }
.pv-table th, .pv-table td { text-align: left; padding: 11px 14px;
  border-bottom: 1px solid var(--border-light); color: var(--text-secondary); vertical-align: top; }
.pv-table thead th { color: var(--text-muted); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; font-weight: 700; }
.pv-note { font-size: 13.5px; color: var(--text-muted); border-left: 2px solid var(--border);
  padding-left: 16px; }
.pv-date { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--border-light);
  font-size: 13px; color: var(--text-muted); }

/* ---- Ask AI entry points (built by js/assistant.js) ---- */
.ax-entry-form { display: flex; gap: 10px; align-items: stretch; }
.ax-entry-form input[type=text] {
  flex: 1; min-width: 0; background: rgba(8,15,24,0.72); border: 1px solid var(--border);
  border-radius: 10px; padding: 15px 16px; color: #fff;
  font-family: 'Montserrat', sans-serif; font-size: 14px;
}
.ax-entry-form input[type=text]::placeholder { color: var(--text-muted); }
.ax-entry-form input[type=text]:focus { outline: none; border-color: var(--cyt-green);
  box-shadow: 0 0 0 3px var(--cyt-green-glow); }
.ax-entry-form .btn-primary { padding: 15px 22px; white-space: nowrap; }
.ax-entry-form .ax-clip { height: auto; }
.ax-panel-entry { margin: 28px 0 4px; padding-top: 24px; border-top: 1px solid var(--border-light); }
.ax-panel-entry-label { font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--cyt-green); margin-bottom: 12px; }
@media (max-width: 560px) {
  .ax-entry-form { flex-wrap: wrap; }
  .ax-entry-form input[type=text] { flex: 1 1 100%; order: -1; }
  .ax-entry-form .btn-primary { flex: 1; }
}

/* ⚠️ THE ENTRY HOST IS A STACK, NOT A ROW. js/assistant.js puts two children in it —
   the attachment chips and the form — so the old `.ax-invite-form { display:flex }`
   left them side by side as shrink-to-fit flex items: a 552px column containing a
   374px form, and an input squeezed to 191px that truncated its own placeholder.
   The host stacks; the FORM is the row. (2026-09-03) */
[data-ax-entry] { display: block; width: 100%; }
.ax-entry-form { width: 100%; }
/* Give the input a floor so the two buttons can never squeeze it to a stub again. */
.ax-entry-form input[type=text] { min-width: 200px; }