:root {
    --ink: #0E1621; --hull: #16202D;
    --paper: #F7F8F9; --paper-2: #FFFFFF; --paper-line: #E2E6EB; --paper-sub: #EDF0F3;
    --text: #101822; --text-2: #5A6675; --text-3: #8B96A4;
    --signal: #E8892B; --signal-dim: #FBF0E2;
    --beacon: #1F8A62; --depth: #2F6BB8; --depth-dim: #E7EFF9;
    --r: 8px;
    --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body { font-family: var(--sans); color: var(--text); background: var(--paper-2); line-height: 1.6; -webkit-font-smoothing: antialiased; }
  a { color: inherit; }
  img { max-width: 100%; }
  .wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

  /* Navbar */
  nav { border-bottom: 1px solid var(--paper-line); position: sticky; top: 0; background: rgba(255,255,255,0.92); backdrop-filter: blur(8px); z-index: 10; }
  .nav-in { display: flex; align-items: center; gap: 12px; height: 62px; }
  .brand { display: flex; align-items: center; gap: 10px; font-weight: 680; font-size: 16px; letter-spacing: -0.02em; text-decoration: none; }
  .brand img { width: 28px; height: 28px; border-radius: 6px; }
  .nav-links { margin-left: auto; display: flex; gap: 26px; }
  .nav-links a { color: var(--text-2); text-decoration: none; font-size: 14px; font-weight: 500; }
  .nav-links a:hover { color: var(--text); }

  /* Hero */
  .hero { text-align: center; padding: 76px 0 68px; background: linear-gradient(180deg, var(--paper-sub) 0%, #ffffff 100%); border-bottom: 1px solid var(--paper-line); }
  .hero img.icon { width: 92px; height: 92px; border-radius: 20px; box-shadow: 0 12px 34px rgba(14,22,33,0.20); }
  .hero h1 { font-size: 46px; line-height: 1.12; letter-spacing: -0.03em; font-weight: 700; margin: 26px auto 16px; max-width: 15ch; }
  .hero h1 em { font-style: normal; color: var(--signal); }
  .hero p { color: var(--text-2); font-size: 17px; max-width: 60ch; margin: 0 auto; }
  .trust { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin-top: 30px; }
  .pill { background: var(--paper-sub); border: 1px solid var(--paper-line); color: var(--text-2); border-radius: 100px; padding: 7px 15px; font-size: 12.5px; font-weight: 550; }

  section { padding: 68px 0; }
  h2 { font-size: 29px; letter-spacing: -0.025em; font-weight: 680; text-align: center; margin-bottom: 10px; }
  .sub { text-align: center; color: var(--text-2); max-width: 58ch; margin: 0 auto 44px; }

  /* Features */
  .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .card { border: 1px solid var(--paper-line); border-radius: var(--r); padding: 26px 24px; background: var(--paper-2); }
  .ic { width: 40px; height: 40px; border-radius: 10px; background: var(--depth-dim); color: var(--depth); display: grid; place-items: center; margin-bottom: 15px; }
  .ic svg { width: 21px; height: 21px; }
  .card h3 { font-size: 15.5px; font-weight: 640; margin-bottom: 7px; letter-spacing: -0.01em; }
  .card p { color: var(--text-2); font-size: 14px; }

  /* Steps */
  .steps { background: var(--paper); border-top: 1px solid var(--paper-line); border-bottom: 1px solid var(--paper-line); }
  .step-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
  .step { text-align: center; }
  .num { width: 42px; height: 42px; border-radius: 100px; background: var(--ink); color: #fff; display: grid; place-items: center; margin: 0 auto 15px; font-weight: 650; font-size: 16px; }
  .step h3 { font-size: 16px; font-weight: 640; margin-bottom: 7px; }
  .step p { color: var(--text-2); font-size: 14px; }

  /* FAQ */
  details { border: 1px solid var(--paper-line); border-radius: var(--r); padding: 17px 20px; margin-bottom: 10px; background: var(--paper-2); }
  details[open] { background: var(--paper); }
  summary { cursor: pointer; font-weight: 570; font-size: 15px; list-style: none; }
  summary::-webkit-details-marker { display: none; }
  summary::after { content: '+'; float: right; color: var(--text-3); font-weight: 400; font-size: 19px; line-height: 1; }
  details[open] summary::after { content: '−'; }
  details p { color: var(--text-2); font-size: 14px; margin-top: 11px; }
  .faq { max-width: 760px; margin: 0 auto; }

  /* CTA */
  .cta { background: var(--paper-sub); border-top: 1px solid var(--paper-line); text-align: center; }
  .btn { display: inline-block; background: var(--ink); color: #fff; text-decoration: none; padding: 13px 28px; border-radius: var(--r); font-weight: 600; font-size: 15px; margin-top: 22px; }
  .btn:hover { background: var(--hull); }

  footer { border-top: 1px solid var(--paper-line); padding: 34px 0; }
  .foot { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; color: var(--text-3); font-size: 13.5px; }
  .foot nav { margin-left: auto; display: flex; gap: 22px; border: 0; position: static; background: none; }
  .foot a { color: var(--text-2); text-decoration: none; }
  .foot a:hover { color: var(--text); }

  @media (max-width: 860px) {
    .grid, .step-grid { grid-template-columns: 1fr; }
    .hero h1 { font-size: 34px; max-width: 100%; }
    .nav-links { display: none; }
  }
  /* ---- Shared: app screenshots ---- */
  /* Screenshots keep their native 16:9 shape at every width. */
  .shot { border: 1px solid var(--paper-line); border-radius: var(--r); overflow: hidden; background: var(--paper-sub); box-shadow: 0 8px 26px rgba(14,22,33,0.08); }
  /* width/height attributes are present to reserve layout space, so height must
     be reset or the attribute pins the box and defeats aspect-ratio. */
  .shot img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
  .shot figcaption { padding: 11px 16px; font-size: 13px; color: var(--text-2); border-top: 1px solid var(--paper-line); background: var(--paper-2); }

  /* ---- Blog ---- */
  .post { max-width: 720px; margin: 0 auto; padding: 56px 0 72px; }
  .post .kicker { color: var(--depth); font-size: 12.5px; font-weight: 640; letter-spacing: 0.04em; text-transform: uppercase; }
  .post h1 { font-size: 37px; line-height: 1.18; letter-spacing: -0.03em; font-weight: 700; margin: 12px 0 14px; }
  .post .meta { color: var(--text-3); font-size: 13.5px; margin-bottom: 30px; padding-bottom: 22px; border-bottom: 1px solid var(--paper-line); }
  .post .lede { font-size: 18px; color: var(--text-2); margin-bottom: 30px; }
  .post h2 { font-size: 24px; text-align: left; letter-spacing: -0.02em; margin: 40px 0 13px; }
  .post h3 { font-size: 17px; font-weight: 640; margin: 28px 0 9px; letter-spacing: -0.01em; }
  .post p { margin-bottom: 16px; color: var(--text); }
  .post ul, .post ol { margin: 0 0 18px 22px; color: var(--text); }
  .post li { margin-bottom: 8px; }
  .post figure { margin: 28px 0; }
  .post table { width: 100%; border-collapse: collapse; margin: 22px 0; font-size: 14.5px; }
  .post th, .post td { text-align: left; padding: 11px 13px; border-bottom: 1px solid var(--paper-line); vertical-align: top; }
  .post th { background: var(--paper-sub); font-weight: 620; font-size: 13.5px; }
  .post code { font-family: var(--mono); font-size: 0.9em; background: var(--paper-sub); padding: 2px 6px; border-radius: 4px; }
  .callout { border-left: 3px solid var(--signal); background: var(--signal-dim); padding: 16px 20px; border-radius: 0 var(--r) var(--r) 0; margin: 24px 0; }
  .callout p:last-child { margin-bottom: 0; }
  .callout strong { color: var(--ink); }
  .post .endnote { margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--paper-line); color: var(--text-2); font-size: 14.5px; }
  .post .endnote a { color: var(--depth); }

  /* Blog index */
  .posts { max-width: 760px; margin: 0 auto; }
  .post-card { display: block; text-decoration: none; border: 1px solid var(--paper-line); border-radius: var(--r); padding: 24px 26px; margin-bottom: 14px; background: var(--paper-2); transition: border-color .12s, transform .12s; }
  .post-card:hover { border-color: var(--text-3); transform: translateY(-1px); }
  .post-card .tag { display: inline-block; font-size: 11.5px; font-weight: 620; color: var(--depth); background: var(--depth-dim); padding: 3px 9px; border-radius: 100px; margin-bottom: 10px; }
  .post-card h3 { font-size: 19px; font-weight: 660; letter-spacing: -0.02em; margin-bottom: 7px; }
  .post-card p { color: var(--text-2); font-size: 14.5px; margin-bottom: 9px; }
  .post-card time { color: var(--text-3); font-size: 12.5px; }

  @media (max-width: 860px) {
    .post h1 { font-size: 29px; }
    .post { padding: 36px 0 52px; }
  }

  /* Screenshot gallery on the home page */
  .shots-sec { background: var(--paper); border-bottom: 1px solid var(--paper-line); }
  .shot-lead { margin-bottom: 20px; }
  .shot-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
  @media (max-width: 860px) { .shot-grid { grid-template-columns: 1fr; } }