@import url('https://fonts.googleapis.com/css2?family=Spectral:wght@400;500;600;700&family=Hanken+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');


  :root {
    --paper: #E9E6DE;
    --card: #FCFBF8;
    --ink: #23201B;
    --ink-soft: #6B645B;
    --line: #D8D4C9;
    --string: #B23A2E;
    --string-deep: #8E2C22;
    --focus: #1F5FA6;
    --shadow-card: 0 1px 2px rgba(33,29,23,.08), 0 10px 24px rgba(33,29,23,.10);
    --shadow-lift: 0 4px 10px rgba(33,29,23,.12), 0 20px 44px rgba(33,29,23,.14);
  }

  /* This page has no theme switcher of its own (anonymous visitors haven't
     picked a Linkloom theme yet) - it just follows the OS-level light/dark
     preference, independent of the signed-in app's own named-theme system. */
  @media (prefers-color-scheme: dark) {
    :root {
      --paper: #1C1A17; --card: #262320; --ink: #ECE7DD; --ink-soft: #A79E90;
      --line: #38332C; --string: #D1594A; --string-deep: #B23A2E;
      --shadow-card: 0 1px 2px rgba(0,0,0,.35), 0 10px 24px rgba(0,0,0,.35);
      --shadow-lift: 0 4px 10px rgba(0,0,0,.4), 0 20px 44px rgba(0,0,0,.45);
    }
  }

  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    background: var(--paper); color: var(--ink);
    font-family: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
    font-size: 16px; line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }
  @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } }

  a { color: inherit; }
  .mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; }

  h1, h2, h3 { font-family: 'Spectral', Georgia, serif; font-weight: 600; margin: 0; text-wrap: balance; }

  .wrap { max-width: 1080px; margin: 0 auto; padding: 0 28px; }

  /* ---------- nav ---------- */
  nav.top {
    display: flex; align-items: center; justify-content: space-between;
    max-width: 1080px; margin: 0 auto; padding: 26px 28px 0;
  }
  .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
  .brand svg { display: block; flex: none; }
  .brand .warp { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
  .brand .weft { stroke: var(--string); stroke-width: 3.4; stroke-linecap: round; }
  .brand-text { font-family: 'Spectral', serif; font-weight: 600; font-size: 20px; letter-spacing: -0.01em; }
  .brand-text b { color: var(--string); font-weight: 600; }
  .nav-cta {
    font-family: 'Hanken Grotesk', sans-serif; font-weight: 600; font-size: 14.5px;
    text-decoration: none; color: var(--ink); border: 1px solid var(--line);
    padding: 9px 18px; border-radius: 100px; transition: border-color .15s, background .15s;
  }
  .nav-cta:hover { border-color: var(--string); background: var(--card); }

  /* ---------- hero ---------- */
  .hero { max-width: 1080px; margin: 0 auto; padding: 64px 28px 40px; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 20px; align-items: center; }
  @media (max-width: 880px) { .hero { grid-template-columns: 1fr; padding-top: 40px; } }

  .eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; letter-spacing: .07em; text-transform: uppercase;
    color: var(--string-deep); margin-bottom: 18px;
  }
  .eyebrow::before { content: ''; width: 16px; height: 1.5px; background: var(--string); display: inline-block; }

  .hero h1 { font-size: clamp(32px, 4.4vw, 50px); line-height: 1.08; letter-spacing: -0.015em; }
  .hero p.lede { font-size: 18px; color: var(--ink-soft); max-width: 46ch; margin: 22px 0 30px; }

  .hero-ctas { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
  .btn-primary {
    font-family: 'Hanken Grotesk', sans-serif; font-weight: 700; font-size: 16px;
    background: var(--string); color: #FCFBF8; text-decoration: none;
    padding: 14px 26px; border-radius: 10px; border: none; cursor: pointer;
    box-shadow: 0 8px 20px rgba(178,58,46,.28);
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
    display: inline-block;
  }
  .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(178,58,46,.36); background: var(--string-deep); }
  .link-quiet { font-size: 15px; color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 1px; }
  .link-quiet:hover { color: var(--ink); border-color: var(--ink-soft); }

  .hero-proof { font-size: 13.5px; color: var(--ink-soft); margin-top: 20px; }

  /* ---------- corkboard hero visual ---------- */
  .board-stage {
    position: relative; height: 510px; width: 100%;
  }
  .pin-card {
    position: absolute; width: 190px; background: var(--card);
    border: 1px solid var(--line); border-radius: 9px; box-shadow: var(--shadow-card);
    padding: 13px 14px 12px; font-size: 13px;
  }
  .pin-card::before {
    content: ''; position: absolute; top: -6px; left: 20px; width: 9px; height: 9px;
    border-radius: 50%; background: var(--string); box-shadow: 0 2px 3px rgba(0,0,0,.25);
  }
  .pin-card .badge {
    font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .05em; text-transform: uppercase;
    color: var(--ink-soft); border: 1px solid var(--line); border-radius: 4px; padding: 1.5px 6px; display: inline-block; margin-bottom: 7px;
  }
  .pin-card .title { font-weight: 600; margin-bottom: 4px; line-height: 1.3; }
  .pin-card .meta { color: var(--ink-soft); font-size: 11.5px; }
  .pin-card .chk { display: flex; align-items: center; gap: 7px; margin-top: 6px; font-size: 12px; color: var(--ink-soft); }
  .pin-card .chk span.box { width: 13px; height: 13px; border: 1.5px solid var(--string); border-radius: 4px; flex: none; }
  /* A link capture fetches its own preview image, same as the Capture
     pillar mockup below - inset within the card's padding the same way,
     not bled to the edge, so both places read as the same kind of card. */
  .pin-card .mini-thumb { width: 100%; aspect-ratio: 16/10; overflow: hidden; border-radius: 6px; margin-bottom: 9px; background: var(--line); }
  .pin-card .mini-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }

  /* Polaroid stock is physically white paper - it doesn't shift with the
     room's lighting, so unlike the other cards this one deliberately does
     not follow --card/--line into dark mode. */
  .polaroid { width: 168px; background: #FBFAF7; padding: 9px 9px 0; border-color: #E4E0D6; }
  .polaroid .photo { overflow: hidden; border-radius: 1px; background: #ddd; }
  .polaroid .photo img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 30%; filter: sepia(.2) contrast(1.04) brightness(1.03); }
  .polaroid .cap { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; color: #7A7263; text-align: center; padding: 9px 2px 12px; }

  .card-photo { top: 4px; left: 0%; transform: rotate(-4deg); z-index: 2; }
  .card-a { top: 0; left: 45%; transform: rotate(3deg); z-index: 3; }
  .card-b { top: 254px; left: 47%; transform: rotate(-2.5deg); }
  .card-c { top: 268px; left: 4%; transform: rotate(2deg); }
  .card-d { top: 372px; left: 52%; transform: rotate(-3deg); z-index: 2; }

  .thread { position: absolute; overflow: visible; }

  /* ---------- section rhythm ---------- */
  .lede-block { max-width: 620px; margin: 130px auto 64px; padding: 0 28px; text-align: center; }
  .lede-block .eyebrow { justify-content: center; }
  .lede-block .eyebrow::before { display: none; }
  .lede-block h2 { font-size: clamp(24px, 3vw, 32px); line-height: 1.25; }
  .lede-block h2 em { font-style: normal; color: var(--string); }

  .pillar {
    max-width: 1080px; margin: 0 auto; padding: 78px 28px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
  }
  .pillar.flip { direction: rtl; }
  .pillar.flip > * { direction: ltr; }
  @media (max-width: 860px) { .pillar, .pillar.flip { grid-template-columns: 1fr; direction: ltr; gap: 34px; } .pillar.flip { padding-top: 0; } }

  .pillar-num { font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; color: var(--string-deep); letter-spacing: .07em; text-transform: uppercase; margin-bottom: 14px; display: block; }
  .pillar h3 { font-size: clamp(24px, 3vw, 30px); line-height: 1.18; margin-bottom: 16px; }
  .pillar p { font-size: 16.5px; color: var(--ink-soft); max-width: 42ch; }

  .pillar-visual { position: relative; }
  .stage-card {
    background: var(--card); border: 1px solid var(--line); border-radius: 12px;
    box-shadow: var(--shadow-lift); padding: 22px 24px;
  }

  /* capture pillar visual */
  .capture-mock .url-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-soft); margin-bottom: 12px; }
  .capture-mock .url-row .dot { width: 6px; height: 6px; border-radius: 50%; background: #6B9E5A; }
  .capture-mock .thumb { width: 100%; aspect-ratio: 16/10; border-radius: 8px; margin-bottom: 12px; overflow: hidden; background: var(--line); }
  .capture-mock .thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .capture-mock .cap-title { font-weight: 600; font-size: 15.5px; margin-bottom: 4px; }
  .capture-mock .cap-tags { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
  .chip { font-family: 'IBM Plex Mono', monospace; font-size: 11px; background: var(--paper); border: 1px solid var(--line); border-radius: 100px; padding: 2px 9px; color: var(--ink-soft); }

  /* tasks pillar visual */
  .task-row { display: flex; align-items: flex-start; gap: 11px; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .task-row:last-child { border-bottom: none; }
  .task-row .box { width: 16px; height: 16px; border: 1.5px solid var(--string); border-radius: 5px; flex: none; margin-top: 2px; }
  .task-row .box.done { background: var(--string); position: relative; }
  .task-row .tinfo .t { font-size: 14.5px; font-weight: 500; }
  .task-row .tinfo .t.done { text-decoration: line-through; color: var(--ink-soft); }
  .task-row .tinfo .meta { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; color: var(--ink-soft); margin-top: 3px; }
  .task-row .tinfo .meta .pri { color: var(--string-deep); }

  /* board pillar visual */
  .board-mini { position: relative; height: 280px; }
  .mini-card { position: absolute; width: 128px; background: var(--paper); border: 1px solid var(--line); border-radius: 7px; padding: 9px 10px; font-size: 11.5px; box-shadow: var(--shadow-card); }
  .mini-card .t { font-weight: 600; margin-bottom: 2px; }
  .mini-card .b { color: var(--ink-soft); font-size: 10.5px; }

  /* ---------- support grid ---------- */
  .support { max-width: 1080px; margin: 40px auto 0; padding: 60px 28px 20px; border-top: 1px solid var(--line); }
  .support h2 { font-size: 22px; margin-bottom: 34px; }
  .support-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
  @media (max-width: 880px) { .support-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 520px) { .support-grid { grid-template-columns: 1fr; } }
  .support-item .t { font-weight: 600; font-size: 15px; margin-bottom: 6px; }
  .support-item .d { font-size: 14px; color: var(--ink-soft); line-height: 1.5; }

  /* ---------- final CTA ---------- */
  .final-cta { max-width: 720px; margin: 90px auto; padding: 0 28px; text-align: center; }
  .final-cta h2 { font-size: clamp(26px, 3.4vw, 36px); margin-bottom: 16px; }
  .final-cta p { color: var(--ink-soft); font-size: 16.5px; margin-bottom: 30px; }

  footer { border-top: 1px solid var(--line); padding: 34px 28px 44px; }
  .foot-inner { max-width: 1080px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; }
  .foot-inner .brand-text { font-size: 15px; }
  footer nav { display: flex; gap: 22px; }
  footer nav a { font-size: 13.5px; color: var(--ink-soft); text-decoration: none; }
  .foot-credit { max-width: 1080px; margin: 18px auto 0; font-size: 11.5px; color: var(--ink-soft); opacity: .75; }
  .foot-credit a { color: inherit; text-decoration: underline; text-decoration-color: var(--line); }
  footer nav a:hover { color: var(--ink); }

  .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
  .reveal.in { opacity: 1; transform: translateY(0); }

  :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }