/* ========================================================================
   STRATENITY DESIGN SYSTEM v1.0
   Extracted verbatim from Stratenity.com/index.html (2026-05-15)
   Owner: Kai (CTO)
   Use: every page across Stratenity.com pulls from this single file.
   Distinct from the dark "workspace dashboard" pattern used for in-app surfaces.
   ======================================================================== */

/* ---- 1. RESET + DOC BASE ---- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:#2A2C36;
  font-family:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
::selection{background:rgba(102,204,197,.35);color:#1A1F3A}

/* ---- 2. COLOR TOKENS ---- */
:root{
  --navy:#2F3C7E;
  --navy-deep:#232D5F;
  --navy-ink:#1A1F3A;
  --teal:#66CCC5;
  --teal-deep:#3FA89F;
  --lav:#A191FF;
  --lav-deep:#7D6BE8;
  --char:#3A3A3A;
  --slate:#6B6E80;
  --slate-deep:#4F5470;
  --rule:#E0E2EA;
  --rule-soft:#ECEDF2;
  --bg:#FAFAFB;
  --bg-soft:#F4F5F8;
  --bg-card:#FFFFFF;
  --shadow-card:0 1px 0 rgba(26,31,58,.04),0 16px 50px -20px rgba(26,31,58,.10);
  --shadow-lift:0 24px 70px -34px rgba(26,31,58,.28);
}

/* ---- 3. LAYOUT PRIMITIVES ---- */
a{color:inherit}
.skip-link{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:16px;top:16px;width:auto;height:auto;padding:.8rem 1rem;background:#fff;border:1px solid var(--rule);border-radius:999px;z-index:9999}
.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 clamp(20px,5vw,56px)}
.wrap-narrow{width:100%;max-width:900px;margin:0 auto;padding:0 clamp(20px,5vw,56px)}
section{padding:clamp(78px,11vw,150px) 0;position:relative}

/* ---- 4. TYPOGRAPHY ---- */
h1,h2,h3,h4{
  font-family:'Fraunces',Georgia,'Times New Roman',serif;
  color:var(--navy-ink);
  font-weight:400;
  letter-spacing:-.018em;
  margin:0 0 .4em;
  line-height:1.05;
}
h1{font-size:clamp(2.8rem,7.5vw,5.8rem);font-weight:300;letter-spacing:-.03em;line-height:1}
h2{font-size:clamp(2rem,4.6vw,3.3rem);font-weight:300;letter-spacing:-.022em;line-height:1.08}
h3{font-size:clamp(1.28rem,2.6vw,1.72rem);font-weight:500;letter-spacing:-.012em}
h4{font-size:1.08rem;font-weight:500;color:var(--navy-deep)}
p{margin:0 0 1em}
em{font-family:'Fraunces',Georgia,serif;font-style:italic;color:var(--lav-deep);font-weight:400}

.eyebrow{
  font-family:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
  font-size:.72rem;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.20em;
  color:var(--teal-deep);
  margin:0 0 1.6em;
  display:inline-flex;
  align-items:center;
  gap:.7em;
}
.eyebrow::before{content:'';width:1.6em;height:1px;background:var(--teal-deep)}

.lede{
  font-family:'Fraunces',Georgia,serif;
  font-size:clamp(1.16rem,2.3vw,1.48rem);
  line-height:1.5;
  color:var(--char);
  font-weight:400;
  max-width:39em;
}
.small-copy{font-size:.95rem;color:var(--slate);line-height:1.65}
.label-mono{
  font-family:'IBM Plex Mono',monospace;
  font-size:.66rem;
  color:var(--teal-deep);
  text-transform:uppercase;
  letter-spacing:.17em;
  font-weight:500;
  display:inline-block;
}

/* ---- 5. BUTTONS ---- */
.btn-row{display:flex;flex-wrap:wrap;gap:.85rem;align-items:center;margin-top:2rem}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  border-radius:999px;
  padding:.82rem 1.25rem;
  font-family:'IBM Plex Sans',system-ui,sans-serif;
  font-size:.92rem;
  font-weight:600;
  text-decoration:none;
  border:1px solid transparent;
  transition:transform 180ms,background 180ms,color 180ms,border-color 180ms,box-shadow 180ms;
  cursor:pointer;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--navy);color:#fff;box-shadow:0 16px 34px -22px rgba(47,60,126,.8)}
.btn-primary:hover{background:var(--navy-deep);color:#fff}
.btn-secondary{background:#fff;color:var(--navy);border-color:var(--rule);box-shadow:var(--shadow-card)}
.btn-secondary:hover{border-color:var(--teal);color:var(--navy-deep)}
.btn-ghost{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.18)}
.btn-ghost:hover{background:rgba(255,255,255,.14)}

/* ---- 6. SITE HEADER + NAV ---- */
.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(250,250,251,.88);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--rule-soft);
  padding-top:env(safe-area-inset-top);
}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:66px;gap:1rem}
.wordmark{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  font-family:'Fraunces',Georgia,serif;
  font-size:1.35rem;
  font-weight:500;
  color:var(--navy-ink);
  letter-spacing:-.015em;
  text-decoration:none;
  white-space:nowrap;
}
.wordmark img{width:30px;height:30px;border-radius:7px;object-fit:cover}
.wordmark .accent{color:var(--teal-deep);font-style:italic;font-weight:400}
.site-nav{display:flex;align-items:center;gap:1.2rem;font-size:.86rem}
.site-nav a{color:var(--slate);text-decoration:none;transition:color 160ms}
.site-nav a:hover{color:var(--navy)}
.nav-dd{position:relative}
.nav-dd button{appearance:none;background:transparent;border:0;color:var(--slate);cursor:pointer;font:inherit;display:inline-flex;gap:.35rem;align-items:center;padding:.45rem .1rem}
.nav-dd button:hover{color:var(--navy)}
.dd-menu{position:absolute;right:0;top:calc(100% + 12px);min-width:230px;background:#fff;border:1px solid var(--rule);border-radius:10px;box-shadow:var(--shadow-lift);padding:.45rem;display:none}
.dd-menu.open{display:block}
.dd-menu a{display:block;padding:.72rem .8rem;border-radius:7px;color:var(--char)}
.dd-menu a:hover{background:var(--bg-soft);color:var(--navy)}
.cta-link{background:var(--navy);color:#fff!important;padding:.55em 1.05em;border-radius:999px;font-weight:500}
.cta-link:hover{background:var(--navy-deep);color:#fff!important}
@media(max-width:820px){.site-nav .hide-sm{display:none}.site-nav{gap:.7rem}}
@media(max-width:560px){.wordmark span.label{display:none}.site-header .wrap{height:62px}}

/* ---- 7. HERO ---- */
.hero{padding:clamp(82px,14vw,190px) 0 clamp(58px,9vw,120px);overflow:hidden;position:relative}
.hero::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(1200px 600px at 110% -10%,rgba(102,204,197,.11),transparent 60%),
    radial-gradient(1000px 480px at -10% 28%,rgba(161,145,255,.09),transparent 65%);
  pointer-events:none;
}
.hero .wrap-narrow{position:relative;z-index:1}
.hero h1{max-width:15.5ch;margin-bottom:.45em}
.hero h1 em{color:var(--teal-deep);font-weight:200}

/* ---- 8. INFO-CARD GRID ---- */
.card-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1.15rem}
.card-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.15rem}
.card-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.15rem}
.info-card{
  background:#fff;
  border:1px solid var(--rule);
  border-radius:8px;
  padding:1.8rem 1.8rem 1.6rem;
  box-shadow:var(--shadow-card);
  transition:border-color 200ms,transform 200ms,box-shadow 200ms;
  text-decoration:none;
  color:inherit;
  display:block;
}
.info-card:hover{border-color:var(--teal);transform:translateY(-2px);box-shadow:var(--shadow-lift)}
.info-card .num{
  font-family:'IBM Plex Mono',monospace;
  font-size:.66rem;
  color:var(--teal-deep);
  text-transform:uppercase;
  letter-spacing:.17em;
  margin-bottom:.9em;
  display:block;
  font-weight:500;
}
.info-card h3{font-size:1.28rem;margin-bottom:.55em}
.info-card p{color:var(--slate);font-size:.94rem;line-height:1.65;margin:0}
@media(max-width:980px){.card-grid-3,.card-grid-4{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.card-grid-2,.card-grid-3,.card-grid-4{grid-template-columns:1fr}}

/* ---- 9. STAT PILL ROW ---- */
.stats-row{margin-top:2.4rem;display:flex;flex-wrap:wrap;gap:.65rem}
.stat-pill{
  border:1px solid var(--rule);
  background:#fff;
  border-radius:999px;
  padding:.62rem .9rem;
  font-family:'IBM Plex Mono',monospace;
  font-size:.7rem;
  color:var(--slate-deep);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.stat-pill strong{color:var(--navy-ink);font-weight:500}

/* ---- 10. FOOTER ---- */
footer{
  background:var(--navy-ink);
  border-top:1px solid rgba(255,255,255,.08);
  padding:3.4rem 0 calc(3.4rem + env(safe-area-inset-bottom));
  color:rgba(229,231,240,.7);
}
.footer-grid{display:grid;grid-template-columns:1.4fr repeat(5,1fr);gap:2rem}
.foot-mark{font-family:'Fraunces',Georgia,serif;font-size:1.2rem;color:#fff;font-weight:500}
.foot-mark .accent{color:var(--teal);font-style:italic;font-weight:400}
footer p{font-size:.86rem;color:rgba(229,231,240,.65);line-height:1.6}
footer h4{font-family:'IBM Plex Mono',monospace;font-size:.7rem;color:rgba(229,231,240,.85);text-transform:uppercase;letter-spacing:.14em;margin:0 0 1rem}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin:.55rem 0}
footer a{color:rgba(229,231,240,.58);text-decoration:none;font-size:.86rem}
footer a:hover{color:var(--teal)}
.foot-bottom{
  margin-top:2.6rem;padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.08);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-family:'IBM Plex Mono',monospace;font-size:.68rem;color:rgba(229,231,240,.48);
  text-transform:uppercase;letter-spacing:.12em;
}
@media(max-width:1060px){.footer-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:680px){.footer-grid{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}}
@media(max-width:460px){.footer-grid{grid-template-columns:1fr}}

/* ---- 11. ACCESSIBILITY ---- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ========================================================================
   12. LIBRARY-SPECIFIC ADDITIONS (Kai, v0 — for the subscription product)
   ======================================================================== */

/* ---- Library category card (grid tile) ---- */
.library-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.15rem;
  margin-top:2.8rem;
}
@media(max-width:980px){.library-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.library-grid{grid-template-columns:1fr}}

.lib-card{
  background:#fff;
  border:1px solid var(--rule);
  border-radius:10px;
  padding:1.7rem 1.7rem 1.5rem;
  box-shadow:var(--shadow-card);
  transition:border-color 200ms,transform 200ms,box-shadow 200ms;
  text-decoration:none;
  color:inherit;
  display:flex;
  flex-direction:column;
  min-height:200px;
}
.lib-card:hover{border-color:var(--teal);transform:translateY(-2px);box-shadow:var(--shadow-lift)}
.lib-card .cat-num{
  font-family:'IBM Plex Mono',monospace;
  font-size:.66rem;
  color:var(--teal-deep);
  text-transform:uppercase;
  letter-spacing:.17em;
  margin-bottom:.9em;
  display:flex;
  justify-content:space-between;
  font-weight:500;
}
.lib-card .cat-num .count{color:var(--slate);font-weight:400}
.lib-card h3{font-size:1.22rem;margin-bottom:.45em;color:var(--navy-ink)}
.lib-card p{color:var(--slate);font-size:.92rem;line-height:1.6;margin:0 0 1em;flex:1}
.lib-card .arrow{
  font-family:'Fraunces',Georgia,serif;
  font-style:italic;
  color:var(--lav-deep);
  font-size:.9rem;
}

/* ---- Featured row (full-width hero card on library landing) ---- */
.featured-card{
  background:linear-gradient(135deg,#fff 0%,rgba(102,204,197,.06) 100%);
  border:1px solid var(--rule);
  border-radius:12px;
  padding:clamp(2rem,4vw,3rem);
  box-shadow:var(--shadow-card);
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:2.5rem;
  align-items:center;
  margin-bottom:2.5rem;
}
@media(max-width:820px){.featured-card{grid-template-columns:1fr;gap:1.6rem}}
.featured-card .featured-meta{
  font-family:'IBM Plex Mono',monospace;
  font-size:.66rem;
  color:var(--teal-deep);
  text-transform:uppercase;
  letter-spacing:.17em;
  margin-bottom:.9em;
  font-weight:500;
}
.featured-card h2{font-size:clamp(1.55rem,2.8vw,2.1rem);font-weight:500;margin-bottom:.6em}
.featured-card p{color:var(--slate);font-size:1rem;line-height:1.65;margin:0 0 1.2em}

/* ---- Trial banner (sticky bar above header for trialing users) ---- */
.trial-banner{
  background:var(--navy-ink);
  color:#fff;
  font-family:'IBM Plex Mono',monospace;
  font-size:.74rem;
  text-transform:uppercase;
  letter-spacing:.14em;
  padding:.7rem 1rem;
  text-align:center;
}
.trial-banner strong{color:var(--teal)}
.trial-banner a{color:var(--teal);text-decoration:underline;text-underline-offset:3px}

/* ---- Article header (individual article page) ---- */
.article-head{
  padding:clamp(60px,9vw,110px) 0 clamp(40px,6vw,60px);
  border-bottom:1px solid var(--rule-soft);
}
.article-meta{
  display:flex;flex-wrap:wrap;gap:1.4rem;align-items:center;
  margin-bottom:1.4em;
  font-family:'IBM Plex Mono',monospace;
  font-size:.66rem;text-transform:uppercase;letter-spacing:.16em;color:var(--slate);
}
.article-meta .category{color:var(--teal-deep);font-weight:500}
.article-meta .dot{color:var(--rule);margin:0 -.4rem}
.article-head h1{font-size:clamp(2.2rem,4.8vw,3.8rem);font-weight:300;letter-spacing:-.028em;line-height:1.05;max-width:22ch;margin-bottom:.4em}
.article-head .article-lede{
  font-family:'Fraunces',Georgia,serif;
  font-size:clamp(1.16rem,2.2vw,1.4rem);
  line-height:1.5;
  color:var(--char);
  max-width:36em;
  margin:0 0 1.4em;
  font-weight:400;
}
.article-head .author-strip{
  display:flex;flex-wrap:wrap;gap:1.2rem;align-items:center;
  padding-top:1.4em;border-top:1px solid var(--rule-soft);
  font-size:.88rem;color:var(--slate);
}
.article-head .author-strip strong{color:var(--navy-ink);font-weight:600}

/* ---- Article body (the actual content) ---- */
.article-body{
  max-width:680px;margin:0 auto;
  padding:clamp(40px,6vw,70px) clamp(20px,5vw,56px) clamp(80px,10vw,120px);
  font-family:'IBM Plex Sans',system-ui,sans-serif;
  font-size:1.07rem;line-height:1.78;color:var(--char);
}
.article-body h2{font-size:clamp(1.55rem,3vw,2rem);font-weight:400;margin:2.2em 0 .7em;color:var(--navy-ink)}
.article-body h3{font-size:1.32rem;font-weight:500;margin:1.8em 0 .55em;color:var(--navy-ink)}
.article-body p{margin:0 0 1.2em}
.article-body blockquote{
  border-left:2px solid var(--teal-deep);
  padding:.4em 0 .4em 1.5em;
  margin:1.8em 0;
  font-family:'Fraunces',Georgia,serif;
  font-style:italic;
  font-size:1.15rem;
  color:var(--navy-ink);
}
.article-body ul,.article-body ol{margin:0 0 1.4em;padding-left:1.4em}
.article-body li{margin:.5em 0}
.article-body a{color:var(--lav-deep);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.article-body code{
  font-family:'IBM Plex Mono',monospace;
  background:var(--bg-soft);padding:.1em .35em;border-radius:4px;
  font-size:.92em;
}

/* ---- Paywall gate (overlays article body when trial expired / not subscribed) ---- */
.paywall-gate{
  position:relative;
  max-width:680px;margin:0 auto;padding:0 clamp(20px,5vw,56px);
}
.paywall-fade{
  position:absolute;left:0;right:0;top:-160px;height:160px;
  background:linear-gradient(180deg,transparent,var(--bg) 90%);
  pointer-events:none;
}
.paywall-card{
  background:#fff;
  border:1px solid var(--rule);
  border-radius:12px;
  padding:clamp(2rem,4vw,2.8rem);
  box-shadow:var(--shadow-lift);
  text-align:center;
  margin-bottom:clamp(80px,10vw,120px);
}
.paywall-card .eyebrow{margin:0 auto 1em;justify-content:center}
.paywall-card h3{font-size:clamp(1.4rem,2.5vw,1.85rem);font-weight:400;margin:0 0 .5em;color:var(--navy-ink)}
.paywall-card h3 em{color:var(--teal-deep)}
.paywall-card p{color:var(--slate);font-size:1rem;line-height:1.65;margin:0 auto 1.4em;max-width:40em}
.paywall-card .price-line{
  font-family:'Fraunces',Georgia,serif;font-style:italic;
  color:var(--navy-ink);font-size:1.1rem;
  margin:0 0 1.6em;
}
.paywall-card .price-line strong{font-style:normal;font-weight:500;color:var(--navy-ink)}
.paywall-card .price-line .teal{color:var(--teal-deep);font-weight:500;font-style:normal}
.paywall-card .btn-row{justify-content:center;margin-top:1.4em}
.paywall-card .small-print{
  font-family:'IBM Plex Mono',monospace;font-size:.66rem;
  text-transform:uppercase;letter-spacing:.13em;color:var(--slate);
  margin-top:1.6em;
}

/* ---- Anti-download soft deterrents ---- */
.article-body,.article-body *{
  -webkit-user-select:text;user-select:text;
}
.article-body img,.article-body figure{
  pointer-events:none;
  -webkit-user-drag:none;user-drag:none;
}
/* Right-click guard applied via JS; CSS hides only print-disabled save UI */
.no-download{
  -webkit-touch-callout:none;
}

/* ---- Print stylesheet (loaded via separate print.css for clarity) ---- */
@media print{
  /* see print.css for full spec */
}