:root{
    --black: #000000;
    --near-black: #0A0C0A;
    --white: #FFFFFF;
    --gray-bg: #F5F5F7;
    --border: #D8DBD6;
    --border-dark: rgba(255,255,255,0.14);
    --ink: #1D1D1F;
    --text: #3A3D3A;
    --text-muted: #6E716C;
    --text-dim: #86888C;
    --green: #2E7D46;
    --green-hover: #256538;
    --green-tint: #E7F2E9;
    --nav-h: 64px;
    --maxw: 1180px;
    --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  }

  *{ box-sizing: border-box; }
  html{ scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 20px); }
  body{
    margin:0; background: var(--white); color: var(--text);
    font-family: var(--font); font-size: 17px; line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    overflow-x: hidden;
  }
  img{ max-width:100%; display:block; }
  a{ color: inherit; text-decoration: none; }
  button{ font-family: inherit; }
  h1,h2,h3,h4{
    font-family: var(--font); font-weight: 700; letter-spacing: -0.015em;
    line-height: 1.08; margin: 0; color: var(--ink);
  }

  .wrap{ max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }
  @media (max-width: 640px){ .wrap{ padding: 0 20px; } }
  :focus-visible{ outline: 2px solid var(--green); outline-offset: 3px; }

  .eyebrow{
    font-size: 13px; font-weight: 600; letter-spacing: 0.01em;
    color: var(--green); margin-bottom: 8px; display:block;
  }
  .icon{ stroke: var(--green); fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
  .icon-on-dark{ stroke: var(--white); }

  /* ---------- TOP BAR ---------- */
  /* top bar removed — brand slogan now lives on the logo itself, not duplicated in text */

  /* ---------- NAV (transparent over hero, dark frosted glass on scroll — keeps true logo colours) ---------- */
  header.site-nav{
    position: fixed; top: 0; left:0; right:0; z-index: 200;
    height: var(--nav-h);
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
  }
  header.site-nav.scrolled{
    background: rgba(10,12,10,0.72);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(255,255,255,0.12);
  }
  .nav-inner{
    max-width: var(--maxw); margin: 0 auto; padding: 0 22px; height: 100%;
    display:flex; align-items:center; justify-content: space-between;
  }
  .brand-text{
    display:inline-flex; align-items:baseline; gap:8px; color:var(--white);
    font-weight:700; letter-spacing:-0.02em; line-height:1; white-space:nowrap;
  }
  .brand-mdpc{ font-size:20px; letter-spacing:0.02em; }
  .brand-systems{ font-size:12px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; opacity:.9; }
  .brand-accent{ color:#64C83C; }

  nav.primary-links{ display:flex; align-items:center; gap: 28px; }
  nav.primary-links a{
    font-size: 13px; font-weight: 400; color: rgba(255,255,255,0.92);
    transition: opacity .2s ease; opacity:0.9;
  }
  nav.primary-links a:hover{ opacity:1; }
  nav.primary-links a.active{ font-weight: 600; }

  .menu-toggle{
    display:none; background:none; border:none; color: var(--white);
    width: 40px; height: 40px; align-items:center; justify-content:center; cursor:pointer;
  }
  @media (max-width: 860px){ nav.primary-links{ display:none; } .menu-toggle{ display:flex; } }
  .mobile-panel{
    display:none; position: fixed; inset: 0; top: var(--nav-h);
    background: rgba(8,10,8,0.97); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    z-index: 199; padding: 10px 22px 40px; overflow-y:auto;
  }
  .mobile-panel.open{ display:block; }
  .mobile-panel a{
    display:block; padding: 17px 2px; font-size: 20px; font-weight:600;
    border-bottom: 1px solid rgba(255,255,255,0.12); color: var(--white);
  }
  .mobile-panel .cta{
    display:block; margin-top: 20px; text-align:center; background: var(--green); color:#fff;
    padding: 14px; border-radius: 980px; font-weight:600;
  }

  /* ---------- BUTTONS (Apple pill style) ---------- */
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    padding: 12px 22px; border-radius: 980px;
    font-size: 15px; font-weight: 500;
    cursor:pointer; border: 1px solid transparent;
    transition: background .2s ease, border-color .2s ease, color .2s ease, opacity .2s ease;
    white-space: nowrap;
  }
  .btn-primary{ background: var(--green); color: var(--white); }
  .btn-primary:hover{ background: var(--green-hover); }
  .btn-primary-onwhite{ background: var(--ink); color: var(--white); }
  .btn-primary-onwhite:hover{ opacity:0.85; }
  .btn-block{ width:100%; }
  .link-chevron{
    display:inline-flex; align-items:center; gap:5px;
    font-size: 15px; font-weight: 500; color: var(--green);
  }
  .link-chevron svg{ width:14px; height:14px; transition: transform .2s ease; }
  .link-chevron:hover svg{ transform: translateX(3px); }
  .link-chevron.on-dark{ color: var(--white); }

  /* ---------- SECTION SHELLS ---------- */
  section{ padding: 100px 0; }
  @media (max-width: 640px){ section{ padding: 64px 0; } }
  .section-black{ background: var(--black); color: var(--white); }
  .section-black h2, .section-black h3{ color: var(--white); }
  .section-gray{ background: var(--gray-bg); }

  .center-head{ max-width: 720px; margin: 0 auto 20px; text-align:center; }
  .center-head h2{ font-size: clamp(2rem, 4.4vw, 3rem); }
  .center-head p{ margin-top: 20px; color: var(--text-muted); font-size: 19px; line-height: 1.6; }
  .section-black .center-head p{ color: #A1A1A6; }
  .section-subtitle{ text-align:center; margin-bottom: 56px; }
  .section-subtitle h2{ margin-top: 6px; font-size: clamp(2rem, 4.2vw, 2.8rem); }

  .fade{
    opacity:0; transform: translateY(36px);
    transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
    will-change: opacity, transform;
  }
  .fade.in{ opacity:1; transform:none; }
  @media (prefers-reduced-motion: reduce){ .fade{ opacity:1; transform:none; transition:none; } }

  .solutions-grid .solution-item:nth-child(1){ transition-delay: .00s; }
  .solutions-grid .solution-item:nth-child(2){ transition-delay: .05s; }
  .solutions-grid .solution-item:nth-child(3){ transition-delay: .10s; }
  .solutions-grid .solution-item:nth-child(4){ transition-delay: .15s; }
  .solutions-grid .solution-item:nth-child(5){ transition-delay: .20s; }
  .solutions-grid .solution-item:nth-child(6){ transition-delay: .25s; }
  .solutions-grid .solution-item:nth-child(7){ transition-delay: .30s; }
  .solutions-grid .solution-item:nth-child(8){ transition-delay: .35s; }
  .why-list .why-row:nth-child(1){ transition-delay: .00s; }
  .why-list .why-row:nth-child(2){ transition-delay: .06s; }
  .why-list .why-row:nth-child(3){ transition-delay: .12s; }
  .why-list .why-row:nth-child(4){ transition-delay: .18s; }
  .why-list .why-row:nth-child(5){ transition-delay: .24s; }
  .why-list .why-row:nth-child(6){ transition-delay: .30s; }
  .stats-row .stat:nth-child(1){ transition-delay: 0s; }
  .stats-row .stat:nth-child(2){ transition-delay: .12s; }
  .timeline .timeline-item:nth-child(1){ transition-delay: 0s; }
  .timeline .timeline-item:nth-child(2){ transition-delay: .1s; }
  .timeline .timeline-item:nth-child(3){ transition-delay: .2s; }
  .timeline .timeline-item:nth-child(4){ transition-delay: .3s; }
  .industries-row .industry-pill:nth-child(n){ transition-delay: calc(var(--i, 0) * 0.05s); }

  /* ---------- HERO (split layout) ---------- */
  .hero-black{
    background: var(--black); color: var(--white);
    margin-top: calc(-1 * var(--nav-h));
    padding-top: calc(var(--nav-h) + 100px);
    padding-bottom: 90px;
    min-height: 88vh;
    display:flex; align-items:center;
    position: relative;
    overflow: hidden;
  }
  @media (max-width: 640px){
    .hero-black{ padding-top: calc(var(--nav-h) + 56px); padding-bottom: 56px; min-height:auto; }
  }

  /* soft ambient glow, echoing the brand's teal/green pairing */
  .hero-glow{
    position:absolute; inset:0; pointer-events:none;
    background:
      radial-gradient(circle at 22% 30%, rgba(30,128,152,0.22), rgba(0,0,0,0) 42%),
      radial-gradient(circle at 78% 60%, rgba(46,125,70,0.26), rgba(0,0,0,0) 45%);
  }

  .hero-split{
    position:relative; z-index:1; width:100%;
    display:grid; grid-template-columns: 1.05fr 0.95fr; gap: 40px; align-items:center;
  }
  @media (max-width: 900px){ .hero-split{ grid-template-columns: 1fr; gap: 56px; text-align:center; } }

  .hero-inner{ max-width: 560px; }
  @media (max-width: 900px){ .hero-inner{ max-width: 640px; margin: 0 auto; } }
  .hero-eyebrow{
    display:inline-block; font-size: 12.5px; font-weight: 600; letter-spacing: 0.14em;
    color: #5FC97A; text-transform: uppercase; margin-bottom: 18px;
  }
  .hero-black h1{
    color: var(--white); font-size: clamp(2.3rem, 5.6vw, 3.9rem); letter-spacing: -0.03em;
  }
  .hero-black .lede{
    margin-top: 16px; font-size: clamp(1.05rem, 2vw, 1.35rem); font-weight: 400;
    color: #A1A1A6; letter-spacing: -0.005em;
  }
  .hero-black .subhead{
    margin-top: 20px; font-size: 16px; color: #86868B; max-width: 52ch;
    line-height: 1.7;
  }
  @media (max-width: 900px){ .hero-black .subhead{ margin-left:auto; margin-right:auto; } }
  .hero-actions{ margin-top: 34px; display:flex; gap: 20px; flex-wrap: wrap; align-items:center; }
  @media (max-width: 900px){ .hero-actions{ justify-content:center; } }
  @media (max-width: 480px){ .hero-actions{ flex-direction:column; align-items:stretch; } .hero-actions .btn{ width:100%; } }

  /* right-side visual: a vertical connection flow, Business -> MDPC -> Customer */
  .hero-visual{ position:relative; max-width: 340px; margin: 0 auto; }
  .hero-visual .ring-bg{
    position:absolute; top:50%; left:50%; width:520px; height:520px; max-width:150vw;
    transform: translate(-50%,-50%); opacity:0.35; pointer-events:none;
    animation: heroRingSpin 110s linear infinite;
  }
  @keyframes heroRingSpin{ from{ transform: translate(-50%,-50%) rotate(0deg); } to{ transform: translate(-50%,-50%) rotate(360deg); } }
  @media (prefers-reduced-motion: reduce){ .hero-visual .ring-bg{ animation:none; } }

  .chip-stack{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; }
  .chip{
    width:100%; background: rgba(255,255,255,0.045); border:1px solid rgba(255,255,255,0.14);
    border-radius: 14px; padding: 16px 20px; display:flex; align-items:center; gap:14px;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  }
  .chip .chip-icon{
    flex:none; width:38px; height:38px; border-radius:50%;
    background: rgba(255,255,255,0.06); display:flex; align-items:center; justify-content:center;
  }
  .chip .chip-ttl{ font-size: 15px; font-weight:600; color: var(--white); }
  .chip .chip-sub{ font-size:12.5px; color:#8E9290; margin-top:2px; }
  .chip-connector{ height:38px; width:2px; position:relative; overflow:hidden; background: rgba(255,255,255,0.08); }
  .chip-connector .pulse{
    position:absolute; left:-3px; top:-24px; width:8px; height:24px; border-radius:4px;
    background: linear-gradient(to bottom, rgba(46,125,70,0), var(--green) 55%, rgba(46,125,70,0));
    animation: pulseFlow 2.6s linear infinite;
  }
  .chip-connector:nth-of-type(2) .pulse{ animation-delay: 1.3s; }
  @keyframes pulseFlow{ from{ top:-24px; } to{ top:38px; } }
  @media (prefers-reduced-motion: reduce){ .chip-connector .pulse{ animation:none; opacity:0.5; } }

  .scroll-cue{
    position:absolute; left:50%; bottom: 30px; transform: translateX(-50%);
    display:flex; flex-direction:column; align-items:center; gap:8px;
    color: #6E716C; font-size: 11.5px; letter-spacing:0.08em; text-transform:uppercase;
    z-index:1; animation: cueFloat 2.2s ease-in-out infinite;
  }
  @keyframes cueFloat{ 0%,100%{ transform: translateX(-50%) translateY(0); } 50%{ transform: translateX(-50%) translateY(7px); } }
  @media (prefers-reduced-motion: reduce){ .scroll-cue{ animation:none; } }
  @media (max-width: 900px){ .scroll-cue{ display:none; } }

  /* ---------- STATS ---------- */
  .stats-row{ display:flex; gap: 0; }
  .stat{ flex:1; text-align:center; padding: 0 24px; }
  @media (max-width: 640px){ .stats-row{ flex-direction:column; gap: 48px; } }
  .stat .num{ font-size: clamp(3rem, 8vw, 5rem); font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
  .stat .label{ margin-top:10px; color: var(--text-muted); font-size: 16px; }

  /* ---------- INTRO (scroll word-reveal) ---------- */
  .intro-scroll{ min-height: 170vh; position: relative; }
  .intro-sticky{ position: sticky; top: 0; min-height: 100vh; display:flex; align-items:center; }
  .intro-sticky .wrap{ width:100%; }
  .reveal-text{
    max-width: 880px; margin: 0 auto; text-align:center;
    font-size: clamp(1.6rem, 4.2vw, 2.8rem); font-weight: 600; letter-spacing:-0.015em;
    line-height: 1.35; color: var(--ink);
  }
  .reveal-text .word{ opacity: 0.2; transition: opacity .15s linear; }
  @media (prefers-reduced-motion: reduce){ .reveal-text .word{ opacity:1 !important; } }
  @media (max-width: 640px){
    .intro-scroll{ min-height: 0; }
    .intro-sticky{ position: static; min-height:0; padding: 10px 0; }
    .reveal-text .word{ opacity:1; }
  }

  /* ---------- SOLUTIONS ---------- */
  .solutions-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 52px 32px; }
  @media (max-width: 980px){ .solutions-grid{ grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 560px){ .solutions-grid{ grid-template-columns: 1fr; } }
  .solution-item{ text-align:center; }
  .solution-item .icon-wrap{ display:flex; justify-content:center; margin-bottom:18px; }
  .solution-item .icon-wrap svg{ width:36px; height:36px; transition: transform .25s ease; }
  .solution-item:hover .icon-wrap svg{ transform: scale(1.08); }
  .solution-item h3{ font-size: 17px; font-weight:600; }
  .solution-item p{ margin-top:8px; color: var(--text-muted); font-size: 14.5px; line-height:1.6; }

  /* ---------- ECOSYSTEM (sticky pinned visual) ---------- */
  .eco-sticky-grid{ display:grid; grid-template-columns: 0.9fr 1.1fr; gap: 40px; align-items:start; }
  @media (max-width: 900px){ .eco-sticky-grid{ grid-template-columns: 1fr; } }
  .eco-visual-wrap{ position: sticky; top: calc(var(--nav-h) + 40px); }
  @media (max-width: 900px){ .eco-visual-wrap{ position: static; margin-bottom: 40px; } }
  .eco-diagram{
    border: 1px solid var(--border); border-radius: 18px; background: var(--white);
    padding: 44px 28px; display:flex; align-items:center; justify-content:center; gap: 14px; flex-wrap:wrap;
  }
  .eco-node{ text-align:center; }
  .eco-node .icon-wrap{ display:flex; justify-content:center; margin-bottom:10px; }
  .eco-node .ttl{ font-weight:600; font-size: 14px; color: var(--ink); }
  .eco-arrow{ color: var(--border); flex:none; }
  @media (max-width: 500px){ .eco-arrow{ transform: rotate(90deg); } }

  .eco-detail-scroll{ display:flex; flex-direction:column; }
  .eco-detail{ min-height: 62vh; display:flex; flex-direction:column; justify-content:center; padding: 30px 0; }
  @media (max-width: 900px){ .eco-detail{ min-height:0; } }
  .eco-detail h3{ font-size: clamp(1.4rem, 3vw, 1.9rem); letter-spacing:-0.01em; }
  .eco-detail p{ margin-top:14px; color: var(--text-muted); font-size:16.5px; line-height:1.7; max-width: 52ch; }

  /* ---------- HOW IT WORKS ---------- */
  .timeline{ max-width: 640px; margin: 0 auto; position:relative; padding-left: 64px; }
  .timeline::before{ content:""; position:absolute; left: 27px; top: 8px; bottom: 8px; width: 2px; background: var(--border); }
  .timeline-item{ position:relative; padding-bottom: 48px; }
  .timeline-item:last-child{ padding-bottom:0; }
  .timeline-num{
    position:absolute; left: -64px; top: -8px; width: 56px;
    font-size: 32px; font-weight: 700; color: var(--green); font-variant-numeric: tabular-nums; letter-spacing:-0.02em;
  }
  .timeline-item h3{ font-size: 18px; }
  .timeline-item p{ margin-top:6px; color: var(--text-muted); font-size:15.5px; line-height:1.6; }

  /* ---------- WHY MDPC ---------- */
  .why-list{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 44px 36px; }
  @media (max-width: 900px){ .why-list{ grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 560px){ .why-list{ grid-template-columns: 1fr; } }
  .why-row{ display:flex; gap:16px; align-items:flex-start; }
  .why-row .icon-wrap{ flex:none; margin-top:2px; }
  .why-row h3{ font-size: 16px; font-weight:600; }
  .why-row p{ margin-top:6px; color: #A1A1A6; font-size:14.5px; line-height:1.6; }

  /* ---------- INDUSTRIES ---------- */
  .industries-row{ display:flex; flex-wrap:wrap; gap: 10px; justify-content:center; }
  .industry-pill{
    padding: 10px 20px; border: 1px solid var(--border); border-radius: 980px;
    font-size: 14px; font-weight:500; color: var(--text);
  }

  /* ---------- STATEMENT BAND ---------- */
  .statement-inner{ text-align:center; max-width: 780px; margin: 0 auto; }
  .statement-inner h2{ color: var(--white); font-size: clamp(2rem, 5vw, 3.2rem); }
  .statement-inner p{ margin-top: 18px; color: #A1A1A6; font-size: 18px; }
  .statement-inner .btn{ margin-top: 32px; }

  /* ---------- GET STARTED (distinct green card) ---------- */
  section#get-started{ background: var(--green); }
  .get-started-grid{ display:grid; grid-template-columns: 0.8fr 1.2fr; gap: 56px; align-items:start; }
  @media (max-width: 900px){ .get-started-grid{ grid-template-columns: 1fr; gap: 32px; } }
  .get-started-copy .eyebrow{ color: #CDEBD4; }
  .get-started-copy h2{ font-size: clamp(1.9rem, 3.6vw, 2.4rem); color: var(--white); }
  .get-started-copy p{ margin-top:14px; color: #E3F3E6; font-size:16.5px; line-height:1.7; }
  .get-started-copy .mini-list{ margin-top: 28px; display:flex; flex-direction:column; gap: 14px; }
  .get-started-copy .mini-list div{ display:flex; gap:10px; align-items:flex-start; font-size: 14.5px; color: #E3F3E6; }
  .get-started-copy .mini-list svg{ stroke: var(--white); }

  .form-card{
    background: var(--white); border-radius: 18px; padding: 42px;
    box-shadow: 0 30px 70px -24px rgba(0,0,0,0.35);
  }
  @media (max-width: 560px){ .form-card{ padding: 26px 20px; border-radius: 14px; } }

  form#getStartedForm .field{ margin-bottom: 22px; }
  form#getStartedForm .field label{ display:block; font-size: 13px; font-weight:600; color: var(--text); margin-bottom: 8px; }
  form#getStartedForm input[type="text"], form#getStartedForm input[type="email"],
  form#getStartedForm input[type="tel"], form#getStartedForm select, form#getStartedForm textarea{
    width:100%; background: var(--gray-bg); border:1px solid var(--border);
    color: var(--ink); padding: 12px 14px; border-radius: 10px;
    font-size: 15.5px; font-family: var(--font); transition: border-color .15s ease;
  }
  form#getStartedForm textarea{ resize: vertical; min-height: 80px; }
  form#getStartedForm input:focus, form#getStartedForm select:focus, form#getStartedForm textarea:focus{
    outline:none; border-color: var(--green);
  }
  .field-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px; }
  @media (max-width: 560px){ .field-row{ grid-template-columns: 1fr; } }

  .consent-row{ display:flex; align-items:flex-start; gap: 12px; margin: 6px 0 26px; }
  .consent-row input{ margin-top: 4px; width:16px; height:16px; accent-color: var(--green); flex: none; }
  .consent-row label{ font-size: 13.5px; color: var(--text-muted); line-height:1.55; }
  .form-note{ margin-top: 16px; font-size: 12.5px; color: var(--text-dim); text-align:center; }

  .form-success{ display:none; text-align:center; padding: 40px 0; }
  .form-success.show{ display:block; }
  .form-success .rule-sm{ width:44px; height:2px; background:var(--green); margin: 0 auto 20px; }
  .form-success h3{ font-size: 20px; }
  .form-success p{ margin-top:10px; color: var(--text-muted); font-size:15px; max-width: 40ch; margin-left:auto; margin-right:auto; }
  .form-error{ display:none; margin:0 0 18px; padding:11px 13px; border:1px solid #E7B7B2; border-radius:10px; background:#FFF2F0; color:#8A1C13; font-size:13.5px; line-height:1.5; }
  .form-error.show{ display:block; }
  .hp-field{ position:absolute!important; left:-10000px!important; width:1px!important; height:1px!important; overflow:hidden!important; }

  /* ---------- FOOTER ---------- */
  footer{ background: var(--near-black); color: #86868B; padding: 56px 0 28px; }
  .footer-top{
    display:flex; justify-content:space-between; align-items:flex-start; gap: 40px; flex-wrap:wrap;
    padding-bottom: 34px; border-bottom: 1px solid var(--border-dark);
  }
  .footer-wordmark{ min-width:220px; padding-top:2px; }
  .footer-brand-name{ color:var(--white); font-size:24px; font-weight:750; letter-spacing:.015em; line-height:1.1; }
  .footer-brand-name span:last-child{ font-size:16px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; margin-left:4px; color:#D6D8D5; }
  .footer-brand-slogan{ margin-top:10px; color:#A1A1A6; font-size:13px; letter-spacing:.04em; }
  .footer-brand-slogan strong{ color:#64C83C; font-weight:600; }
  .footer-links{ display:flex; gap: 52px; flex-wrap:wrap; }
  .footer-col h4{ font-size: 12px; font-weight:600; color: #6E716C; margin-bottom: 14px; }
  .footer-col a{ display:block; color: #A1A1A6; font-size:14px; margin-bottom:10px; }
  .footer-col a:hover{ color: var(--white); }
  .footer-bottom{
    display:flex; justify-content:space-between; align-items:center; gap: 16px; flex-wrap:wrap;
    padding-top: 22px; font-size: 12.5px; color: #6E716C;
  }

  ::selection{ background: var(--green-tint); color: var(--green); }


/* Production accessibility and legal UI */
.skip-link{position:fixed;left:16px;top:10px;z-index:1000;transform:translateY(-150%);background:#fff;color:#111;padding:10px 14px;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.2);font-size:14px;font-weight:700}.skip-link:focus{transform:none}
.inline-legal{color:var(--green);text-decoration:underline;text-underline-offset:2px}
body.dialog-open{overflow:hidden}
.legal-dialog{width:min(760px,calc(100% - 28px));max-height:min(86vh,860px);border:0;border-radius:20px;padding:0;box-shadow:0 28px 90px rgba(0,0,0,.34);background:#fff;color:var(--text)}
.legal-dialog::backdrop{background:rgba(0,0,0,.65);backdrop-filter:blur(3px)}
.legal-dialog-shell{display:flex;flex-direction:column;max-height:inherit}
.legal-dialog-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;padding:24px 26px 18px;border-bottom:1px solid var(--border)}
.legal-dialog-head h2{font-size:clamp(24px,4vw,34px)}
.legal-close{border:1px solid var(--border);background:#fff;color:#222;width:40px;height:40px;border-radius:50%;font-size:26px;line-height:1;cursor:pointer;flex:none}
.legal-dialog-body{padding:22px 26px;overflow:auto;overscroll-behavior:contain}
.legal-dialog-body h3{font-size:16px;margin:24px 0 8px}.legal-dialog-body h3:first-of-type{margin-top:10px}.legal-dialog-body p{font-size:14.5px;line-height:1.65;margin:0 0 12px}.legal-dialog-body a{color:var(--green);text-decoration:underline}.legal-updated{color:var(--text-muted);font-size:13px!important}
.legal-dialog-actions{display:flex;justify-content:flex-end;gap:10px;padding:16px 26px 22px;border-top:1px solid var(--border);background:#fff}.btn-secondary{border-color:var(--border);background:#fff;color:var(--ink)}
@media (max-width:600px){.legal-dialog{width:calc(100% - 18px);max-height:90vh;border-radius:16px}.legal-dialog-head,.legal-dialog-body{padding-left:18px;padding-right:18px}.legal-dialog-actions{padding:14px 18px 18px;flex-direction:column-reverse}.legal-dialog-actions .btn{width:100%}}