/* ============================================================
   WOXAL Insights
   A light, formal reading theme. Self-contained on purpose: these
   pages do not load /styles.css, so nothing from the dark homepage
   theme can leak in and nothing here can ever affect the homepage.
   The brand tokens below are copied from styles.css so the accents,
   the CTA card and the footer still match the main site exactly.
   ============================================================ */

:root{
  /* --- the site's dark palette, used only for the accents, the CTA and the footer --- */
  --bg:        #08060f;
  --bg-soft:   #0d0a18;
  --surface:   #131022;
  --purple:    #967ae6;
  --lavender:  #b9a6f0;
  --cream:     #f2eefc;
  --holo: linear-gradient(100deg, #b9a6f0, #967ae6 30%, #4bc4d4 62%, #e59433 100%);

  /* --- the paper theme --- */
  --paper:      #f6f5f1;   /* off-white sheet of graph paper */
  --grid:       rgba(26, 22, 38, .055);
  --sheet:      #ffffff;
  --ink:        #14121c;   /* near-black body text */
  --ink-soft:   #4e495c;
  --ink-faint:  #777186;
  --rule:       #e5e3ea;   /* thin grey lines */
  --rule-soft:  #efedf3;
  --tint:       #f4f1fc;   /* very light lavender, table header rows */

  --font-head: "Sora", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-word: "Josefin Sans", sans-serif;

  --pad: clamp(1.25rem, 4vw, 3.5rem);
  --s-1: .3rem;  --s-2: .5rem;  --s-3: .8rem;  --s-4: 1.1rem;
  --s-5: 1.5rem; --s-6: 2rem;   --s-7: 2.6rem; --s-8: 3.4rem;
  --nav-h: 4.5rem;
  --sy:       clamp(3.5rem, 7vw, 6rem);
  --sy-head:  clamp(2rem, 4vw, 3.25rem);
  --sy-card:  1.2rem;
  --sy-block: clamp(2.4rem, 5vw, 4rem);
  --ease-out: cubic-bezier(.22, 1, .36, 1);

  --sheet-w: 52rem;        /* the white sheet, a touch wider than the 68ch measure */
}

*, *::before, *::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body, h1, h2, h3, p, ol, ul, li, figure, blockquote{ margin:0; padding:0; }
ol, ul{ list-style:none; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

/* The graph paper. The grid is two hairline gradients, light enough that it
   reads as texture behind the sheet and never competes with text on it. */
body{
  min-height:100%;
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  background-color:var(--paper);
  background-image:
    linear-gradient(to right,  var(--grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
  background-size:26px 26px;
}

.container{
  width:min(1180px, 100%);
  margin-inline:auto;
  padding-inline:var(--pad);
}

:where(a, button):focus-visible{
  outline:2px solid var(--purple);
  outline-offset:3px;
  border-radius:3px;
}

/* ---------- light header ---------- */

.ins-nav{
  position:sticky;
  top:0;
  z-index:100;
  display:flex;
  align-items:center;
  gap:var(--s-7);
  padding:var(--s-4) var(--pad);
  background:rgba(246, 245, 241, .88);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--rule);
}

/* The wordmark and icon are the site's own PNGs used as masks, so the dark
   version costs no new asset: the mask stays, the fill colour changes. */
.ins-logo{
  display:flex;
  align-items:center;
  gap:.6rem;
  margin-right:auto;
}
.ins-logo-icon, .ins-logo-word{
  display:block;
  flex:none;
  background:var(--ink);
  transition:background .3s;
  -webkit-mask-repeat:no-repeat; -webkit-mask-position:center; -webkit-mask-size:contain;
  mask-repeat:no-repeat; mask-position:center; mask-size:contain;
}
.ins-logo-icon{
  height:28px; aspect-ratio:.835;
  -webkit-mask-image:url("/assets/brand/woxal-icon.png");
  mask-image:url("/assets/brand/woxal-icon.png");
}
.ins-logo-word{
  height:14px; aspect-ratio:6.919;
  -webkit-mask-image:url("/assets/brand/woxal-wordmark.png");
  mask-image:url("/assets/brand/woxal-wordmark.png");
}
.ins-logo:hover .ins-logo-icon, .ins-logo:hover .ins-logo-word{ background:var(--purple); }

.ins-nav-links{ display:flex; gap:2rem; }
.ins-nav-links a{
  position:relative;
  font-family:var(--font-head);
  font-size:.78rem;
  font-weight:500;
  letter-spacing:.02em;
  color:var(--ink-soft);
  transition:color .3s;
}
.ins-nav-links a::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-5px;
  height:1px;
  background:var(--ink);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .3s var(--ease-out);
}
.ins-nav-links a:hover{ color:var(--ink); }
.ins-nav-links a:hover::after{ transform:scaleX(1); transform-origin:left; }

.ins-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-head);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:.75rem 1.5rem;
  border-radius:100px;
  border:1px solid transparent;
  cursor:pointer;
  transition:background .3s, color .3s, border-color .3s, transform .3s var(--ease-out);
}
.ins-btn-dark{ background:var(--ink); color:#fff; }
.ins-btn-dark:hover{ background:var(--purple); transform:translateY(-1px); }
.ins-btn-light{ background:#fff; color:var(--ink); }
.ins-btn-light:hover{ background:var(--cream); transform:translateY(-1px); }
.ins-btn-ghost{ background:transparent; color:#fff; border-color:rgba(242,238,252,.32); }
.ins-btn-ghost:hover{ border-color:var(--cream); transform:translateY(-1px); }

.ins-burger{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:40px; height:40px;
  background:none; border:0; padding:0; cursor:pointer;
}
.ins-burger span{
  display:block;
  height:1.5px;
  width:22px;
  margin-inline:auto;
  background:var(--ink);
  transition:transform .3s var(--ease-out);
}
.ins-burger[aria-expanded="true"] span:first-child{ transform:translateY(3.25px) rotate(45deg); }
.ins-burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.25px) rotate(-45deg); }

.ins-menu{
  position:fixed;
  inset:0;
  z-index:90;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:var(--s-5);
  padding:var(--pad);
  background:var(--paper);
  opacity:0;
  visibility:hidden;
  transition:opacity .35s, visibility .35s;
}
.ins-menu.open{ opacity:1; visibility:visible; }
.ins-menu a{
  font-family:var(--font-head);
  font-size:1.6rem;
  font-weight:600;
  letter-spacing:-.01em;
  text-transform:uppercase;
  color:var(--ink);
  opacity:0;
  transform:translateY(8px);
  transition:opacity .4s var(--ease-out), transform .4s var(--ease-out), color .3s;
}
.ins-menu.open a{ opacity:1; transform:none; }
.ins-menu.open a:nth-child(1){ transition-delay:.05s; }
.ins-menu.open a:nth-child(2){ transition-delay:.1s; }
.ins-menu.open a:nth-child(3){ transition-delay:.15s; }
.ins-menu.open a:nth-child(4){ transition-delay:.2s; }
.ins-menu.open a:nth-child(5){ transition-delay:.25s; }
.ins-menu.open a:nth-child(6){ transition-delay:.3s; }
.ins-menu a:hover{ color:var(--purple); }

/* ---------- the sheet ---------- */

.ins-main{ padding-bottom:var(--sy); }

/* The article sits on a white sheet so the grid reads as the desk it lies on.
   On a phone the sheet runs edge to edge: a floating card with margins would
   waste the little width there is. */
.ins-sheet{
  width:min(var(--sheet-w), 100%);
  margin:var(--sy-head) auto 0;
  padding:var(--sy-head) clamp(1.25rem, 4vw, 3.5rem) var(--sy-block);
  background:var(--sheet);
  border:1px solid var(--rule-soft);
  border-radius:4px;
  box-shadow:
    0 1px 2px rgba(20,18,28,.04),
    0 8px 24px rgba(20,18,28,.06),
    0 24px 56px rgba(20,18,28,.05);
}

@media (max-width: 860px){
  .ins-sheet{
    width:100%;
    margin-top:0;
    border-radius:0;
    border-left:0; border-right:0;
    box-shadow:0 1px 2px rgba(20,18,28,.05);
  }
}

/* ---------- breadcrumb ---------- */

.ins-crumb{
  font-family:var(--font-head);
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin-bottom:var(--s-6);
}
.ins-crumb ol{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-2); }
.ins-crumb li + li::before{ content:"/"; margin-right:var(--s-2); opacity:.5; }
.ins-crumb a{ transition:color .3s; }
.ins-crumb a:hover{ color:var(--ink); }
.ins-crumb [aria-current]{ color:var(--ink-soft); }

/* ---------- article head ---------- */

.eyebrow{
  font-family:var(--font-head);
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--purple);
  margin-bottom:var(--s-5);
}

.ins-title{
  font-family:var(--font-head);
  font-size:clamp(1.85rem, 4.2vw, 2.75rem);
  font-weight:600;
  line-height:1.12;
  letter-spacing:-.022em;
  color:var(--ink);
  text-wrap:balance;
  margin-bottom:var(--s-5);
}

/* The one place the holo gradient appears above the fold. On paper the light
   end of the gradient would disappear, so the keyword uses the darker mix. */
.holo{
  font-style:normal;
  background:linear-gradient(100deg, #6d4fd0, #5a3fc4 28%, #0f8fa0 64%, #b4700f 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.ins-dek{
  font-size:clamp(1.05rem, 2.1vw, 1.3rem);
  font-weight:400;
  line-height:1.5;
  color:var(--ink-soft);
  text-wrap:pretty;
  margin-bottom:var(--s-6);
}

.ins-byline{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--s-2);
  font-family:var(--font-head);
  font-size:.74rem;
  font-weight:400;
  letter-spacing:.04em;
  color:var(--ink-faint);
  padding-bottom:var(--s-6);
  border-bottom:1px solid var(--rule);
}
.ins-byline b{ color:var(--ink-soft); font-weight:600; }
.ins-byline span[aria-hidden]{ opacity:.55; }

/* ---------- body ---------- */

.ins-body{
  padding-top:var(--sy-head);
  font-size:18px;
  line-height:1.68;
  color:var(--ink);
}
.ins-body > * + *{ margin-top:var(--s-5); }

.ins-body h2{
  font-family:var(--font-head);
  font-size:clamp(1.3rem, 2.6vw, 1.65rem);
  font-weight:600;
  line-height:1.25;
  letter-spacing:-.012em;
  color:var(--ink);
  text-wrap:balance;
  margin-top:var(--sy-block);
}
.ins-body h3{
  font-family:var(--font-head);
  font-size:1.08rem;
  font-weight:600;
  margin-top:var(--s-7);
}
.ins-body p{ text-wrap:pretty; }
.ins-body b, .ins-body strong{ font-weight:600; color:var(--ink); }

.ins-body a{
  color:#5a3fc4;
  text-decoration:underline;
  text-decoration-color:rgba(90,63,196,.35);
  text-underline-offset:.17em;
  text-decoration-thickness:1px;
  transition:color .3s, text-decoration-color .3s;
}
.ins-body a:hover{ color:var(--ink); text-decoration-color:var(--ink); }

.ins-body ol, .ins-body ul{
  padding-left:1.3rem;
  display:flex;
  flex-direction:column;
  gap:var(--s-3);
  list-style:revert;
}
.ins-body li{ padding-left:var(--s-2); }
.ins-body li::marker{ color:var(--purple); font-weight:600; }

/* ---------- tables ---------- */

/* White, thin grey lines, a light lavender header row. The wrapper is what
   scrolls on a narrow screen, never the page; tabindex makes that scroll
   region reachable from the keyboard. */
.ins-table{
  margin-top:var(--s-6);
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  background:var(--sheet);
  border:1px solid var(--rule);
  border-radius:6px;
}
.ins-table:focus-visible{ outline:2px solid var(--purple); outline-offset:2px; }
.ins-table table{
  width:100%;
  min-width:30rem;
  border-collapse:collapse;
  font-size:.94rem;
  line-height:1.5;
}
.ins-table th, .ins-table td{
  padding:var(--s-4) var(--s-5);
  text-align:left;
  vertical-align:top;
  border-bottom:1px solid var(--rule-soft);
  border-right:1px solid var(--rule-soft);
}
.ins-table th:last-child, .ins-table td:last-child{ border-right:0; }
.ins-table thead th{
  font-family:var(--font-head);
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#473a6b;
  background:var(--tint);
  border-bottom:1px solid var(--rule);
  white-space:nowrap;
}
.ins-table tbody th{
  font-family:var(--font-body);
  font-size:.94rem;
  font-weight:600;
  color:var(--ink);
}
.ins-table td{ color:var(--ink-soft); }
.ins-table tbody tr:last-child th, .ins-table tbody tr:last-child td{ border-bottom:0; }
.ins-table tbody tr{ transition:background .2s; }
.ins-table tbody tr:hover{ background:#faf9fd; }
.ins-table td b, .ins-table th b{ color:var(--ink); }
.ins-table .ins-corner{ background:var(--tint); }

/* Four columns or more is cramped in the sheet, so on a wide screen the table
   steps out into the margin. The sheet's padding leaves room for it. */
@media (min-width: 1100px){
  .ins-table--wide{
    width:calc(100% + 11rem);
    margin-inline:-5.5rem;
  }
}

/* ---------- formula card ---------- */

/* Gradient border with no extra element: the holo fills the border box and a
   solid padding box covers everything inside it, so only the 1px edge shows. */
.ins-formula{
  margin-top:var(--s-6);
  padding:var(--s-6) var(--s-5);
  border-radius:10px;
  text-align:center;
  border:1px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    var(--holo) border-box;
}
.ins-formula p{
  font-family:var(--font-head);
  font-size:clamp(1rem, 2.4vw, 1.3rem);
  font-weight:500;
  line-height:1.4;
  letter-spacing:-.01em;
  color:var(--ink);
  text-wrap:balance;
}
.ins-formula-label{
  display:block;
  font-size:.64rem;
  font-weight:700;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:#5a3fc4;
  margin-bottom:var(--s-3);
}

/* ---------- takeaway ---------- */

.ins-takeaway{
  margin-top:var(--sy-block);
  padding:var(--s-6);
  border-radius:10px;
  border:1px solid var(--rule);
  background:#fbfaff;
}
.ins-takeaway-label{
  display:block;
  font-family:var(--font-head);
  font-size:.64rem;
  font-weight:700;
  letter-spacing:.26em;
  text-transform:uppercase;
  margin-bottom:var(--s-3);
  background:var(--holo);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  width:fit-content;
}
.ins-takeaway p{ font-size:1.02rem; line-height:1.6; color:var(--ink); }

/* ---------- pull quote ---------- */

.ins-quote{
  margin-top:var(--s-6);
  padding-left:var(--s-5);
  border-left:2px solid var(--purple);
  font-size:1.12rem;
  font-weight:400;
  font-style:italic;
  line-height:1.55;
  color:var(--ink-soft);
}

/* ---------- CTA: the dark bridge back to the site ---------- */

.ins-cta{
  width:min(var(--sheet-w), 100%);
  margin:var(--sy) auto 0;
  padding:var(--sy-head) var(--pad);
  border-radius:16px;
  text-align:center;
  color:var(--cream);
  background:
    radial-gradient(120% 150% at 50% 0%, rgba(150,122,230,.22), transparent 62%),
    var(--bg);
  box-shadow:0 18px 46px rgba(20,18,28,.14);
}
.ins-cta h2{
  font-family:var(--font-head);
  font-size:clamp(1.3rem, 3vw, 1.85rem);
  font-weight:600;
  line-height:1.2;
  letter-spacing:-.01em;
  max-width:24ch;
  margin-inline:auto;
  text-wrap:balance;
  color:#fff;
}
.ins-cta p{
  margin-top:var(--s-5);
  max-width:54ch;
  margin-inline:auto;
  font-size:1rem;
  line-height:1.6;
  color:rgba(242,238,252,.72);
}
.ins-cta .ins-btn{ margin-top:var(--s-6); }

@media (max-width: 860px){
  .ins-cta{ border-radius:0; }
}

/* ---------- keep reading ---------- */

.ins-more{ padding-top:var(--sy); }
.ins-more h2{
  font-family:var(--font-head);
  font-size:.74rem;
  font-weight:600;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin-bottom:var(--sy-card);
}

.ins-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(15.5rem, 1fr));
  gap:var(--sy-card);
}

.ins-card{
  display:flex;
  flex-direction:column;
  gap:var(--s-3);
  padding:var(--s-6);
  border-radius:8px;
  border:1px solid var(--rule);
  background:var(--sheet);
  box-shadow:0 1px 2px rgba(20,18,28,.03);
  transition:border-color .3s, box-shadow .3s var(--ease-out), transform .3s var(--ease-out);
}
.ins-card:hover{
  border-color:#d6d2e2;
  box-shadow:0 6px 20px rgba(20,18,28,.08);
  transform:translateY(-2px);
}
.ins-card h3{
  font-family:var(--font-head);
  font-size:1.02rem;
  font-weight:600;
  line-height:1.32;
  letter-spacing:-.01em;
  color:var(--ink);
  text-wrap:balance;
}
.ins-card p{ font-size:.9rem; line-height:1.55; color:var(--ink-soft); }
.ins-card-meta{
  margin-top:auto;
  padding-top:var(--s-3);
  font-family:var(--font-head);
  font-size:.64rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-faint);
}

/* ---------- hub ---------- */

.ins-hub-head{ padding-block:var(--sy-head) var(--sy-head); }
.ins-hub-head h1{
  font-family:var(--font-head);
  font-size:clamp(1.95rem, 4.4vw, 3.1rem);
  font-weight:600;
  line-height:1.1;
  letter-spacing:-.022em;
  text-transform:uppercase;
  max-width:20ch;
  text-wrap:balance;
  color:var(--ink);
}
.ins-lede{
  margin-top:var(--s-5);
  max-width:54ch;
  font-size:clamp(1rem, 2vw, 1.12rem);
  font-weight:400;
  line-height:1.6;
  color:var(--ink-soft);
  text-wrap:pretty;
}

.ins-group{ padding-bottom:var(--sy-block); }
.ins-group-title{
  display:flex;
  align-items:center;
  gap:var(--s-4);
  font-family:var(--font-head);
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--purple);
  margin-bottom:var(--sy-card);
}
.ins-group-title::after{ content:""; flex:1; height:1px; background:var(--rule); }

/* ---------- footer ---------- */

/* Dark, like the main site, so the CTA and the footer together read as the
   handover from the reading page back to woxalagency.com. */
.ins-footer{
  margin-top:var(--sy);
  padding-block:var(--s-7);
  background:var(--bg);
  color:rgba(242,238,252,.62);
}
.ins-footer-social{ display:flex; gap:var(--s-4); margin-bottom:var(--s-6); }
.ins-footer-social a{
  display:grid;
  place-items:center;
  width:38px; height:38px;
  border:1px solid rgba(185,166,240,.2);
  border-radius:50%;
  color:rgba(242,238,252,.62);
  transition:color .3s, border-color .3s;
}
.ins-footer-social a:hover{ color:var(--cream); border-color:var(--lavender); }
.ins-footer-social svg{
  width:18px; height:18px;
  fill:none; stroke:currentColor; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
}
.ins-footer-social .icon-dot{ fill:currentColor; stroke:none; }
.ins-footer-bar{
  display:flex;
  flex-wrap:wrap;
  gap:var(--s-4);
  align-items:center;
  justify-content:space-between;
  padding-top:var(--s-5);
  border-top:1px solid rgba(185,166,240,.1);
  font-size:.85rem;
}
.ins-footer-bar a{ transition:color .3s; }
.ins-footer-bar a:hover{ color:var(--lavender); }
.ins-footer-icon{
  display:block;
  height:22px; aspect-ratio:.835;
  opacity:.65;
  background:var(--purple);
  -webkit-mask-image:url("/assets/brand/woxal-icon.png");
  mask-image:url("/assets/brand/woxal-icon.png");
  -webkit-mask-repeat:no-repeat; -webkit-mask-position:center; -webkit-mask-size:contain;
  mask-repeat:no-repeat; mask-position:center; mask-size:contain;
}

/* ---------- 404 ---------- */

.ins-404{
  min-height:60vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding-block:var(--sy);
}
.ins-404 h1{
  font-family:var(--font-head);
  font-size:clamp(1.8rem, 4.2vw, 2.75rem);
  font-weight:600;
  line-height:1.12;
  letter-spacing:-.022em;
  text-wrap:balance;
}
.ins-404 p{
  margin-top:var(--s-5);
  max-width:44ch;
  font-size:1.05rem;
  line-height:1.6;
  color:var(--ink-soft);
}
.ins-404-actions{
  margin-top:var(--s-7);
  display:flex;
  flex-wrap:wrap;
  gap:var(--s-4);
  justify-content:center;
}
.ins-404-actions .ins-btn-light{
  background:#fff;
  border-color:var(--rule);
  color:var(--ink);
}
.ins-404-actions .ins-btn-ghost{
  color:var(--ink);
  border-color:#cfcad9;
}
.ins-404-actions .ins-btn-ghost:hover{ border-color:var(--ink); }

/* ---------- narrow screens ---------- */

@media (max-width: 900px){
  .ins-nav-links, .ins-nav .ins-btn{ display:none; }
  .ins-burger{ display:flex; }
}

@media (max-width: 760px){
  .ins-body{ font-size:17px; }
  .ins-table th, .ins-table td{ padding:var(--s-3) var(--s-4); }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation:none !important; transition:none !important; }
  .ins-card:hover{ transform:none; }
}