/* ============================================================
   360Score.me Marketing Resources — Sunrise theme
   Shared across marketing/index.html and the 3 article pages.
   Bootstrap 3 utility classes available; this file adds the
   marketing visual identity on top.
   ============================================================ */
*, *:before, *:after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0;
  font-family:'Inter','Segoe UI',Arial,sans-serif;
  background:#011B38;
  color:#fff;
  overflow-x:hidden;
  line-height:1.55;
}
a { color:#8FEBD5; text-decoration:none; }
a:hover { color:#fff; }
img { max-width:100%; height:auto; }

/* ---------- Navbar (mirrors landing.html shell) ---------- */
.mk-nav {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:12px 0; background:rgba(1,27,56,.85);
  border-bottom:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.mk-nav-inner { max-width:1200px; margin:0 auto; padding:0 24px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.mk-nav-brand { font-family:'Inter',sans-serif; font-weight:800; font-size:18px; letter-spacing:-.01em; color:#fff; }
.mk-nav-brand span { background:linear-gradient(90deg,#8FEBD5 0%,#3772FF 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.mk-nav-logo { height:40px; width:auto; display:block; }
.mk-nav-links { list-style:none; margin:0; padding:0; display:flex; gap:22px; align-items:center; }
.mk-nav-links a { color:rgba(255,255,255,.78); font-size:14px; font-weight:500; }
.mk-nav-links a:hover { color:#fff; }
.mk-nav-cta { display:inline-block; padding:9px 18px; background:linear-gradient(90deg,#ffa585 0%,#ffeda0 100%); color:#011B38 !important; border-radius:999px; font-weight:700; font-size:13.5px; }
.mk-nav-cta:hover { color:#011B38 !important; opacity:.92; }

@media (max-width:768px) { .mk-nav-links li:not(:last-child) { display:none; } }

/* ---------- Hero ---------- */
.mk-hero {
  position:relative; padding:140px 24px 70px;
  background:
    radial-gradient(900px 500px at 80% -10%, rgba(143,235,213,.18), transparent 60%),
    radial-gradient(700px 460px at 10% 110%, rgba(255,165,133,.18), transparent 60%),
    #011B38;
  text-align:center;
}
.mk-hero-inner { max-width:880px; margin:0 auto; }
.mk-eyebrow {
  display:inline-block; font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  padding:5px 14px; border-radius:999px;
  border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.07);
  margin-bottom:18px; color:#8FEBD5;
}
.mk-hero h1 { font-size:clamp(32px,5vw,52px); font-weight:900; line-height:1.1; margin:0 0 18px; }
.mk-hero h1 .grad { background:linear-gradient(90deg,#ffa585 0%,#ffeda0 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.mk-hero p { font-size:17px; color:rgba(255,255,255,.78); max-width:680px; margin:0 auto 26px; }

/* ---------- Hub grid ---------- */
.mk-grid {
  max-width:1200px; margin:0 auto; padding:30px 24px 80px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
}
@media (max-width:900px) { .mk-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px) { .mk-grid { grid-template-columns:1fr; } }

.mk-card {
  display:flex; flex-direction:column; gap:10px;
  padding:26px 24px; min-height:220px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  color:#fff;
  transition:transform .2s, border-color .2s, box-shadow .2s;
}
.mk-card:hover { transform:translateY(-3px); border-color:rgba(143,235,213,.45); box-shadow:0 14px 40px rgba(0,0,0,.4); color:#fff; }
.mk-card-tag { display:inline-flex; align-items:center; gap:6px; align-self:flex-start; padding:3px 10px; background:rgba(143,235,213,.14); color:#8FEBD5; border-radius:999px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.mk-card h3 { font-size:19px; font-weight:800; margin:6px 0 4px; line-height:1.3; }
.mk-card p { font-size:14px; color:rgba(255,255,255,.7); margin:0; line-height:1.6; }
.mk-card-cta { margin-top:auto; padding-top:10px; font-size:13px; font-weight:700; color:#ffa585; }

/* ---------- Article layout ---------- */
.mk-article { max-width:780px; margin:0 auto; padding:120px 24px 80px; }
.mk-article-breadcrumb { font-size:12px; color:rgba(255,255,255,.55); margin-bottom:18px; }
.mk-article-breadcrumb a { color:#8FEBD5; }
.mk-article-breadcrumb strong { color:#fff; margin-left:6px; }

.mk-article h1 { font-size:clamp(28px,4vw,42px); font-weight:900; line-height:1.15; margin:0 0 14px; }
.mk-article h1 .grad { background:linear-gradient(90deg,#ffa585 0%,#ffeda0 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.mk-article .mk-eyebrow { margin-bottom:14px; }
.mk-article-lede { font-size:17px; color:rgba(255,255,255,.78); margin:0 0 36px; }

.mk-article h2 { font-size:24px; font-weight:800; margin:38px 0 14px; }
.mk-article h3 { font-size:18px; font-weight:700; margin:22px 0 10px; color:#8FEBD5; }
.mk-article p, .mk-article li { font-size:15.5px; color:rgba(255,255,255,.82); line-height:1.75; }
.mk-article ul { padding-left:22px; }
.mk-article strong { color:#fff; }

.mk-panel {
  margin:20px 0; padding:22px 24px;
  background:linear-gradient(180deg, rgba(143,235,213,.07), rgba(55,114,255,.04));
  border:1px solid rgba(143,235,213,.22);
  border-radius:14px;
}
.mk-panel-h { font-family:'Inter',sans-serif; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:#8FEBD5; margin-bottom:6px; }

.mk-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:24px 0 28px; }
@media (max-width:600px) { .mk-stats { grid-template-columns:1fr; } }
.mk-stat { padding:18px 16px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10); border-radius:12px; text-align:center; }
.mk-stat-n { font-size:30px; font-weight:900; background:linear-gradient(90deg,#ffa585 0%,#ffeda0 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; line-height:1; margin-bottom:6px; }
.mk-stat-l { font-size:12.5px; color:rgba(255,255,255,.7); }

.mk-cta-banner {
  margin-top:40px; padding:32px 28px; text-align:center;
  background:linear-gradient(135deg, rgba(255,165,133,.12), rgba(255,237,160,.06));
  border:1px solid rgba(255,165,133,.3); border-radius:18px;
}
.mk-cta-banner h3 { font-size:22px; font-weight:800; margin:0 0 8px; color:#fff; }
.mk-cta-banner p { font-size:14.5px; color:rgba(255,255,255,.75); margin:0 0 18px; }
.mk-cta-btn { display:inline-block; padding:13px 28px; background:linear-gradient(90deg,#ffa585 0%,#ffeda0 100%); color:#011B38 !important; border-radius:999px; font-weight:800; font-size:14.5px; }
.mk-cta-btn:hover { color:#011B38 !important; opacity:.92; }
.mk-cta-banner .mk-cta-secondary { display:inline-block; margin-left:14px; padding:12px 22px; border:1px solid rgba(255,255,255,.25); border-radius:999px; color:#fff; font-weight:600; font-size:14px; }
.mk-cta-banner .mk-cta-secondary:hover { border-color:#8FEBD5; }

/* ---------- Two-column diagram (used in anonymity) ---------- */
.mk-split { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:18px 0; }
@media (max-width:640px) { .mk-split { grid-template-columns:1fr; } }
.mk-split-yes, .mk-split-no { padding:18px 18px; border-radius:12px; }
.mk-split-yes { background:rgba(91,199,41,.08); border:1px solid rgba(91,199,41,.35); }
.mk-split-no  { background:rgba(255,67,0,.06); border:1px solid rgba(255,67,0,.3); }
.mk-split h4 { margin:0 0 10px; font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.mk-split-yes h4 { color:#5BC729; }
.mk-split-no h4  { color:#FF8866; }
.mk-split ul { padding-left:20px; margin:0; font-size:14px; }

/* ---------- Karma tiers ---------- */
.mk-tiers { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:18px 0 26px; }
@media (max-width:600px) { .mk-tiers { grid-template-columns:repeat(2,1fr); } }
.mk-tier { padding:18px 12px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10); border-radius:14px; text-align:center; }
.mk-tier-g { font-size:28px; line-height:1; margin-bottom:6px; }
.mk-tier-n { font-family:'Inter',sans-serif; font-weight:800; font-size:13.5px; margin-bottom:3px; }
.mk-tier-r { font-size:11.5px; color:rgba(255,255,255,.6); }
.t-bronze .mk-tier-g, .t-bronze .mk-tier-n { color:#c08866; }
.t-silver .mk-tier-g, .t-silver .mk-tier-n { color:#cbd5e1; }
.t-gold .mk-tier-g, .t-gold .mk-tier-n { color:#ffeda0; }
.t-plat .mk-tier-g, .t-plat .mk-tier-n { color:#8FEBD5; }

/* ---------- Email row mock ---------- */
.mk-mailrow {
  display:grid; grid-template-columns:48px 1fr auto; gap:14px; align-items:center;
  padding:13px 16px; margin:8px 0;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10); border-radius:12px;
}
.mk-mailrow-i { width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,#3772FF,#5BC729); color:#fff; display:flex; align-items:center; justify-content:center; }
.mk-mailrow-b strong { display:block; font-size:14px; }
.mk-mailrow-b span { font-size:12.5px; color:rgba(255,255,255,.6); }
.mk-mailrow-w { font-size:11.5px; color:#8FEBD5; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }

/* ---------- Footer ---------- */
.mk-foot { padding:30px 24px 40px; border-top:1px solid rgba(255,255,255,.08); text-align:center; font-size:13px; color:rgba(255,255,255,.55); }
.mk-foot a { margin:0 10px; }

/* ---------- Editorial imagery (supporting, never the focal point) ---------- */
.mk-figure { margin:26px 0 30px; }
.mk-figure img {
  display:block; width:100%; height:auto;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 16px 40px rgba(0,0,0,.32);
  filter:saturate(.85);
}
.mk-figure figcaption {
  margin-top:9px; font-size:12.5px; line-height:1.5;
  color:rgba(255,255,255,.5); font-style:italic;
}
.mk-figure-inline { margin:24px 0 28px; }
.mk-figure-inline img { max-height:250px; object-fit:cover; }
@media (max-width:600px) { .mk-figure-inline img { max-height:180px; } }
@media print { .mk-figure { break-inside:avoid; } .mk-figure figcaption { color:#475569 !important; } }

@media print {
  .mk-nav, .mk-cta-banner, .mk-foot { display:none !important; }
  body { background:#fff !important; color:#000 !important; }
  .mk-article p, .mk-article li, .mk-article-lede { color:#1e293b !important; }
  .mk-article h1, .mk-article h2 { color:#011B38 !important; }
  .mk-article h1 .grad { -webkit-text-fill-color:#011B38 !important; background:none !important; }
}
/* What 360 Measures Only - Start */
.mk-statstrip { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:26px 0 30px; }
@media (max-width:700px) { .mk-statstrip { grid-template-columns:1fr; } }
.mk-s3 { padding:18px 18px; background:rgba(143,235,213,.06); border:1px solid rgba(143,235,213,.22); border-radius:12px; }
.mk-s3-label { font-size:22px; font-weight:900; color:#fff; line-height:1.1; margin-bottom:4px; }
.mk-s3-desc { font-size:13.5px; font-weight:600; color:#8FEBD5; margin-bottom:8px; }
.mk-s3-def { font-size:13px; font-weight:400; color:rgba(255,255,255,.7); line-height:1.55; }
.mk-pullquote { margin:28px 0 32px; padding:6px 0 6px 20px; border-left:3px solid #8FEBD5; font-size:20px; line-height:1.5; font-weight:400; color:rgba(255,255,255,.9); font-style:italic; }
.mk-ratertip { margin:18px 0 26px; padding:16px 18px; border-left:3px solid rgba(143,235,213,.55); background:rgba(255,255,255,.04); border-radius:0 10px 10px 0; }
.mk-ratertip-tag { display:block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:#8FEBD5; margin-bottom:6px; }
.mk-ratertip p { margin:0; font-size:14px; line-height:1.65; color:rgba(255,255,255,.78); }
.mk-datapill { display:inline-block; margin:6px 0 4px; padding:6px 14px; border-radius:999px; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.04); font-size:12.5px; font-weight:600; color:rgba(255,255,255,.75); }
.mk-article h3 { font-size:19px; font-weight:700; color:#fff; margin:30px 0 10px; line-height:1.35; }
@media print {
  .mk-s3, .mk-ratertip, .mk-datapill { background:#f8fafc !important; }
  .mk-s3-label, .mk-pullquote { color:#0f172a !important; }
  .mk-s3-def, .mk-ratertip p { color:#334155 !important; }
  .mk-statstrip, .mk-ratertip { break-inside:avoid; }
}
/* What 360 Measures Only - End */

/* Insights Shared Components (Aug 2026 rewrite) - Start */
/* Numeric variant of the three-stat strip (anonymity.html) — number leads the
   hierarchy: NUMBER -> label -> definition. Base .mk-s3 (what-360-measures)
   keeps its label-as-headline treatment. */
.mk-s3--num .mk-s3-n {
  font-size:56px; font-weight:900; line-height:1; margin-bottom:8px;
  background:linear-gradient(90deg,#ffa585 0%,#ffeda0 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.mk-s3--num .mk-s3-label { font-size:17px; font-weight:600; color:rgba(255,255,255,.92); margin-bottom:6px; }
.mk-s3--num .mk-s3-def { font-size:13px; }
@media (max-width:700px) { .mk-s3--num .mk-s3-n { font-size:48px; } }

/* Thesis pull quote (shoutouts.html) */
.mk-thesis {
  margin:30px 0 24px; padding:4px 0 6px 22px; border-left:4px solid #8FEBD5;
}
.mk-article .mk-thesis-lead { margin:0 0 10px; font-size:26px; font-weight:800; line-height:1.25; color:#8FEBD5; }
.mk-article .mk-thesis-sub  { margin:0; font-size:17px; line-height:1.6; color:rgba(255,255,255,.72); }
@media (max-width:700px) { .mk-article .mk-thesis-lead { font-size:22px; } .mk-article .mk-thesis-sub { font-size:15.5px; } }
@media print {
  .mk-s3--num .mk-s3-n {
    -webkit-text-fill-color:#0f172a !important; color:#0f172a !important;
    background:none !important;
  }
  .mk-s3--num .mk-s3-label { color:#0f172a !important; }
  .mk-thesis { border-left-color:#0f172a !important; break-inside:avoid; }
  .mk-article .mk-thesis-lead { color:#0f172a !important; }
  .mk-article .mk-thesis-sub { color:#334155 !important; }
}
.mk-principle {
  margin:30px auto 34px; max-width:720px; padding:24px 28px; text-align:center;
  background:rgba(143,235,213,.07); border-radius:14px;
}
.mk-principle-h {
  font-family:'Inter',sans-serif; font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.1em; color:#8FEBD5; margin-bottom:10px;
}
.mk-principle p { margin:0; font-size:18px; line-height:1.6; color:rgba(255,255,255,.9); }
.mk-inline-note {
  margin:6px 0 30px; padding:0 0 0 18px; border-left:2px solid rgba(143,235,213,.5);
  font-style:italic; font-size:15.5px; color:rgba(255,255,255,.72);
}
.mk-protocol { counter-reset:mkstep; list-style:none; padding:0; margin:22px 0 30px; }
.mk-protocol > li {
  position:relative; padding-left:44px; margin-bottom:20px; line-height:1.75;
  color:rgba(255,255,255,.8);
}
.mk-protocol > li:before {
  counter-increment:mkstep; content:counter(mkstep);
  position:absolute; left:0; top:1px; width:28px; height:28px; border-radius:50%;
  background:rgba(143,235,213,.12); color:#8FEBD5; font-size:13px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.mk-modnote { font-size:14px; color:rgba(255,255,255,.6); }
@media print {
  .mk-principle { background:#f8fafc !important; break-inside:avoid; }
  .mk-principle p, .mk-inline-note, .mk-protocol > li { color:#1e293b !important; }
  .mk-protocol > li:before { background:#e2e8f0 !important; color:#0f172a !important; }
}
/* Insights Shared Components (Aug 2026 rewrite) - End */