/* ============================================================
   micro-engagement.html — page-specific additions.
   Loads on top of home.css (shared cinematic system), so this
   file only defines what home.css doesn't already provide.
   ============================================================ */

/* ---- HERO: typographic, no video/mountains ---- */
.mhero{position:relative;overflow:hidden;isolation:isolate;padding:190px 0 96px;}
.mhero-bg{position:absolute;inset:0;z-index:-2;
  background:radial-gradient(90% 85% at 22% 4%,#0c3a51 0%,#062a3a 46%,var(--bg) 82%);}
.mhero-bg::after{content:"";position:absolute;top:-12%;right:-6%;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(254,96,47,0.12),transparent 66%);}
.mhero-grain{position:absolute;inset:0;z-index:-1;background-image:var(--grain);background-size:160px;opacity:.05;
  mix-blend-mode:overlay;pointer-events:none;}
.mhero-grid{display:grid;grid-template-columns:1.12fr 0.88fr;gap:56px;align-items:center;position:relative;}
.mhero-copy .eyebrow{margin-bottom:22px;}
.mhero-copy h1{font-family:var(--font-display);font-weight:800;font-size:clamp(38px,5.2vw,66px);line-height:1.04;
  letter-spacing:-0.035em;color:#fff;margin:0 0 24px;text-wrap:balance;}
.mhero-copy h1 em{font-style:normal;color:var(--orange);}
.mhero-sub{font-size:clamp(16px,1.5vw,19px);font-weight:300;line-height:1.65;color:var(--ink-dim);max-width:540px;margin-bottom:34px;}
.mhero-sub strong{color:#fff;font-weight:500;}

/* at-a-glance spec card */
.spec-card{border:1px solid var(--line);border-radius:22px;padding:30px 30px 32px;
  background:rgba(255,255,255,0.035);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 30px 70px rgba(0,0,0,0.42);}
.spec-tag{font-family:var(--font-ui);font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--teal);margin-bottom:8px;}
.spec-row{display:flex;justify-content:space-between;gap:20px;padding:16px 0;border-top:1px solid var(--line-soft);}
.spec-row:first-of-type{border-top:0;padding-top:8px;}
.spec-row .k{font-family:var(--font-ui);font-size:12.5px;letter-spacing:.03em;color:var(--ink-faint);flex:none;padding-top:2px;}
.spec-row .v{font-size:14.5px;font-weight:400;color:#fff;text-align:right;line-height:1.45;max-width:62%;}
.spec-cta{margin-top:24px;width:100%;justify-content:center;}
@media(max-width:880px){.mhero{padding:150px 0 72px;}.mhero-grid{grid-template-columns:1fr;gap:36px;}}

/* ---- how the four hours go: 3 step cards ---- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:54px;}
.step{position:relative;border:1px solid var(--line);border-radius:18px;padding:32px 28px 30px;
  background:rgba(255,255,255,0.02);overflow:hidden;transition:border-color .3s ease,transform .3s ease,background .3s ease;}
.step:hover{border-color:rgba(255,255,255,0.22);background:rgba(255,255,255,0.04);transform:translateY(-3px);}
.step .n{font-family:var(--font-display);font-weight:800;font-size:56px;line-height:.9;
  color:rgba(255,255,255,0.10);margin-bottom:20px;letter-spacing:-0.02em;}
.step:nth-child(3) .n{color:rgba(254,96,47,0.22);}
.step h3{font-family:var(--font-display);font-weight:700;font-size:20px;color:#fff;margin-bottom:12px;letter-spacing:-0.01em;}
.step p{font-size:14.5px;font-weight:300;line-height:1.7;color:var(--ink-dim);}
@media(max-width:820px){.steps{grid-template-columns:1fr;gap:14px;}}

.reassure{margin-top:40px;max-width:720px;font-size:16px;font-weight:300;line-height:1.8;color:var(--ink-dim);}
.reassure strong{color:#fff;font-weight:500;}

/* ---- honest fit: for / against ---- */
.fit-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:52px;}
.fit-col{border:1px solid var(--line);border-radius:20px;padding:34px 32px;background:rgba(255,255,255,0.02);}
.fit-col.is-for{border-color:rgba(100,206,187,0.28);background:rgba(100,206,187,0.04);}
.fit-col h3{font-family:var(--font-display);font-weight:700;font-size:19px;color:#fff;margin-bottom:22px;
  display:flex;align-items:center;gap:12px;letter-spacing:-0.01em;}
.fit-col h3 .badge{font-family:var(--font-ui);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 11px;border-radius:var(--pill);}
.is-for h3 .badge{color:var(--teal);background:rgba(100,206,187,0.14);}
.is-not h3 .badge{color:var(--ink-faint);background:rgba(255,255,255,0.06);}
.fit-list{list-style:none;display:flex;flex-direction:column;gap:16px;}
.fit-list li{display:flex;gap:14px;font-size:15px;font-weight:300;line-height:1.55;color:var(--ink-dim);}
.fit-list .mk{flex:none;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-top:1px;}
.is-for .mk{background:rgba(100,206,187,0.16);}
.is-for .mk svg{width:11px;height:11px;stroke:var(--teal);fill:none;stroke-width:2.4;}
.is-not .mk{background:rgba(254,96,47,0.14);}
.is-not .mk svg{width:10px;height:10px;stroke:var(--orange);fill:none;stroke-width:2.6;}
.fit-foot{margin-top:34px;font-size:16px;font-weight:300;color:var(--ink-dim);line-height:1.7;max-width:640px;}
.fit-foot strong{color:#fff;font-weight:500;}
@media(max-width:820px){.fit-grid{grid-template-columns:1fr;gap:16px;}}