/* ============================================================================
   METAHOLISTIC — Homepage redesign · SHARED BASE (base.css)
   The locked, NON-NEGOTIABLE brand layer for all three mockups.
   Tokens lifted verbatim from designator/renders/metaholistic-report.html :root
   and client-portal/portal/portal.css (the look Karim has approved elsewhere).

   What lives here (do NOT fork these per-mockup):
     - the brand color tokens + the signature gradient + the six aspect hues
     - the cloud-morph header (.rpt-head) Karim loves, CSS-only animated mesh
     - the logo anti-squash rule (height-only sizing; the portal bug never again)
     - a mobile-safe reset, focus-visible, reduced-motion guard
     - a small set of safe primitives (buttons, kicker, chips, gradbar)

   What each mockup OWNS (compose freely on top): layout, spacing, section
   composition, the per-mockup color treatment for mockup-3, hero art direction.
   MOBILE-FIRST: base targets ~375px; @media (min-width) enhances up.
   ============================================================================ */

:root{
  /* paper / ink — cream, never white */
  --paper:#F2ECE1; --paper-2:#ECE5D8; --card:#F7F2E9;
  --ink:#241F1A;  --soft:#6B5F50;  --faint:#9A8E7C;
  --line:#DDD4C3; --line-2:#E7DFD0;
  /* brand purple + the signature violet -> magenta -> teal gradient */
  --purple:#7C3AED;
  --grad:linear-gradient(118deg,#3E29AA 0%,#A82ACC 52%,#1FA6B8 100%);
  /* a RESTRAINED, lighter tint of the same gradient (Karim: current is "too pick me") */
  --grad-soft:linear-gradient(118deg,#6E63C4 0%,#C188D6 52%,#7FC6D0 100%);
  /* the six Experience Layers / homepage dimensions — aspect hues */
  --metacognitive:#A82ACC; --cognitive:#171FEE; --emotional:#0C8FE2;
  --physical:#22947A; --sensory:#EA1757; --metasensory:#F28900;
  /* manager-app header surface (manager.tsx :root) */
  --mgr-header-bg:#FAF6EE; --mgr-header-line:#D9D0BE;
  /* rhythm — width system: 3 intent groups (shell widest > content > inner grids).
     Tweak page width here in one place. Prose stays capped in ch elsewhere. */
  --maxw:1380px;            /* shell: nav / footer / page wrap */
  --content:1280px;         /* main content column */
  --content-narrow:1140px;  /* inner grids + centered bands (kept narrower) */
  --gutter:clamp(18px,5vw,40px);
  --radius:clamp(12px,2vw,18px);
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Sen",system-ui,sans-serif; font-size:17px; line-height:1.72;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;                     /* parallax transforms must never cause h-scroll */
}
img{max-width:100%; display:block;}
a{color:var(--purple); text-decoration:none;}

/* type primitives — Fraunces display, Sen body, Montserrat chrome (LOCKED across all 3) */
.display{font-family:"Fraunces",Georgia,serif; font-weight:600; line-height:1.04; letter-spacing:-.01em;}
.serif-it{font-family:"Fraunces",Georgia,serif; font-style:italic; font-weight:400;}
.kicker{
  font-family:"Montserrat",sans-serif; font-weight:500; font-size:12px;
  letter-spacing:.32em; text-transform:uppercase; color:var(--purple);
}
.label{
  font-family:"Montserrat",sans-serif; font-weight:500; font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--soft);
}

/* the 5px signature gradient hairline */
.gradbar{height:5px; background:var(--grad); border:0;}

/* ---- LOGO: height-only sizing. NEVER set width+height together (anti-squash) ---- */
.brand-logo{height:22px; width:auto; max-width:100%; object-fit:contain;}
@media(min-width:768px){ .brand-logo{height:26px;} }

/* ---- the cloud-morph header Karim loves (report .rpt-head) -------------------
   Rounded, inset, BORDERED card with a slow-drifting gold/violet mesh + a cream
   legibility scrim. CSS-only (no WebGL dependency) so every mockup is standalone. */
.rpt-head{
  position:relative; overflow:hidden;
  border:1px solid var(--line);
  border-radius:clamp(16px,3vw,28px);
  box-shadow:0 2px 18px rgba(60,40,90,.08);
  isolation:isolate;
}
.rpt-head .hdr-grad{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(45% 60% at 25% 30%, #f2c174cc, transparent 60%),
    radial-gradient(50% 65% at 78% 35%, #9383aacc, transparent 62%),
    radial-gradient(60% 70% at 55% 80%, #f2c17499, transparent 60%), #efe6d6;
  background-size:200% 200%;
  animation:hdrdrift 18s ease-in-out infinite alternate;
}
.rpt-head::after{                         /* cream scrim for legibility over the mesh */
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(120% 120% at 50% 40%, rgba(242,236,225,.12), rgba(242,236,225,.40));
}
.rpt-head > *{position:relative; z-index:2;}
@keyframes hdrdrift{0%{background-position:0% 0%,100% 0%,50% 100%}100%{background-position:60% 40%,30% 60%,70% 20%}}

/* ---- buttons --------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  min-height:50px; padding:14px 26px; cursor:pointer; border:none; border-radius:9px;
  font-family:"Montserrat",sans-serif; font-weight:500; font-size:13px;
  letter-spacing:.14em; text-transform:uppercase; transition:filter .15s, transform .05s, background .2s;
  -webkit-tap-highlight-color:transparent;
}
.btn-grad{color:#fff; background:var(--grad); box-shadow:0 2px 14px rgba(62,41,170,.22);}
.btn-grad:hover{filter:brightness(1.06);}
.btn-grad:active{transform:translateY(1px);}
.btn-ghost{color:var(--ink); background:transparent; border:1px solid var(--line); box-shadow:none;}
.btn-ghost:hover{background:var(--card); border-color:var(--soft);}

/* ---- client name-chips (proof row; we have no client logo image files) ------ */
.chip{
  display:inline-flex; align-items:center; padding:10px 18px;
  border:1px solid var(--line); border-radius:999px; background:var(--card);
  font-family:"Montserrat",sans-serif; font-weight:500; font-size:13px;
  letter-spacing:.04em; color:var(--soft); white-space:nowrap;
}

/* ---- a layout helper (optional) -------------------------------------------- */
.wrap{max-width:var(--maxw); margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter);}

/* ---- accessibility / motion ------------------------------------------------ */
:focus-visible{outline:2px solid var(--purple); outline-offset:3px; border-radius:3px;}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .rpt-head .hdr-grad{animation:none;}
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}