/* AI Utilities — aiutilities.app
   Bench: cool gray-green. Ink: gunmetal. One accent per tool. */

:root {
  --bench: #EDF0EE;
  --ink: #1C2422;
  --ink-soft: #4A5551;
  --panel: #FFFFFF;
  --line: #D8DEDA;
  --mint: #0FA36B;   /* SplitSnap */
  --cobalt: #2E4FE3; /* SpeedSense */
  --amber: #E07A1F;  /* AskConvert */
  --mint-soft: #E2F4EC;
  --cobalt-soft: #E7EBFC;
  --amber-soft: #FBEEDF;
  --radius: 14px;
  --display: "Bricolage Grotesque", "Arial Black", sans-serif;
  --body: "Instrument Sans", -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", "Consolas", monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bench);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* pegboard texture — homepage only, faint enough to read as material */
body.home {
  background-image: radial-gradient(circle, #E2E7E3 1.5px, transparent 1.5px);
  background-size: 26px 26px;
}

a { color: inherit; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

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

.site-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 0;
}

.wordmark {
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.02em;
  text-decoration: none;
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.wordmark .by {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}

.site-nav { display: flex; gap: 22px; }

.site-nav a {
  position: relative;
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none;
  color: var(--ink-soft);
  transition: color 120ms ease;
}

.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.site-nav a:hover { color: var(--ink); }
.site-nav a:hover::after { transform: scaleX(1); }

/* ---------- hero ---------- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 48px;
  align-items: center;
  padding: 56px 0 88px;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: block;
  margin-bottom: 18px;
}

.hero h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(40px, 5.2vw, 62px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin-bottom: 22px;
}

.hero h1 em {
  font-style: normal;
  color: var(--mint);
  position: relative;
  display: inline-block;
}

/* highlighter sweep behind "just work." — draws after the headline lands */
.hero h1 em::after {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: 0.02em;
  height: 0.38em;
  border-radius: 4px;
  background: rgba(15, 163, 107, 0.16);
  z-index: -1;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 1s;
}

.hero h1.entered em::after { transform: scaleX(1); }

.hero .lede {
  font-size: 18.5px;
  color: var(--ink-soft);
  max-width: 46ch;
  margin-bottom: 28px;
}

.store-line { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.store-chip {
  font-family: var(--mono);
  font-size: 12.5px;
  padding: 9px 15px;
  border: 1.5px solid var(--ink);
  border-radius: 100px;
  background: var(--panel);
  white-space: nowrap;
}

.store-chip .soon {
  color: var(--ink-soft);
  margin-left: 6px;
}

/* ---------- the workbench ---------- */

.bench {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}

.tool-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px;
  width: min(360px, 100%);
  box-shadow: 0 14px 34px -18px rgba(28, 36, 34, 0.28);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.55;
}

.tool-card .tool-tag {
  display: inline-block;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 100px;
  margin-bottom: 12px;
  font-weight: 600;
}

/* Tilt lives on the independent `rotate` property so it composes with the
   Dixon engine's transform-based entrance. Once a card has settled
   (.settled, added on transitionend), hovering straightens it — picking
   the tool up off the bench. */
.tool-card.settled {
  transition: rotate 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.tool-card.settled:hover {
  rotate: 0deg;
  box-shadow: 0 22px 44px -18px rgba(28, 36, 34, 0.34);
}

/* receipt — SplitSnap */
.card-receipt {
  rotate: -2.2deg;
  border-radius: 4px;
  --notch: 8px;
  -webkit-mask:
    radial-gradient(circle at var(--notch) 0, transparent 5px, #000 5.5px) top left / 16px 100% repeat-x;
          mask:
    radial-gradient(circle at var(--notch) 0, transparent 5px, #000 5.5px) top left / 16px 100% repeat-x;
  padding-top: 26px;
}

.card-receipt .tool-tag { background: var(--mint-soft); color: var(--mint); }

.receipt-row { display: flex; justify-content: space-between; color: var(--ink-soft); }

.receipt-rule {
  border: 0;
  border-top: 1.5px dashed var(--line);
  margin: 10px 0;
}

.receipt-total {
  display: flex;
  justify-content: space-between;
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
}

.receipt-total .amount { color: var(--mint); }

.receipt-note { margin-top: 8px; font-size: 11.5px; color: var(--ink-soft); }

/* speed — SpeedSense */
.card-speed { rotate: 1.4deg; }

.card-speed .tool-tag { background: var(--cobalt-soft); color: var(--cobalt); }

.speed-readout {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
}

.speed-readout .num {
  font-size: 44px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.speed-readout .unit { color: var(--ink-soft); }

.speed-bar {
  height: 8px;
  border-radius: 100px;
  background: var(--cobalt-soft);
  overflow: hidden;
  margin-bottom: 10px;
}

/* JS drives the fill so the test can "re-run" with new numbers; the static
   scaleX(0.78) is the no-JS / reduced-motion resting state. */
.speed-bar i {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 100px;
  background: var(--cobalt);
  transform: scaleX(0.78);
  transform-origin: left;
  transition: transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.card-speed .verdict {
  color: var(--ink-soft);
  font-size: 12.5px;
  transition: opacity 0.35s ease;
}
.card-speed .verdict b { color: var(--cobalt); font-weight: 600; }

/* convert — AskConvert */
.card-convert { rotate: 3deg; }

.card-convert .tool-tag { background: var(--amber-soft); color: var(--amber); }

.convert-q { color: var(--ink-soft); }

.convert-q::after {
  content: "▌";
  color: var(--amber);
  animation: blink 1.1s step-end infinite;
}

@keyframes blink { 50% { opacity: 0; } }

.convert-a {
  font-size: 20px;
  font-weight: 600;
  color: var(--amber);
  margin-top: 8px;
  transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              translate 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- ticker ---------- */

.ticker {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  overflow: hidden;
  padding: 13px 0;
}

.ticker-track {
  display: flex;
  width: max-content;
  animation: ticker 42s linear infinite;
}

.ticker:hover .ticker-track { animation-play-state: paused; }

.ticker-half {
  display: flex;
  align-items: center;
  gap: 30px;
  padding-right: 30px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}

.tdot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
}

.tdot.mint { background: var(--mint); }
.tdot.cobalt { background: var(--cobalt); }
.tdot.amber { background: var(--amber); }

@keyframes ticker { to { transform: translateX(-50%); } }

/* ---------- section rules ---------- */

.rule-draw {
  height: 1.5px;
  background: var(--line);
  margin-bottom: 32px;
}

/* ---------- reading progress (doc pages) ---------- */

.read-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--mint), var(--cobalt), var(--amber));
  transform: scaleX(0);
  transform-origin: left;
  z-index: 50;
}

/* ---------- apps section ---------- */

.section { padding: 64px 0; }

.section > .wrap > h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 40px);
  letter-spacing: -0.02em;
  margin-bottom: 36px;
}

.app-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.app-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-top: 4px solid var(--accent, var(--ink));
}

.app-card.mint { --accent: var(--mint); }
.app-card.cobalt { --accent: var(--cobalt); }
.app-card.amber { --accent: var(--amber); }

/* Post-entrance hover lift, on the independent `translate` property so it
   never fights the engine's transform. */
.app-card.settled {
  transition: translate 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.app-card.settled:hover {
  translate: 0 -5px;
  box-shadow: 0 18px 36px -20px rgba(28, 36, 34, 0.3);
}

.app-card h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 23px;
  letter-spacing: -0.01em;
}

.app-card .app-sub {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}

.app-card p { color: var(--ink-soft); font-size: 15.5px; flex: 1; }

.app-card .stores {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-soft);
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

/* ---------- principles ---------- */
/* (section separation now comes from the animated .rule-draw) */

.principle-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.principle h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 19px;
  margin-bottom: 8px;
}

.principle p { color: var(--ink-soft); font-size: 15.5px; }

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

.site-foot {
  border-top: 1px solid var(--line);
  padding: 32px 0 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--ink-soft);
}

.site-foot nav { display: flex; gap: 20px; }

.site-foot a { color: var(--ink-soft); text-decoration: none; }
.site-foot a:hover { color: var(--ink); }

/* ---------- legal pages ---------- */

.doc {
  max-width: 720px;
  margin: 0 auto;
  padding: 40px 24px 96px;
}

.doc h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(32px, 4vw, 44px);
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}

.doc .doc-date {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--ink-soft);
  display: block;
  margin-bottom: 36px;
}

.doc h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
  margin: 40px 0 12px;
}

.doc p, .doc li { color: var(--ink-soft); font-size: 16px; }

.doc p { margin-bottom: 14px; }

.doc ul { margin: 0 0 14px 22px; }

.doc li { margin-bottom: 8px; }

.doc strong { color: var(--ink); }

.doc a { color: var(--ink); }

/* ---------- focus & motion ---------- */

a:focus-visible, button:focus-visible {
  outline: 2.5px solid var(--cobalt);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .convert-q::after { animation: none; }
  .site-nav a::after { transition: none; }
  .ticker-track { animation: none; }
  .hero h1 em::after { transition: none; transform: scaleX(1); }
}

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; padding: 32px 0 56px; }
  .bench { align-items: stretch; }
  .tool-card { width: 100%; }
  .card-receipt, .card-speed, .card-convert { rotate: none; }
  .app-grid, .principle-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .site-head { flex-direction: column; gap: 12px; }
}