:root {
    --wood-50: #faf6f1;
    --wood-100: #f0e8dc;
    --wood-200: #e2d2bb;
    --wood-300: #d1b896;
    --wood-400: #c19b6d;
    --wood-500: #a67c52;
    --wood-600: #8b6342;
    --wood-700: #6d4c35;
    --wood-800: #4a3425;
    --wood-900: #2d1f17;
    --sawdust: #f7f3ed;
    --chalk: #ffffff;
    --graphite: #1a1612;
    --pencil: #3d342b;
    --steel: #6b7280;
    --blade: #e74c3c;
    --blade-hover: #c0392b;
    --green-ok: #27ae60;
    --green-light: #eafaf1;
    --amber: #f39c12;
    --amber-light: #fef9e7;
    --kerf: rgba(231, 76, 60, 0.15);
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --shadow-sm: 0 1px 3px rgba(45,31,23,0.06);
    --shadow-md: 0 4px 16px rgba(45,31,23,0.08);
    --shadow-lg: 0 8px 32px rgba(45,31,23,0.12);
    --shadow-xl: 0 16px 48px rgba(45,31,23,0.16);
    --font-body: 'DM Sans', system-ui, sans-serif;
    --font-display: 'Fraunces', Georgia, serif;
    --font-mono: 'JetBrains Mono', monospace;
  }

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

  html { scroll-behavior: smooth; }

  body {
    font-family: var(--font-body);
    color: var(--pencil);
    background: var(--sawdust);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  /* ═══════════════════ NAV ═══════════════════ */
  nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(247, 243, 237, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--wood-200);
    padding: 0 24px;
  }

  .nav-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
  }

  .logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--graphite);
  }

  .logo-icon {
    width: 28px;
    height: 28px;
    background: var(--wood-800);
    border-radius: 6px;
    display: grid;
    place-items: center;
    position: relative;
    overflow: hidden;
  }

  .logo-icon::before {
    content: '';
    position: absolute;
    width: 1px;
    height: 100%;
    background: var(--blade);
    left: 60%;
    opacity: 0.9;
  }

  .logo-icon::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    background: var(--blade);
    top: 40%;
    opacity: 0.9;
  }

  .logo-text {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: -0.3px;
  }

  .logo-text span { color: var(--wood-500); }

  .nav-links {
    display: flex;
    align-items: center;
    gap: 28px;
    list-style: none;
  }

  .nav-links a {
    font-size: 14px;
    font-weight: 500;
    color: var(--pencil);
    text-decoration: none;
    opacity: 0.7;
    transition: opacity 0.2s;
  }

  .nav-links a:hover { opacity: 1; }

  .nav-cta {
    background: var(--wood-800) !important;
    color: var(--chalk) !important;
    padding: 7px 16px;
    border-radius: var(--radius-sm);
    font-size: 13px !important;
    font-weight: 600 !important;
    opacity: 1 !important;
    transition: background 0.2s !important;
  }

  .nav-cta:hover { background: var(--graphite) !important; }

  .nav-burger {
    display: none;
    background: transparent;
    border: 0;
    width: 40px;
    height: 40px;
    cursor: pointer;
    padding: 0;
    position: relative;
    margin-left: auto;
  }
  .nav-burger span {
    display: block;
    position: absolute;
    left: 8px;
    right: 8px;
    height: 2px;
    background: var(--graphite);
    border-radius: 2px;
    transition: transform 0.2s, opacity 0.2s, top 0.2s;
  }
  .nav-burger span:nth-child(1) { top: 13px; }
  .nav-burger span:nth-child(2) { top: 19px; }
  .nav-burger span:nth-child(3) { top: 25px; }
  .nav-burger.is-open span:nth-child(1) { top: 19px; transform: rotate(45deg); }
  .nav-burger.is-open span:nth-child(2) { opacity: 0; }
  .nav-burger.is-open span:nth-child(3) { top: 19px; transform: rotate(-45deg); }

  @media (max-width: 760px) {
    .nav-burger { display: block; }
    .nav-links {
      display: none;
      position: absolute;
      top: 56px;
      left: 0;
      right: 0;
      background: var(--sawdust);
      border-bottom: 1px solid var(--wood-200);
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      padding: 8px 24px 16px;
      box-shadow: var(--shadow-md);
      z-index: 99;
    }
    .nav-links.is-open { display: flex; }
    .nav-links li {
      width: 100%;
      padding: 12px 0;
      border-bottom: 1px solid var(--wood-200);
    }
    .nav-links li:last-child { border-bottom: 0; }
    .nav-links a { font-size: 16px; opacity: 0.85; display: block; }
    .nav-cta {
      display: inline-block;
      text-align: center;
      margin-top: 8px;
      padding: 10px 18px !important;
      font-size: 14px !important;
    }
    .nav-user { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
    .nav-user-link { padding: 6px 0; }
  }

  /* ═══════════════════ HERO - TOOL FIRST ═══════════════════ */
  .hero {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 24px 60px;
  }

  .hero-header {
    text-align: center;
    margin-bottom: 36px;
  }

  .early-access-badge {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: var(--wood-700);
    background: var(--wood-100);
    border: 1px solid var(--wood-300);
    padding: 6px 14px;
    border-radius: 999px;
    text-decoration: none;
    margin-bottom: 18px;
    transition: background 0.15s, color 0.15s;
  }
  .early-access-badge:hover {
    background: var(--wood-200);
    color: var(--wood-800);
  }

  .hero-header h1 {
    font-family: var(--font-display);
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 800;
    color: var(--graphite);
    letter-spacing: -1px;
    line-height: 1.15;
    margin-bottom: 12px;
  }

  .hero-header h1 .accent { color: var(--wood-500); }

  .hero-header p {
    font-size: 16px;
    color: var(--steel);
    max-width: 520px;
    margin: 0 auto;
  }

  /* ─── Tool Container ─── */
  .tool {
    background: var(--chalk);
    border: 1px solid var(--wood-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
  }

  .tool-grid {
    display: grid;
    grid-template-columns: 380px 1fr;
    min-height: 560px;
  }

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

  /* ─── Input Panel ─── */
  .input-panel {
    padding: 28px;
    border-right: 1px solid var(--wood-200);
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: var(--chalk);
    /* Grid items default to min-width:auto, so this column could not shrink
       below its widest child's min-content (the add-part row, 463px + padding
       = 519px). On a phone that pinned the panel at 519 inside a 340px cell and
       .tool's overflow:hidden silently cut the rest off - taking the "+" button,
       Qty and the inch toggle with it. */
    min-width: 0;
  }

  .panel-section h3 {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--steel);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .panel-section h3 .step {
    background: var(--wood-800);
    color: var(--chalk);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-family: var(--font-mono);
  }

  .stock-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .input-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .input-group label {
    font-size: 12px;
    font-weight: 500;
    color: var(--pencil);
    opacity: 0.7;
  }

  .field-hint {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    font-family: var(--font-mono);
    color: var(--pencil);
    opacity: 0.55;
  }

  /* Safety net: the UA rule [hidden] { display: none } has specificity 0,1,0, so
     any later author rule that sets `display` on the same element (e.g.
     .share-panel { display: flex }) silently wins and the element stays visible
     while hidden=true. Keep this ahead of any such rule. */
  [hidden] { display: none !important; }

  .share-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
    padding: 12px;
    border: 1px dashed var(--wood-300);
    border-radius: 8px;
    background: var(--wood-50);
  }

  .share-panel > label {
    font-size: 12px;
    font-weight: 500;
    color: var(--pencil);
    opacity: 0.7;
  }

  .share-link-row {
    display: flex;
    gap: 6px;
  }

  .share-link-row input {
    flex: 1;
    min-width: 0;
    font-family: var(--font-mono);
    font-size: 12px;
    padding: 6px 8px;
    border: 1px solid var(--wood-200);
    border-radius: 6px;
    background: #fff;
    color: var(--pencil);
  }

  .share-channels {
    display: flex;
    gap: 8px;
  }

  .share-channels a {
    flex: 1;
    text-align: center;
    padding: 7px 10px;
    border: 1px solid var(--wood-200);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    color: var(--wood-700);
    background: #fff;
  }

  .share-channels a:hover { border-color: var(--wood-400); background: var(--wood-50); }

  .input-group input, .input-group select {
    width: 100%;
    font-family: var(--font-mono);
    font-size: 14px;
    padding: 8px 10px;
    border: 1.5px solid var(--wood-200);
    border-radius: var(--radius-sm);
    background: var(--sawdust);
    color: var(--graphite);
    transition: border-color 0.15s;
    outline: none;
  }

  .input-group input:focus, .input-group select:focus {
    border-color: var(--wood-500);
  }

  .input-group input::placeholder {
    color: var(--wood-300);
  }

  .input-full { grid-column: 1 / -1; }

  /* ─── Parts Table ─── */
  .parts-table-wrap {
    flex: 1;
    overflow-y: auto;
    max-height: 220px;
    border: 1.5px solid var(--wood-200);
    border-radius: var(--radius-sm);
    background: var(--sawdust);
  }

  .parts-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
  }

  .parts-table thead {
    position: sticky;
    top: 0;
    z-index: 2;
  }

  .parts-table th {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--steel);
    background: var(--wood-100);
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid var(--wood-200);
  }

  .parts-table td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--wood-100);
    font-family: var(--font-mono);
    font-size: 13px;
  }

  .parts-table tr:last-child td { border-bottom: none; }

  .parts-table .part-color {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    display: inline-block;
  }

  .add-part-row {
    display: flex;
    gap: 6px;
    margin-top: 4px;
  }

  /* ─── Extra sheet sizes ─── */
  .extra-stocks { display: flex; flex-direction: column; gap: 6px; }
  .extra-stocks:not(:empty) { margin-top: 8px; }

  .extra-stock-row {
    display: flex;
    gap: 6px;
    align-items: center;
    /* Six controls now that a row names its own material: let them wrap rather
       than shrink past thumb size on a phone. */
    flex-wrap: wrap;
  }

  .extra-stock-row input,
  .extra-stock-row select {
    flex: 1;
    min-width: 64px;
    font-family: var(--font-mono);
    font-size: 13px;
    padding: 7px 8px;
    border: 1px solid var(--wood-200);
    border-radius: var(--radius-sm);
    background: var(--chalk);
    color: var(--graphite);
    outline: none;
  }
  .extra-stock-row select { flex: 1.4; font-family: var(--font-body); }
  .extra-stock-row input:focus,
  .extra-stock-row select:focus { border-color: var(--wood-500); }

  /* Which board a part is cut from. Only rendered once the job holds more than
     one material, so it costs a single-material list nothing. */
  .part-material {
    width: 100%;
    min-width: 90px;
    font-family: var(--font-body);
    font-size: 12px;
    padding: 3px 4px;
    border: 1px solid var(--wood-200);
    border-radius: var(--radius-sm);
    background: var(--chalk);
    color: var(--graphite);
    outline: none;
  }
  .part-material:focus { border-color: var(--wood-500); }

  .add-part-row select {
    max-width: 120px;
    font-family: var(--font-body);
    font-size: 13px;
    padding: 7px 6px;
    border: 1px solid var(--wood-200);
    border-radius: var(--radius-sm);
    background: var(--chalk);
    color: var(--graphite);
    outline: none;
  }

  /* One line per board the job actually opens: a mixed job cannot be shopped
     for from a single total. */
  .material-breakdown {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    border: 1px solid var(--wood-200);
    border-radius: var(--radius-sm);
    background: var(--sawdust);
  }

  .material-breakdown-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 13px;
  }

  .material-breakdown-name { font-weight: 600; color: var(--graphite); }
  .material-breakdown-qty { color: var(--wood-700); margin-left: auto; font-family: var(--font-mono); }
  .material-breakdown-cost { font-family: var(--font-mono); color: var(--graphite); min-width: 60px; text-align: right; }

  .btn-add-stock {
    margin-top: 8px;
    align-self: flex-start;
    background: var(--wood-50);
    border: 1px dashed var(--wood-400);
    border-radius: var(--radius-sm);
    color: var(--wood-800);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 12px;
    cursor: pointer;
  }
  .btn-add-stock:hover { border-color: var(--wood-600); background: var(--wood-100); }

  .stock-hint {
    margin-top: 6px;
    max-width: 42ch;
    color: var(--wood-600);
    font-size: 12px;
    line-height: 1.45;
  }

  .add-part-row input {
    font-family: var(--font-mono);
    font-size: 13px;
    padding: 7px 8px;
    border: 1.5px dashed var(--wood-300);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--graphite);
    outline: none;
    flex: 1;
    min-width: 0;
  }

  .add-part-row input::placeholder { color: var(--wood-300); font-size: 12px; }
  .add-part-row input:focus { border-color: var(--wood-500); border-style: solid; }

  .btn-add {
    background: var(--wood-100);
    border: 1.5px solid var(--wood-200);
    border-radius: var(--radius-sm);
    color: var(--wood-600);
    font-size: 18px;
    width: 34px;
    cursor: pointer;
    transition: all 0.15s;
    display: grid;
    place-items: center;
  }

  .btn-add:hover {
    background: var(--wood-200);
    color: var(--wood-800);
  }

  /* ─── Settings Row ─── */
  .settings-row {
    display: flex;
    gap: 12px;
    align-items: end;
  }

  .settings-row .input-group { flex: 1; }

  /* ─── Optimize Button ─── */
  .btn-optimize {
    width: 100%;
    padding: 14px;
    background: var(--blade);
    color: var(--chalk);
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  .btn-optimize:hover {
    background: var(--blade-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(231, 76, 60, 0.3);
  }

  .btn-optimize:active { transform: translateY(0); }

  .btn-optimize svg { width: 18px; height: 18px; }

  /* ─── Result Panel ─── */
  .result-panel {
    padding: 28px;
    display: flex;
    flex-direction: column;
    background: var(--sawdust);
  }

  .result-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
  }

  .result-header h3 {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--steel);
  }

  .result-actions {
    display: flex;
    gap: 8px;
  }

  .btn-sm {
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--wood-200);
    background: var(--chalk);
    color: var(--pencil);
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    gap: 5px;
  }

  .btn-sm:hover { border-color: var(--wood-400); background: var(--wood-50); }

  /* ─── Cutting Diagram ─── */
  .diagram-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .sheet-diagram {
    background: var(--chalk);
    border: 2px solid var(--wood-300);
    border-radius: var(--radius-md);
    position: relative;
    aspect-ratio: 2 / 1;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
  }

  .sheet-label {
    position: absolute;
    top: -10px;
    left: 12px;
    background: var(--wood-800);
    color: var(--chalk);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 3px;
    letter-spacing: 0.5px;
  }

  /* Mock cut pieces */
  .piece {
    position: absolute;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    color: rgba(0,0,0,0.6);
    transition: all 0.3s ease;
    cursor: default;
    border: 1px solid rgba(0,0,0,0.08);
  }

  .piece:hover {
    filter: brightness(0.95);
    z-index: 2;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  }

  .piece-a { background: #a8d8ea; top: 2%; left: 1%; width: 48%; height: 55%; }
  .piece-b { background: #f6d186; top: 2%; left: 50%; width: 30%; height: 55%; }
  .piece-c { background: #cce5ae; top: 2%; left: 81%; width: 18%; height: 38%; }
  .piece-d { background: #f2b5a0; top: 60%; left: 1%; width: 35%; height: 38%; }
  .piece-e { background: #d4b8e0; top: 60%; left: 37%; width: 25%; height: 38%; }
  .piece-f { background: #b8d4e3; top: 60%; left: 63%; width: 18%; height: 38%; }
  .piece-waste {
    background: repeating-linear-gradient(
      45deg,
      var(--wood-100),
      var(--wood-100) 4px,
      var(--wood-200) 4px,
      var(--wood-200) 8px
    );
    top: 42%; left: 81%; width: 18%; height: 16%;
    font-size: 9px;
    color: var(--steel);
  }
  .piece-waste2 {
    background: repeating-linear-gradient(
      45deg,
      var(--wood-100),
      var(--wood-100) 4px,
      var(--wood-200) 4px,
      var(--wood-200) 8px
    );
    top: 60%; left: 82%; width: 17%; height: 38%;
    font-size: 9px;
    color: var(--steel);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    font-family: var(--font-mono);
    font-weight: 600;
    cursor: default;
  }

  /* ─── Stats Bar ─── */
  .stats-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
  }

  .stat-card {
    background: var(--chalk);
    border: 1px solid var(--wood-200);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    text-align: center;
  }

  .stat-value {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 700;
    color: var(--graphite);
    line-height: 1;
    margin-bottom: 4px;
  }

  .stat-value.good { color: var(--green-ok); }
  .stat-value.warn { color: var(--amber); }

  .stat-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--steel);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  /* ─── Sheet inventory note (needs vs on-hand) ─── */
  .inventory-note {
    margin-top: 12px;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    font-size: 14px;
    line-height: 1.55;
  }
  .inventory-ok {
    background: #eef6ec;
    border: 1px solid #cbe3c4;
    color: #2f6b2f;
  }
  .inventory-short {
    background: #fdf1ec;
    border: 1px solid #f2cfc0;
    border-left: 4px solid var(--blade);
    color: var(--pencil);
  }
  .inventory-title {
    font-weight: 700;
    color: var(--graphite);
    margin-bottom: 4px;
  }
  .inventory-row strong { color: var(--blade-hover); }
  .inventory-total {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed var(--wood-300);
    font-weight: 600;
    color: var(--graphite);
  }

  @media (max-width: 600px) {
    .stats-bar { grid-template-columns: repeat(2, 1fr); }
  }

  /* ─── Save CTA (anon, post-result) ─── */
  .save-cta-anon {
    margin-top: 16px;
    padding: 14px 18px;
    background: linear-gradient(135deg, #fff7e6 0%, #fff0d4 100%);
    border: 1px solid #e8c98a;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
  }
  .save-cta-anon-text {
    font-size: 14px;
    color: var(--graphite);
    line-height: 1.4;
  }
  .save-cta-anon-text strong { color: var(--graphite); font-weight: 700; }
  .save-cta-anon-btn {
    background: var(--graphite);
    color: var(--chalk);
    padding: 10px 18px;
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 600;
    border: 0;
    cursor: pointer;
    white-space: nowrap;
  }
  .save-cta-anon-btn:hover { opacity: 0.88; }

  /* ═══════════════════ SOCIAL PROOF BAR ═══════════════════ */
  .proof-bar {
    max-width: 1200px;
    margin: 0 auto 60px;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    opacity: 0.5;
  }

  .proof-item {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--steel);
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .proof-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green-ok);
  }

  /* ═══════════════════ HOW IT WORKS ═══════════════════ */
  .section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 24px;
  }

  .section-header {
    text-align: center;
    margin-bottom: 48px;
  }

  .section-header h2 {
    font-family: var(--font-display);
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 700;
    color: var(--graphite);
    letter-spacing: -0.5px;
    margin-bottom: 10px;
  }

  .section-header p {
    font-size: 15px;
    color: var(--steel);
    max-width: 460px;
    margin: 0 auto;
  }

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

  @media (max-width: 700px) {
    .steps-grid { grid-template-columns: 1fr; }
  }

  .step-card {
    text-align: center;
    padding: 32px 24px;
  }

  .step-number {
    font-family: var(--font-display);
    font-size: 48px;
    font-weight: 800;
    color: var(--wood-200);
    line-height: 1;
    margin-bottom: 16px;
  }

  .step-card h3 {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    color: var(--graphite);
    margin-bottom: 8px;
  }

  .step-card p {
    font-size: 14px;
    color: var(--steel);
    line-height: 1.6;
  }

  /* ═══════════════════ SAVINGS SECTION ═══════════════════ */
  .savings {
    background: var(--wood-800);
    color: var(--chalk);
    border-radius: var(--radius-lg);
    padding: 48px;
    margin: 0 24px;
    max-width: 1152px;
    margin-left: auto;
    margin-right: auto;
  }

  .savings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
  }

  @media (max-width: 700px) {
    .savings-grid { grid-template-columns: 1fr; }
    .savings { padding: 32px 24px; }
  }

  .savings h2 {
    font-family: var(--font-display);
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 700;
    letter-spacing: -0.5px;
    margin-bottom: 16px;
    line-height: 1.2;
  }

  .savings p {
    font-size: 15px;
    opacity: 0.75;
    line-height: 1.7;
    margin-bottom: 24px;
  }

  .savings-example {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--radius-md);
    padding: 24px;
  }

  .savings-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    font-size: 14px;
  }

  .savings-row:last-child { border-bottom: none; }

  .savings-row .label { opacity: 0.6; }
  .savings-row .val { font-family: var(--font-mono); font-weight: 600; }
  .savings-row .val.highlight { color: var(--green-ok); font-size: 18px; }

  /* ═══════════════════ TEMPLATES ═══════════════════ */
  .templates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
  }

  .template-card {
    background: var(--chalk);
    border: 1.5px solid var(--wood-200);
    border-radius: var(--radius-md);
    padding: 20px;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    color: inherit;
  }

  .template-card:hover {
    border-color: var(--wood-400);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
  }

  .template-icon {
    font-size: 28px;
    margin-bottom: 10px;
  }

  .template-card h4 {
    font-size: 15px;
    font-weight: 600;
    color: var(--graphite);
    margin-bottom: 4px;
  }

  .template-card p {
    font-size: 12px;
    color: var(--steel);
  }

  .template-parts {
    margin-top: 10px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--wood-500);
  }

  /* ═══════════════════ FAQ ═══════════════════ */
  .faq-list {
    max-width: 680px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .faq-item {
    border-bottom: 1px solid var(--wood-200);
  }

  .faq-q {
    width: 100%;
    padding: 18px 0;
    background: none;
    border: none;
    text-align: left;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    color: var(--graphite);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .faq-q::after {
    content: '+';
    font-size: 20px;
    font-weight: 400;
    color: var(--steel);
    transition: transform 0.2s;
  }

  .faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  .faq-a-inner {
    padding: 0 0 18px;
    font-size: 14px;
    color: var(--steel);
    line-height: 1.7;
  }

  .faq-item.open .faq-q::after { transform: rotate(45deg); }
  .faq-item.open .faq-a { max-height: 200px; }

  /* ═══════════════════ FOOTER ═══════════════════ */
  footer {
    border-top: 1px solid var(--wood-200);
    padding: 40px 24px;
    margin-top: 40px;
  }

  .footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
  }

  .footer-copy {
    font-size: 13px;
    color: var(--steel);
  }

  .footer-links {
    display: flex;
    gap: 24px;
    list-style: none;
  }

  .footer-links a {
    font-size: 13px;
    color: var(--steel);
    text-decoration: none;
  }

  .footer-links a:hover { color: var(--pencil); }

  /* ═══════════════════ ANIMATIONS ═══════════════════ */
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .hero-header { animation: fadeUp 0.6s ease both; }
  .tool { animation: fadeUp 0.6s ease 0.15s both; }
  .proof-bar { animation: fadeUp 0.6s ease 0.3s both; }

  /* ═══════════════════ TOP TOGGLES ═══════════════════ */
  .top-toggles {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
  }

  .mode-toggle, .unit-toggle {
    display: flex;
    border: 1.5px solid var(--wood-200);
    border-radius: var(--radius-sm);
    overflow: hidden;
  }

  .mode-toggle button, .unit-toggle button {
    flex: 1;
    padding: 8px 16px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--steel);
    transition: all 0.15s;
  }

  .mode-toggle button.active, .unit-toggle button.active {
    background: var(--wood-800);
    color: var(--chalk);
  }

  .error-banner {
    background: #fef2f2;
    border: 1.5px solid #fecaca;
    color: #dc2626;
    font-size: 13px;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    margin-bottom: 12px;
  }

  /* The one remedy the tool can carry out itself, inside the message that asks
     for it. Prose alone did not move anyone: three runs on one board-shaped
     stock and two more boards added to the list instead (prod 2026-08-07). */
  .btn-error-action {
    display: block;
    margin-top: 10px;
    padding: 7px 14px;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: #dc2626;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.15s;
  }

  .btn-error-action:hover { background: #b91c1c; }

  /* A layout that packed but should not be cut - a kerf wider than any blade.
     Amber rather than the banner's red: the run succeeded and the diagram
     below it is still worth reading, so this must not look like a failure.
     Prod 2026-07-13..08-10: 37 runs above 20mm, one a six-sheet job at
     81.28mm, none of which the tool said a word about. */
  .kerf-warning {
    background: #fffbeb;
    border: 1.5px solid #fde68a;
    color: #92400e;
    font-size: 13px;
    line-height: 1.5;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    margin-bottom: 14px;
  }

  /* ═══════════════════ SVG DIAGRAM ═══════════════════ */
  /* The sheet/bar labels are absolutely positioned at top:-10px of their own
     diagram. Without a positioned wrapper they anchor to .tool instead and pile
     up over the left panel, ~150px above the sheet they name. */
  .sheet-wrapper { width: 100%; margin-bottom: 16px; position: relative; }

  .sheet-svg {
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    border: 2px solid var(--wood-300);
  }

  .piece-rect { cursor: default; transition: filter 0.15s; }
  .piece-rect:hover { filter: brightness(0.92); }

  .piece-tooltip {
    display: none;
    position: fixed;
    z-index: 1000;
    background: var(--graphite);
    color: var(--chalk);
    font-size: 12px;
    line-height: 1.5;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    pointer-events: none;
    transform: translate(-50%, -100%);
    white-space: nowrap;
    box-shadow: var(--shadow-md);
  }

  .sheet-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 12px;
  }

  .sheet-nav-label {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--steel);
  }

  .sheet-nav button:disabled { opacity: 0.3; cursor: default; }

  .parts-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--wood-200);
  }

  .legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--pencil);
  }

  .legend-color {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    border: 1px solid rgba(0,0,0,0.08);
    flex-shrink: 0;
  }

  .bar-wrapper { margin-bottom: 16px; position: relative; }
  .bar-svg { width: 100%; height: auto; border-radius: var(--radius-sm); border: 2px solid var(--wood-300); box-shadow: var(--shadow-sm); }

  .stat-value.bad { color: var(--blade); }
  .stat-value.ok { color: var(--amber); }

  /* ═══════════════════ PRINT ═══════════════════ */
  @media print {
    nav, .input-panel, .btn-optimize, .proof-bar,
    .section, .savings, footer, .hero-header,
    .result-actions, .sheet-nav, .piece-tooltip { display: none !important; }
    .result-panel { width: 100%; padding: 0; }
    .sheet-svg { width: 100%; page-break-after: always; }
    .tool-grid { grid-template-columns: 1fr !important; }
  }

  /* ═══════════════════ MOBILE ═══════════════════ */
  @media (max-width: 900px) {
    .tool-grid { grid-template-columns: 1fr; }
    .input-panel { border-right: none; border-bottom: 1px solid var(--wood-200); }
    .stats-bar { grid-template-columns: repeat(2, 1fr); }
  }

  @media (max-width: 480px) {
    .stock-inputs { grid-template-columns: 1fr; }
    .add-part-row input { font-size: 16px; }
    .input-group input, .input-group select { font-size: 16px; }

    /* The label is a small pill floating above its sheet on a wide screen, but
       "Sheet 1 of 2 · Plywood (18mm) 96.06 × 48.03 in" is wider than a phone
       sheet: absolute-positioned it wraps to two lines and covers the diagram.
       Put it in the flow instead. */
    .sheet-label, .bar-wrapper .sheet-label {
      position: static;
      display: block;
      margin-bottom: 8px;
      border-radius: var(--radius-sm);
      line-height: 1.5;
    }
  }

  .btn-delete {
    background: none;
    border: none;
    color: var(--steel);
    cursor: pointer;
    font-size: 16px;
    padding: 2px 6px;
    border-radius: 4px;
    transition: all 0.15s;
  }
  .btn-delete:hover { color: var(--blade); background: var(--kerf); }

  .btn-optimize:disabled { opacity: 0.7; cursor: wait; }
  /* Share before a layout exists: look unavailable, and say why via title. */
  .btn-save:disabled { opacity: 0.45; cursor: not-allowed; }
  .btn-optimize svg { width: 18px; height: 18px; }

  /* ═══════════════════ PRICING ═══════════════════ */
  .pricing-wrap {
    max-width: 1080px;
    margin: 0 auto;
    padding: 40px 24px 80px;
  }
  .pricing-header {
    text-align: center;
    margin-bottom: 48px;
  }
  .pricing-header h1 {
    font-family: var(--font-display);
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 700;
    color: var(--graphite);
    letter-spacing: -0.5px;
    line-height: 1.15;
    margin: 14px 0 14px;
  }
  .pricing-header p {
    color: var(--steel);
    font-size: 16px;
    max-width: 620px;
    margin: 0 auto;
    line-height: 1.65;
  }
  .pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    max-width: 760px;
    margin: 0 auto;
  }
  .price-card {
    position: relative;
    background: var(--chalk);
    border: 1px solid var(--wood-200);
    border-radius: var(--radius-lg);
    padding: 28px 26px 30px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
  }
  .price-card--current {
    border-color: var(--wood-500);
    box-shadow: var(--shadow-md);
  }
  .price-card--future {
    background: var(--sawdust);
    border-style: dashed;
  }
  .price-card-tag {
    position: absolute;
    top: -11px;
    left: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--wood-500);
    color: white;
  }
  .price-card-tag--soon {
    background: var(--wood-200);
    color: var(--wood-800);
  }
  .price-card h3 {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 700;
    color: var(--graphite);
    margin-bottom: 8px;
  }
  .price-card-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap;
  }
  .price-amount {
    font-family: var(--font-display);
    font-size: 38px;
    font-weight: 700;
    color: var(--graphite);
    line-height: 1;
  }
  .price-period {
    font-size: 13px;
    color: var(--steel);
  }
  .price-features {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    flex: 1;
  }
  .price-features li {
    font-size: 14px;
    color: var(--pencil);
    padding: 6px 0;
    border-bottom: 1px dashed var(--wood-100);
  }
  .price-features li:last-child { border-bottom: none; }
  .price-cta {
    display: block;
    text-align: center;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: background 0.15s, transform 0.15s;
  }
  .price-cta--primary {
    background: var(--wood-700);
    color: white;
  }
  .price-cta--primary:hover {
    background: var(--wood-800);
    transform: translateY(-1px);
  }
  .price-note {
    background: var(--wood-100);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    font-size: 13px;
    color: var(--wood-800);
    line-height: 1.5;
  }
  .price-note strong { color: var(--graphite); }

  .pricing-faq {
    max-width: 680px;
    margin: 72px auto 0;
  }
  .pricing-faq h2 {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    color: var(--graphite);
    text-align: center;
    margin-bottom: 28px;
  }
  .pricing-faq-item {
    padding: 18px 0;
    border-bottom: 1px solid var(--wood-100);
  }
  .pricing-faq-item h4 {
    font-size: 15px;
    font-weight: 600;
    color: var(--graphite);
    margin-bottom: 6px;
  }
  .pricing-faq-item p {
    font-size: 14px;
    color: var(--pencil);
    line-height: 1.65;
  }

  /* ═══════════════════ AUTH ═══════════════════ */
  .auth-wrap {
    max-width: 420px;
    margin: 0 auto;
    padding: 48px 24px 80px;
  }
  .auth-card {
    background: var(--chalk);
    border: 1px solid var(--wood-200);
    border-radius: var(--radius-lg);
    padding: 32px 28px;
    box-shadow: var(--shadow-md);
  }
  .auth-card h1 {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 700;
    color: var(--graphite);
    margin-bottom: 6px;
  }
  .auth-sub {
    font-size: 14px;
    color: var(--steel);
    margin-bottom: 22px;
  }
  .auth-flash {
    padding: 10px 12px;
    border-radius: var(--radius-md);
    font-size: 13px;
    margin-bottom: 16px;
  }
  .auth-flash--error {
    background: #fdecea;
    color: var(--blade-hover);
    border: 1px solid #f5c6c0;
  }
  .auth-flash--ok {
    background: var(--green-light);
    color: var(--green-ok);
    border: 1px solid #b9e7cc;
  }
  .auth-form { display: flex; flex-direction: column; gap: 14px; }
  .auth-form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--pencil);
  }
  .auth-form label span { color: var(--steel); font-weight: 500; }
  .auth-form input {
    padding: 10px 12px;
    border: 1px solid var(--wood-200);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-family: inherit;
    background: var(--sawdust);
    color: var(--graphite);
    transition: border-color 0.15s, background 0.15s;
  }
  .auth-form input:focus {
    outline: none;
    border-color: var(--wood-500);
    background: var(--chalk);
  }
  .auth-form button {
    margin-top: 6px;
  }
  .auth-alt {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px dashed var(--wood-200);
    font-size: 13px;
    color: var(--steel);
    text-align: center;
  }
  .auth-alt a { color: var(--wood-700); font-weight: 600; text-decoration: none; }
  .auth-alt a:hover { color: var(--wood-800); text-decoration: underline; }
  .auth-alt span { margin: 0 8px; color: var(--wood-300); }

  /* Nav auth state */
  .nav-user {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .nav-user-name {
    font-size: 13px;
    color: var(--pencil);
    font-weight: 500;
  }
  .nav-link-btn {
    background: none;
    border: none;
    font: inherit;
    font-size: 14px;
    color: var(--steel);
    cursor: pointer;
    padding: 0;
  }
  .nav-link-btn:hover { color: var(--graphite); }
  .nav-cta {
    background: var(--wood-700);
    color: white !important;
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    transition: background 0.15s;
  }
  .nav-cta:hover { background: var(--wood-800); }

  /* ─── Google OAuth button ─── */
  .btn-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    background: var(--chalk);
    border: 1px solid var(--wood-200);
    border-radius: var(--radius-md);
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--graphite);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
  }
  .btn-google:hover {
    background: var(--sawdust);
    border-color: var(--wood-300);
    box-shadow: var(--shadow-sm);
  }
  /* button_to wraps in a form - kill the default form margin */
  .auth-card form[action="/auth/google_oauth2"] { margin: 0 0 4px; }

  .auth-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0 10px;
    color: var(--steel);
    font-size: 12px;
    font-weight: 500;
  }
  .auth-divider::before,
  .auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--wood-200);
  }

  /* ═══════════════════ NAV USER (avatar + early access) ═══════════════════ */
  .nav-user-link {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--graphite);
  }
  .nav-user-link:hover .nav-user-name { color: var(--wood-700); }
  .nav-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid var(--wood-200);
    object-fit: cover;
  }
  .early-access-banner {
    background: var(--wood-100);
    color: var(--wood-800);
    font-size: 13px;
    padding: 8px 24px;
    text-align: center;
    border-bottom: 1px solid var(--wood-200);
    position: relative;
  }
  .early-access-banner a {
    color: var(--wood-700);
    font-weight: 600;
  }
  .early-access-banner .banner-close {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    color: var(--wood-700);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
    opacity: 0.7;
  }
  .early-access-banner .banner-close:hover {
    opacity: 1;
  }

  /* ═══════════════════ ACTION ROW (Optimize + Save + Share) ═══════════════════ */
  .action-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
    /* Three buttons no longer fit one narrow line; wrap instead of overflowing
       the panel (which would scroll the whole page sideways on a phone). */
    flex-wrap: wrap;
  }

  /* Optimize takes the slack and always keeps its label on one line. Save and
     Share size to their content and drop to the next line when the row is
     narrow. Keep these together: an earlier duplicate `flex: 1` further down
     silently beat the nowrap and let the row overflow. */
  .action-row .btn-optimize {
    flex: 1 1 auto;
    min-width: max-content;
    white-space: nowrap;
  }

  .action-row .btn-save {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .btn-save {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 16px;
    background: var(--chalk);
    border: 1px solid var(--wood-300);
    border-radius: var(--radius-md);
    color: var(--wood-700);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
  }
  .btn-save:hover {
    background: var(--wood-100);
    border-color: var(--wood-500);
    color: var(--wood-800);
  }

  /* ═══════════════════ PROJECTS LIST ═══════════════════ */
  .projects-wrap {
    max-width: 880px;
    margin: 0 auto;
    padding: 40px 24px 80px;
  }
  .projects-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 28px;
    flex-wrap: wrap;
  }
  .projects-header h1 {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 700;
    color: var(--graphite);
    margin-bottom: 4px;
  }
  .projects-sub { color: var(--steel); font-size: 14px; }

  .projects-empty {
    background: var(--chalk);
    border: 2px dashed var(--wood-200);
    border-radius: var(--radius-lg);
    padding: 50px 24px;
    text-align: center;
  }
  .projects-empty h3 {
    font-family: var(--font-display);
    font-size: 20px;
    color: var(--graphite);
    margin-bottom: 6px;
  }
  .projects-empty p { color: var(--steel); font-size: 14px; }

  .projects-list { display: flex; flex-direction: column; gap: 10px; }
  .project-card {
    background: var(--chalk);
    border: 1px solid var(--wood-200);
    border-radius: var(--radius-md);
    padding: 16px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    transition: border-color 0.15s, box-shadow 0.15s;
  }
  .project-card:hover {
    border-color: var(--wood-400);
    box-shadow: var(--shadow-sm);
  }
  .project-card-main { flex: 1; min-width: 0; }
  .project-card-title {
    display: block;
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 600;
    color: var(--graphite);
    text-decoration: none;
    margin-bottom: 4px;
  }
  .project-card-title:hover { color: var(--wood-700); }
  .project-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--steel);
    flex-wrap: wrap;
  }
  .project-tag {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.4px;
    background: var(--wood-100);
    color: var(--wood-800);
  }
  .project-tag--1d { background: #e3eef5; color: #1a4a6e; }
  .project-card-actions {
    display: flex;
    gap: 6px;
    align-items: center;
  }
  .project-card-actions form { margin: 0; }
  .btn-sm--danger { color: var(--blade); border-color: rgba(231,76,60,0.3); }
  .btn-sm--danger:hover { background: var(--kerf); color: var(--blade-hover); }
  .btn-sm--ghost { background: transparent; color: var(--steel); border-color: var(--wood-300); }
  .btn-sm--ghost:hover { background: var(--wood-50); color: var(--graphite); }

  .project-rename-view { display: flex; align-items: center; gap: 6px; }
  .project-rename-btn {
    background: transparent;
    border: 0;
    padding: 4px;
    color: var(--steel);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s;
    border-radius: 4px;
  }
  .project-rename-btn:hover { background: var(--wood-100); color: var(--wood-700); }
  .project-card:hover .project-rename-btn { opacity: 1; }
  .project-rename-edit { display: flex; gap: 6px; align-items: center; margin-bottom: 4px; }
  .project-rename-edit input {
    flex: 1;
    min-width: 0;
    padding: 6px 10px;
    font: inherit;
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 600;
    color: var(--graphite);
    border: 1px solid var(--wood-300);
    border-radius: 6px;
    background: var(--chalk);
  }
  .project-rename-edit input:focus { outline: 2px solid var(--wood-400); outline-offset: -1px; }
  .project-rename-error {
    font-size: 12px;
    color: var(--blade);
    margin: 4px 0 8px;
  }

  /* ═══════════════════ DANGER (account delete) ═══════════════════ */
  .btn-danger {
    background: var(--blade);
    color: white;
    border: none;
    padding: 10px 18px;
    border-radius: var(--radius-md);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
  }
  .btn-danger:hover { background: var(--blade-hover); }

  /* ═══════════════════ BLOG POST ═══════════════════ */
  .post-section { max-width: 1080px; }
  .post-back {
    display: inline-block;
    font-size: 14px;
    color: var(--steel);
    text-decoration: none;
    margin-bottom: 8px;
  }
  .post-back:hover { color: var(--graphite); }

  .post-layout {
    display: grid;
    grid-template-columns: minmax(0, 720px) 240px;
    gap: 64px;
    align-items: start;
    margin-top: 16px;
  }

  .post-toc {
    position: sticky;
    top: 100px;
    font-size: 13px;
    border-left: 2px solid var(--wood-200);
    padding-left: 20px;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
  }
  .post-toc-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--wood-700);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 14px;
  }
  .post-toc ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .post-toc li { margin: 0 0 10px; line-height: 1.45; }
  .post-toc a {
    color: var(--steel);
    text-decoration: none;
    display: block;
    padding: 2px 0;
    border-left: 2px solid transparent;
    margin-left: -22px;
    padding-left: 20px;
    transition: color 0.15s, border-color 0.15s;
  }
  .post-toc a:hover { color: var(--graphite); }
  .post-toc a.active {
    color: var(--graphite);
    border-left-color: var(--blade);
    font-weight: 600;
  }

  .post-cta {
    margin-top: 56px;
    padding: 28px 32px;
    background: var(--wood-50);
    border: 1.5px solid var(--wood-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
  }
  .post-cta-title {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    color: var(--graphite);
    margin: 0 0 6px;
  }
  .post-cta-text {
    font-size: 14px;
    color: var(--steel);
    margin: 0 0 14px;
  }
  .post-cta-link {
    display: inline-block;
    color: var(--blade);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    padding-bottom: 2px;
    transition: border-color 0.15s;
  }
  .post-cta-link:hover { border-bottom-color: var(--blade); }

  .post-article { min-width: 0; }
  .post-date {
    display: inline-block;
    font-size: 13px;
    color: var(--steel);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .post-title {
    font-family: var(--font-display);
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 700;
    color: var(--graphite);
    line-height: 1.2;
    margin: 8px 0 32px;
    letter-spacing: -0.01em;
  }

  .post-body {
    font-size: 17px;
    line-height: 1.75;
    color: var(--pencil);
  }
  .post-body p { margin: 0 0 20px; }
  .post-body strong { color: var(--graphite); font-weight: 600; }
  .post-body a {
    color: var(--blade);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
  }
  .post-body a:hover { color: var(--blade-hover); text-decoration-thickness: 2px; }

  .post-body h2 {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 700;
    color: var(--graphite);
    line-height: 1.25;
    margin: 56px 0 18px;
    padding-top: 32px;
    border-top: 2px solid var(--wood-200);
    letter-spacing: -0.01em;
  }
  .post-body > h2:first-child,
  .post-body > h2:first-of-type:not(:nth-of-type(n+2)) {
    margin-top: 24px;
  }

  .post-body h3 {
    font-family: var(--font-display);
    font-size: 21px;
    font-weight: 600;
    color: var(--graphite);
    margin: 36px 0 12px;
    line-height: 1.3;
  }

  .post-body h4 {
    font-size: 16px;
    font-weight: 600;
    color: var(--wood-700);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 24px 0 10px;
  }

  .post-body ul, .post-body ol {
    margin: 0 0 24px;
    padding-left: 24px;
  }
  /* Tailwind preflight resets ol/ul to list-style:none; restore markers in long-form content */
  .post-body ul { list-style: disc; }
  .post-body ol { list-style: decimal; }
  .post-body li {
    margin-bottom: 10px;
    padding-left: 4px;
  }
  .post-body li::marker { color: var(--wood-500); }
  .post-body li > ul, .post-body li > ol { margin: 10px 0 0; }

  .post-body hr {
    border: 0;
    height: 1px;
    background: var(--wood-200);
    margin: 48px 0;
  }

  .post-body blockquote {
    margin: 28px 0;
    padding: 20px 24px;
    background: var(--wood-50);
    border-left: 4px solid var(--wood-500);
    border-radius: var(--radius-sm);
    color: var(--pencil);
    font-size: 16px;
  }
  .post-body blockquote p { margin: 0 0 12px; }
  .post-body blockquote p:last-child { margin-bottom: 0; }
  .post-body blockquote strong { color: var(--graphite); }

  .post-body .callout-tldr {
    background: linear-gradient(135deg, var(--wood-50) 0%, var(--sawdust) 100%);
    border: 1.5px solid var(--wood-300);
    border-radius: var(--radius-md);
    padding: 24px 28px;
    margin: 32px 0 40px;
    box-shadow: var(--shadow-sm);
  }
  .post-body .callout-tldr h2 {
    border-top: 0;
    padding-top: 0;
    margin: 0 0 16px;
    font-size: 20px;
  }
  .post-body .callout-tldr ul { margin-bottom: 0; }
  .post-body .callout-tldr li { margin-bottom: 12px; }
  .post-body .callout-tldr li:last-child { margin-bottom: 0; }

  .post-body .callout-verdict {
    background: var(--wood-50);
    border-left: 4px solid var(--wood-600);
    border-radius: var(--radius-sm);
    padding: 16px 22px;
    margin: 20px 0 32px;
  }
  .post-body .callout-verdict::before {
    content: "Verdict";
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--wood-700);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 6px;
  }
  .post-body .callout-verdict p { margin: 0; }

  .post-body .table-wrap {
    overflow-x: auto;
    margin: 28px 0 36px;
    border: 1px solid var(--wood-200);
    border-radius: var(--radius-md);
    background: var(--chalk);
    box-shadow: var(--shadow-sm);
  }
  .post-body table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    margin: 0;
  }
  .post-body table thead { background: var(--wood-100); }
  .post-body table th {
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    color: var(--graphite);
    border-bottom: 2px solid var(--wood-300);
    font-size: 13px;
    white-space: nowrap;
  }
  .post-body table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--wood-100);
    vertical-align: top;
    color: var(--pencil);
  }
  .post-body table tbody tr:nth-child(even) { background: var(--sawdust); }
  .post-body table tbody tr:last-child td { border-bottom: 0; }
  .post-body table tbody tr:hover { background: var(--wood-50); }
  .post-body table strong { color: var(--graphite); }

  .post-body code {
    background: var(--wood-100);
    color: var(--wood-800);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 0.92em;
  }
  .post-body pre {
    background: var(--graphite);
    color: var(--wood-100);
    padding: 18px 22px;
    border-radius: var(--radius-md);
    overflow-x: auto;
    margin: 24px 0;
    font-size: 13px;
    line-height: 1.6;
  }
  .post-body pre code { background: transparent; color: inherit; padding: 0; }

  .post-body .faq-list { counter-reset: faq; margin-top: 8px; }
  .post-body .faq-list h3 {
    counter-increment: faq;
    position: relative;
    padding-left: 60px;
    margin-top: 36px;
    margin-bottom: 10px;
    min-height: 32px;
  }
  .post-body .faq-list h3::before {
    content: counter(faq, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 2px;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    color: var(--wood-700);
    background: var(--wood-100);
    border: 1px solid var(--wood-300);
    border-radius: var(--radius-sm);
    padding: 5px 9px;
    letter-spacing: 0.04em;
    line-height: 1;
  }
  .post-body .faq-list > p,
  .post-body .faq-list > ul,
  .post-body .faq-list > ol { padding-left: 60px; }

  .post-body .callout-warn {
    background: #fdf1ec;
    border: 1.5px solid #f2cfc0;
    border-left: 4px solid var(--blade);
    border-radius: var(--radius-md);
    padding: 24px 28px;
    margin: 32px 0 40px;
  }
  .post-body .callout-warn h2 {
    border-top: 0;
    padding-top: 0;
    margin: 0 0 16px;
    font-size: 20px;
  }
  .post-body .callout-warn p { margin-bottom: 14px; }
  .post-body .callout-warn p:last-child { margin-bottom: 0; }

  /* Template pages reuse .post-body, scaled down a notch to sit above the parts table */
  .template-body { font-size: 16px; margin-bottom: 44px; }
  .template-body .callout-tldr ul { margin-bottom: 18px; }
  .template-body .callout-tldr p:last-child { margin-bottom: 0; }
  .template-body h2 { font-size: 24px; margin: 44px 0 16px; padding-top: 28px; }
  .template-body h3 { font-size: 18px; margin: 28px 0 10px; }
  .template-body .faq-list h3 { padding-left: 56px; }
  .template-body .faq-list > p,
  .template-body .faq-list > ul { padding-left: 56px; }

  @media (max-width: 1000px) {
    .post-layout { grid-template-columns: 1fr; gap: 0; }
    .post-toc { display: none; }
    .post-section { max-width: 760px; padding: 56px 20px; }
  }

  @media (max-width: 700px) {
    .post-section { padding: 32px 18px 60px; }
    .post-title { font-size: 26px; margin: 8px 0 24px; }
    .post-body { font-size: 16px; line-height: 1.7; }
    .post-body h2 { font-size: 22px; margin: 36px 0 14px; padding-top: 22px; }
    .post-body h3 { font-size: 18px; margin: 26px 0 10px; }
    .post-body p { margin: 0 0 16px; }
    .post-body ul, .post-body ol { padding-left: 22px; }
    .post-body table { font-size: 13px; }
    .post-body table th, .post-body table td { padding: 10px 12px; }
    .post-body blockquote { padding: 14px 16px; margin: 22px 0; }
    .post-body .faq-list h3 { padding-left: 44px; margin-top: 26px; }
    .post-body .faq-list h3::before { padding: 4px 7px; font-size: 11px; }
    .post-body .faq-list > p,
    .post-body .faq-list > ul,
    .post-body .faq-list > ol { padding-left: 44px; }
    .post-cta { padding: 20px; margin-top: 40px; }
    .post-cta-title { font-size: 16px; }
  }