/* ============================================================================
   CapExSuite marketing design system
   Implements the Institutional Platform direction, V2 Creatify brief.

   NOTE ON TOKEN DIVERGENCE, deliberate and approved 8/10/26:
   these values are the BRIEF's tokens, which are not identical to the live
   --capex-* application token layer in public/index.html (app forest is
   #0A3124, this is #0B4A38). The marketing surfaces intentionally run their
   own institutional system. Do not "fix" one to match the other without
   Eric's say so.

   This file is the component layer. The repo serves static HTML with no
   framework or build step, so the brief's component inventory is expressed
   as shared tokens plus repeated markup patterns rather than JS components.
   Section pattern -> brief component:
     .mk-hero        HeroSection        .mk-band        CampaignBand
     .mk-proof       ProductProof       .mk-shot        ScreenshotFrame
     .mk-steps       WorkflowSteps      .mk-conf        ConfidenceCards
     .mk-grid        FeatureGrid        .mk-roles       RoleCards
     .mk-form        DemoForm           .mk-cta         CTASection
     .mk-eyebrow     SectionEyebrow     .mk-faq         FAQBlock
   ========================================================================== */

:root{
  /* brief tokens, verbatim */
  --capex-forest:#0B4A38;
  --capex-deep-green:#073629;
  --capex-moss:#8FC84B;
  --capex-navy:#0A2436;
  --capex-ink:#16211D;
  --capex-warm-white:#F7F5EF;
  --capex-sage:#E8F0EA;
  --capex-border:#D9DDD9;
  --capex-amber:#D59A1D;
  --capex-blue:#2E6FC0;
  --capex-red:#C94A42;

  --radius-card:16px;
  --radius-control:10px;
  --shadow-soft:0 12px 36px rgba(7,54,41,.10);
  --shadow-media:0 18px 54px rgba(7,54,41,.16);

  /* derived, needed for text hierarchy the brief implies but does not enumerate */
  --muted:#5C6B63;
  --charcoal:#2C3A33;
  --ivory:#FBFAF6;
  --hairline:rgba(217,221,217,.7);

  --display:'Source Serif 4',Georgia,'Times New Roman',serif;
  --ui:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --maxw:1240px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--capex-ink);font-family:var(--ui);
  font-size:16.5px;line-height:1.62;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--capex-forest)}
.mk-wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}

h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.14;margin:0;
  letter-spacing:-.012em;color:var(--capex-forest)}
h1{font-size:clamp(34px,4.9vw,56px)}
h2{font-size:clamp(26px,3.4vw,40px)}
h3{font-size:21px}
h4{font-size:17px}
p{margin:0 0 17px}
.mk-lede{font-size:clamp(17px,1.85vw,20px);color:var(--charcoal);max-width:64ch}
.mk-eyebrow{font-family:var(--ui);font-size:12px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--capex-forest);margin:0 0 12px}
.mk-sub{color:var(--muted)}
.mk-head{max-width:72ch;margin-bottom:46px}

/* ---------- controls ---------- */
.mk-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--ui);font-size:15.5px;font-weight:700;padding:13px 24px;
  min-height:44px;border-radius:var(--radius-control);text-decoration:none;
  border:1px solid transparent;cursor:pointer;transition:background .16s,border-color .16s,color .16s}
.mk-btn-primary{background:var(--capex-forest);color:#fff}
.mk-btn-primary:hover{background:var(--capex-deep-green)}
.mk-btn-ghost{background:#fff;color:var(--capex-forest);border-color:var(--capex-border)}
.mk-btn-ghost:hover{border-color:var(--capex-forest)}
.mk-btn-light{background:var(--capex-warm-white);color:var(--capex-deep-green)}
.mk-btn-light:hover{background:#fff}
.mk-btn-onDark{background:transparent;color:var(--capex-warm-white);
  border-color:rgba(247,245,239,.36)}
.mk-btn-onDark:hover{border-color:var(--capex-warm-white)}

/* ---------- header ---------- */
.mk-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);
  backdrop-filter:saturate(170%) blur(10px);border-bottom:1px solid var(--hairline)}
.mk-nav{display:flex;align-items:center;gap:30px;height:72px}
.mk-brand{display:flex;align-items:center;gap:11px;margin-right:auto;text-decoration:none;
  font-family:var(--display);font-weight:700;font-size:21px;color:var(--capex-forest)}
.mk-brand .m{width:28px;height:28px;border-radius:8px;background:var(--capex-deep-green);
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.mk-brand .m i{width:10px;height:10px;border-radius:2px;background:var(--capex-moss);display:block}
.mk-nav a.mk-link{font-size:15px;font-weight:500;color:var(--charcoal);text-decoration:none}
.mk-nav a.mk-link:hover,.mk-nav a.mk-link[aria-current=page]{color:var(--capex-forest)}
.mk-nav a.mk-link[aria-current=page]{font-weight:700}
.mk-toggle{display:none;background:#fff;border:1px solid var(--capex-border);
  border-radius:var(--radius-control);padding:9px 14px;min-height:44px;
  font-family:var(--ui);font-weight:700;color:var(--capex-forest);cursor:pointer}

/* ---------- hero ---------- */
.mk-hero{background:var(--capex-deep-green);color:var(--capex-warm-white);
  position:relative;overflow:hidden}
.mk-hero:before{content:"";position:absolute;inset:0;
  background:radial-gradient(115% 100% at 6% -18%,rgba(143,200,75,.16) 0%,rgba(143,200,75,0) 55%)}
.mk-hero .mk-wrap{position:relative;padding:84px 28px 92px}
.mk-hero.split .mk-wrap{display:grid;grid-template-columns:1.02fr .98fr;gap:58px;align-items:center}
.mk-hero h1,.mk-hero h2{color:var(--capex-warm-white)}
.mk-hero .mk-eyebrow{color:var(--capex-moss)}
.mk-hero .mk-lede{color:rgba(247,245,239,.84)}
.mk-hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.mk-trust{margin-top:22px;font-size:13.5px;color:rgba(247,245,239,.66)}

/* ---------- sections ---------- */
.mk-sec{padding:92px 0}
.mk-sec.warm{background:var(--capex-warm-white);border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline)}
.mk-sec.sage{background:var(--capex-sage);border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline)}
.mk-sec.dark{background:var(--capex-forest);color:var(--capex-warm-white)}
.mk-sec.navy{background:var(--capex-navy);color:var(--capex-warm-white)}
.mk-sec.dark h2,.mk-sec.dark h3,.mk-sec.navy h2,.mk-sec.navy h3{color:var(--capex-warm-white)}
.mk-sec.dark .mk-lede,.mk-sec.navy .mk-lede{color:rgba(247,245,239,.84)}
.mk-sec.dark .mk-eyebrow,.mk-sec.navy .mk-eyebrow{color:var(--capex-moss)}

/* ---------- grids and cards ---------- */
.mk-grid{display:grid;gap:22px}
.mk-g2{grid-template-columns:repeat(2,1fr)}
.mk-g3{grid-template-columns:repeat(3,1fr)}
.mk-g4{grid-template-columns:repeat(4,1fr)}
.mk-card{background:#fff;border:1px solid var(--capex-border);border-radius:var(--radius-card);
  padding:28px}
.mk-sec.warm .mk-card,.mk-sec.sage .mk-card{background:#fff}
.mk-sec.dark .mk-card,.mk-sec.navy .mk-card{background:rgba(247,245,239,.055);
  border-color:rgba(247,245,239,.16)}
.mk-sec.dark .mk-card p,.mk-sec.navy .mk-card p{color:rgba(247,245,239,.80)}
.mk-card h3{font-size:19px;margin-bottom:9px}
.mk-card p{font-size:15px;color:var(--charcoal);margin:0}
.mk-kicker{display:block;font-size:11.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--capex-forest);margin-bottom:11px}
.mk-sec.dark .mk-kicker,.mk-sec.navy .mk-kicker{color:var(--capex-moss)}

/* ---------- confidence cards: status never by colour alone ---------- */
.mk-conf{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.mk-conf .c{background:#fff;border:1px solid var(--capex-border);
  border-radius:var(--radius-card);padding:24px;border-top:4px solid var(--capex-border)}
.mk-conf .c.seen{border-top-color:var(--capex-forest)}
.mk-conf .c.expected{border-top-color:var(--capex-blue)}
.mk-conf .c.inferred{border-top-color:var(--capex-navy)}
.mk-conf .c.verify{border-top-color:var(--capex-amber)}
.mk-conf .c h3{font-size:18px;margin-bottom:8px}
.mk-conf .c p{font-size:14.5px;color:var(--charcoal);margin:0}
.mk-chip{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;
  padding:4px 10px;border-radius:var(--radius-control);white-space:nowrap;
  border:1px solid currentColor;margin-bottom:11px}
.mk-chip:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.mk-chip.seen{color:var(--capex-forest);background:var(--capex-sage)}
.mk-chip.expected{color:var(--capex-blue);background:#E7EFFA}
.mk-chip.inferred{color:var(--capex-navy);background:#E6EAEE}
.mk-chip.verify{color:#8A6410;background:#FBF1DA}

/* ---------- workflow steps: numbered because it IS a sequence ---------- */
.mk-steps{border-top:1px solid var(--capex-border)}
.mk-step{display:grid;grid-template-columns:70px 1fr;gap:28px;padding:34px 0;
  border-bottom:1px solid var(--capex-border)}
.mk-step .n{font-family:var(--display);font-size:36px;font-weight:700;line-height:1;
  color:var(--capex-moss)}
.mk-sec.dark .mk-step,.mk-sec.navy .mk-step{border-color:rgba(247,245,239,.18)}
.mk-sec.dark .mk-steps,.mk-sec.navy .mk-steps{border-color:rgba(247,245,239,.18)}
.mk-step h3{margin-bottom:9px}
.mk-step p{color:var(--charcoal);max-width:66ch;margin:0}
.mk-sec.dark .mk-step p,.mk-sec.navy .mk-step p{color:rgba(247,245,239,.80)}

/* ---------- campaign band + screenshot frame ---------- */
.mk-band{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.mk-band.wide{grid-template-columns:1fr}
.mk-band-media{border-radius:var(--radius-card);overflow:hidden;box-shadow:var(--shadow-media);
  background:var(--capex-sage)}
.mk-band-media img{width:100%;height:auto}
.mk-shot{border-radius:var(--radius-card);overflow:hidden;border:1px solid var(--capex-border);
  box-shadow:var(--shadow-soft);background:#fff}
.mk-shot img{width:100%;height:auto}
.mk-shot figcaption{font-size:13.5px;color:var(--muted);padding:13px 18px;
  border-top:1px solid var(--capex-border);margin:0}
.mk-shot.pending{display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:210px;background:var(--capex-sage);border-style:dashed;padding:24px}
.mk-shot.pending span{font-size:12.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);max-width:44ch;line-height:1.7}

/* ---------- pull + note ---------- */
.mk-pull{font-family:var(--display);font-size:clamp(21px,2.5vw,28px);line-height:1.36;
  color:var(--capex-forest);max-width:28ch;margin:0}
.mk-sec.dark .mk-pull,.mk-sec.navy .mk-pull{color:var(--capex-warm-white)}
.mk-note{background:var(--capex-sage);border-left:4px solid var(--capex-forest);
  border-radius:var(--radius-card);padding:22px 26px;margin-top:34px}
.mk-note p{margin:0;font-size:15px;color:var(--charcoal)}
.mk-note b{color:var(--capex-forest)}

/* ---------- lists ---------- */
.mk-ticks{list-style:none;margin:16px 0 0;padding:0}
.mk-ticks li{position:relative;padding-left:22px;font-size:15px;color:var(--charcoal);
  margin-bottom:9px}
.mk-ticks li:before{content:"";position:absolute;left:0;top:10px;width:10px;height:2px;
  background:var(--capex-moss)}
.mk-sec.dark .mk-ticks li,.mk-sec.navy .mk-ticks li{color:rgba(247,245,239,.82)}

/* ---------- table ---------- */
.mk-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.mk-table{width:100%;border-collapse:collapse;background:#fff;font-size:14.5px;
  border:1px solid var(--capex-border);border-radius:var(--radius-card);overflow:hidden}
.mk-table th,.mk-table td{padding:13px 16px;text-align:left;border-top:1px solid var(--hairline)}
.mk-table thead th{background:var(--capex-forest);color:var(--capex-warm-white);
  font-family:var(--ui);font-weight:700;font-size:13px;border-top:0}
.mk-table tbody th{font-weight:500;color:var(--capex-ink)}
.mk-table td{text-align:center;color:var(--charcoal)}
.mk-table td.y{color:var(--capex-forest);font-weight:700}
.mk-table td.n{color:#AFBAB3}
.mk-table tbody tr:nth-child(even){background:var(--capex-warm-white)}

/* ---------- form ---------- */
.mk-form{background:#fff;border:1px solid var(--capex-border);border-radius:var(--radius-card);
  padding:32px;box-shadow:var(--shadow-soft)}
.mk-field{margin-bottom:16px}
.mk-field label{display:block;font-size:13px;font-weight:700;color:var(--charcoal);
  margin-bottom:6px}
.mk-field input,.mk-field select,.mk-field textarea{width:100%;padding:12px 14px;
  font-family:var(--ui);font-size:15.5px;color:var(--capex-ink);background:#fff;
  border:1px solid var(--capex-border);border-radius:var(--radius-control);min-height:44px}
.mk-field textarea{min-height:96px;resize:vertical}
.mk-field input:focus,.mk-field select:focus,.mk-field textarea:focus{outline:none;
  border-color:var(--capex-forest);box-shadow:0 0 0 3px rgba(11,74,56,.13)}
.mk-field.err input,.mk-field.err select{border-color:var(--capex-red)}
.mk-field .msg{display:none;font-size:12.5px;color:var(--capex-red);margin-top:5px}
.mk-field.err .msg{display:block}
.mk-form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.mk-status{display:none;margin-top:16px;padding:13px 16px;border-radius:var(--radius-control);
  font-size:14.5px}
.mk-status.ok{display:block;background:var(--capex-sage);border-left:4px solid var(--capex-forest);
  color:var(--capex-deep-green)}
.mk-status.bad{display:block;background:#FBECEA;border-left:4px solid var(--capex-red);
  color:#8C332C}

/* ---------- cta ---------- */
.mk-cta{background:var(--capex-deep-green);color:var(--capex-warm-white);
  border-radius:var(--radius-card);padding:56px 52px;position:relative;overflow:hidden;
  box-shadow:var(--shadow-media)}
.mk-cta:before{content:"";position:absolute;inset:0;
  background:radial-gradient(110% 130% at 88% -20%,rgba(143,200,75,.18) 0%,rgba(143,200,75,0) 60%)}
.mk-cta>*{position:relative}
.mk-cta h2{color:var(--capex-warm-white);margin-bottom:14px}
.mk-cta p{color:rgba(247,245,239,.84);max-width:60ch}
.mk-cta-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}

/* ---------- footer ---------- */
.mk-footer{background:var(--capex-forest);color:rgba(247,245,239,.78);padding:60px 0 44px;
  font-size:14.5px}
.mk-footer a{color:rgba(247,245,239,.78);text-decoration:none}
.mk-footer a:hover{color:var(--capex-warm-white);text-decoration:underline}
.mk-fcols{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:36px}
.mk-fbrand{font-family:var(--display);font-size:21px;color:var(--capex-warm-white)}
.mk-fcols h4{font-size:12px;font-family:var(--ui);font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--capex-moss);margin:0 0 14px}
.mk-fcols ul{list-style:none;margin:0;padding:0}
.mk-fcols li{margin-bottom:9px}
.mk-legal{margin-top:44px;padding-top:24px;border-top:1px solid rgba(247,245,239,.16);
  font-size:12.5px;color:rgba(247,245,239,.60);display:flex;gap:20px;flex-wrap:wrap}
.mk-legal p{margin:0}

/* ---------- motion + focus ---------- */
.mk-rv{opacity:0;transform:translateY(15px);transition:opacity .55s ease,transform .55s ease}
.mk-rv.in{opacity:1;transform:none}
:focus-visible{outline:3px solid var(--capex-moss);outline-offset:2px;border-radius:4px}
.mk-skip{position:absolute;left:-9999px;top:0;background:#fff;color:var(--capex-forest);
  padding:12px 18px;z-index:100;border-radius:var(--radius-control);font-weight:700}
.mk-skip:focus{left:12px;top:12px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .mk-rv{opacity:1;transform:none;transition:none}
}

/* ---------- responsive, per the brief ---------- */
@media (max-width:1080px){
  .mk-g4{grid-template-columns:repeat(2,1fr)}
  .mk-conf{grid-template-columns:repeat(2,1fr)}
  .mk-fcols{grid-template-columns:1fr 1fr;gap:30px}
}
@media (max-width:920px){
  .mk-hero.split .mk-wrap{grid-template-columns:1fr;gap:42px;padding:60px 28px 68px}
  .mk-g3,.mk-g2{grid-template-columns:1fr}
  .mk-band{grid-template-columns:1fr;gap:30px}
  .mk-nav a.mk-link,.mk-nav .mk-btn{display:none}
  .mk-toggle{display:inline-block;margin-left:auto}
  .mk-nav.open{height:auto;flex-wrap:wrap;padding-bottom:18px}
  .mk-nav.open a.mk-link{display:block;width:100%;padding:11px 0;
    border-top:1px solid var(--hairline)}
  .mk-nav.open .mk-btn{display:inline-flex;width:100%;margin-top:12px}
  .mk-sec{padding:64px 0}
  .mk-cta{padding:40px 26px}
  .mk-step{grid-template-columns:46px 1fr;gap:18px}
  .mk-step .n{font-size:28px}
  .mk-form-row{grid-template-columns:1fr}
  .mk-form{padding:24px}
}
@media (max-width:600px){
  .mk-conf{grid-template-columns:1fr}
  .mk-fcols{grid-template-columns:1fr}
}