/* ==========================================================================
   MySheets — site stylesheet
   Identity: refined Graphite and Muted Teal. Neutral surfaces, teal reserved
   for primary actions, the current step, focus and progress.
   No web fonts: the system stack leads with Segoe UI so nothing has to be
   downloaded and nothing can fail to load.
   ========================================================================== */

:root {
  --graphite-950: #141817;
  --graphite-900: #171B1A;
  --graphite-850: #1C2220;
  --graphite-800: #212725;
  --graphite-700: #2B3330;
  --graphite-600: #3B4541;
  --graphite-500: #4A5551;

  --ink: #EDF2F0;
  --ink-2: #BBC4C0;
  --ink-3: #89948F;

  --teal: #55A8A2;
  --teal-strong: #67B7B1;
  --teal-deep: #287D78;
  --teal-soft: #263F3D;
  --teal-line: #35544F;

  --warn: #E0B35C;

  --radius: 14px;
  --radius-sm: 10px;
  --maxw: 1120px;

  --font: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Mono", "Consolas", "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; background: var(--graphite-950); }

body {
  margin: 0;
  /* translucent so the fixed particle network behind the page shows through */
  background: transparent;
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

.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;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--teal); color: var(--graphite-900);
  padding: 10px 16px; border-radius: 0 0 var(--radius-sm) 0; font-weight: 600;
}
.skip:focus { left: 0; }

a { color: var(--teal-strong); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--teal-strong);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------------------------------------------------------------- top bar */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: rgba(23, 27, 26, 0.88);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--graphite-600);
}
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; height: 62px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 650; font-size: 18px; letter-spacing: 0.2px; }
.brand:hover { text-decoration: none; }
.topbar nav { display: flex; gap: 22px; }
.topbar nav a { color: var(--ink-2); font-size: 15px; }
.topbar nav a:hover { color: var(--ink); }

/* ---------------------------------------------------------------- hero */
.hero { position: relative; overflow: hidden; background: transparent; }
/* The scene belongs to the hero. It is absolute INSIDE the first block, so it
   scrolls away with it instead of following the page. It never receives pointer
   events, so clicks, links, forms, scrolling and text selection are unaffected. */
#scene {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; z-index: 0; pointer-events: none;
}

.topbar, main, .foot { position: relative; z-index: 1; }

/* Teal cursor dot, matching the site accent. Purely decorative. */
.cursor-ring {
  position: fixed; top: 0; left: 0; z-index: 9999;
  width: 12px; height: 12px;
  background: #55a8a2;
  border: none;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  box-shadow: 0 0 10px rgba(85, 168, 162, 0.6), 0 0 4px rgba(85, 168, 162, 0.85);
  transition: opacity 200ms ease, background 200ms ease, box-shadow 200ms ease;
  will-change: transform;
}
.cursor-ring.is-visible { opacity: 1; }
.cursor-ring.is-down {
  background: #67b7b1;
  box-shadow: 0 0 18px rgba(85, 168, 162, 0.9), 0 0 6px rgba(103, 183, 177, 1);
}
/* no pointer, no dot */
@media (hover: none) { .cursor-ring { display: none; } }

/* ==========================================================================
   Floating LinkedIn badge
   Always turning and glowing so it is noticed while browsing, with a prompt
   whose arrow toggles toward the icon. It is a real anchor, so it is keyboard
   reachable and announces itself to a screen reader.
   ========================================================================== */
.linkedin-float {
  /* lifted clear of the host's "Made with AutoClaw" badge, which floats at the
     bottom centre and would otherwise sit on top of the bubble and the mark */
  position: fixed; right: 24px; bottom: 108px; z-index: 40;
  display: flex; align-items: center; gap: 12px;
  text-decoration: none; perspective: 700px;
}
.linkedin-float:hover { text-decoration: none; }

.li-bubble {
  display: flex; flex-direction: column; gap: 2px;
  background: rgba(23, 27, 26, 0.93);
  border: 1px solid var(--teal-line);
  border-radius: 12px;
  padding: 9px 14px;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.45);
  transition: border-color 160ms ease, transform 160ms ease;
}
.linkedin-float:hover .li-bubble,
.linkedin-float:focus-visible .li-bubble { border-color: var(--teal); transform: translateX(-2px); }

.li-q { font-size: 12px; color: var(--ink-3); letter-spacing: 0.2px; }
.li-cta {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; font-weight: 650; color: var(--teal-strong);
}

/* the arrow toggles toward the icon so the eye is drawn across it */
.li-arrow { display: inline-flex; animation: liArrow 1.5s ease-in-out infinite; }
@keyframes liArrow {
  0%, 100% { transform: translateX(0);   opacity: 0.6; }
  50%      { transform: translateX(5px); opacity: 1; }
}

.li-mark {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 12px;
  background: linear-gradient(150deg, #0a66c2, #0b5aa8);
  color: #ffffff; font-weight: 800; font-size: 20px; letter-spacing: -0.5px;
  font-family: var(--font);
  transform-style: preserve-3d;
  animation: liSpin 5.5s ease-in-out infinite, liGlow 2.6s ease-in-out infinite;
}
/* a slow 3D turn, never quite settling */
@keyframes liSpin {
  0%, 100% { transform: rotateY(0deg)   rotateX(0deg); }
  30%      { transform: rotateY(24deg)  rotateX(-10deg); }
  65%      { transform: rotateY(-18deg) rotateX(8deg); }
}
/* the pulse that makes it catch the eye at rest */
@keyframes liGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(10, 102, 194, 0), 0 6px 18px rgba(0, 0, 0, 0.40); }
  50%      { box-shadow: 0 0 26px 4px rgba(10, 102, 194, 0.75), 0 6px 18px rgba(0, 0, 0, 0.40); }
}

@media (prefers-reduced-motion: reduce) {
  .li-mark, .li-arrow { animation: none; }
}

.hero-veil {
  /* the veil is shading only - it must never swallow a drag meant for the 3D mark */
  pointer-events: none;
  position: absolute; inset: 0;
  /* darkens behind the copy only; the right side stays clear so the 3D reads */
  background: linear-gradient(
    90deg,
    rgba(20, 24, 23, 0.96) 0%,
    rgba(20, 24, 23, 0.84) 36%,
    rgba(20, 24, 23, 0.26) 60%,
    rgba(20, 24, 23, 0.00) 100%);
}
/* The copy owns the left column and never reaches into the 3D on the right. */
.hero-inner {
  position: relative; z-index: 2; padding: 96px 24px 84px; max-width: 620px;
  /* align the hero column with the page grid (same left edge as the nav and sections) */
  margin-left: max(0px, calc((100% - 1120px) / 2));
  margin-right: auto;
}

.eyebrow {
  margin: 0 0 14px; font-size: 13px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--teal); font-weight: 650;
}
h1 {
  margin: 0 0 20px; font-size: clamp(38px, 6vw, 64px); line-height: 1.06;
  letter-spacing: -1.2px; font-weight: 700;
}
h1 .accent { color: var(--teal-strong); }
.lede { margin: 0 0 28px; font-size: 19px; color: var(--ink-2); max-width: 62ch; }

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 40px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 13px 24px; border-radius: 10px; font-size: 16px; font-weight: 600;
  border: 1px solid transparent; cursor: pointer; transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.btn:hover { text-decoration: none; }
.btn.primary { background: var(--teal); color: var(--graphite-950); }
.btn.primary:hover { background: var(--teal-strong); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--graphite-500); }
.btn.ghost:hover { border-color: var(--teal); color: var(--teal-strong); }

.hero-facts {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; margin: 0; padding: 0;
  background: var(--graphite-600); border: 1px solid var(--graphite-600);
  border-radius: var(--radius); overflow: hidden;
}
.hero-hint {
  position: absolute; right: 28px; bottom: 20px; z-index: 3;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; letter-spacing: 0.4px; color: var(--ink-3);
  background: rgba(23, 27, 26, 0.55); border: 1px solid var(--graphite-600);
  padding: 7px 13px; border-radius: 999px; pointer-events: none;
}
.hero-hint svg { display: block; opacity: 0.85; }

.hero-facts > div { background: var(--graphite-850); padding: 14px 16px; }
.hero-facts dt { font-size: 12px; letter-spacing: 0.8px; text-transform: uppercase; color: var(--ink-3); margin: 0 0 3px; }
.hero-facts dd { margin: 0; font-size: 17px; font-weight: 650; color: var(--ink); }

/* ---------------------------------------------------------------- bands */
.band { padding: 84px 0; border-top: 1px solid var(--graphite-700); background: var(--graphite-900); }
.band.alt { background: var(--graphite-850); }
.band.cta { background: linear-gradient(180deg, var(--graphite-850), var(--graphite-900)); }

h2 {
  margin: 0 0 14px; font-size: clamp(26px, 3.4vw, 36px); line-height: 1.18;
  letter-spacing: -0.6px; font-weight: 700;
}
.section-lede { margin: 0 0 40px; font-size: 18px; color: var(--ink-2); max-width: 72ch; }

.cols.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }

.card {
  background: var(--graphite-800);
  border: 1px solid var(--graphite-600);
  border-radius: var(--radius);
  padding: 22px 22px 20px;
  transition: border-color 140ms ease, transform 140ms ease;
}
.card:hover { border-color: var(--teal-line); transform: translateY(-2px); }
.card h3 { margin: 0 0 8px; font-size: 18px; font-weight: 650; color: var(--ink); }
.card p { margin: 0; color: var(--ink-2); font-size: 15.5px; }

code {
  font-family: var(--mono); font-size: 0.92em;
  background: var(--teal-soft); color: var(--teal-strong);
  padding: 1px 6px; border-radius: 5px;
}

/* ---------------------------------------------------------------- steps */
.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: 14px; }
.steps li {
  display: grid; grid-template-columns: 54px 1fr; grid-template-rows: auto auto;
  column-gap: 18px; align-items: start;
  background: var(--graphite-800); border: 1px solid var(--graphite-600);
  border-radius: var(--radius); padding: 20px 22px;
}
.steps .num {
  grid-row: 1 / span 2;
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--teal-soft); border: 1px solid var(--teal-line);
  color: var(--teal-strong); font-weight: 700; font-size: 18px;
}
.steps h3 { margin: 2px 0 4px; font-size: 18px; font-weight: 650; }
.steps p { margin: 0; color: var(--ink-2); font-size: 15.5px; }

/* ---------------------------------------------------------------- formats */
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 22px; padding: 0; }
.chips li {
  padding: 9px 18px; border-radius: 999px;
  background: var(--graphite-800); border: 1px solid var(--graphite-600);
  font-weight: 600; font-size: 15px; color: var(--ink);
  transition: border-color 140ms ease, color 140ms ease;
}
.chips li:hover { border-color: var(--teal); color: var(--teal-strong); }

.note {
  margin: 0; padding: 14px 18px; border-radius: var(--radius-sm);
  background: rgba(224, 179, 92, 0.10);
  border: 1px solid rgba(224, 179, 92, 0.38);
  color: var(--ink); font-size: 15.5px;
}

/* ---------------------------------------------------------------- table */
.table-scroll { overflow-x: auto; border: 1px solid var(--graphite-600); border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; min-width: 560px; }
caption { text-align: left; }
thead th {
  text-align: left; font-size: 12px; letter-spacing: 0.9px; text-transform: uppercase;
  color: var(--ink-3); font-weight: 650; padding: 14px 18px;
  background: var(--graphite-850); border-bottom: 1px solid var(--graphite-600);
}
tbody th {
  text-align: left; font-weight: 600; color: var(--ink); padding: 14px 18px;
  border-bottom: 1px solid var(--graphite-700); white-space: nowrap; vertical-align: top;
}
tbody td {
  padding: 14px 18px; color: var(--ink-2); font-size: 15.5px;
  border-bottom: 1px solid var(--graphite-700); vertical-align: top;
}
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }

/* ---------------------------------------------------------------- footer */
.foot { background: var(--graphite-950); border-top: 1px solid var(--graphite-700); padding: 34px 0; }
.foot-inner { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; }
.made { margin: 0; font-size: 15px; color: var(--ink-2); }
.made a { font-weight: 650; }
.repo { margin: 0; font-size: 14px; }
.repo a { font-weight: 600; }
.copy { margin: 0; font-size: 13px; color: var(--ink-3); max-width: 60ch; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 900px) {
  .cols.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* opens an empty band at the foot of the hero for the 3D mark to sit in,
     instead of it landing on top of the copy */
  .hero-inner { padding-bottom: 300px; }
}
/* the nav gained two more links (Name Builder, FAQ); tighten it below the
   desktop breakpoint so the six items keep a clean single row */
@media (max-width: 860px) {
  .topbar nav { gap: 14px; }
  .topbar nav a { font-size: 14px; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .wrap { padding: 0 18px; }
  .topbar nav { display: none; }
  .hero-inner { padding: 66px 18px 300px; max-width: none; }
  .hero-hint { right: auto; left: 18px; bottom: 14px; }
  .linkedin-float { right: 14px; bottom: 96px; gap: 8px; }
  .li-bubble { padding: 8px 11px; }
  .li-q { font-size: 11px; }
  .li-cta { font-size: 12.5px; }
  .li-mark { width: 40px; height: 40px; font-size: 18px; border-radius: 10px; }
  .cols.three { grid-template-columns: 1fr; }
  .band { padding: 60px 0; }
  .steps li { grid-template-columns: 44px 1fr; column-gap: 14px; padding: 18px; }
  .steps .num { width: 38px; height: 38px; font-size: 16px; border-radius: 10px; }
  .cta-row { flex-direction: column; align-items: stretch; }
  .btn { width: 100%; }
  .foot-inner { flex-direction: column; align-items: flex-start; }
}

/* The 3D hero is decoration; honour a reduced-motion preference by hiding it and
   letting the veil keep the text legible against a flat background. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .card:hover { transform: none; }
  /* the scene keeps rendering, just far more slowly - see scene.js */
}

/* ==========================================================================
   Interactive Naming Simulator
   ========================================================================== */
.sim-header { margin-bottom: 32px; }
.sim-box {
  background: var(--graphite-800);
  border: 1px solid var(--graphite-600);
  border-radius: var(--radius);
  padding: 30px;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 32px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.sim-controls { display: flex; flex-direction: column; gap: 18px; }
.sim-label { font-size: 14px; font-weight: 650; color: var(--ink); text-transform: uppercase; letter-spacing: 0.8px; }

.sim-input-wrap { display: flex; gap: 8px; }
.sim-input {
  flex: 1;
  background: var(--graphite-900);
  border: 1px solid var(--graphite-600);
  border-radius: var(--radius-sm);
  color: var(--teal-strong);
  font-family: var(--mono);
  font-size: 15px;
  padding: 10px 14px;
  outline: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.sim-input:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 2px rgba(85, 168, 162, 0.25);
}

.sim-btn-reset {
  background: var(--graphite-700);
  border: 1px solid var(--graphite-600);
  color: var(--ink-2);
  border-radius: var(--radius-sm);
  padding: 0 16px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 140ms ease;
}
.sim-btn-reset:hover {
  background: var(--graphite-600);
  color: var(--ink);
}

.sim-tokens { display: flex; flex-direction: column; gap: 8px; }
.sim-tokens-title { font-size: 13px; color: var(--ink-3); }
.token-list { display: flex; flex-wrap: wrap; gap: 7px; }
.token-chip {
  background: var(--teal-soft);
  border: 1px solid var(--teal-line);
  color: var(--teal-strong);
  font-family: var(--mono);
  font-size: 12.5px;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 130ms ease;
}
.token-chip:hover {
  background: var(--teal-deep);
  color: #ffffff;
  border-color: var(--teal);
  transform: translateY(-1px);
}

.sim-fields-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 6px;
}
.sim-field { display: flex; flex-direction: column; gap: 4px; }
.sim-field label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--ink-3); }
.sim-field input {
  background: var(--graphite-850);
  border: 1px solid var(--graphite-600);
  border-radius: 6px;
  color: var(--ink);
  font-size: 14px;
  padding: 7px 10px;
  outline: none;
  transition: border-color 140ms ease;
}
.sim-field input:focus { border-color: var(--teal); }

.sim-preview {
  background: var(--graphite-900);
  border: 1px solid var(--graphite-600);
  border-radius: var(--radius);
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.sim-preview-badge {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--teal);
  margin-bottom: 16px;
}

.sim-files { display: flex; flex-direction: column; gap: 12px; }
.sim-file-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--graphite-850);
  border: 1px solid var(--graphite-700);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
}
.sim-fmt {
  font-size: 11px;
  font-weight: 750;
  padding: 3px 7px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}
.fmt-pdf { background: rgba(224, 86, 86, 0.2); color: #f28b82; border: 1px solid rgba(224, 86, 86, 0.4); }
.fmt-dwg { background: rgba(86, 142, 224, 0.2); color: #8ab4f8; border: 1px solid rgba(86, 142, 224, 0.4); }
.fmt-ifc { background: rgba(85, 168, 162, 0.2); color: var(--teal-strong); border: 1px solid var(--teal-line); }

.sim-filename {
  flex: 1;
  font-family: var(--mono);
  font-size: 13.5px;
  color: var(--ink);
  word-break: break-all;
}

.sim-copy-btn {
  background: var(--graphite-700);
  border: 1px solid var(--graphite-600);
  color: var(--ink-2);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 130ms ease;
}
.sim-copy-btn:hover {
  background: var(--teal-soft);
  color: var(--teal-strong);
  border-color: var(--teal-line);
}

.sim-note {
  margin: 18px 0 0;
  font-size: 13px;
  color: var(--ink-3);
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.5;
}
.sim-note svg { flex-shrink: 0; margin-top: 3px; color: var(--teal); }

/* ==========================================================================
   FAQ Accordion
   ========================================================================== */
.faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 32px;
}

.faq-item {
  background: var(--graphite-800);
  border: 1px solid var(--graphite-600);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 150ms ease;
}
.faq-item[open] {
  border-color: var(--teal-line);
}

.faq-trigger {
  padding: 18px 22px;
  font-size: 17px;
  font-weight: 650;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
  transition: color 130ms ease, background 130ms ease;
}
.faq-trigger::-webkit-details-marker { display: none; }
.faq-trigger:hover {
  color: var(--teal-strong);
  background: rgba(85, 168, 162, 0.05);
}

.faq-icon {
  font-size: 20px;
  font-weight: 400;
  color: var(--teal);
  transition: transform 180ms ease;
}
.faq-item[open] .faq-icon {
  transform: rotate(45deg);
}

.faq-body {
  padding: 0 22px 20px;
  color: var(--ink-2);
  font-size: 15.5px;
  line-height: 1.6;
}
.faq-body p { margin: 0; }

@media (max-width: 900px) {
  .sim-box { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .sim-box { padding: 18px; }
  .sim-fields-grid { grid-template-columns: 1fr; }
  .sim-input-wrap { flex-direction: column; }
}