:root {
    --ink: #1d1d1f; --ink-2: #3c3c43a6; --ink-3: #3c3c4352;
    --bg: #ffffff; --fill: #f5f5f7; --fill-2: #74748014; --line: #e5e5ea;
    --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
    --sans: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  }
  /* one tint pair per tool, taken from its app icon */
  .t-siteio  { --tint: #e4f6ec; --tint-ink: #0b8a4f; }
  .t-agentio { --tint: #e8eeff; --tint-ink: #2f5bd8; }
  .t-pagerio { --tint: #fff0e5; --tint-ink: #e2560c; }
  .t-copycat { --tint: #ffebf3; --tint-ink: #c42d6c; }

  * { box-sizing: border-box; }
  html, body { margin: 0; background: var(--bg); color: var(--ink); }
  body { font: 16px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
  a { color: inherit; }
  code { font-family: var(--mono); font-size: .92em; }
  /* ---------- Site ---------- */
  .in { max-width: 1040px; margin: 0 auto; padding: 0 32px; }
  .hh-header { background: rgba(255,255,255,.85); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--line); }
  .hh-header .in { height: 56px; display: flex; align-items: center; gap: 24px; }
  .wordmark { font-weight: 700; font-size: 17px; letter-spacing: -.03em; text-decoration: none; display: inline-flex; align-items: center; gap: 7px; }
  .wordmark img { width: 24px; height: 24px; }
  .hh-nav { display: flex; gap: 2px; }
  .hh-nav a { text-decoration: none; font-size: 14px; color: var(--ink-2); padding: 5px 10px 5px 6px; border-radius: 999px; display: inline-flex; align-items: center; gap: 7px; }
  .hh-nav a.on { background: var(--fill-2); color: var(--ink); font-weight: 500; }
  .hh-nav img, .hh-nav svg { width: 20px; height: 20px; }
  .spacer { flex: 1; }
  .btn { font: inherit; font-size: 14px; font-weight: 500; height: 34px; padding: 0 15px; border-radius: 999px; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; white-space: nowrap; transition: transform .15s, background .15s; }
  .btn:active { transform: scale(.96); }
  .btn-ink { background: var(--ink); color: #fff; }
  .btn-ink:hover { background: #000; }
  .btn-quiet { background: var(--fill); color: var(--ink); }
  .btn-lg { height: 44px; padding: 0 20px; font-size: 15px; }

  /* app icons: the visual weight of the site */
  .appicon { display: grid; place-items: center; flex: none; filter: drop-shadow(0 18px 24px rgba(20,30,60,.16)) drop-shadow(0 3px 5px rgba(20,30,60,.10)); }
  .appicon > * { width: 100%; height: 100%; }
  .appicon .sq { width: 80%; height: 80%; border-radius: 22.5%; }

  .hero { text-align: center; padding: 72px 0 8px; }
  .hero h1 { font-size: 56px; line-height: 1.02; letter-spacing: -.045em; font-weight: 600; margin: 0 0 12px; }
  .hero h1 span { color: var(--ink-3); }
  .hero p { margin: 0; font-size: 18px; color: var(--ink-2); }

  .apps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding: 48px 0 72px; }
  .app { display: flex; flex-direction: column; align-items: center; text-align: center; transition: transform .25s, opacity .25s; }
  .app .appicon { width: 168px; height: 168px; margin-bottom: 18px; transition: transform .25s; }
  .app h2 { margin: 0; font-size: 28px; letter-spacing: -.03em; font-weight: 600; }
  .app .what { margin: 6px 0 18px; font-size: 16px; color: var(--ink-2); min-height: 48px; max-width: 300px; }
  .app .extra { font-size: 12px; font-weight: 500; color: var(--tint-ink); background: var(--tint); border-radius: 999px; padding: 3px 10px; margin: -8px 0 14px; }

  .prompt { width: 100%; flex: 1; text-align: left; background: var(--tint); border-radius: 20px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
  .prompt .lbl { font-size: 12px; font-weight: 600; color: var(--tint-ink); display: flex; align-items: center; gap: 6px; }
  .prompt .txt { flex: 1; overflow-wrap: break-word; font-size: 14px; line-height: 1.45; font-weight: 500; background: rgba(255,255,255,.75); border-radius: 12px; padding: 12px 14px; }
  .prompt .txt i { font-style: normal; display: block; font-size: 13px; color: var(--tint-ink); }
  .prompt .row { display: flex; align-items: center; gap: 8px; }
  .prompt .row a.small { font-size: 13px; color: var(--ink-2); text-decoration: none; margin-left: auto; }
  .app .more { margin-top: 14px; font-size: 14px; font-weight: 500; text-decoration: none; }

  .strip { border-top: 1px solid var(--line); padding: 22px 0; display: flex; gap: 28px; justify-content: center; flex-wrap: wrap; font-size: 14px; color: var(--ink-2); }
  .strip span::before { content: "✓ "; color: var(--ink); }
  .hh-footer { border-top: 1px solid var(--line); padding: 22px 0 28px; font-size: 13px; color: var(--ink-2); }
  .hh-footer .in { display: flex; gap: 20px; flex-wrap: wrap; }
  .hh-footer a { text-decoration: none; }

  /* ---------- tool page ---------- */
  .p-hero { background: linear-gradient(180deg, var(--tint), #fff 85%); padding: 64px 0 48px; }
  .p-hero .in { display: grid; grid-template-columns: 200px 1fr; gap: 40px; align-items: start; }
  .p-hero .appicon { width: 200px; height: 200px; }
  .p-hero h1 { font-size: 52px; letter-spacing: -.045em; line-height: 1.02; font-weight: 600; margin: 0 0 8px; }
  .p-hero p { font-size: 19px; color: var(--ink-2); margin: 0 0 22px; max-width: 560px; }
  .p-hero .prompt { max-width: 620px; flex: none; }
  .block { padding: 48px 0; border-top: 1px solid var(--line); }
  .block h2 { font-size: 30px; letter-spacing: -.035em; line-height: 1.1; font-weight: 600; margin: 0 0 6px; }
  .block h2 span { color: var(--ink-3); }
  .block .sub { color: var(--ink-2); margin: 0 0 20px; font-size: 16px; }
  .svcs { display: flex; flex-wrap: wrap; gap: 8px; }
  .svcs span { font-size: 14px; padding: 7px 14px; border-radius: 999px; background: var(--fill); }
  .facts { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
  .fact { background: var(--fill); border-radius: 20px; padding: 18px 20px; }
  .fact b { display: block; font-weight: 600; margin-bottom: 2px; }
  .fact span { font-size: 14px; color: var(--ink-2); }
  .mac { display: grid; grid-template-columns: 1fr 1.25fr; gap: 40px; align-items: center; }
  .mac .head { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
  .mac .head .appicon { width: 72px; height: 72px; }
  .mac ul { margin: 0 0 20px; padding: 0; list-style: none; }
  .mac li { padding: 8px 0; border-top: 1px solid var(--line); font-size: 15px; }
  .mac li:first-child { border-top: 0; }
  .tag { font-size: 12px; font-weight: 500; padding: 3px 10px; border-radius: 999px; background: var(--tint); color: var(--tint-ink); }
  .shot { display: block; max-width: 100%; height: auto; justify-self: center; filter: drop-shadow(0 0 1px rgba(30,40,80,.25)) drop-shadow(0 20px 40px rgba(30,40,80,.14)); }
  .shot.menu { width: 340px; }
  .demo { display: block; width: 100%; height: auto; border-radius: 14px; background: var(--fill); box-shadow: 0 0 0 1px var(--line), 0 24px 60px rgba(30,40,80,.12); }
  details.manual { background: var(--fill); border-radius: 16px; padding: 14px 18px; }
  details.manual summary { cursor: pointer; font-weight: 500; }
  details.manual pre { margin: 12px 0 0; font-family: var(--mono); font-size: 13px; line-height: 1.8; white-space: pre-wrap; }

  /* utilities: second tier, grey, compact rows */
  .hh-nav .sep { width: 1px; height: 18px; background: var(--line); margin: 0 6px; align-self: center; }
  .hh-nav a.text { padding-left: 10px; }
  .utils { padding: 8px 0 64px; }
  .utils-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
  .utils-head h2 { margin: 0; font-size: 22px; letter-spacing: -.025em; font-weight: 600; }
  .utils-head p { margin: 0; font-size: 15px; color: var(--ink-2); }
  .util-list { background: var(--fill); border-radius: 22px; padding: 6px; display: grid; gap: 4px; }
  .util { display: grid; grid-template-columns: 56px 1fr auto; gap: 16px; align-items: center; padding: 12px 14px; border-radius: 16px; background: var(--bg); text-decoration: none; transition: transform .2s, box-shadow .2s; }
  .util .appicon { width: 56px; height: 56px; filter: drop-shadow(0 6px 10px rgba(20,30,60,.14)); }
  .util b { display: block; font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
  .util span.d { font-size: 14px; color: var(--ink-2); }
  .util .os { font-size: 12px; color: var(--ink-2); background: var(--fill); border-radius: 999px; padding: 2px 8px; margin-left: 8px; font-weight: 500; vertical-align: 2px; }
  .util.ghost { background: transparent; border: 1.5px dashed var(--line); }
  .util.ghost .appicon { filter: none; border-radius: 14px; background: var(--fill-2); }
  .util.ghost b, .util.ghost span.d { color: var(--ink-3); }
  .u-hero { padding: 56px 0 40px; background: linear-gradient(180deg, var(--tint), #fff 85%); }
  .u-hero .in { display: grid; grid-template-columns: 128px 1fr; gap: 32px; align-items: center; }
  .u-hero .appicon { width: 128px; height: 128px; }
  .u-hero .kind { font-size: 13px; font-weight: 600; color: var(--tint-ink); margin: 0 0 4px; }
  .u-hero h1 { font-size: 44px; letter-spacing: -.04em; line-height: 1.05; font-weight: 600; margin: 0 0 8px; }
  .u-hero p { font-size: 18px; color: var(--ink-2); margin: 0 0 20px; max-width: 560px; }
  .u-hero .meta { font-size: 13px; color: var(--ink-2); margin-left: 12px; }
  .code { font-family: var(--mono); font-size: 13px; background: var(--fill); border-radius: 16px; padding: 16px 18px; line-height: 1.7; white-space: pre-wrap; margin: 0; }
  .code .c { color: var(--ink-2); }

  /* hover effects only where a real pointer exists: on touch screens :hover sticks after a tap */
  @media (hover: hover) and (pointer: fine) {
    .apps:hover .app { opacity: .6; }
    .apps .app:hover { opacity: 1; transform: translateY(-4px); }
    .app:hover .appicon { transform: scale(1.04) rotate(-2deg); }
    .util:hover { transform: scale(1.005); box-shadow: 0 10px 30px rgba(30,40,80,.08); }
  }
  @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
  @media (max-width: 860px) {
    .apps, .facts, .mac, .p-hero .in, .u-hero .in { grid-template-columns: 1fr; }
    .util { grid-template-columns: 44px 1fr; }
    .util .btn { grid-column: 2; justify-self: start; }
    .util .appicon { width: 44px; height: 44px; }
    .in { padding: 0 16px; }
    .hero h1 { font-size: 38px; }
    .p-hero .appicon { width: 128px; height: 128px; }
    .p-hero h1 { font-size: 38px; }
    .hh-nav span { display: none; }
    .hh-header .in { gap: 8px; }
  }

  .appicon img.sq, .hh-nav img[src$="pagerio.png"] { border-radius: 22.5%; }
  .hh-nav img[src$="pagerio.png"] { width: 16px; height: 16px; margin: 2px; }
  .app .more { color: var(--tint-ink); }