:root{
  --ink:#1b1a18; --ink-soft:#55504a; --line:#e6e0d8;
  --bg:#fbf8f4; --card:#fff; --accent:#d6303f; --accent-soft:#fdeaec;
  --max:min(100% - 2.5rem, 62rem);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
.wrap{width:var(--max); margin-inline:auto}
h1,h2,h3{line-height:1.2; letter-spacing:-.02em; margin:0}
h1{font-size:clamp(2rem,5.5vw,3.25rem); font-weight:800}
h2{font-size:clamp(1.5rem,3.4vw,2.15rem); font-weight:750; margin-bottom:.4em}
h3{font-size:1.12rem; font-weight:700}
p{margin:.7em 0}
a{color:inherit}
section{padding:clamp(3rem,7vw,5rem) 0; border-top:1px solid var(--line)}
.lede{font-size:clamp(1.05rem,2.1vw,1.25rem); color:var(--ink-soft); max-width:44ch}

/* header */
.top{position:sticky; top:0; z-index:20; background:rgba(251,248,244,.9); backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
.top .wrap{display:flex; align-items:center; gap:1rem; height:60px}
.brand{font-weight:800; letter-spacing:-.02em; text-decoration:none; font-size:1.05rem}
.top nav{margin-left:auto; display:flex; gap:1.25rem; font-size:.9rem}
.top nav a{color:var(--ink-soft); text-decoration:none}
.top nav a:hover{color:var(--ink)}
@media(max-width:640px){.top nav{display:none}}

/* buttons */
.btn{display:inline-block; padding:.85rem 1.5rem; border-radius:999px; font-weight:650; text-decoration:none; border:1.5px solid transparent}
.btn-primary{background:var(--accent); color:#fff}
.btn-primary:hover{background:#b8202e}
.btn-ghost{border-color:var(--line); background:var(--card)}
.btn-ghost:hover{border-color:var(--ink-soft)}
.cta-row{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.6rem}
.fineprint{font-size:.85rem; color:var(--ink-soft); margin-top:1rem}

/* hero */
.hero{padding:clamp(3.5rem,9vw,6rem) 0 clamp(3rem,7vw,4.5rem); border-top:0}
.hero h1{max-width:16ch}
.hero .lede{margin-top:1.1rem}

/* cards */
.grid{display:grid; gap:1rem; margin-top:1.8rem}
@media(min-width:720px){.grid-2{grid-template-columns:1fr 1fr}}
.card{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:1.4rem 1.5rem}
.card .tag{display:inline-block; font-size:.78rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--accent); background:var(--accent-soft); padding:.25rem .6rem; border-radius:999px; margin-bottom:.7rem}
.card h3{margin-bottom:.35rem}
.card p{margin:.4em 0 0; color:var(--ink-soft); font-size:.95rem}

.note{background:var(--card); border-left:3px solid var(--accent); border-radius:0 10px 10px 0; padding:1.1rem 1.3rem; margin-top:1.8rem}
.note p{margin:0; color:var(--ink-soft); font-size:.95rem}
.note p + p{margin-top:.7rem}

/* table */
.table-scroll{overflow-x:auto; margin-top:1.6rem; border:1px solid var(--line); border-radius:14px; background:var(--card)}
table{border-collapse:collapse; width:100%; min-width:31rem; font-size:.95rem}
th,td{text-align:left; padding:.85rem 1.2rem; border-bottom:1px solid var(--line); vertical-align:top}
tr:last-child th,tr:last-child td{border-bottom:0}
th{font-weight:550; color:var(--ink-soft)}
tr.head th{font-weight:750; color:var(--ink); background:#f4efe8}
/* price tables: right-align the last cell. legal tables opt out with .legal-table */
table:not(.legal-table) td:last-child{text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; font-weight:650}
.legal-table th{width:30%; font-weight:650; color:var(--ink)}
.legal-table td{color:var(--ink-soft)}
@media(max-width:640px){
  .legal-table{min-width:0}
  .legal-table th{width:38%}
}

/* steps */
ol.steps{counter-reset:s; list-style:none; padding:0; margin:1.8rem 0 0; display:grid; gap:1.1rem}
ol.steps li{counter-increment:s; padding-left:3rem; position:relative}
ol.steps li::before{
  content:counter(s); position:absolute; left:0; top:-.1rem;
  width:2rem; height:2rem; border-radius:50%; background:var(--accent); color:#fff;
  display:grid; place-items:center; font-weight:750; font-size:.9rem;
}
ol.steps strong{display:block}
ol.steps span{color:var(--ink-soft); font-size:.95rem}

/* faq */
details{border-bottom:1px solid var(--line); padding:1.05rem 0}
details:first-of-type{border-top:1px solid var(--line)}
summary{cursor:pointer; font-weight:650; list-style:none; display:flex; gap:.8rem; align-items:flex-start}
summary::-webkit-details-marker{display:none}
summary::before{content:"+"; color:var(--accent); font-weight:800; line-height:1.5}
details[open] summary::before{content:"–"}
details p{color:var(--ink-soft); margin:.6rem 0 0 1.6rem; font-size:.95rem}

/* final cta */
.final{background:var(--ink); color:#f7f3ee; border-radius:18px; padding:clamp(2rem,5vw,3.25rem); text-align:center; margin-block:clamp(3rem,7vw,5rem)}
.final h2{color:#fff}
.final p{color:#c8c0b6; max-width:42ch; margin-inline:auto}
.final .cta-row{justify-content:center}
.final .btn-ghost{background:transparent; border-color:#4a453f; color:#f7f3ee}

footer{border-top:1px solid var(--line); padding:2.5rem 0 3.5rem; font-size:.88rem; color:var(--ink-soft)}
footer a{color:var(--ink-soft)}
footer nav{display:flex; flex-wrap:wrap; gap:1.1rem; margin-top:.7rem}

/* ---- long-form legal pages ---- */
.doc{max-width:44rem; padding:clamp(2.5rem,6vw,4rem) 0 5rem; border-top:0}
.doc h1{font-size:clamp(1.75rem,4vw,2.5rem); margin-bottom:.5rem}
.doc .updated{color:var(--ink-soft); font-size:.9rem; margin:0 0 2.5rem}
.doc h2{font-size:1.3rem; font-weight:700; margin:2.5rem 0 .6rem; padding-top:1.5rem; border-top:1px solid var(--line)}
.doc h2:first-of-type{border-top:0; padding-top:0; margin-top:1.5rem}
.doc h3{font-size:1.05rem; margin:1.6rem 0 .4rem}
.doc p,.doc li{color:var(--ink-soft)}
.doc ol,.doc ul{padding-left:1.3rem; margin:.7em 0}
.doc li{margin:.45em 0}
.doc strong{color:var(--ink)}
.doc .table-scroll{margin-top:1.2rem}
.doc .lang-switch{display:flex; gap:.6rem; margin:0 0 2rem}
.doc .lang-switch a{
  font-size:.85rem; text-decoration:none; padding:.35rem .85rem;
  border:1px solid var(--line); border-radius:999px; background:var(--card); color:var(--ink-soft);
}
.doc .lang-switch a[aria-current="true"]{background:var(--ink); color:#fff; border-color:var(--ink)}
