/* Landing page — light, minimal, and deliberately separate from the app's dark
   style.css. The two never load together, so there is no cascade to reconcile
   and the converter's UI is untouched by anything here.

   The rules this page is built on, so later edits don't undo it:
     · ONE bordered element per screenful at most. Whitespace separates things;
       borders are for the two surfaces that are genuinely interactive (the
       output mock and the form). Everything else sits on open white.
     · No emoji. Line icons at a single stroke weight, or nothing.
     · One sentence per idea. A grid of paragraphs reads as clutter however
       much air you put around it.
     · Big vertical rhythm (112px) and a wide measure, so a desktop window
       doesn't feel like a zoomed-in phone. */

:root {
  --ink: #0b1220;          /* headings */
  --body: #525f73;         /* body copy */
  --muted: #8a94a6;        /* captions, labels */
  --line: #e8ecf2;         /* hairlines */
  --line-soft: #f1f4f8;
  --bg: #ffffff;
  --bg-soft: #fafbfd;
  --brand: #2563eb;
  --brand-dark: #1d4ed8;
  --good: #047857;
  --radius: 12px;
  --shell: 1160px;
  --pad: 112px;            /* the section rhythm */
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  color: var(--body);
  background: var(--bg);
  font: 16.5px/1.7 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv05" 1, "ss01" 1;
}
/* balance stops a heading dropping one lonely word onto its own line. */
h1, h2, h3 { color: var(--ink); margin: 0 0 16px; font-weight: 600; text-wrap: balance; }
h1 { font-size: clamp(36px, 4.4vw, 58px); line-height: 1.05; letter-spacing: -0.035em; }
h2 { font-size: clamp(25px, 2.5vw, 35px); line-height: 1.15; letter-spacing: -0.03em; }
h3 { font-size: 17px; line-height: 1.35; letter-spacing: -0.015em; }
p { margin: 0 0 16px; }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-dark); }

.shell { max-width: var(--shell); margin: 0 auto; padding: 0 28px; }
.center { text-align: center; }
.lede { font-size: 18px; line-height: 1.65; color: var(--muted); max-width: 60ch; }
.center .lede { margin-left: auto; margin-right: auto; }
.eyebrow {
  display: block; font-size: 12px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 18px;
}

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; border-radius: 9px; padding: 0 20px; height: 46px;
  font-size: 15px; font-weight: 550; letter-spacing: -0.01em;
  border: 1px solid transparent; transition: background .15s, border-color .15s, color .15s;
  white-space: nowrap; font-family: inherit;
}
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: #1c2740; color: #fff; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: #cdd5e0; background: var(--bg-soft); color: var(--ink); }
.btn-sm { height: 38px; padding: 0 15px; font-size: 14px; }
.btn-block { width: 100%; }

/* ------------------------------------------------------------------- nav */
.nav {
  position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.85);
  backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--line-soft);
}
.nav-in { display: flex; align-items: center; gap: 20px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; margin-right: auto; }
.brand .mark {
  width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center;
  background: var(--ink); color: #fff; font-size: 14px;
}
.brand b { color: var(--ink); font-size: 16.5px; font-weight: 600; letter-spacing: -0.02em; }
.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a { color: var(--body); font-size: 14.5px; font-weight: 500; }
.nav-links a:hover { color: var(--ink); }
.nav-cta { display: flex; align-items: center; gap: 8px; }
.menu-btn {
  display: none; background: none; border: 0; font-size: 20px; cursor: pointer;
  color: var(--ink); padding: 6px; line-height: 1;
}

/* ------------------------------------------------------------------ hero */
.hero { padding: 104px 0 0; }
/* Wide enough for two lines at the top of the clamp, and balanced so the
   second line is never a lonely word. */
.hero h1 { max-width: 900px; margin-left: auto; margin-right: auto; text-wrap: balance; }
.hero .lede { margin-top: 22px; font-size: 19px; max-width: 54ch; }
.hero-cta { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 34px; }
.hero-sub { font-size: 13.5px; color: var(--muted); margin-top: 18px; }

/* The one badge on the page, so it has to earn its ink: understated. */
.tag {
  display: inline-flex; align-items: center; gap: 7px; font-size: 13px;
  font-weight: 550; color: var(--body); margin-bottom: 22px;
}
.tag .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--good); }

/* A plain mock of the output, not a screenshot: it stays honest when the UI
   changes, costs no image weight, and keeps the page fast. It is the page's
   main object, so it gets the border budget. */
.shot {
  margin: 64px auto 0; max-width: 1000px; border: 1px solid var(--line);
  border-radius: 14px; overflow: hidden; background: #fff;
  box-shadow: 0 1px 2px rgba(11,18,32,.04), 0 24px 48px -28px rgba(11,18,32,.22);
}
.shot-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 18px; border-bottom: 1px solid var(--line-soft);
  font-size: 12.5px; color: var(--muted);
}
.shot-bar b { color: var(--ink); font-weight: 550; }
.shot table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.shot th, .shot td { padding: 12px 18px; text-align: left; border-bottom: 1px solid var(--line-soft); }
.shot tr:last-child td { border-bottom: 0; }
.shot th {
  color: var(--muted); font-weight: 550; font-size: 11px;
  text-transform: uppercase; letter-spacing: .07em;
}
.shot td { color: var(--body); }
.shot td.d { color: var(--ink); white-space: nowrap; }
.shot td.n { text-align: right; font-variant-numeric: tabular-nums; }
.shot td.cr { color: var(--good); }

/* --------------------------------------------------------------- sections */
/* scroll-margin keeps a heading clear of the sticky nav on an anchor jump. */
section { padding: var(--pad) 0; scroll-margin-top: 64px; }
.soft { background: var(--bg-soft); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.sec-head { max-width: 56ch; margin: 0 auto 64px; text-align: center; }
.sec-head p { margin: 0; }

/* Three steps: a light numeral does the work a box used to. */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px; counter-reset: step; }
.step { counter-increment: step; }
.step::before {
  content: counter(step, decimal-leading-zero);
  display: block; font-size: 13px; font-weight: 600; letter-spacing: .1em;
  color: var(--brand); margin-bottom: 14px;
}
.step h3 { margin-bottom: 8px; }
.step p { margin: 0; font-size: 15.5px; }

/* Features: no cards. An icon, a line, a sentence — air between them. */
.feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 54px 56px; }
.feat h3 { margin-bottom: 8px; }
.feat p { margin: 0; font-size: 15.5px; }
.feat svg { width: 22px; height: 22px; stroke: var(--ink); stroke-width: 1.5; fill: none;
  stroke-linecap: round; stroke-linejoin: round; margin-bottom: 16px; display: block; }

/* The toolkit: a sentence and a list, not four more boxes. */
.tool-list {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 0;
  /* Wide enough that all eight sit on one line — a wrap leaves a trailing
     divider hanging at the end of the first row. */
  max-width: 940px; margin: 36px auto 0; font-size: 15px; color: var(--body);
}
.tool-list span { padding: 0 18px; border-right: 1px solid var(--line); line-height: 1.2; }
.tool-list span:last-child { border-right: 0; }

/* ------------------------------------------------------- beta access form */
.beta-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start;
  max-width: 1000px; margin: 0 auto;
}
.beta-copy h2 { margin-bottom: 18px; }
.beta-copy > p { font-size: 17px; color: var(--muted); }
.beta-points { list-style: none; margin: 32px 0 0; padding: 0; }
.beta-points li { position: relative; padding-left: 28px; margin-bottom: 15px; font-size: 15.5px; }
.beta-points li::before {
  content: ""; position: absolute; left: 2px; top: 9px; width: 9px; height: 5px;
  border-left: 1.75px solid var(--good); border-bottom: 1.75px solid var(--good);
  transform: rotate(-45deg);
}
.beta-points b { color: var(--ink); font-weight: 550; }

.beta-form-box {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 32px; box-shadow: 0 1px 2px rgba(11,18,32,.04), 0 20px 40px -32px rgba(11,18,32,.25);
}
.beta-form-box label {
  display: block; font-size: 13px; font-weight: 550; color: var(--ink); margin: 0 0 7px;
}
.beta-form-box input[type=text], .beta-form-box input[type=email], .beta-form-box textarea {
  width: 100%; font: inherit; font-size: 15px; line-height: 1.5; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: 9px;
  padding: 11px 13px; margin-bottom: 18px; transition: border-color .15s, box-shadow .15s;
}
.beta-form-box textarea { resize: vertical; min-height: 84px; }
.beta-form-box input:focus, .beta-form-box textarea:focus {
  outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(11,18,32,.07);
}
.beta-form-box input::placeholder, .beta-form-box textarea::placeholder { color: #aeb6c4; }
.two-up { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* Off-screen rather than display:none — a bot that only skips hidden fields
   still fills this one. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-msg { font-size: 14px; margin: 14px 0 0; color: var(--muted); }
.form-msg.bad { color: #b42318; }
.form-fine { font-size: 12.5px; line-height: 1.6; color: var(--muted); margin: 16px 0 0; }

.beta-done { text-align: center; padding: 18px 0 6px; }
.beta-done h3 { font-size: 19px; margin-bottom: 10px; }
.beta-done .done-note { font-size: 15px; margin: 0; }
.done-tick {
  width: 42px; height: 42px; margin: 0 auto 18px; border-radius: 50%;
  display: grid; place-items: center; font-size: 19px;
  background: #ecfdf5; color: var(--good);
}

/* ------------------------------------------------------------------- faq */
.faq { max-width: 740px; margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary {
  cursor: pointer; font-weight: 550; color: var(--ink); list-style: none;
  font-size: 16.5px; letter-spacing: -0.015em; padding: 22px 36px 22px 0; position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 8px; height: 8px;
  border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted);
  transform: translateY(-70%) rotate(45deg); transition: transform .18s;
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq p { margin: 0 0 22px; font-size: 15.5px; max-width: 64ch; }

/* ---------------------------------------------------------------- footer */
footer { padding: 40px 0; font-size: 14px; color: var(--muted); border-top: 1px solid var(--line); }
.foot-in { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.foot-in .brand { margin-right: 0; }
.foot-in .sep { color: var(--line); }
.foot-in nav { margin-left: auto; display: flex; gap: 24px; flex-wrap: wrap; }
.foot-in a { color: var(--muted); }
.foot-in a:hover { color: var(--ink); }

/* ------------------------------------------------------------- responsive */
@media (max-width: 1000px) {
  :root { --pad: 88px; }
  .steps, .feats { grid-template-columns: repeat(2, 1fr); gap: 44px 40px; }
  .beta-grid { grid-template-columns: 1fr; gap: 44px; max-width: 560px; }
  .hero { padding-top: 80px; }
  .shot { margin-top: 52px; }
}
@media (max-width: 720px) {
  :root { --pad: 68px; }
  .shell { padding: 0 20px; }
  .nav-links {
    position: absolute; top: 64px; left: 0; right: 0; background: #fff; flex-direction: column;
    align-items: flex-start; gap: 0; padding: 6px 20px 14px; border-bottom: 1px solid var(--line);
  }
  .nav-links[hidden] { display: none; }
  .nav-links a { padding: 12px 0; width: 100%; }
  .menu-btn { display: block; order: 3; }
  .nav-cta .btn-ghost { display: none; }
  .hero { padding-top: 56px; }
  .hero .lede { font-size: 17px; }
  .sec-head { margin-bottom: 44px; }
  .steps, .feats { grid-template-columns: 1fr; gap: 36px; }
  .beta-form-box { padding: 24px; }
  .beta-form-box textarea { min-height: 104px; }
  .two-up { grid-template-columns: 1fr; gap: 0; }
  .tool-list { gap: 8px 0; }
  .tool-list span { padding: 0 12px; font-size: 14.5px; }
  .foot-in nav { margin-left: 0; gap: 18px; }
  /* The mock is illustrative — on a phone keep only the three columns that
     carry the point (what, when, what it left you with) rather than squeezing
     seven into 375px or letting the page scroll sideways. */
  .shot th:nth-child(2), .shot td:nth-child(2),
  .shot th:nth-child(3), .shot td:nth-child(3),
  .shot th:nth-child(5), .shot td:nth-child(5),
  .shot th:nth-child(6), .shot td:nth-child(6) { display: none; }
  .shot th, .shot td { padding: 11px 12px; font-size: 12.5px; }
  .shot td.d { font-size: 12px; }
  /* The row count has nowhere to go next to the filename at this width. */
  .shot-bar span { display: none; }
}