/* Shell shared by the secondary pages (pricing, sign in). The converter itself
   stays one self-contained file on purpose; these pages are plain documents, so
   they share one sheet instead of carrying a third copy of the design tokens.
   Tokens, roles and spacing are identical to index.html — a raised surface goes
   WHITE in light and LIGHTER than the page in dark, never a naive inversion. */
:root{
  --bg:#f2f4f7; --surface:#ffffff; --surface-2:#e8ecf2;
  --ink:#0d1523; --ink-2:#414d5f; --muted:#586471;
  --line:#d9dee6; --line-strong:#b9c2ce;
  --accent:#1550c0; --accent-ink:#ffffff; --accent-soft:#e6eefc;
  --ok:#136c44; --ok-soft:#e2f2ea;
  --shadow:0 1px 2px rgba(13,21,35,.07), 0 3px 8px rgba(13,21,35,.07);
  --radius:6px;
  --sans:Roboto,"Segoe UI","Helvetica Neue",Arial,system-ui,sans-serif;
  --mono:Roboto,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0f1319; --surface:#171d27; --surface-2:#222a37;
    --ink:#e8ecf2; --ink-2:#bcc5d1; --muted:#8e99a8;
    --line:#2a323e; --line-strong:#3d4757;
    --accent:#6a9df2; --accent-ink:#0d1219; --accent-soft:#1b2637;
    --ok:#5fc493; --ok-soft:#16281f;
    --shadow:0 1px 2px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.35);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0f1319; --surface:#171d27; --surface-2:#222a37;
  --ink:#e8ecf2; --ink-2:#bcc5d1; --muted:#8e99a8;
  --line:#2a323e; --line-strong:#3d4757;
  --accent:#6a9df2; --accent-ink:#0d1219; --accent-soft:#1b2637;
  --ok:#5fc493; --ok-soft:#16281f;
  --shadow:0 1px 2px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.35);
  color-scheme:dark;
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
  /* these pages are short; without this the footer floats mid-screen */
  min-height:100vh; display:flex; flex-direction:column;
}
body > main{flex:1 0 auto}
h1,h2,h3{margin:0; text-wrap:balance; letter-spacing:-.011em}
h1{font-size:clamp(24px,3.2vw,32px); line-height:1.2; font-weight:700}
h2{font-size:19px; font-weight:700}
h3{font-size:15px; font-weight:600}
p{margin:0}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:3px}
.wrap{max-width:1080px; margin:0 auto; padding:0 20px}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* header */
.site-head{
  position:sticky; top:0; z-index:20; background:var(--surface);
  border-bottom:1px solid var(--line);
}
.site-head .wrap{display:flex; align-items:center; gap:24px; height:56px}
.brand{display:flex; align-items:center; gap:8px; font-weight:700; color:var(--ink); font-size:16px}
.brand:hover{text-decoration:none}
.brand .mark{
  width:22px; height:22px; border-radius:4px; background:var(--accent);
  color:var(--accent-ink); font-size:13px; font-weight:700;
  display:grid; place-items:center; font-family:var(--mono);
}
.site-nav{display:flex; gap:20px; margin-left:8px}
.site-nav a{color:var(--ink-2); font-size:14px}
.head-right{margin-left:auto; display:flex; align-items:center; gap:14px}
.head-right a{font-size:14px; color:var(--ink-2)}
.head-right a[aria-current="page"]{color:var(--ink); font-weight:600}
.icon-btn{
  display:grid; place-items:center; width:30px; height:30px; padding:0; cursor:pointer;
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--surface); color:var(--ink-2);
}
.icon-btn:hover{background:var(--surface-2); color:var(--ink)}
@media (max-width:760px){ .site-nav{display:none} }

/* buttons */
.btn{
  font:inherit; font-size:14px; font-weight:500; cursor:pointer;
  border:1px solid var(--line-strong); background:var(--surface); color:var(--ink);
  padding:8px 14px; border-radius:var(--radius); display:inline-flex;
  align-items:center; justify-content:center; gap:7px; white-space:nowrap;
}
.btn:hover{background:var(--surface-2); text-decoration:none}
.btn-primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:600}
.btn-primary:hover{filter:brightness(1.07); background:var(--accent)}
.btn:disabled{opacity:.45; cursor:not-allowed}
.btn-wide{width:100%}

/* page frame */
.page{padding:44px 0 8px}
.page-intro{max-width:640px; display:flex; flex-direction:column; gap:9px}
.page-intro p{color:var(--muted); font-size:15.5px}
.eyebrow{
  font-size:12px; text-transform:uppercase; letter-spacing:.07em;
  font-weight:600; color:var(--muted);
}
.notice{
  display:flex; gap:10px; align-items:flex-start; margin-top:22px;
  border:1px solid var(--line); border-left:3px solid var(--accent);
  background:var(--surface); border-radius:var(--radius);
  padding:12px 14px; font-size:14px; color:var(--ink-2); max-width:760px;
}
.notice b{color:var(--ink)}
.note{font-size:13.5px; color:var(--muted)}

/* plans */
.plans{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
  gap:16px; margin-top:28px; align-items:start;
}
.plan{
  display:flex; flex-direction:column; gap:14px; height:100%;
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--surface); padding:20px; box-shadow:var(--shadow);
}
.plan-live{border-color:var(--accent)}
.plan-top{display:flex; flex-direction:column; gap:4px}
.plan-name{display:flex; align-items:center; gap:9px}
.tag{
  font-size:11px; text-transform:uppercase; letter-spacing:.06em; font-weight:600;
  padding:2px 7px; border-radius:100px; border:1px solid var(--line-strong); color:var(--muted);
}
.tag-live{background:var(--ok-soft); border-color:var(--ok); color:var(--ok)}
.tag-soon{background:var(--accent-soft); border-color:var(--accent); color:var(--accent)}
.plan-price{
  font-family:var(--mono); font-variant-numeric:tabular-nums;
  font-size:30px; font-weight:700; line-height:1.15; margin-top:6px;
}
.plan-price small{font-family:var(--sans); font-size:13.5px; font-weight:400; color:var(--muted)}
/* a price that does not exist yet should read as an empty slot, not as a
   redaction bar, so the placeholder is muted and lighter than a real figure */
.plan-price .tbd{color:var(--line-strong); font-weight:400}
.plan-for{color:var(--muted); font-size:13.5px}
.plan ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px}
.plan li{
  position:relative; padding-left:20px; font-size:14px; color:var(--ink-2);
}
.plan li::before{
  content:""; position:absolute; left:2px; top:6px; width:9px; height:5px;
  border-left:2px solid var(--accent); border-bottom:2px solid var(--accent);
  transform:rotate(-45deg);
}
.plan .btn{margin-top:auto}

/* comparison + faq blocks */
.block{padding:40px 0; border-top:1px solid var(--line); margin-top:44px}
.block h2{margin-bottom:6px}
.block > .wrap > p.lead{color:var(--muted); margin-bottom:22px; max-width:640px}
.table-scroll{
  overflow-x:auto; border:1px solid var(--line);
  border-radius:var(--radius); background:var(--surface);
}
table{border-collapse:collapse; width:100%; font-size:14px; color:var(--ink); background:var(--surface)}
th,td{
  padding:10px 12px; text-align:left; border-bottom:1px solid var(--line);
  vertical-align:top; color:var(--ink);
}
thead th{
  font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted);
  font-weight:600; background:var(--surface-2); white-space:nowrap;
}
tbody tr:last-child td{border-bottom:0}
tbody td:first-child{font-weight:600; color:var(--ink)}
tbody td.mid{text-align:center; width:15%; color:var(--ink-2)}
tbody td.yes{color:var(--ok); font-weight:600}
.faq{display:flex; flex-direction:column; border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line)}
summary{
  padding:13px 0; cursor:pointer; font-weight:600; font-size:15px;
  list-style:none; display:flex; align-items:center; gap:10px; color:var(--ink);
}
summary::-webkit-details-marker{display:none}
summary::before{content:"+"; font-family:var(--mono); color:var(--accent); font-weight:700}
details[open] summary::before{content:"\2212"}
details p{padding:0 0 14px 22px; color:var(--ink-2); font-size:14px; max-width:70ch}

/* sign in */
.auth{max-width:380px; margin:56px auto 0}
.auth-card{
  border:1px solid var(--line); border-radius:var(--radius); background:var(--surface);
  padding:24px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:16px;
}
.auth-head{display:flex; flex-direction:column; gap:5px; text-align:center}
.auth-head p{color:var(--muted); font-size:14px}
.auth form{display:flex; flex-direction:column; gap:13px}
.field{display:flex; flex-direction:column; gap:5px}
.field label{font-size:12.5px; font-weight:600; color:var(--ink-2)}
.input{
  font:inherit; font-size:14.5px; color:var(--ink); background:var(--surface);
  border:1px solid var(--line-strong); border-radius:var(--radius);
  padding:9px 11px; width:100%;
}
.input::placeholder{color:var(--muted)}
.input:focus{border-color:var(--accent); outline:none; box-shadow:0 0 0 3px var(--accent-soft)}
.input:disabled{background:var(--surface-2); color:var(--muted); cursor:not-allowed}
.auth-alt{
  border-top:1px solid var(--line); padding-top:14px;
  font-size:13.5px; color:var(--ink-2); text-align:center;
}
.auth-foot{margin-top:14px; text-align:center; font-size:13px; color:var(--muted)}

/* footer */
.site-foot{
  border-top:1px solid var(--line); background:var(--surface-2);
  padding:26px 0; margin-top:56px;
}
.foot-base{font-size:13px; color:var(--muted); display:flex; gap:16px; flex-wrap:wrap}
.foot-base a{color:var(--ink-2)}
@media (prefers-reduced-motion:reduce){ *{transition:none !important; animation:none !important} }