/* ─────────────────────────────────────────────────────────────
   MazVEX content-page shell (brands / creators / about)
   Matches the landing page's tokens, type and furniture, but:
   • no intro loader
   • a calm, STATIC background that never fights the copy
   • a normal scrolling document
   ───────────────────────────────────────────────────────────── */

*{margin:0;padding:0;box-sizing:border-box}
:root{
  --void:#07080B;
  --ink:#F6F8FC;
  --line:rgba(255,255,255,.14);
  --glass:rgba(255,255,255,.06);
  --muted:#8b93a3;
  --soft:#c4ccd9;            /* body copy brighter than muted so it reads */
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  min-height:100vh;
  min-height:100dvh;        /* so the dock can anchor to the viewport bottom on short pages */
  display:flex;
  flex-direction:column;
  background:var(--void);
  color:var(--ink);
  font-family:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  line-height:1.6;
  overflow-x:hidden;
}
::selection{background:#7FA8FF;color:#07080B}

/* ── Calm static background ─────────────────────────────────────
   The same blue-on-void palette as the landing canvas, but fixed
   and very low-contrast so the text always stays comfortable.    */
.bg-field{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(46% 34% at 16% 12%, rgba(127,168,255,.09), transparent 70%),
    radial-gradient(40% 34% at 88% 20%, rgba(96,124,184,.07), transparent 72%),
    radial-gradient(54% 44% at 74% 96%, rgba(127,168,255,.05), transparent 76%);}
.vignette{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(72% 64% at 50% 38%, rgba(7,8,11,0) 42%, rgba(7,8,11,.5) 100%);}

/* ── Logo (MV monogram) top-left ───────────────────────────────── */
.logo{position:fixed;top:26px;left:30px;z-index:5;height:30px;color:var(--ink)}
.logo a{display:block;height:100%;width:auto;color:inherit}
.logo svg{display:block;height:100%;width:auto}
.logo a:focus-visible{outline:2px solid #7FA8FF;outline-offset:6px;border-radius:4px}

/* ── Content column ────────────────────────────────────────────── */
.page{position:relative;z-index:3;flex:1 0 auto;width:100%;max-width:760px;margin:0 auto;
  padding:132px 30px 64px}
.page h1{
  font-family:'Fraunces',Georgia,'Times New Roman',serif;
  font-optical-sizing:auto;font-variation-settings:'opsz' 120;
  font-weight:560;letter-spacing:-.022em;line-height:1.05;
  font-size:clamp(2rem,5.4vw,3.4rem);
  color:var(--ink);text-wrap:balance;
}

/* ── Accordion (Brands / Creators) ─────────────────────────────── */
.accordion{margin-top:42px;border-top:1px solid var(--line)}
.acc-item{border-bottom:1px solid var(--line)}
.acc-trigger{
  width:100%;background:none;border:0;cursor:pointer;color:var(--ink);
  font-family:inherit;font-weight:600;letter-spacing:.004em;line-height:1.4;
  font-size:clamp(1.02rem,2.1vw,1.2rem);
  text-align:left;display:flex;align-items:flex-start;gap:20px;
  padding:24px 4px 24px 0;
  transition:color .2s ease}
.acc-trigger:hover{color:#e9eefb}
.acc-trigger:focus-visible{outline:2px solid #7FA8FF;outline-offset:4px;border-radius:5px}
.acc-trigger .q{flex:1}
.acc-icon{flex:0 0 auto;width:20px;height:20px;margin-top:2px;color:var(--muted);
  transition:transform .4s cubic-bezier(.2,.7,.2,1),color .2s ease}
.acc-trigger:hover .acc-icon{color:var(--ink)}
.acc-item.open .acc-icon{transform:rotate(180deg);color:var(--ink)}

/* smooth expand max-height toggled by class. Cap is comfortably above the
   tallest answer at phone widths, so nothing ever clips. */
.acc-panel{max-height:0;overflow:hidden;
  transition:max-height .45s cubic-bezier(.2,.7,.2,1)}
.acc-item.open .acc-panel{max-height:760px}
.acc-answer{padding:0 34px 28px 0;color:var(--soft);
  font-size:clamp(.98rem,1.6vw,1.08rem);line-height:1.72}

/* ── About prose ───────────────────────────────────────────────── */
.prose{margin-top:38px;max-width:64ch}
.prose p{color:var(--soft);margin-bottom:24px;
  font-size:clamp(1.04rem,1.8vw,1.2rem);line-height:1.78}
.prose p:last-child{margin-bottom:0}
.prose a{color:var(--ink);text-decoration:underline;text-decoration-color:rgba(127,168,255,.55);
  text-underline-offset:3px;transition:color .2s ease,text-decoration-color .2s ease}
.prose a:hover{color:#fff;text-decoration-color:#7FA8FF}
.prose a:focus-visible{outline:2px solid #7FA8FF;outline-offset:3px;border-radius:3px}

/* ── Proof page case-study skeletons (honest "in progress") ──────
   Glass cards with placeholder bars that catch a slow left-to-right
   sheen, staggered per card. CSS-only; static under reduced motion. */
.cases{margin-top:40px;list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.case{position:relative;display:flex;flex-direction:column;gap:18px;min-height:188px;
  padding:20px;border-radius:16px;background:var(--glass);border:1px solid var(--line);
  -webkit-backdrop-filter:blur(11px) saturate(120%);backdrop-filter:blur(11px) saturate(120%)}
.case:nth-child(2){--ph:-1.13s}     /* stagger the sheen so cards never pulse in unison */
.case:nth-child(3){--ph:-2.26s}
.sk-body{display:flex;flex-direction:column;gap:13px}
.sk{position:relative;overflow:hidden;border-radius:7px;background:rgba(255,255,255,.055)}
.sk::before{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.14) 50%,transparent 100%);
  transform:translateX(-100%);
  animation:sheen 3.4s ease-in-out infinite;animation-delay:var(--ph,0s)}
@keyframes sheen{0%{transform:translateX(-100%)}55%{transform:translateX(100%)}100%{transform:translateX(100%)}}
.sk-title{height:13px;width:60%}
.sk-line{height:9px;width:100%}
.sk-line.sk-short{width:75%}
.sk-stats{display:flex;gap:9px;margin-top:7px}
.sk-stat{height:34px;flex:1;border-radius:9px}
.case-cap{margin-top:auto;padding-top:4px;color:var(--muted);
  font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
@media (max-width:900px){.cases{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.cases{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.sk::before{animation:none;display:none}}

/* ── Bottom-left bare hamburger + menu (matches landing) ───────── */
.menu{position:fixed;left:30px;bottom:32px;z-index:6}
.burger{position:relative;display:block;width:28px;height:16px;background:none;border:0;padding:0;cursor:pointer}
.burger span{position:absolute;left:0;height:1.6px;width:100%;background:var(--ink);border-radius:2px;
  transition:transform .4s cubic-bezier(.6,.05,.1,1),opacity .25s}
.burger span:nth-child(1){top:0}
.burger span:nth-child(2){top:50%;transform:translateY(-50%)}
.burger span:nth-child(3){bottom:0}
.burger:focus-visible{outline:2px solid #7FA8FF;outline-offset:6px;border-radius:3px}
.menu.open .burger span:nth-child(1){top:50%;transform:translateY(-50%) rotate(45deg)}
.menu.open .burger span:nth-child(2){opacity:0}
.menu.open .burger span:nth-child(3){bottom:auto;top:50%;transform:translateY(-50%) rotate(-45deg)}

.links{position:absolute;left:0;bottom:34px;display:flex;flex-direction:column;gap:15px;
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(10px);
  transition:opacity .35s ease,visibility .35s,transform .35s cubic-bezier(.2,.7,.2,1)}
.menu.open .links{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
.links a{position:relative;color:var(--ink);text-decoration:none;font-size:15px;font-weight:500;
  letter-spacing:.005em;opacity:.78;transition:opacity .2s,letter-spacing .2s;width:max-content}
.links a:hover{opacity:1;letter-spacing:.02em}
.links a:focus-visible{outline:2px solid #7FA8FF;outline-offset:4px;border-radius:3px;opacity:1}
.links a.active{opacity:1;font-weight:600;padding-left:16px}
.links a.active::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:6px;height:6px;border-radius:50%;background:#7FA8FF}

/* ── Glass icon buttons (same as landing, but in normal flow so they
   never sit on top of the copy on a scrolling page) ───────────── */
.dock{position:relative;z-index:3;display:flex;justify-content:center;gap:14px;
  margin:32px auto 0;padding-bottom:34px}
.iconbtn{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  background:var(--glass);border:1px solid var(--line);color:var(--ink);
  -webkit-backdrop-filter:blur(11px) saturate(120%);backdrop-filter:blur(11px) saturate(120%);
  cursor:pointer;text-decoration:none;
  transition:transform .28s cubic-bezier(.2,.7,.2,1),background .28s,border-color .28s}
.iconbtn:hover{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.3);transform:translateY(-3px)}
.iconbtn:active{transform:translateY(-1px) scale(.97)}
.iconbtn svg{width:21px;height:21px}
.iconbtn:focus-visible{outline:2px solid #7FA8FF;outline-offset:3px}

/* Instagram "coming soon" tooltip ported from the homepage; same glass as the dock buttons */
.ig{position:relative}
.ig-tip{position:absolute;left:50%;bottom:calc(100% + 12px);transform:translate(-50%,6px);
  white-space:nowrap;pointer-events:none;z-index:6;
  background:var(--glass);border:1px solid var(--line);color:var(--ink);
  -webkit-backdrop-filter:blur(11px) saturate(120%);backdrop-filter:blur(11px) saturate(120%);
  padding:7px 12px;border-radius:11px;font-size:13px;font-weight:500;letter-spacing:.005em;
  box-shadow:0 6px 22px rgba(7,8,11,.45);
  opacity:0;transition:opacity .3s ease,transform .3s cubic-bezier(.2,.7,.2,1)}
.ig-tip.show{opacity:1;transform:translate(-50%,0)}

@media (max-width:560px){
  .logo{top:20px;left:22px}
  .menu{left:22px;bottom:24px}
  .dock{padding-bottom:28px}
  .page{padding:104px 22px 48px}
  .accordion{margin-top:32px}
  .ig-tip{font-size:12px;max-width:90vw}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
}