/* =========================================================================
   TAPESTRLY — Computational Textile Design System
   "Weave your data into living tapestries of insight."

   A bespoke visual language built on the Jacquard loom: warp & weft,
   selvage edges, running stitches, punch cards, and natural-dye colour.
   Nothing here is borrowed from the usual AI-SaaS template.
   ========================================================================= */

/* ------------------------------------------------------------------ Tokens */
:root {
  /* Natural-dye palette — warm, earthy, saturated (not neon) */
  --vat:        #100e1b;   /* indigo-black dye vat (dark ground) */
  --vat-2:      #181527;   /* raised dark surface */
  --vat-3:      #211d33;   /* card on dark */
  --linen:      #f4eee2;   /* raw linen (light ground) */
  --linen-2:    #ece3d2;   /* woven linen, slightly deeper */
  --linen-3:    #e1d5bf;   /* selvage / hairlines on light */

  --madder:     #e0533d;   /* madder root red — the hot accent */
  --madder-deep:#c23c2a;
  --weld:       #eab43c;   /* weld / weld-yellow gold */
  --woad:       #3f6cd8;   /* woad blue */
  --verdigris:  #18a08f;   /* verdigris teal-green */
  --indigo:     #6f4be4;   /* indigo-violet */
  --rose:       #d96a8e;   /* a soft contrast thread */

  /* Text */
  --ink:        #15121f;   /* on linen */
  --ink-soft:   #5f5870;   /* muted on linen */
  --ink-faint:  #9b93a8;   /* faint on linen */
  --thread:     #f4eee2;   /* on vat */
  --thread-soft:#b6aecb;   /* muted on vat */
  --thread-faint:#7d7595;

  /* Brand gradient threads */
  --dye-1: linear-gradient(115deg, var(--madder), var(--weld));
  --dye-2: linear-gradient(115deg, var(--indigo), var(--woad));
  --dye-3: linear-gradient(115deg, var(--verdigris), var(--woad));
  --dye-warm: linear-gradient(120deg, #ff6a4d, #eab43c 55%, #f0c969);

  /* Type */
  --serif: "Fraunces", "Hoefler Text", Georgia, "Times New Roman", serif;
  --sans:  "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:  "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Spatial rhythm */
  --gut: clamp(1.1rem, 3.5vw, 2.2rem);
  --rad: 14px;
  --rad-lg: 26px;
  --maxw: 1240px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* Elevation — soft, warm, like cloth shadow */
  --lift-1: 0 1px 0 rgba(255,255,255,.5) inset, 0 10px 30px -18px rgba(30,20,10,.55);
  --lift-2: 0 1px 0 rgba(255,255,255,.5) inset, 0 30px 60px -28px rgba(30,20,10,.5);
  --lift-dark: 0 1px 0 rgba(255,255,255,.06) inset, 0 30px 70px -30px rgba(0,0,0,.7);

  color-scheme: light;
}

/* ------------------------------------------------------------------- Reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--sans);
  background: var(--linen);
  color: var(--ink);
  line-height: 1.6;
  font-size: clamp(1rem, .55vw + .9rem, 1.075rem);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  /* faint woven-linen texture so the page never feels flat & sterile */
  background-image:
    repeating-linear-gradient(90deg, rgba(20,15,8,.022) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg,  rgba(20,15,8,.022) 0 1px, transparent 1px 3px);
  background-size: 3px 3px;
}

img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
ul { list-style: none; padding: 0; }
input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--woad); outline-offset: 3px; border-radius: 4px; }

/* ----------------------------------------------------------------- Type */
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.02; letter-spacing: -.02em; }
.serif { font-family: var(--serif); }
.mono  { font-family: var(--mono); }

/* The kicker / eyebrow — a "punch-card" data label */
.kicker {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--madder);
  display: inline-flex;
  align-items: center;
  gap: .7em;
}
.kicker::before {
  content: "";
  width: 30px; height: 9px;
  /* a tiny punch-card row */
  background-image: radial-gradient(circle at 3px 50%, currentColor 1.6px, transparent 2px);
  background-size: 7px 9px;
  background-repeat: repeat-x;
  opacity: .9;
}
.kicker.on-dark { color: var(--weld); }

.display {
  font-size: clamp(2.7rem, 7.5vw, 6.2rem);
  line-height: .96;
  letter-spacing: -.035em;
}
.h2 { font-size: clamp(2rem, 4.4vw, 3.5rem); }
.h3 { font-size: clamp(1.4rem, 2.4vw, 2rem); }
.lead {
  font-size: clamp(1.12rem, 1.4vw, 1.4rem);
  line-height: 1.5;
  color: var(--ink-soft);
  font-weight: 420;
}
.measure { max-width: 60ch; }
.measure-sm { max-width: 46ch; }

/* Fraunces optical wonk — gives the serif a hand-crafted, woven warmth */
.display, .h2 { font-variation-settings: "opsz" 120, "SOFT" 40, "WONK" 1; }

/* Dye-gradient text */
.dye-text {
  background: var(--dye-warm);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.italic-accent { font-style: italic; font-variation-settings: "opsz" 120, "SOFT" 60, "WONK" 1; }

/* ---------------------------------------------------------------- Layout */
.wrap { width: min(100% - 2*var(--gut), var(--maxw)); margin-inline: auto; }
.wrap-wide { width: min(100% - 2*var(--gut), 1440px); margin-inline: auto; }
.section { padding-block: clamp(4rem, 9vw, 8.5rem); position: relative; }
.section-sm { padding-block: clamp(3rem, 6vw, 5rem); }
.stack > * + * { margin-top: 1.1rem; }
.stack-lg > * + * { margin-top: 1.8rem; }
.cols { display: grid; gap: clamp(1.4rem, 3vw, 2.6rem); }
@media (min-width: 760px){ .cols-2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 860px){ .cols-3 { grid-template-columns: repeat(3,1fr); } }
@media (min-width: 980px){ .cols-4 { grid-template-columns: repeat(4,1fr); } }
.center { text-align: center; }
.center.wrap { display: flex; flex-direction: column; align-items: center; }

/* Dark "vat" sections */
.on-vat { background: var(--vat); color: var(--thread); }
.on-vat h1,.on-vat h2,.on-vat h3 { color: var(--linen); }
.on-vat .lead { color: var(--thread-soft); }
.on-vat .ink-soft { color: var(--thread-soft); }
.ink-soft { color: var(--ink-soft); }

/* ------------------------------------------------ Selvage — woven edges */
/* The frayed/looped edge of fabric, used as a section divider. */
.selvage { position: relative; height: 26px; overflow: hidden; }
.selvage::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 11px 0, currentColor 7px, transparent 8px);
  background-size: 22px 26px;
  background-repeat: repeat-x;
  opacity: .9;
}
.selvage.linen { color: var(--linen); }
.selvage.vat   { color: var(--vat); }
.selvage.flip  { transform: scaleY(-1); }

/* A stitched hairline */
.stitch-rule {
  border: 0; height: 0;
  border-top: 2px dashed var(--linen-3);
  margin-block: 2.4rem;
}
.on-vat .stitch-rule { border-color: rgba(255,255,255,.16); }

/* ------------------------------------------------------------- Buttons */
.btn {
  --bg: var(--ink);
  --fg: var(--linen);
  position: relative;
  display: inline-flex; align-items: center; gap: .6em;
  padding: .95em 1.5em;
  background: var(--bg);
  color: var(--fg);
  border-radius: 100px;
  font-weight: 600;
  font-size: .98rem;
  letter-spacing: -.01em;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease), background .3s;
  box-shadow: var(--lift-1);
  isolation: isolate;
}
/* running-stitch ring that animates on hover */
.btn::after {
  content: "";
  position: absolute; inset: 4px;
  border-radius: 100px;
  border: 1.5px dashed rgba(255,255,255,.45);
  opacity: 0;
  transition: opacity .3s;
  animation: stitch-run 14s linear infinite;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--lift-2); }
.btn:hover::after { opacity: 1; }
.btn:active { transform: translateY(0); }
@keyframes stitch-run { to { stroke-dashoffset: 100; background-position: 40px 0; } }

.btn--dye { --bg: transparent; --fg: #2a140f; background-image: var(--dye-warm); }
.btn--dye::after { border-color: rgba(60,20,10,.4); }
.btn--ghost {
  --bg: transparent; --fg: var(--ink);
  box-shadow: inset 0 0 0 1.6px var(--ink);
}
.btn--ghost::after { border-color: rgba(0,0,0,.35); }
.on-vat .btn--ghost { --fg: var(--linen); box-shadow: inset 0 0 0 1.6px rgba(255,255,255,.5); }
.on-vat .btn--ghost::after { border-color: rgba(255,255,255,.4); }
.btn--light { --bg: var(--linen); --fg: var(--ink); }
.btn--lg { padding: 1.1em 1.9em; font-size: 1.05rem; }
.btn .arrow { transition: transform .35s var(--ease-out); }
.btn:hover .arrow { transform: translateX(4px); }

/* Plain text link with a thread underline that weaves in */
.thread-link {
  position: relative; font-weight: 600;
  display: inline-flex; align-items: center; gap: .4em;
  color: var(--madder-deep);
  padding-bottom: 2px;
}
.on-vat .thread-link { color: var(--weld); }
.thread-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background-image: repeating-linear-gradient(90deg, currentColor 0 6px, transparent 6px 10px);
  background-size: 0% 2px; background-repeat: no-repeat;
  transition: background-size .5s var(--ease-out);
}
.thread-link:hover::after { background-size: 100% 2px; }

/* --------------------------------------------------------------- Header */
.site-head {
  position: sticky; top: 0; z-index: 60;
  transition: background .4s var(--ease), box-shadow .4s, border-color .4s;
  border-bottom: 1px solid transparent;
}
.site-head.scrolled {
  background: color-mix(in oklab, var(--linen) 82%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  border-bottom-color: var(--linen-3);
}
.nav {
  display: flex; align-items: center; gap: 1.2rem;
  height: 76px;
}
.brand { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--serif); font-weight: 600; font-size: 1.42rem; letter-spacing: -.03em; }
.brand .mark { width: 34px; height: 34px; flex: none; }
.brand .mark--ink path, .brand .mark--ink rect { stroke: var(--ink); }
.nav-links { display: none; gap: .35rem; margin-inline: auto; }
.nav-links a {
  position: relative; padding: .55rem .85rem; border-radius: 100px;
  font-weight: 500; font-size: .96rem; color: var(--ink);
  transition: background .25s, color .25s;
}
.nav-links a:hover { background: color-mix(in oklab, var(--madder) 12%, transparent); color: var(--madder-deep); }
.nav-links a[aria-current="page"] { color: var(--madder-deep); }
.nav-links a[aria-current="page"]::after {
  content:""; position:absolute; left:.85rem; right:.85rem; bottom:.28rem; height:2px;
  background-image: repeating-linear-gradient(90deg,currentColor 0 5px,transparent 5px 9px);
}
.nav-cta { display: none; align-items: center; gap: .7rem; }
.nav-cta .btn { padding: .7em 1.15em; font-size: .92rem; }
.menu-btn {
  margin-left: auto; width: 46px; height: 46px; border-radius: 12px;
  display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--linen-3);
}
.menu-btn span, .menu-btn span::before, .menu-btn span::after {
  content:""; display:block; width: 20px; height: 2px; background: var(--ink); transition: .3s var(--ease);
}
.menu-btn span::before { transform: translateY(-6px); } .menu-btn span::after { transform: translateY(4px); }
body.menu-open .menu-btn span { background: transparent; }
body.menu-open .menu-btn span::before { transform: rotate(45deg); }
body.menu-open .menu-btn span::after { transform: rotate(-45deg) translateY(-1px); }
@media (min-width: 1000px){
  .nav-links { display: flex; }
  .nav-cta { display: flex; }
  .menu-btn { display: none; }
}
/* mobile drawer */
.drawer {
  position: fixed; inset: 76px 0 0; z-index: 55;
  background: var(--linen); padding: 1.5rem var(--gut) 3rem;
  display: grid; gap: .3rem; align-content: start;
  transform: translateY(-12px); opacity: 0; pointer-events: none;
  transition: .35s var(--ease);
  border-top: 1px solid var(--linen-3);
}
body.menu-open .drawer { transform: none; opacity: 1; pointer-events: auto; }
.drawer a { font-family: var(--serif); font-size: 1.7rem; padding: .55rem 0; border-bottom: 1px dashed var(--linen-3); }
.drawer .btn { margin-top: 1.4rem; justify-content: center; }

/* --------------------------------------------------------------- Footer */
.site-foot { background: var(--vat); color: var(--thread); padding-top: clamp(3.5rem,7vw,6rem); position: relative; }
.foot-grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 720px){ .foot-grid { grid-template-columns: 1.6fr 1fr 1fr; } }
@media (min-width: 1040px){ .foot-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.foot-col h4 { font-family: var(--mono); font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--thread-faint); margin-bottom: 1.1rem; font-weight: 700; }
.foot-col a { display: block; padding: .32rem 0; color: var(--thread-soft); transition: color .2s, padding .2s; }
.foot-col a:hover { color: var(--weld); padding-left: 6px; }
.foot-brand .brand { color: var(--linen); margin-bottom: 1rem; }
.foot-brand p { color: var(--thread-soft); max-width: 34ch; }
.foot-bottom {
  margin-top: clamp(2.5rem,5vw,4rem); padding-block: 1.6rem;
  border-top: 1px solid rgba(255,255,255,.1);
  display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; justify-content: space-between;
  color: var(--thread-faint); font-size: .85rem;
}
.foot-bottom .legal-links { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.foot-bottom a:hover { color: var(--weld); }
.addr { font-style: normal; color: var(--thread-soft); line-height: 1.7; }
.addr a:hover { color: var(--weld); }

/* ------------------------------------------------------------- Hero weave */
.hero { position: relative; overflow: clip; background: var(--vat); color: var(--thread); }
.hero canvas.weave { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.hero .wrap { position: relative; z-index: 2; }
.hero::after { /* vignette to seat the type */
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(120% 80% at 15% 10%, transparent 40%, rgba(16,14,27,.55) 100%),
    linear-gradient(180deg, rgba(16,14,27,.2), rgba(16,14,27,.65));
}
.hero-grid { display: grid; gap: 2rem; align-items: center; padding-block: clamp(4rem,11vh,9rem); }
@media (min-width: 980px){ .hero-grid { grid-template-columns: 1.15fr .85fr; gap: 3rem; } }

/* The animated thread-underline beneath the wordmark in hero */
.weave-underline { position: relative; display: inline-block; }
.weave-underline svg { position: absolute; left: -2%; width: 104%; bottom: -.32em; height: .42em; overflow: visible; }
.weave-underline path { fill: none; stroke-width: 7; stroke-linecap: round; }

/* The hero is a dark context — make on-dark children legible (it isn't .on-vat) */
.hero .lead { color: var(--thread-soft); }
.hero .btn--ghost { --fg: var(--linen); box-shadow: inset 0 0 0 1.6px rgba(255,255,255,.55); }
.hero .btn--ghost::after { border-color: rgba(255,255,255,.45); }
.hero .chip { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); color: var(--linen); }
.hero .chip .dot { background: var(--weld); }
.hero .thread-link { color: var(--weld); }

/* ---------------------------------------------------------------- Cards */
.card {
  position: relative; background: #fff; border-radius: var(--rad-lg);
  padding: clamp(1.4rem, 2.4vw, 2.1rem);
  box-shadow: var(--lift-1);
  border: 1px solid var(--linen-2);
  transition: transform .4s var(--ease-out), box-shadow .4s;
  overflow: hidden;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--lift-2); }
.on-vat .card { background: var(--vat-3); border-color: rgba(255,255,255,.08); color: var(--thread); box-shadow: var(--lift-dark); }
.on-vat .card h3 { color: var(--linen); }
.card .ico { width: 50px; height: 50px; margin-bottom: 1rem; }
.card-tag { font-family: var(--mono); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint); }

/* feature card with a woven corner motif */
.feature { padding-top: 2.1rem; }
.feature .num {
  font-family: var(--mono); font-size: .8rem; color: var(--madder); letter-spacing: .1em;
  position: absolute; top: 1.2rem; right: 1.3rem;
}
.feature h3 { margin-bottom: .5rem; font-size: 1.3rem; }

/* Stat block — big woven number */
.stat .n { font-family: var(--serif); font-size: clamp(2.6rem,5vw,4rem); line-height: 1; font-variation-settings:"opsz"120,"SOFT"30,"WONK"1; }
.stat .n .dye-text { display: inline; }
.stat .l { font-family: var(--mono); font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); margin-top: .5rem; }
.on-vat .stat .l { color: var(--thread-soft); }

/* Pills / chips for threads & tags */
.chip {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .42em .9em; border-radius: 100px; font-size: .85rem; font-weight: 500;
  background: color-mix(in oklab, var(--madder) 9%, var(--linen));
  border: 1px solid var(--linen-3);
}
.on-vat .chip { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: var(--thread-soft); }
.chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--madder); }

/* --------------------------------------------------------- Punch card motif */
.punchcard {
  display: grid; gap: 6px; grid-template-columns: repeat(8, 1fr);
  padding: 14px; border-radius: 10px; background: var(--vat-2);
  border: 1px solid rgba(255,255,255,.08);
}
.punchcard i { aspect-ratio: 1; border-radius: 2px; background: rgba(255,255,255,.07); }
.punchcard i.on { background: var(--weld); box-shadow: 0 0 12px -2px var(--weld); }

/* ----------------------------------------------------- How-it-works thread */
.loomstep { position: relative; padding-left: 3.4rem; }
.loomstep::before {
  content: attr(data-step);
  position: absolute; left: 0; top: 0;
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: .9rem; font-weight: 700;
  background: var(--ink); color: var(--linen);
}
.loomstep::after { /* connecting warp thread */
  content:""; position:absolute; left: 1.2rem; top: 2.4rem; bottom: -1.6rem; width: 2px;
  background-image: repeating-linear-gradient(0deg, var(--linen-3) 0 5px, transparent 5px 10px);
}
.loomstep:last-child::after { display: none; }
.on-vat .loomstep::before { background: var(--weld); color: var(--vat); }
.on-vat .loomstep::after { background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.22) 0 5px, transparent 5px 10px); }

/* ----------------------------------------------------------- Marquee threads */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image: linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee-track { display: inline-flex; gap: 1rem; padding-block: .4rem; white-space: nowrap; animation: marq 38s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marq { to { transform: translateX(-50%); } }
.marquee .chip { font-family: var(--mono); font-size: .82rem; }

/* --------------------------------------------------------------- Pricing */
.price-grid { display: grid; gap: 1.2rem; }
@media (min-width: 720px){ .price-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1080px){ .price-grid { grid-template-columns: repeat(4,1fr); } }
.tier { display: flex; flex-direction: column; border-radius: var(--rad-lg); padding: 1.8rem 1.6rem; background:#fff; border: 1px solid var(--linen-2); box-shadow: var(--lift-1); position: relative; }
.tier.featured { background: var(--vat); color: var(--thread); border-color: transparent; box-shadow: var(--lift-2); transform: translateY(-6px); }
.tier.featured h3 { color: var(--linen); }
.tier .tier-name { font-family: var(--serif); font-size: 1.5rem; }
.tier .tier-for { font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.tier.featured .tier-for { color: var(--weld); }
.tier .price { font-family: var(--serif); font-size: 2.8rem; line-height: 1; margin-top: .6rem; font-variation-settings:"opsz"120,"SOFT"30; }
.tier .price small { font-family: var(--sans); font-size: .9rem; color: var(--ink-soft); font-weight: 500; }
.tier.featured .price small { color: var(--thread-soft); }
.tier ul.feat { display: grid; gap: .65rem; margin: 1.3rem 0 1.6rem; }
.tier ul.feat li { display: flex; gap: .6rem; font-size: .95rem; align-items: flex-start; }
.tier ul.feat li::before { content:""; flex:none; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%;
  background: var(--dye-warm); -webkit-mask: var(--check) center/12px no-repeat; mask: var(--check) center/12px no-repeat; }
.tier .btn { margin-top: auto; justify-content: center; }
.tier .badge { position: absolute; top: -12px; right: 18px; background: var(--madder); color:#fff; font-family: var(--mono); font-size: .65rem; letter-spacing: .14em; text-transform: uppercase; padding: .35em .8em; border-radius: 100px; box-shadow: var(--lift-1); }
:root { --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E"); }

.toggle-wrap { display: inline-flex; align-items: center; gap: .8rem; font-family: var(--mono); font-size: .8rem; letter-spacing: .08em; }
.toggle { width: 56px; height: 30px; border-radius: 100px; background: var(--linen-3); position: relative; transition: background .3s; }
.toggle::after { content:""; position:absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background:#fff; box-shadow: var(--lift-1); transition: transform .3s var(--ease-out); }
.toggle[aria-pressed="true"] { background: var(--madder); }
.toggle[aria-pressed="true"]::after { transform: translateX(26px); }
.save-tag { color: var(--verdigris); font-weight: 700; }

/* ----------------------------------------------------------- Case studies */
.case-card { display: grid; grid-template-rows: auto 1fr; border-radius: var(--rad-lg); overflow: hidden; background:#fff; border: 1px solid var(--linen-2); box-shadow: var(--lift-1); transition: transform .4s var(--ease-out), box-shadow .4s; }
.case-card:hover { transform: translateY(-5px); box-shadow: var(--lift-2); }
.case-card .thumb { aspect-ratio: 16/10; position: relative; overflow: hidden; }
.case-card .thumb canvas, .case-card .thumb svg { position:absolute; inset:0; width:100%; height:100%; }
.case-card .body { padding: 1.4rem 1.5rem 1.6rem; display:flex; flex-direction:column; gap:.6rem; }
.case-card .sector { font-family: var(--mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color: var(--madder); }
.case-card h3 { font-size: 1.4rem; }
.case-result { display:flex; gap: 1.4rem; margin-top: .4rem; }
.case-result .n { font-family: var(--serif); font-size: 1.7rem; line-height: 1; }
.case-result .l { font-size: .72rem; color: var(--ink-soft); }

.quote { font-family: var(--serif); font-size: clamp(1.5rem,3vw,2.4rem); line-height: 1.22; font-variation-settings:"opsz"120,"SOFT"50,"WONK"1; letter-spacing: -.02em; }
.quote .mk { color: var(--madder); }
.byline { font-family: var(--mono); font-size: .8rem; letter-spacing: .08em; color: var(--ink-soft); margin-top: 1.4rem; }
.on-vat .byline { color: var(--thread-soft); }

/* --------------------------------------------------------- The Loom (generator) */
.loom { background: var(--vat); color: var(--thread); border-radius: var(--rad-lg); overflow: hidden; box-shadow: var(--lift-dark); border: 1px solid rgba(255,255,255,.08); }
.loom-head { display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between; padding: 1.1rem 1.3rem; border-bottom: 1px solid rgba(255,255,255,.08); background: var(--vat-2); }
.loom-dots { display:flex; gap:7px; } .loom-dots i { width:11px; height:11px; border-radius:50%; }
.loom-body { display: grid; gap: 0; }
@media (min-width: 900px){ .loom-body { grid-template-columns: 320px 1fr; } }
.loom-panel { padding: 1.4rem; border-right: 1px solid rgba(255,255,255,.08); }
.loom-stage { position: relative; min-height: 440px; padding: 1.4rem; display:flex; flex-direction:column; }
.loom-stage canvas { position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:.85; }
.loom-stage .stage-inner { position: relative; z-index: 1; display:flex; flex-direction:column; gap: 1rem; height:100%; }

.ds-option { width:100%; text-align:left; display:flex; gap:.8rem; align-items:center; padding:.8rem .9rem; border-radius:12px; background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); margin-bottom:.6rem; transition: .25s; }
.ds-option:hover { background: rgba(255,255,255,.08); }
.ds-option[aria-pressed="true"] { border-color: var(--weld); background: color-mix(in oklab, var(--weld) 14%, transparent); }
.ds-option .gi { width:34px; height:34px; flex:none; border-radius:9px; display:grid; place-items:center; background: rgba(255,255,255,.06); }
.ds-option .t { font-weight:600; } .ds-option .d { font-size:.78rem; color: var(--thread-soft); }

.field { margin-bottom: 1rem; }
.field label { font-family: var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color: var(--thread-faint); display:block; margin-bottom:.5rem; }
.field select, .field input[type=text] {
  width:100%; padding:.75rem .9rem; border-radius:11px; background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12); color: var(--linen);
}
.field select option { color: #111; }

/* result tapestry */
.tapestry-out { display:grid; gap:1rem; }
.insight { background: rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.09); border-left: 3px solid var(--weld); border-radius: 12px; padding: 1rem 1.1rem; }
.insight.knot { border-left-color: var(--madder); }
.insight.pattern { border-left-color: var(--verdigris); }
.insight .h { font-family: var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color: var(--thread-faint); display:flex; gap:.5rem; align-items:center; margin-bottom:.4rem; }
.insight .conf { margin-left:auto; color: var(--weld); }
.mini-charts { display:grid; grid-template-columns: 1fr 1fr; gap:.9rem; }
.mini { background: rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.09); border-radius:12px; padding: .9rem; }
.mini .cap { font-family: var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color: var(--thread-faint); margin-bottom:.5rem; }
.bars { display:flex; align-items:flex-end; gap:6px; height: 84px; }
.bars span { flex:1; border-radius: 4px 4px 0 0; background: var(--dye-warm); transition: height 1s var(--ease-out); }
.placeholder-loom { display:grid; place-items:center; text-align:center; flex:1; gap:1rem; color: var(--thread-soft); }

/* weave progress + weaving state */
.weave-progress { height:6px; border-radius:100px; background:rgba(255,255,255,.1); margin-top:.9rem; overflow:hidden; }
.weave-progress span { display:block; height:100%; width:0; background:var(--dye-warm); transition:width .1s linear; }
.weaving-state { display:grid; place-items:center; gap:1rem; flex:1; text-align:center; }
.weave-spinner { display:flex; gap:6px; align-items:flex-end; height:46px; }
.weave-spinner i { width:6px; height:100%; border-radius:100px; background:var(--weld); animation:wv 1s var(--ease) infinite; }
.weave-spinner i:nth-child(1){ background:#e0533d; animation-delay:0s } .weave-spinner i:nth-child(2){ background:#eab43c; animation-delay:.12s } .weave-spinner i:nth-child(3){ background:#18a08f; animation-delay:.24s } .weave-spinner i:nth-child(4){ background:#6f4be4; animation-delay:.36s }
@keyframes wv { 0%,100%{ transform:scaleY(.35) } 50%{ transform:scaleY(1) } }

/* tapestry output */
.tapestry-out { display:grid; gap:.9rem; }
.out-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.chip.ok { background:rgba(24,160,143,.16); border-color:transparent; color:#7fe0cf; font-family:var(--mono); font-size:.72rem; }
.out-actions { display:flex; gap:.5rem; }
.mini-btn { font-family:var(--mono); font-size:.72rem; padding:.4em .8em; border-radius:100px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); color:var(--thread-soft); transition:.2s; }
.mini-btn:hover { background:rgba(255,255,255,.12); color:var(--linen); }
.insight.featured { border-left-color:transparent; background:linear-gradient(120deg, rgba(111,75,228,.16), rgba(224,83,61,.12)); border:1px solid rgba(255,255,255,.12); }
.mini.wide { grid-column:1 / -1; }
.spark { width:100%; height:64px; }
.donut { display:flex; align-items:center; gap:.8rem; }
.donut svg { width:64px; height:64px; transform:rotate(-90deg); }
.donut .track { fill:none; stroke:rgba(255,255,255,.1); stroke-width:4; }
.donut .val { fill:none; stroke-width:4; stroke-linecap:round; }
.donut-num { font-family:var(--serif); font-size:1.5rem; color:var(--linen); }
.hbars { display:grid; gap:.55rem; }
.hbar { display:grid; grid-template-columns:1fr 90px auto; gap:.6rem; align-items:center; font-size:.82rem; }
.hbar .hl { color:var(--thread-soft); }
.hbar .ht { height:9px; border-radius:100px; background:rgba(255,255,255,.08); overflow:hidden; }
.hbar .ht i { display:block; height:100%; width:0; background:linear-gradient(90deg,#18a08f,#7fe0cf); transition:width 1s var(--ease-out); }
.hbar .ht i.neg { background:linear-gradient(90deg,#e0533d,#ff8a73); }
.hbar b { font-family:var(--mono); color:#7fe0cf; font-size:.78rem; }
.hbar b.neg { color:#ff8a73; }
.thread-chips { display:flex; flex-wrap:wrap; gap:.45rem; align-items:center; padding-top:.4rem; }
.thread-chips .tc-label { font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--thread-faint); margin-right:.3rem; }
.thread-chips .chip { font-family:var(--mono); font-size:.7rem; }

/* ------------------------------------------------------------- Forms */
.form-grid { display:grid; gap:1.1rem; }
@media (min-width:680px){ .form-grid.two { grid-template-columns:1fr 1fr; } }
.inp { display:flex; flex-direction:column; gap:.45rem; }
.inp label { font-family: var(--mono); font-size:.7rem; letter-spacing:.13em; text-transform:uppercase; color: var(--ink-soft); }
.inp input, .inp textarea, .inp select {
  padding:.85rem 1rem; border-radius:12px; background:#fff; border:1.5px solid var(--linen-3);
  transition: border-color .25s, box-shadow .25s;
}
.inp input:focus, .inp textarea:focus, .inp select:focus { border-color: var(--madder); box-shadow: 0 0 0 4px color-mix(in oklab,var(--madder) 18%, transparent); outline: none; }
.inp.full { grid-column: 1 / -1; }

/* ------------------------------------------------------------- Legal prose */
.prose { max-width: 72ch; }
.prose h2 { font-size: 1.6rem; margin-top: 2.6rem; }
.prose h3 { font-size: 1.2rem; margin-top: 1.8rem; font-family: var(--sans); font-weight: 700; letter-spacing: 0; }
.prose p, .prose li { color: #38323f; }
.prose ul { padding-left: 1.2rem; list-style: none; display:grid; gap:.5rem; margin-top:.6rem; }
.prose ul li { position: relative; padding-left: 1.2rem; }
.prose ul li::before { content:""; position:absolute; left:0; top:.62em; width:8px; height:8px; border-radius:2px; background: var(--madder); }
.prose a { color: var(--woad); font-weight:600; }
.legal-layout { display: grid; gap: 2rem; }
@media (min-width: 920px){ .legal-layout { grid-template-columns: 240px 1fr; gap: 3.2rem; } }
.legal-toc { display: none; }
@media (min-width: 920px){ .legal-toc { display: block; } }
.toc { position: sticky; top: 96px; display: grid; gap: 2px; }
.toc a { display:block; padding:.4rem .8rem; border-radius:8px; color: var(--ink-soft); font-size:.92rem; border-left:2px solid var(--linen-3); }
.toc a:hover, .toc a.active { color: var(--madder-deep); border-left-color: var(--madder); background: color-mix(in oklab,var(--madder) 7%, transparent); }

/* ------------------------------------------------------------- Reveal anim */
.reveal { opacity: 0; transform: translateY(22px); }
.reveal.in { opacity: 1; transform: none; transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.reveal[data-d="1"].in { transition-delay: .08s; }
.reveal[data-d="2"].in { transition-delay: .16s; }
.reveal[data-d="3"].in { transition-delay: .24s; }
.reveal[data-d="4"].in { transition-delay: .32s; }
/* shuttle wipe — a thread sweeps across as content weaves in */
.weave-in { position: relative; clip-path: inset(0 100% 0 0); }
.weave-in.in { clip-path: inset(0 0 0 0); transition: clip-path 1s var(--ease-out); }

@media (prefers-reduced-motion: reduce){
  .reveal, .weave-in { opacity:1 !important; transform:none !important; clip-path:none !important; }
  .marquee-track, .btn::after { animation: none !important; }
  canvas.weave { display: none; }
}

/* ------------------------------------------------------------- Utilities */
.tag-row { display:flex; flex-wrap:wrap; gap:.5rem; }
.eyebrow-line { display:flex; align-items:center; gap:1rem; }
.eyebrow-line::after { content:""; height:1px; flex:1; background: var(--linen-3); }
.on-vat .eyebrow-line::after { background: rgba(255,255,255,.16); }
.grid-bg { background-image: radial-gradient(circle at 1px 1px, rgba(0,0,0,.06) 1px, transparent 0); background-size: 26px 26px; }
.on-vat.grid-bg { background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.05) 1px, transparent 0); }
.pill-note { display:inline-flex; gap:.5rem; align-items:center; font-family:var(--mono); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color: var(--ink-soft); background:#fff; border:1px solid var(--linen-3); padding:.4em .8em; border-radius:100px; }
.muted { color: var(--ink-soft); }
.nowrap { white-space: nowrap; }
.hide { display: none !important; }
.skip-link { position:absolute; left:-9999px; top:0; z-index:200; background:var(--ink); color:var(--linen); padding:.8rem 1.2rem; border-radius:0 0 12px 0; }
.skip-link:focus { left:0; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* live pulse beside "The Loom" nav item */
.live-dot { display:inline-block; width:7px; height:7px; margin-left:.45em; border-radius:50%; background:var(--verdigris); vertical-align:middle; position:relative; }
.live-dot::after { content:""; position:absolute; inset:0; border-radius:50%; background:var(--verdigris); animation:ping 1.8s var(--ease) infinite; }
@keyframes ping { 0%{ transform:scale(1); opacity:.7 } 70%,100%{ transform:scale(3); opacity:0 } }
@media (prefers-reduced-motion: reduce){ .live-dot::after{ animation:none } }