/* ===========================================================
   mu works landing styles
   Brand kit v1.0: ink + paper, IBM Plex superfamily,
   black coin mark with ムワークス katakana signature.
   ~70% paper · 20% ink · 10% gray · indigo accent < 2%
   =========================================================== */

:root {
  /* Core pair */
  --ink:      #0A0A0A;   /* Sumi: the coin, primary type */
  --paper:    #F4F4F2;   /* Kami: surfaces */

  /* Neutral ramp */
  --paper-2:  #EBEBE8;
  --fog:      #DEDEDC;   /* gray 100: hairlines, dividers */
  --ash:      #B7B7B4;   /* gray 300: borders, muted */
  --slate:    #626260;   /* secondary text on light surfaces */
  --slate-on-dark: #9A9A96; /* secondary text on ink surfaces */
  --graphite: #3A3A38;   /* gray 700: body text on paper */

  /* Single accent for links, focus, and one highlight per screen. */
  --indigo:   #22314A;   /* Ai */

  --line-d: rgba(255, 255, 255, 0.14);
  --line-l: rgba(10, 10, 10, 0.13);

  --sans: 'IBM Plex Sans', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --jp:   'IBM Plex Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Noto Sans JP', var(--sans);

  --container: 1120px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

.skip-link {
  position: fixed;
  z-index: 10000;
  top: 10px;
  left: 10px;
  padding: 10px 14px;
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }

h1, h2, h3 { line-height: 1.12; letter-spacing: -0.03em; font-weight: 600; margin: 0; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, svg, picture { display: block; max-width: 100%; }

::selection { background: var(--ink); color: var(--paper); }
.dark ::selection { background: var(--paper); color: var(--ink); }

:focus-visible { outline: 2px solid var(--indigo); outline-offset: 3px; }
.dark :focus-visible { outline-color: var(--paper); }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
}

/* ---------- Dark surfaces ---------- */
.dark { background: var(--ink); color: var(--paper); }

/* ---------- Shared bits ---------- */
.eyebrow {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0 0 22px;
}
.eyebrow .jp {
  font-family: var(--jp);
  font-weight: 400;
  letter-spacing: 0.14em;
  color: var(--ash);
}
.dark .eyebrow { color: var(--ash); }
.dark .eyebrow .jp { color: var(--slate-on-dark); }

.jp-inline { font-family: var(--jp); font-weight: 400; }

.brand-name,
.wordmark {
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

/* ---------- The coin ---------- */
.coin {
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  line-height: 1;
  flex: none;
}
.coin.rev { background: #fff; color: var(--ink); }
.coin .wm { font-weight: 600; letter-spacing: -0.03em; white-space: nowrap; }
.coin .kt {
  font-family: var(--jp);
  font-weight: 400;
  letter-spacing: 0.14em;
  white-space: nowrap;
}
.coin .glyph { font-family: var(--jp); font-weight: 500; line-height: 1; }

.coin-nav { width: 26px; height: 26px; }
.coin-nav .glyph { font-size: 14px; }

.coin-icon { width: 64px; }
.coin-icon .glyph { font-size: 36px; }

.coin-md { width: 132px; }
.coin-md .wm { font-size: 25px; }
.coin-md .kt { font-size: 15px; margin-top: 0.32em; }

.coin-xl { width: min(340px, 68vw); }
.coin-xl .wm { font-size: clamp(2rem, 9.6vw, 3.4rem); }
.coin-xl .kt { font-size: clamp(1.2rem, 5.8vw, 2rem); margin-top: 0.28em; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 26px;
  border-radius: 2px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease),
              border-color 0.25s var(--ease), color 0.25s var(--ease),
              translate 0.2s var(--ease);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-sm { padding: 9px 18px; }
.btn-block { width: 100%; justify-content: center; }

.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { background: var(--graphite); transform: translateY(-2px); }

.dark .btn-primary { background: var(--paper); color: var(--ink); }
.dark .btn-primary:hover { background: #fff; }

.btn-ghost { background: transparent; color: inherit; border-color: var(--line-l); }
.btn-ghost:hover { border-color: var(--slate); transform: translateY(-2px); }
.dark .btn-ghost { border-color: var(--line-d); }
.dark .btn-ghost:hover { border-color: var(--ash); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 180px 0 120px;
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2.4rem, 6vw, 4rem);
  align-items: center;
}
.hero-title {
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1.02;
  margin-bottom: 28px;
}
.hero-sub {
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  color: var(--ash);
  max-width: 560px;
  margin-bottom: 40px;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-meta {
  margin-top: 48px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.4rem;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--slate);
}
.hero-meta span { display: inline-flex; align-items: center; }
.hero-meta i {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--slate);
  display: inline-block;
}
.dark .hero-meta { color: var(--slate-on-dark); }
.dark .hero-meta i { background: var(--slate-on-dark); }
.hero-mark { display: flex; justify-content: center; }

/* ---------- Meaning strip ---------- */
.meaning { border-bottom: 1px solid var(--line-l); }
.meaning-inner {
  display: flex;
  align-items: center;
  gap: 36px;
  padding: 46px 28px;
}
.meaning-text {
  font-size: clamp(1.05rem, 2.2vw, 1.4rem);
  color: var(--graphite);
  max-width: 740px;
  font-weight: 400;
}
.meaning-text strong { font-weight: 600; color: var(--ink); }

/* ---------- Sections ---------- */
.section { padding: 110px 0; }
.section-alt {
  background: var(--paper-2);
  border-top: 1px solid var(--line-l);
  border-bottom: 1px solid var(--line-l);
}
.section-flush { padding-top: 0; }
.section-head { max-width: 640px; margin-bottom: 56px; }
.section-head h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); }

/* ---------- Service cards ---------- */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line-l);
  border: 1px solid var(--line-l);
}
.card {
  position: relative;
  padding: 38px 32px 34px;
  background: var(--paper);
  transition: background 0.35s var(--ease);
}
.card:hover { background: #fff; }
.card-index {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--slate);
  font-weight: 500;
}
.card h3 { font-size: 1.3rem; margin: 18px 0 12px; }
.card p { color: var(--graphite); font-size: 0.98rem; }

/* ---------- Client work proof ---------- */
.proof-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.proof-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line-l);
  background: var(--paper);
}
.proof-shot {
  display: block;
  border-bottom: 1px solid var(--line-l);
  background: #fff;
}
.proof-shot img, .proof-shot picture { width: 100%; height: auto; }
.proof-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-l);
}
.proof-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 1px solid var(--ash);
  display: inline-block;
}
.proof-url {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--slate);
}
.proof-card:hover { border-color: var(--ink); }
.proof-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 30px 32px 32px;
}
.proof-body h3 { font-size: 1.3rem; }
.proof-dek {
  margin: 10px 0 12px;
  font-weight: 600;
  color: var(--ink);
}
.proof-body > p:not(.proof-dek) { color: var(--graphite); font-size: 0.98rem; }
.proof-body .card-link { margin-top: auto; padding-top: 22px; }
.proof-links { display: flex; flex-wrap: wrap; gap: 0 32px; }
.proof-links .card-link { margin-top: 26px; }

/* ---------- The Operating Study ---------- */
.study-card {
  scroll-margin-top: 88px;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr);
  gap: 52px;
  margin: 0 0 38px;
  padding: 44px;
  background: var(--ink);
  color: var(--paper);
}
.study-card .portfolio-group-kicker { color: var(--ash); }
.study-card h3 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 18px; }
.study-card-copy > p:not(.portfolio-group-kicker) { max-width: 650px; color: var(--ash); }
.study-card-copy .study-lead { color: var(--paper); font-size: 1.15rem; margin-bottom: 18px; }
.study-link {
  display: inline-flex;
  gap: 8px;
  margin-top: 28px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--ash);
  font-weight: 600;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.study-link:hover { color: #fff; border-color: #fff; }
.study-card-detail {
  align-self: stretch;
  padding: 8px 0 0 34px;
  border-left: 1px solid var(--line-d);
}
.study-price { display: flex; align-items: baseline; gap: 10px; margin: 0 0 32px; }
.study-price strong { font-size: 2.6rem; letter-spacing: -0.05em; }
.study-price span { color: var(--ash); font-size: 0.95rem; }
.study-facts { display: grid; gap: 20px; margin: 0; }
.study-facts div { display: grid; gap: 3px; }
.study-facts dt {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--slate-on-dark);
}
.study-facts dd { margin: 0; color: var(--ash); font-size: 0.98rem; }
.study-facts dd a {
  border-bottom: 1px solid var(--line-d);
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.study-facts dd a:hover { color: #fff; border-color: #fff; }

/* ---------- Steps ---------- */
.steps {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line-l);
  border: 1px solid var(--line-l);
  counter-reset: step;
}
.step { padding: 34px 30px; background: var(--paper); }
.step-num {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 1.8rem;
  color: var(--ash);
}
.step h3 { font-size: 1.25rem; margin: 14px 0 10px; }
.step p { color: var(--graphite); font-size: 0.97rem; }

/* ---------- About ---------- */
.about-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 60px;
  align-items: start;
}
.about-grid picture { display: block; }
.about-grid picture img {
  display: block;
  width: 100%;
  height: auto;
}
.about-head h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); }
.about-body p { color: var(--graphite); font-size: 1.08rem; margin-bottom: 20px; }
.about-body p:last-child { margin-bottom: 0; }
.about-signoff { color: var(--ink) !important; font-weight: 500; }

/* ---------- Products / portfolio ---------- */
.products-lead {
  max-width: 720px;
  margin: -28px 0 52px;
  color: var(--graphite);
  font-size: clamp(1.05rem, 2vw, 1.28rem);
  line-height: 1.6;
}
.products-lead .jp-inline { color: var(--ink); }

.portfolio-group + .portfolio-group {
  margin-top: 72px;
  padding-top: 72px;
  border-top: 1px solid var(--line-l);
}
.portfolio-group-head {
  max-width: 720px;
  margin-bottom: 24px;
}
.portfolio-group-kicker {
  margin-bottom: 10px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate);
}
.portfolio-group-head h3 {
  margin-bottom: 10px;
  font-size: clamp(1.35rem, 2.6vw, 1.8rem);
}
.portfolio-group-head > p:last-child {
  max-width: 640px;
  color: var(--graphite);
}
.portfolio-group-head > p:last-child a {
  border-bottom: 1px solid var(--line-l);
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.portfolio-group-head > p:last-child a:hover { color: var(--indigo); border-color: var(--indigo); }

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line-l);
  border: 1px solid var(--line-l);
}
.lab-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.product-card {
  --accent: var(--indigo);
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 34px 30px 30px;
  background: var(--paper);
  transition: background 0.35s var(--ease);
}
.product-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.product-card:hover { background: #fff; }
.product-card:hover::before { transform: scaleX(1); }

.product-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 52px;
  margin-bottom: 26px;
}
.product-logo { display: flex; align-items: center; }
.product-logo img { height: 44px; width: auto; }
.product-logo img.is-wide { height: 34px; }   /* wide horizontal marks (Reisei) */

.product-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate);
  white-space: nowrap;
}
.product-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--slate);
}
.is-live  .product-dot { background: #2E7D53; box-shadow: 0 0 0 3px rgba(46,125,83,0.14); }
.is-beta  .product-dot { background: #C08A2E; box-shadow: 0 0 0 3px rgba(192,138,46,0.14); }
.is-dev   .product-dot { background: var(--ash); box-shadow: 0 0 0 3px rgba(183,183,180,0.16); }

.product-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0 0 12px;
}
.product-eyebrow .jp {
  font-family: var(--jp);
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--accent);
  text-transform: none;
  margin-left: 8px;
}
.product-name {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}
.product-tagline {
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 12px;
}
.product-desc {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--graphite);
  margin: 0 0 24px;
}

.product-foot { margin-top: auto; }

.product-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 22px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--accent);
  transition: gap 0.2s var(--ease), opacity 0.2s var(--ease);
}
.product-link:hover { gap: 10px; opacity: 0.8; }
.product-soon {
  margin-top: 22px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ash);
}

/* Closing CTA tile fills the grid and ties the portfolio back to the studio. */
.product-cta {
  justify-content: center;
  gap: 14px;
}
.product-cta .coin-icon { width: 54px; margin-bottom: 6px; }
.product-cta .product-name { font-size: 1.4rem; margin: 0; }
.product-cta .product-desc { margin: 0; }
.product-cta .product-link { margin-top: 8px; }

/* ---------- Contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}
.contact-info h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); margin-bottom: 18px; }
.contact-info p { color: var(--graphite); margin-bottom: 28px; max-width: 420px; }
.consultation-price {
  max-width: 420px;
  margin: 0 0 28px;
  padding: 20px 22px;
  background: var(--paper);
  border: 1px solid var(--line-l);
}
.consultation-label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
}
.consultation-price p {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 8px;
  color: var(--ink);
}
.consultation-price strong { font-size: 1.75rem; letter-spacing: -0.04em; }
.consultation-price p span { font-size: 0.95rem; color: var(--graphite); }
.consultation-note { display: block; color: var(--graphite); font-size: 0.9rem; line-height: 1.5; }
.contact-email {
  display: inline-block;
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--indigo);
  border-bottom: 1px solid var(--indigo);
  padding-bottom: 3px;
  transition: opacity 0.2s var(--ease);
}
.contact-email:hover { opacity: 0.75; }

.contact-form { display: grid; gap: 18px; }
.field { display: grid; gap: 8px; }
.field label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
}
.field input, .field textarea {
  width: 100%;
  padding: 14px 16px;
  background: var(--paper);
  border: 1px solid var(--fog);
  border-radius: 2px;
  color: var(--ink);
  font-family: inherit;
  font-size: 1rem;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
  resize: vertical;
}
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--indigo);
  background: #fff;
}
.form-status {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--indigo);
  min-height: 1.2em;
}
.form-status.is-error { color: var(--graphite); }

/* ---------- Footer ---------- */
.site-footer { padding: 56px 0; }
.footer-inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 22px;
}
.footer-brand { display: flex; flex-direction: column; gap: 4px; }
.footer-brand .wordmark { font-size: 1.7rem; }
.footer-jp {
  font-family: var(--jp);
  font-weight: 400;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  color: var(--slate-on-dark);
}
.footer-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
.footer-nav a { font-size: 14px; color: var(--ash); transition: color 0.2s var(--ease); }
.footer-nav a:hover { color: var(--paper); }
.footer-login {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--slate-on-dark) !important;
  padding-left: 24px; margin-left: 4px;
  border-left: 1px solid var(--line-d);
}
.footer-login svg { width: 13px; height: 13px; }
.footer-login:hover { color: var(--paper) !important; }
.footer-edit { padding-left: 16px; margin-left: 0; border-left: none; }
.footer-legal {
  width: 100%;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--slate-on-dark);
  margin-top: 18px;
  padding-top: 22px;
  border-top: 1px solid var(--line-d);
}

/* ---------- Reveal animation ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .hero { padding: 140px 0 90px; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-mark { order: -1; justify-content: flex-start; }
  .coin-xl { width: min(220px, 56vw); }
  .coin-xl .wm { font-size: clamp(1.3rem, 6.2vw, 2.2rem); }
  .coin-xl .kt { font-size: clamp(0.8rem, 3.7vw, 1.3rem); }

  .cards, .steps, .study-card { grid-template-columns: 1fr; }
  .study-card { gap: 30px; padding: 32px 26px; }
  .study-card-detail { padding: 26px 0 0; border-top: 1px solid var(--line-d); border-left: 0; }
  .about-grid, .contact-grid { grid-template-columns: 1fr; gap: 34px; }
  .product-grid { grid-template-columns: 1fr; }
  .products-lead { margin-top: -14px; }
  .meaning-inner { flex-direction: column; align-items: flex-start; gap: 20px; }
  .section { padding: 80px 0; }
}

/* Two-up product grid on mid-width screens */
@media (min-width: 861px) and (max-width: 1080px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  body { font-size: 16px; }
  .container { padding: 0 20px; }
  .btn { padding: 13px 22px; }
  .hero-meta { font-size: 11px; }
  .product-top { align-items: flex-start; flex-wrap: wrap; }
  .product-logo img.is-wide { max-width: 130px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ===========================================================
   Conversion path: sprint, workflow review, and supporting
   sections. Reuses the existing tokens and the 1px hairline
   grid pattern established by .cards / .product-grid.
   =========================================================== */

/* ---------- Shared bits ---------- */
.eyebrow-dot {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
  align-self: center;
}
.section-lead {
  margin-top: 18px;
  color: var(--graphite);
  font-size: 1.05rem;
}
.dark .section-lead { color: var(--ash); }

/* Page heroes on /sprint/ and elsewhere carry no coin, so the
   copy column runs wider and the block sits shorter. */
.hero-page { padding: 156px 0 96px; }
.hero-copy-wide { max-width: 780px; }
.hero-copy-wide .hero-sub { max-width: 700px; }

/* ---------- Four-up card row ---------- */
.cards-4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- Canonical offer terms ---------- */
/* The hairlines are drawn per cell rather than by a container background
   showing through the gaps. A trailing partial row (10 terms across 4
   columns) then leaves clean paper instead of an orphan gray block. */
.terms-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin: 0;
}
.term {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 26px 24px;
  background: var(--paper);
  box-shadow: 0 0 0 1px var(--line-l);
}
.section-alt .term { background: var(--paper-2); }
.term dt {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate);
}
.term dd {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.45;
}
.term-price dd {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.terms-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 1px;
  padding: 26px 24px;
  background: var(--paper);
  box-shadow: 0 0 0 1px var(--line-l);
}
.section-alt .terms-cta { background: var(--paper-2); }

/* ---------- The operating rule ---------- */
.rule {
  margin: 0 0 44px;
  padding: 26px 30px;
  border-left: 3px solid var(--indigo);
  background: var(--paper);
}
.section-alt .rule { background: var(--paper-2); }
.rule p {
  font-size: clamp(1.05rem, 2.1vw, 1.3rem);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.015em;
}

/* ---------- Included work ---------- */
.check-list {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 40px;
}
.check-list li {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-l);
  color: var(--graphite);
  font-size: 1rem;
}
.check-list li::before {
  content: "";
  flex: none;
  width: 6px; height: 11px;
  margin: 5px 2px 0 0;
  border: solid var(--ink);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}

/* ---------- Deliverables ---------- */
.deliverables {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 40px;
}
.deliverables li {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-l);
  color: var(--graphite);
  font-size: 1rem;
}
.deliverable-num {
  flex: none;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--ash);
}

/* ---------- Deliverable commitment ---------- */
.commitment {
  margin-top: 48px;
  padding: 38px 40px;
  background: var(--ink);
  color: var(--paper);
}
.commitment-lg { margin-top: 0; padding: clamp(34px, 5vw, 60px); }
.commitment-label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ash);
  margin-bottom: 20px;
}
.commitment-body {
  font-size: clamp(1.1rem, 2.3vw, 1.45rem);
  line-height: 1.5;
  letter-spacing: -0.02em;
  font-weight: 500;
  max-width: 860px;
}
.commitment-note {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--line-d);
  color: var(--ash);
  font-size: 0.95rem;
  max-width: 640px;
}

/* ---------- Sprint timeline ---------- */
.timeline {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line-l);
  border: 1px solid var(--line-l);
}
.timeline-step { padding: 32px 28px; background: var(--paper); }
.section-alt .timeline-step { background: var(--paper-2); }
.timeline-when {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--indigo);
  margin-bottom: 14px;
}
.timeline-step h3 { font-size: 1.2rem; margin-bottom: 10px; }
.timeline-step p { color: var(--graphite); font-size: 0.95rem; }

/* ---------- Exclusions ---------- */
/* Hairlines are drawn per cell, so a partial trailing row (11 partnership
   exclusions across 3 columns) ends in clean paper, not an orphan block. */
.exclusion-list {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
}
.exclusion-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 24px;
  background: var(--paper-2);
  box-shadow: 0 0 0 1px var(--line-l);
  color: var(--slate);
  font-size: 0.97rem;
}
.section:not(.section-alt) .exclusion-list li { background: var(--paper); }
.exclusion-list li::before {
  content: "";
  flex: none;
  width: 11px; height: 1px;
  background: var(--ash);
}
.boundary-note {
  margin-top: 28px;
  padding: 20px 24px;
  border: 1px solid var(--line-l);
  background: var(--paper);
  color: var(--ink);
  font-weight: 500;
  font-size: 1rem;
}

/* ---------- Fit criteria ---------- */
.fit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-l);
  border: 1px solid var(--line-l);
}
.fit-col { padding: 34px 32px; background: var(--paper); }
.fit-col h3 { font-size: 1.25rem; margin-bottom: 22px; }
.fit-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.fit-col li {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  color: var(--graphite);
  font-size: 0.97rem;
  line-height: 1.5;
}
.fit-col li::before { content: ""; flex: none; margin-top: 8px; }
.fit-good li::before {
  width: 6px; height: 11px;
  margin: 4px 2px 0 0;
  border: solid var(--ink);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
.fit-poor { background: var(--paper-2); }
.fit-poor h3 { color: var(--slate); }
.fit-poor li { color: var(--slate); }
.fit-poor li::before { width: 11px; height: 1px; background: var(--ash); }

/* ---------- Closing CTA band ---------- */
.section-cta { padding: 96px 0; }
.cta-inner { max-width: 720px; }
.cta-inner h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 20px; }
.cta-inner p { color: var(--ash); margin-bottom: 34px; }

/* ---------- Workflow review ---------- */
.section-review { padding-top: 150px; }
.review-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.review-info h1,
.review-info h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); margin-bottom: 20px; }
.review-info > p { color: var(--graphite); margin-bottom: 20px; max-width: 460px; }
.review-free {
  font-weight: 600;
  color: var(--ink) !important;
  margin-bottom: 30px !important;
}
.review-aside {
  max-width: 460px;
  margin-bottom: 28px;
  padding: 20px 22px;
  background: var(--paper-2);
  border: 1px solid var(--line-l);
}
.section-alt .review-aside { background: var(--paper); }
.review-aside-label {
  margin-bottom: 8px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate);
}
.review-aside p:last-child {
  color: var(--graphite);
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 0;
}

.review-form { display: grid; gap: 18px; }
.review-form .field select {
  width: 100%;
  padding: 14px 16px;
  background: var(--paper);
  border: 1px solid var(--fog);
  border-radius: 2px;
  color: var(--ink);
  font-family: inherit;
  font-size: 1rem;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--slate) 50%),
    linear-gradient(135deg, var(--slate) 50%, transparent 50%);
  background-position: calc(100% - 19px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.review-form .field select:focus {
  outline: none;
  border-color: var(--indigo);
  background-color: #fff;
}
.field-group { border: 0; padding: 0; margin: 0; display: grid; gap: 12px; }
.field-group legend {
  padding: 0;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
  line-height: 1.6;
}
.choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
}
.choice-row { display: flex; flex-wrap: wrap; gap: 10px 26px; }
/* .choice is a <label> inside .field, so `.field label` (0,1,1) would
   otherwise beat a bare `.choice` (0,1,0) and impose the uppercase mono
   field-label treatment. Scoping to the form outranks it. */
.review-form .choice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: -0.006em;
  text-transform: none;
  color: var(--graphite);
  cursor: pointer;
  line-height: 1.45;
}
.review-form .choice input {
  flex: none;
  width: 17px; height: 17px;
  margin: 2px 0 0;
  accent-color: var(--indigo);
  cursor: pointer;
}
.review-form .choice-consent {
  padding-top: 4px;
  color: var(--ink);
}
.form-privacy {
  margin: -8px 0 0;
  color: var(--slate);
  font-size: 0.82rem;
  line-height: 1.5;
}
.form-privacy a {
  color: var(--indigo);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.field input.is-invalid,
.field textarea.is-invalid,
.field select.is-invalid { border-color: var(--indigo); background: #fff; }

/* Author display:flex would otherwise beat the UA's [hidden] rule. */
.review-success[hidden] { display: none; }
.review-success {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  padding: 46px 44px;
  background: var(--ink);
  color: var(--paper);
}
.review-success h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
.review-success p { color: var(--ash); max-width: 560px; }
.review-success .coin-icon { width: 54px; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .cards-4 { grid-template-columns: repeat(2, 1fr); }
  .terms-grid { grid-template-columns: repeat(2, 1fr); }
  .timeline { grid-template-columns: repeat(2, 1fr); }
  .exclusion-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .review-grid { gap: 44px; }
  .proof-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .hero-page { padding: 128px 0 76px; }
  .section-review { padding-top: 124px; }
  .cards-4 { grid-template-columns: 1fr; }
  .proof-grid { grid-template-columns: 1fr; }
  .proof-body { padding: 26px 24px 28px; }
  .terms-grid { grid-template-columns: 1fr; }
  .timeline { grid-template-columns: 1fr; }
  .exclusion-list { grid-template-columns: 1fr; }
  .fit-grid { grid-template-columns: 1fr; }
  .check-list,
  .deliverables { grid-template-columns: 1fr; gap: 0; }
  .check-list li { padding: 13px 0; }
  .review-grid { grid-template-columns: 1fr; gap: 34px; }
  .review-info > p,
  .review-aside { max-width: none; }
  .commitment { padding: 30px 26px; }
  .review-success { padding: 34px 26px; }
  .section-cta { padding: 76px 0; }
}

@media (max-width: 480px) {
  .choice-grid { grid-template-columns: 1fr; }
  .rule { padding: 22px 22px; }
  .term { padding: 22px 20px; }
  .terms-cta { padding: 22px 20px; }
  .terms-cta .btn { width: 100%; justify-content: center; }
}

/* ===========================================================
   Workflow Optimization Partnership
   =========================================================== */

/* Price line and link inside an after-the-sprint card. */
.card-terms {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  margin-top: 18px;
}
.card-terms strong {
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.card-terms span {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate);
}
.card-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 18px;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--ash);
  font-size: 13px;
  font-weight: 600;
  color: var(--indigo);
  transition: gap 0.2s var(--ease), border-color 0.2s var(--ease);
}
.card-link:hover { gap: 11px; border-color: var(--indigo); }

/* The partnership must never read as mandatory, so this line sits
   directly under the three after-the-sprint paths. */
.after-note {
  margin-top: 30px;
  padding-left: 18px;
  border-left: 2px solid var(--ash);
  color: var(--graphite);
  font-size: 1rem;
  max-width: 720px;
}

/* Headline term strip: price, term, eligibility. */
.terms-strip {
  margin: 0 0 42px;
  padding: 18px 24px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Seven monthly deliverables across four columns leaves a partial row,
   so hairlines are drawn per card instead of by the container. */
.included-grid {
  background: transparent;
  border: 0;
}
.included-grid .card { box-shadow: 0 0 0 1px var(--line-l); }
.included-grid .card h3 { margin-top: 0; font-size: 1.15rem; }
.section-alt .included-grid .card { background: var(--paper-2); }
.section-alt .included-grid .card:hover { background: var(--paper); }

.partnership-cta { margin-top: 28px; }
.section-alt .partnership-cta { background: transparent; box-shadow: none; padding: 0; }

.timeline-3 { grid-template-columns: repeat(3, 1fr); }

/* ---------- FAQ ---------- */
.faq {
  margin: 0;
  border-top: 1px solid var(--line-l);
}
.faq-item {
  padding: 26px 0;
  border-bottom: 1px solid var(--line-l);
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 20px 48px;
  align-items: start;
}
.faq-item dt {
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.faq-item dd {
  margin: 0;
  color: var(--graphite);
  font-size: 1rem;
  line-height: 1.6;
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .timeline-3 { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .faq-item { grid-template-columns: 1fr; gap: 10px; }
  .terms-strip { font-size: 12px; padding: 16px 18px; letter-spacing: 0.06em; }
  .after-note { margin-top: 24px; }
}

/* ===========================================================
   Estimate Follow-Up Sprint
   =========================================================== */

/* Hero proof line: price and commitment terms under the hero copy. */
.hero-proof {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper);
  border-left: 2px solid var(--paper);
  padding-left: 14px;
  margin: 0 0 34px;
}

/* Homepage sprint section: outcome list, then the term strip and CTAs. */
.sprint-home-terms { margin-top: 44px; }

/* Sub-headings inside the pricing section. */
.included-heading {
  font-size: 1.2rem;
  margin: 52px 0 22px;
}

/* ---------- Example workflow flow ---------- */
.flow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 10px;
  counter-reset: flowstep;
}
.flow li {
  counter-increment: flowstep;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.flow li:not(:last-child)::after {
  content: "→" / "";
  font-family: var(--mono);
  color: var(--slate);
}
.flow-step {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  padding: 12px 16px;
  background: var(--paper);
  box-shadow: 0 0 0 1px var(--line-l);
  font-family: var(--mono);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--ink);
  white-space: nowrap;
}
.flow-step::before {
  content: counter(flowstep, decimal-leading-zero);
  font-size: 0.65rem;
  color: var(--slate);
}
.flow-side { margin-top: 34px; max-width: 720px; }
.flow-note { color: var(--graphite); font-size: 1rem; margin: 0 0 16px; }
.flow-exceptions {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.flow-exceptions li {
  padding: 9px 14px;
  border: 1px dashed var(--ash);
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  color: var(--slate);
  white-space: nowrap;
}

@media (max-width: 720px) {
  .flow { flex-direction: column; align-items: flex-start; gap: 8px; }
  .flow li { flex-direction: column; align-items: flex-start; gap: 8px; }
  .flow li:not(:last-child)::after { content: "↓" / ""; margin-left: 18px; }
  .flow-step { white-space: normal; }
  .flow-exceptions li { white-space: normal; }
}

/* ---------- FAQ disclosures ---------- */
.faq-list {
  max-width: 820px;
  border-top: 1px solid var(--line-l);
}
.faq-list details { border-bottom: 1px solid var(--line-l); }
.faq-list summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+" / "";
  flex: none;
  font-family: var(--mono);
  font-size: 1rem;
  color: var(--slate);
}
.faq-list details[open] summary::after { content: "−" / ""; }
.faq-list summary:focus-visible { outline-offset: 4px; }
.faq-list details p {
  margin: 0;
  padding: 0 0 26px;
  color: var(--graphite);
  font-size: 1rem;
  line-height: 1.6;
  max-width: 700px;
}

/* ---------- Inquiry form: hints and the error summary ---------- */
.field-hint {
  margin: 0;
  color: var(--slate);
  font-size: 0.85rem;
  line-height: 1.5;
}
.field-optional {
  text-transform: none;
  letter-spacing: 0.02em;
  font-weight: 400;
}
.form-errors {
  border: 1px solid var(--line-l);
  border-left: 3px solid var(--indigo);
  background: var(--paper);
  padding: 18px 20px;
  display: grid;
  gap: 10px;
}
.form-errors[hidden] { display: none; }
.form-errors:focus { outline: 2px solid var(--indigo); outline-offset: 3px; }
.form-errors p { margin: 0; font-weight: 600; font-size: 0.95rem; }
.form-errors ul { margin: 0; padding: 0 0 0 18px; display: grid; gap: 6px; }
.form-errors li { color: var(--graphite); font-size: 0.95rem; }
.form-errors a { color: var(--indigo); text-decoration: underline; }

/* ===========================================================
   Privacy policy
   =========================================================== */

.policy-hero { padding-bottom: 56px; }
.policy-hero h1 { max-width: 850px; }
.policy-lede {
  max-width: 720px;
  margin-top: 24px;
  color: var(--graphite);
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  line-height: 1.65;
}
.policy-date {
  margin-top: 22px;
  font-family: var(--mono);
  color: var(--slate);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.policy-layout {
  display: grid;
  grid-template-columns: minmax(230px, 0.36fr) minmax(0, 1fr);
  gap: clamp(44px, 8vw, 110px);
  align-items: start;
}
.policy-summary {
  position: sticky;
  top: 110px;
  padding: 28px;
  background: var(--ink);
  color: var(--paper);
}
.policy-summary .eyebrow { color: var(--ash); }
.policy-highlights {
  display: grid;
  gap: 16px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
.policy-highlights li {
  position: relative;
  padding-left: 20px;
  color: var(--paper-2);
  font-size: 0.94rem;
  line-height: 1.55;
}
.policy-highlights li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 8px;
  height: 1px;
  background: var(--ash);
}
.policy-copy { max-width: 780px; }
.policy-section {
  padding: 0 0 46px;
  margin: 0 0 46px;
  border-bottom: 1px solid var(--line-l);
}
.policy-section:last-child { margin-bottom: 0; border-bottom: 0; }
.policy-section h2 {
  margin-bottom: 20px;
  font-size: clamp(1.45rem, 3vw, 2rem);
}
.policy-section h3 { font-size: 1rem; }
.policy-section p,
.policy-section li {
  color: var(--graphite);
  font-size: 1rem;
  line-height: 1.72;
}
.policy-section p + p { margin-top: 18px; }
.policy-section ul {
  display: grid;
  gap: 10px;
  margin: 18px 0 0;
  padding-left: 22px;
}
.policy-section a {
  color: var(--indigo);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.policy-section code {
  padding: 2px 5px;
  background: var(--paper);
  border: 1px solid var(--line-l);
  font-family: var(--mono);
  font-size: 0.86em;
  color: var(--ink);
}
.policy-note {
  padding: 18px 20px;
  border-left: 2px solid var(--indigo);
  background: var(--paper);
}
.policy-services {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 24px 0;
  background: var(--line-l);
  border: 1px solid var(--line-l);
}
.policy-services article {
  padding: 22px;
  background: var(--paper);
}
.policy-services article p {
  margin-top: 8px;
  font-size: 0.92rem;
  line-height: 1.55;
}
.policy-services article a {
  display: inline-block;
  margin-top: 12px;
  font-size: 0.84rem;
}
.policy-contact {
  margin-top: 22px;
  padding: 22px;
  background: var(--paper);
  border: 1px solid var(--line-l);
  color: var(--graphite);
  font-style: normal;
  line-height: 1.7;
}

@media (max-width: 860px) {
  .policy-layout { grid-template-columns: 1fr; gap: 48px; }
  .policy-summary { position: static; }
  .policy-services { grid-template-columns: 1fr; }
}

/* ---------- Nonprofit capacity system page ---------- */
/* Six stages divide evenly at three, two, and one across these
   breakpoints, so no partial row ever shows. This block sits after the
   main responsive section, so it restates the narrow widths itself. */
.timeline-6 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1080px) {
  .timeline-6 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .timeline-6 { grid-template-columns: 1fr; }
}
.loop-diagram {
  margin-bottom: 56px;
  color: var(--ink);
}
.loop-diagram svg {
  display: block;
  width: 100%;
  max-width: 760px;
  height: auto;
}
.list-kicker {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 22px;
}
.card-list {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 0;
}
.card-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-l);
  color: var(--graphite);
  font-size: 0.95rem;
  line-height: 1.5;
}
.card-list li:last-child { border-bottom: none; }
.card-list li::before {
  content: "";
  flex: none;
  width: 11px; height: 1px;
  margin-top: 11px;
  background: var(--ash);
}

/* ===========================================================
   mu fx: subtraction as a design language (2026-08)
   The quiet layer shared by every page on this stylesheet,
   plus the per-page signatures. Scroll-driven pieces sit
   behind @supports and degrade to their end states; the
   global reduced-motion rule above disables all of it, and
   the block at the bottom pins the correct resting states.
   =========================================================== */

/* ---------- Quiet layer: reveals materialize from nothing ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(10px);
  filter: blur(10px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease), filter 0.8s var(--ease);
}
[data-reveal].is-visible { opacity: 1; transform: none; filter: none; }

/* ---------- Quiet layer: hairline scrollbar ---------- */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--paper); }
::-webkit-scrollbar-thumb { background: var(--ash); border: 3px solid var(--paper); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--graphite); }

/* ---------- Quiet layer: the coin morphs between pages ---------- */
@view-transition { navigation: auto; }
.coin-nav { view-transition-name: mu-coin; }
::view-transition-old(mu-coin), ::view-transition-new(mu-coin) { animation-duration: 0.45s; }

/* ---------- Quiet layer: the void takes the button ---------- */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn .fx-dot {
  position: absolute;
  z-index: -1;
  left: var(--fx-x, 50%);
  top: var(--fx-y, 50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.5s var(--ease);
  pointer-events: none;
}
.btn:hover .fx-dot, .btn:focus-visible .fx-dot { transform: translate(-50%, -50%) scale(14); }
.btn-primary .fx-dot { background: var(--paper); }
.btn-primary:hover { background: var(--ink); color: var(--ink); }
.dark .btn-primary .fx-dot { background: var(--ink); }
.dark .btn-primary:hover { background: var(--paper); color: var(--paper); }
.btn-ghost .fx-dot { background: var(--ink); }
.btn-ghost:hover { color: var(--paper); }
.dark .btn-ghost .fx-dot { background: var(--paper); }
.dark .btn-ghost:hover { color: var(--ink); }

/* ---------- Quiet layer: section rules draw themselves ---------- */
.section-head h2 { position: relative; }
.section-head h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -14px;
  width: 56px;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.8s var(--ease) 0.2s;
}
.section-head.is-visible h2::after { transform: scaleX(1); }

/* ---------- Signature: sumi wash. The cursor reveals what the black holds ---------- */
.fx-wash { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero > .container { position: relative; z-index: 1; }
.fx-wash-text {
  position: absolute;
  inset: -30px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  font-family: var(--jp);
  font-weight: 400;
  font-size: clamp(28px, 3.6vw, 44px);
  letter-spacing: 0.4em;
  line-height: 1;
  color: var(--paper);
  opacity: 0.45;
  white-space: nowrap;
  user-select: none;
  -webkit-mask-image: radial-gradient(circle 170px at var(--fx-mx, 78%) var(--fx-my, 30%), #000 0%, transparent 78%);
  mask-image: radial-gradient(circle 170px at var(--fx-mx, 78%) var(--fx-my, 30%), #000 0%, transparent 78%);
}
@media (hover: none) { .fx-wash { display: none; } }

/* ---------- Quiet layer: cards answer hover ---------- */
.cards .card {
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.cards .card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px -24px rgba(10, 10, 10, 0.45);
}

/* ---------- Signature: proof screenshots scroll on hover ---------- */
.proof-frame { display: block; aspect-ratio: 2 / 1; overflow: hidden; position: relative; background: #fff; }
.proof-frame img {
  display: block;
  width: 100%;
  height: auto;
  transform: translateY(0);
  transition: transform 2.6s cubic-bezier(0.33, 0, 0.2, 1);
}
/* Both shots are 1240x900; a 2:1 frame shows 68.9%, so the pan is -31%. */
.proof-card:hover .proof-frame img,
.proof-shot:focus-visible .proof-frame img { transform: translateY(-31%); }
.proof-card { transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease); }
.proof-card:hover { transform: translateY(-4px); box-shadow: 0 18px 44px -26px rgba(10, 10, 10, 0.5); }

/* ---------- Quiet layer: the close draws its enso ---------- */
.fx-enso-close { width: 96px; height: auto; color: var(--ink); margin-bottom: 26px; }

/* ---------- Quiet layer: ink-bleed underlines ---------- */
.card-link, .study-link,
.fx-bleed, .footer-nav a {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  padding-bottom: 2px;
  transition: background-size 0.35s var(--ease);
}
.card-link:hover, .study-link:hover,
.fx-bleed:hover, .footer-nav a:hover { background-size: 100% 3px; filter: url(#fx-inkbleed); }
/* ---------- Signature: focus is removal (intake forms) ---------- */
.review-form .field { transition: opacity 0.4s var(--ease), filter 0.4s var(--ease); }
.review-form:has(:focus-visible) .field:not(:focus-within) { opacity: 0.28; filter: blur(1.5px); }

/* ---------- Signature: subtraction hero (landing) ---------- */
/* One phrase per line: struck lines collapse vertically, so the
   kept words only ever glide upward and never re-wrap. */
.fx-sub .ln { display: block; }
.fx-sub .rm {
  overflow-y: clip;
  overflow-x: visible;
  max-height: var(--hpx, 2.8em);
  font-size: 0.55em;
  line-height: 1.4;
  font-weight: 500;
  color: var(--ash);
  white-space: nowrap;
}
.fx-sub .rm i { font-style: normal; position: relative; display: inline-block; }
.fx-sub .rm i::after {
  content: "";
  position: absolute;
  left: -1%;
  right: 2%;
  top: 0.62em;
  height: 1.5px;
  background: var(--paper);
  transform: scaleX(0);
  transform-origin: left center;
}
.fx-sub.is-visible .rm {
  animation: fx-collapse 0.9s var(--ease) forwards;
  animation-delay: calc(1.3s + var(--i) * 1.1s + 0.5s);
}
.fx-sub.is-visible .rm i::after {
  animation: fx-strike 0.4s var(--ease) forwards;
  animation-delay: calc(1.3s + var(--i) * 1.1s);
}
@keyframes fx-strike { to { transform: scaleX(1); } }
@keyframes fx-collapse {
  from { max-height: var(--hpx, 2.8em); }
  40% { opacity: 0.4; filter: blur(2px); }
  to { max-height: 0; opacity: 0; filter: blur(8px); }
}

/* ---------- Signature: the mu watermark (meaning strip) ---------- */
.meaning { position: relative; overflow: hidden; }
.meaning-inner { position: relative; }
.fx-mu-mark {
  position: absolute;
  top: 50%;
  right: -0.04em;
  transform: translateY(-50%);
  font-family: var(--jp);
  font-weight: 500;
  font-size: min(30vmin, 260px);
  line-height: 1;
  color: var(--ink);
  opacity: 0.07;
  pointer-events: none;
  user-select: none;
}
@supports (animation-timeline: view()) {
  .fx-mu-mark {
    animation: fx-drift linear both;
    animation-timeline: view();
  }
  @keyframes fx-drift {
    from { transform: translateY(-36%); }
    to { transform: translateY(-64%); }
  }
}

/* ---------- Signature: the enso, drawn by scrolling (sprint) ---------- */
.fx-enso { display: block; overflow: visible; }
.fx-enso circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 5.5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0.045;
  transform: rotate(-80deg);
  transform-origin: center;
}
@supports (animation-timeline: view()) {
  .fx-enso circle {
    animation: fx-draw linear both;
    animation-timeline: view();
    animation-range: entry 10% cover 55%;
  }
  @keyframes fx-draw {
    from { stroke-dashoffset: 1; }
    to { stroke-dashoffset: 0.045; }
  }
}
.fx-sprint-close {
  position: relative;
  width: 132px;
  margin: 0 auto 30px;
  display: grid;
  place-items: center;
}
.fx-sprint-close .fx-enso { grid-area: 1 / 1; width: 100%; color: var(--paper); }
.fx-sprint-close .fx-figure {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  line-height: 1;
}
.fx-sprint-close .fx-day-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ash);
}

/* ---------- Signature: the sprint line fills as you read ---------- */
.fx-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--ink);
  transform-origin: left center;
  transform: scaleX(0);
  z-index: 60;
  pointer-events: none;
}
.dark-progress.fx-progress { background: var(--paper); }
@supports (animation-timeline: scroll()) {
  .fx-progress {
    animation: fx-fill linear both;
    animation-timeline: scroll(root);
  }
  @keyframes fx-fill {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
  }
}

/* ---------- Utility: numbers that arrive at their value ---------- */
@property --fxn {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}
.fx-count {
  font-variant-numeric: tabular-nums;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 34px;
  counter-reset: fxn var(--fxn);
}
.fx-count::after { content: counter(fxn); }
.fx-count-30 { --fxn: 30; }
@supports (animation-timeline: view()) {
  .fx-count-30 {
    animation: fx-to30 linear both;
    animation-timeline: view();
    animation-range: entry 20% cover 50%;
  }
  @keyframes fx-to30 {
    from { --fxn: 0; }
    to { --fxn: 30; }
  }
}


/* ---------- Signature: the scope boundary crosses itself out ---------- */
.exclusion-list li {
  text-decoration-line: line-through;
  text-decoration-thickness: 1.5px;
  text-decoration-color: rgba(118, 118, 116, 0.65);
}
@supports (animation-timeline: view()) {
  .exclusion-list li {
    animation: fx-strike-fade linear both;
    animation-timeline: view();
    animation-range: entry 40% entry 95%;
  }
  @keyframes fx-strike-fade {
    from { text-decoration-color: transparent; }
    to { text-decoration-color: rgba(118, 118, 116, 0.65); }
  }
}

/* ---------- Signature: first-visit enso (mu-fx.js injects, once per session) ---------- */
.fx-intro {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--ink);
  display: grid;
  place-items: center;
  pointer-events: none;
  transition: opacity 0.45s var(--ease);
}
.fx-intro svg { width: min(190px, 38vw); color: var(--paper); overflow: visible; }
.fx-intro circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 5.5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transform: rotate(-80deg);
  transform-origin: center;
  transition: stroke-dashoffset 0.95s cubic-bezier(0.4, 0, 0.2, 1);
}
.fx-intro.fx-run circle { stroke-dashoffset: 0.045; }
.fx-intro.fx-out { opacity: 0; }

/* ---------- Quiet layer: the footer ends on mu (mu-fx.js injects) ---------- */
.site-footer { position: relative; overflow: hidden; }
.site-footer .container { position: relative; z-index: 1; }
.fx-mu-footer {
  position: absolute;
  top: 50%;
  right: -0.04em;
  transform: translateY(-50%);
  font-family: var(--jp);
  font-weight: 500;
  font-size: min(30vmin, 260px);
  line-height: 1;
  color: var(--paper);
  opacity: 0.05;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
@supports (animation-timeline: view()) {
  .fx-mu-footer {
    animation: fx-drift linear both;
    animation-timeline: view();
  }
}

/* ---------- Quiet layer: the nav coin settles as you leave the hero ---------- */
@supports (animation-timeline: scroll()) {
  .coin-nav {
    animation: fx-coin-settle linear both;
    animation-timeline: scroll(root);
    animation-range: 0px 220px;
  }
  @keyframes fx-coin-settle {
    from { scale: 1.14; }
    to { scale: 1; }
  }
}

/* ---------- Fallbacks without scroll timelines (mu-fx.js adds .fx-go) ---------- */
@supports not (animation-timeline: view()) {
  .fx-enso circle { stroke-dashoffset: 1; transition: stroke-dashoffset 1.7s var(--ease) 0.15s; }
  .fx-enso.fx-go circle { stroke-dashoffset: 0.045; }
  .fx-count-30 { --fxn: 0; transition: --fxn 1.6s var(--ease) 0.2s; }
  .fx-count-30.fx-go { --fxn: 30; }
  .exclusion-list li { text-decoration-color: transparent; transition: text-decoration-color 0.9s var(--ease); }
  .exclusion-list li.fx-go { text-decoration-color: rgba(118, 118, 116, 0.65); }
}

/* ---------- mu fx resting states under reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { filter: none; }
  .fx-sub .rm { max-height: 0; opacity: 0; }
  .fx-sub .rm i::after { transform: scaleX(1); }
  .fx-progress { display: none; }
  .fx-mu-mark { transform: translateY(-50%); }
  .fx-count-30 { --fxn: 30; }
  .exclusion-list li { text-decoration-color: rgba(118, 118, 116, 0.65); }
  .proof-frame img { transform: none; }
  .fx-wash { display: none; }
  .fx-enso circle { stroke-dashoffset: 0.045; }
  .exclusion-list li { text-decoration-color: rgba(118, 118, 116, 0.65); }
  .section-head h2::after { transform: scaleX(1); }
  .fx-intro { display: none; }
  .fx-mu-footer { transform: translateY(-50%); }
  .coin-nav { scale: 1; }
}