/* Mtheel public site. Brand package v1 (green, approved 6 Oct 2026). Light first. Logical properties only.
   Tokens and @font-face live in tokens.css. Arabic = Tajawal for every role and is never letter-spaced;
   Josefin Sans labels are Latin only (html[lang="en"]). */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-block-start:84px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--ice);color:var(--body);font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased;caret-color:var(--accent)}
html[lang="ar"] body{font-family:var(--f-ar);line-height:1.85;letter-spacing:0}
html[lang="en"] body{font-family:var(--f-body)}
::selection{background:var(--pale);color:var(--ink)}
img,svg{max-width:100%}
a{color:var(--ink);text-decoration-color:var(--accent);text-underline-offset:4px;text-decoration-thickness:1px}
a:hover{color:var(--deep)}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul{padding:0;list-style:none}
h1,h2,h3{color:var(--ink);font-weight:700;text-wrap:balance}
html[lang="ar"] :is(h1,h2,h3){font-family:var(--f-ar);line-height:1.35;letter-spacing:0}
html[lang="en"] :is(h1,h2,h3){font-family:var(--f-head);line-height:1.12;letter-spacing:-.02em}
h1{font-size:clamp(2rem,1.25rem + 3.2vw,3.35rem)}
h2{font-size:clamp(1.55rem,1.15rem + 1.7vw,2.35rem)}
h3{font-size:1.125rem}
html[lang="en"] h3{letter-spacing:-.01em}
p{text-wrap:pretty}
[hidden]{display:none!important}
.ic{width:1.25em;height:1.25em;flex:none}
.num{font-variant-numeric:tabular-nums}
html[lang="en"] .num{font-family:var(--f-head);font-weight:700}
.wrap{max-inline-size:1200px;margin-inline:auto;padding-inline:16px}
@media (min-width:600px){.wrap{padding-inline:24px}}
.measure{max-inline-size:68ch}
.skip{position:absolute;inset-inline-start:12px;inset-block-start:-80px;background:var(--ink);color:var(--ice);padding:10px 16px;border-radius:var(--r-md);z-index:100}
.skip:focus{inset-block-start:12px}
.skip:hover{color:var(--ice)}
/* focus: accent 2px ring with offset. Accent measures 2.99:1 on ice and 3.19:1 on white, so a 1px ink
   inner ring sits in the offset gap and carries the 3:1 non-text contrast on every light ground. */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;box-shadow:0 0 0 1px var(--ink)}
.sr{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* buttons: brand pills, ink fill. 48px tall. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-block-size:48px;padding:10px 24px;border-radius:var(--r-pill);border:1px solid var(--ink);font:inherit;font-weight:700;text-decoration:none;cursor:pointer;background:transparent;color:var(--ink);transition:background-color .15s,color .15s,border-color .15s;text-align:center;line-height:1.35}
html[lang="en"] .btn{font-family:var(--f-head);letter-spacing:.04em;font-size:.95rem}
.btn-primary{background:var(--ink);color:var(--ice);border-color:var(--ink)}
.btn-primary:hover{background:var(--deep);border-color:var(--deep);color:var(--ice)}
.btn-secondary{border-color:var(--hairline);background:var(--surface)}
.btn-secondary:hover{background:var(--mist);border-color:var(--muted);color:var(--ink)}
.btn-sm{min-block-size:44px;padding:8px 18px}
.btn-block{inline-size:100%}
.btn[disabled]{opacity:.7;cursor:progress}
.link-quiet{display:inline-flex;white-space:nowrap;align-items:center;min-block-size:44px;padding-inline:10px;color:var(--muted);text-decoration:underline}
.link-quiet:hover{color:var(--ink)}

/* tags: launch price, coming soon, illustration */
.tag{display:inline-flex;align-items:center;font-size:.82rem;font-weight:700;color:var(--ink);background:var(--mist);padding:2px 12px;border-radius:var(--r-pill);line-height:1.6;white-space:nowrap}
html[lang="en"] .tag{font-family:var(--f-label);font-weight:300;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;padding:4px 12px 2px;color:var(--deep)}

/* header */
.hdr{position:sticky;inset-block-start:0;z-index:50;background:var(--ice);border-block-end:1px solid var(--hairline)}
.hdr>.wrap{display:flex;align-items:center;gap:12px;min-block-size:68px}
.lockup{display:inline-flex;flex:none;text-decoration:none;border-radius:var(--r-sm)}
.lockup img{display:block;inline-size:180px;block-size:auto} /* inline lockup: 180px is the brand minimum */
.brand{display:flex;align-items:center;flex:none}
/* clear space = mark height (about 20px at this size) before the endorsement */
.endorse{display:none;font-size:.82rem;color:var(--muted);white-space:nowrap;margin-inline-start:22px;padding-inline-start:16px;border-inline-start:1px solid var(--hairline);line-height:1.3}
.nav{display:none;margin-inline-start:auto;gap:2px}
.nav a{padding:10px 12px;border-radius:var(--r-md);text-decoration:none;color:var(--ink);white-space:nowrap}
.nav a:hover{background:var(--mist);color:var(--ink)}
.hdr-actions{display:flex;align-items:center;gap:8px;margin-inline-start:auto}
.hdr-cta{display:none;gap:6px;align-items:center}
.hdr-cta .btn{white-space:nowrap}
.lang{min-inline-size:56px;padding-inline:14px}
.menu-btn{padding-inline:12px}
.mnav{display:none;border-block-start:1px solid var(--hairline);background:var(--ice);padding-block:8px 20px}
.mnav.open{display:block}
.mnav a.l{display:block;padding:12px 4px;border-block-end:1px solid var(--hairline);text-decoration:none;font-weight:700}
.mnav .btns{display:grid;gap:6px;margin-block-start:16px;justify-items:center}
.mnav .btns .btn{inline-size:100%}
@media (min-width:1000px){.nav{display:flex}.hdr-actions{margin-inline-start:0}.hdr-cta{display:flex}.menu-btn,.mnav{display:none!important}}
@media (min-width:1180px){.endorse{display:inline-block}}
@media (min-width:1000px) and (max-width:1279px){.hdr-cta .link-quiet{display:none}.nav a{padding-inline:9px}}
/* legal pages */
.legal-hdr .hdr-actions{margin-inline-start:auto}

/* sections */
section{padding-block:56px}
@media (min-width:900px){section{padding-block:96px}}
.band{background:var(--mist)}
.sec-head{max-inline-size:44rem;margin-block-end:36px}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head p{margin-block-start:10px;color:var(--body);font-size:1.05rem}
.sec-h{margin-block-end:36px;max-inline-size:44rem}
/* heading beside its content: used by the problems list and the FAQ */
.split{display:grid;gap:24px 56px}
@media (min-width:900px){.split{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}}

/* hero */
.hero{padding-block:40px 64px}
@media (min-width:1040px){.hero{padding-block:72px 104px}}
.hero-grid{display:grid;gap:48px;align-items:center}
.hero-grid>*{min-inline-size:0}
@media (min-width:1040px){.hero-grid{grid-template-columns:minmax(0,.94fr) minmax(0,1.16fr);gap:56px}}
.hero h1{margin-block-end:16px}
html[lang="en"] .hero h1{font-size:clamp(2rem,1.25rem + 2.5vw,3rem)}
.sub{color:var(--body);max-inline-size:36em;font-size:1.08rem}
.hero-price{display:grid;justify-items:start;gap:2px;margin-block-start:24px}
.hero-price .tag{margin-block-end:6px}
.hp-now{color:var(--body)}
.hp-now strong{color:var(--ink);font-size:1.75rem;line-height:1.2;font-weight:700}
.hp-base{color:var(--muted);font-size:.95rem}
.hp-base s,.price .base s{text-decoration-thickness:1.5px;text-decoration-color:var(--muted)}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-block:24px 16px}
.ctas .btn{flex:1 1 200px}
@media (min-width:600px){.ctas .btn{flex:0 0 auto}}
.micro{display:flex;flex-wrap:wrap;gap:6px 20px;font-size:.93rem;color:var(--body)}
.micro li{display:inline-flex;gap:6px;align-items:center}
.micro .ic{color:var(--ok);inline-size:16px;block-size:16px}
.indep{display:flex;gap:8px;align-items:flex-start;margin-block-start:20px;font-size:.9rem;color:var(--body);max-inline-size:38em;padding-block-start:16px;border-block-start:1px solid var(--hairline)}
.indep .ic{margin-block-start:4px;color:var(--muted)}

/* the compliance matrix (design-system "Compliance matrix" + "Status chip"). The two strips stepping back
   behind the card echo the folder mark. */
.mx-fig{position:relative;isolation:isolate;padding-block-start:24px}
.mx-fig::before,.mx-fig::after{content:"";position:absolute;z-index:-1;block-size:48px;border-radius:var(--r-lg)}
.mx-fig::before{inset-block-start:12px;inset-inline:14px;background:var(--pale)}
.mx-fig::after{inset-block-start:0;inset-inline:30px;background:var(--mist);border:1px solid var(--hairline)}
.mx-card{position:relative;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-lg);padding:20px 20px 16px;box-shadow:0 1px 2px rgba(4,48,42,.06),0 10px 22px -14px rgba(4,48,42,.28)}
.illus{position:absolute;inset-block-start:-22px;inset-inline-end:44px;font-size:.78rem;color:var(--muted);line-height:1}
html[lang="en"] .illus{font-family:var(--f-label);font-weight:300;letter-spacing:.2em;text-transform:uppercase;font-size:.7rem}
.mx-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 16px;padding-block-end:14px;border-block-end:1px solid var(--hairline)}
.mx-title{font-weight:700;color:var(--ink);font-size:1.05rem}
html[lang="en"] .mx-title{font-family:var(--f-head)}
.dpair{font-size:.85rem;color:var(--muted);display:inline-flex;flex-wrap:wrap;gap:0 6px;align-items:baseline}
.dpair b{color:var(--ink);font-weight:600;font-family:'Archivo',var(--f-ar);font-variant-numeric:tabular-nums}
.mx-scroll{overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--light) var(--mist);margin-inline:-8px;padding-inline:8px;border-radius:var(--r-sm)}
.mx{border-collapse:collapse;inline-size:100%;min-inline-size:500px;font-variant-numeric:tabular-nums}
.mx th,.mx td{padding:11px 6px;border-block-end:1px solid var(--hairline);text-align:start;vertical-align:middle}
.mx tbody tr:last-child>*{border-block-end:0}
.mx thead th{font-size:.8rem;font-weight:400;color:var(--muted);white-space:nowrap;padding-block:12px 10px}
html[lang="en"] .mx thead th{font-family:var(--f-label);font-weight:300;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase}
.mx th[scope="row"]{position:sticky;inset-inline-start:0;background:var(--surface);z-index:1;padding-inline-end:12px}
.mx th[scope="row"] b{display:block;color:var(--ink);font-size:.88rem;line-height:1.35;min-inline-size:7.5em;max-inline-size:11em}
.mx .code{display:block;font-family:'Archivo',sans-serif;font-size:.7rem;color:var(--muted);letter-spacing:.04em;text-align:start;line-height:1.5}
.st{display:inline-flex;align-items:center;gap:4px;border:1px solid currentColor;border-radius:var(--r-sm);padding:3px 7px;font-size:.78rem;font-weight:700;line-height:1.45;white-space:nowrap}
html[lang="en"] .st{font-weight:600}
.st .ic{inline-size:14px;block-size:14px}
.st.ok{color:var(--ok)}.st.warn{color:var(--warn)}.st.bad{color:var(--bad)}.st.miss{color:var(--miss);border-style:dashed}
.mx-foot{margin-block-start:12px;padding-block-start:12px;border-block-start:1px solid var(--hairline);font-size:.85rem;color:var(--muted)}
/* one authored moment: the statuses settle row by row, as if being calculated. Visible by default. */
@media (prefers-reduced-motion:no-preference){
  .mx tbody .st{animation:settle .7s cubic-bezier(.16,1,.3,1) both}
  .mx tbody tr:nth-child(2) .st{animation-delay:.08s}
  .mx tbody tr:nth-child(3) .st{animation-delay:.16s}
  .mx tbody tr:nth-child(4) .st{animation-delay:.24s}
  @keyframes settle{from{opacity:.15;filter:blur(3px);transform:translateY(4px)}to{opacity:1;filter:none;transform:none}}
}

/* problems: one list, no cards */
.rows li{padding-block:22px;border-block-start:1px solid var(--hairline);display:grid;gap:6px}
.rows li:last-child{border-block-end:1px solid var(--hairline)}
@media (min-width:700px){.rows li{grid-template-columns:minmax(0,15em) minmax(0,1fr);gap:24px}}
.rows p{color:var(--body);max-inline-size:68ch}

/* steps: a real sequence */
.steps{counter-reset:s;display:grid;gap:32px;list-style:none;padding:0}
@media (min-width:860px){.steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}}
.step{padding-block-start:18px;border-block-start:2px solid var(--ink)}
.step::before{counter-increment:s;content:counter(s);display:block;font-weight:700;font-size:2.4rem;line-height:1;color:var(--accent);margin-block-end:14px;font-variant-numeric:tabular-nums}
html[lang="en"] .step::before{font-family:var(--f-head)}
.step p{margin-block-start:8px;max-inline-size:68ch}

/* features grouped by job: three columns of plain lists */
.jobs{display:grid;gap:40px}
@media (min-width:900px){.jobs{grid-template-columns:repeat(3,minmax(0,1fr));gap:48px}}
.job h3{font-size:1.3rem;padding-block-start:16px;position:relative;margin-block-end:8px}
.job h3::before{content:"";position:absolute;inset-block-start:0;inset-inline-start:0;inline-size:56px;block-size:2px;background:var(--accent);border-radius:2px}
.job li{padding-block:14px;border-block-end:1px solid var(--hairline);display:grid;gap:2px}
.job li:last-child{border-block-end:0}
.job b{color:var(--ink);font-weight:700}
html[lang="en"] .job b{font-weight:600}
.job li span{font-size:.95rem;color:var(--body)}
.auth{margin-block-start:56px;padding-block-start:32px;border-block-start:1px solid var(--hairline)}
.auth h3{font-size:1.2rem;margin-block-end:8px}
.auth>p:first-of-type{margin-block-end:16px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-pill);padding:6px 16px;color:var(--ink);font-size:.92rem;line-height:1.5}
.chip.more{background:transparent;border-color:transparent;color:var(--muted);padding-inline:8px}
.note{margin-block-start:12px;font-size:.88rem;color:var(--muted)}

/* pricing */
.scope{display:flex;flex-direction:column;gap:8px;align-items:center;margin-block-end:28px;text-align:center}
.scope-l{font-weight:700;color:var(--ink)}
.scope-note{font-size:.85rem;color:var(--muted)}
.seg{display:inline-flex;flex-wrap:wrap;justify-content:center;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-pill);padding:4px;gap:4px;max-inline-size:100%}
.seg button{min-block-size:44px;padding:6px 18px;border:0;border-radius:var(--r-pill);background:transparent;font:inherit;font-weight:700;color:var(--ink);cursor:pointer;line-height:1.4}
.seg button:hover{background:var(--mist)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--ice)}
@media (max-width:520px){.seg{flex-direction:column;inline-size:100%;border-radius:var(--r-lg)}.seg button{inline-size:100%}}
.plan{max-inline-size:920px;margin-inline:auto;background:var(--surface);border:1px solid var(--ink);border-radius:var(--r-lg);display:grid}
@media (min-width:760px){.plan{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}}
.plan-buy{padding:28px;display:flex;flex-direction:column;gap:14px}
.plan-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.plan-top h3{font-size:1.5rem}
.price{display:grid;gap:2px}
.price .now{display:flex;align-items:baseline;gap:10px}
.price .amt{font-size:3.6rem;font-weight:700;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums}
html[lang="en"] .price .amt{font-family:var(--f-head);letter-spacing:-.02em}
.price .per{color:var(--body)}
.price .base{color:var(--muted);font-size:.95rem}
.vat{font-size:.88rem;color:var(--muted)}
.plan-buy .btn{margin-block-start:auto}
.plan-list{padding:28px;display:grid;gap:10px;align-content:center;border-block-start:1px solid var(--hairline)}
@media (min-width:760px){.plan-list{border-block-start:0;border-inline-start:1px solid var(--hairline)}}
.plan-list li{display:flex;gap:10px;align-items:flex-start}
.plan-list .ic{color:var(--ok);margin-block-start:5px;inline-size:18px;block-size:18px}
.plan-list li.scope-li{font-weight:700;color:var(--ink)}
/* security strip: decided facts only */
.trust{max-inline-size:920px;margin:32px auto 0}
.trust h3{font-size:1rem;margin-block-end:12px}
.trust ul{display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));border-block:1px solid var(--hairline)}
.trust li{display:flex;gap:10px;align-items:flex-start;padding-block:14px;padding-inline:0 14px;font-size:.92rem;color:var(--ink);line-height:1.5}
.trust .ic{color:var(--deep);margin-block-start:1px}
@media (min-width:900px){.trust li{padding-inline:14px;border-inline-start:1px solid var(--hairline)}.trust li:first-child{border-inline-start:0;padding-inline-start:0}}

/* Mtheel AI: a slim teaser band */
.ai-band{padding-block:32px;background:var(--mist);border-block:1px solid var(--hairline)}
.ai-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 40px}
.ai-txt{flex:1 1 32rem;min-inline-size:0}
.ai-band h2{font-size:1.2rem;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-block-end:4px}
.ai-band .tag{background:var(--surface);border:1px solid var(--hairline)}
.ai-band p{max-inline-size:68ch;font-size:.95rem}
.ai-band .disc{font-size:.85rem;color:var(--muted);margin-block-start:4px}
.ai-band .btn{flex:0 0 auto}
@media (max-width:599px){.ai-band .btn{inline-size:100%}}

/* faq */
.faq{display:grid;border-block-start:1px solid var(--hairline)}
.faq details{border-block-end:1px solid var(--hairline)}
.faq summary{list-style:none;cursor:pointer;min-block-size:56px;padding-block:14px;display:flex;justify-content:space-between;align-items:center;gap:16px;font-weight:700;color:var(--ink)}
html[lang="en"] .faq summary{font-weight:600}
.faq summary:hover{color:var(--deep)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ic{transition:transform .2s cubic-bezier(.16,1,.3,1);color:var(--muted)}
.faq details[open] summary .ic{transform:rotate(180deg)}
.faq details p{padding-block-end:18px;color:var(--body);max-inline-size:68ch}

/* final cta + footer */
.final{text-align:center}
.final .wrap{max-inline-size:760px}
.final p{margin-block:12px 0;color:var(--body)}
.final .ctas{justify-content:center;margin-block-start:24px}
.alt-contact{font-size:.95rem}
.ftr{background:var(--ink);color:var(--pale);padding-block:48px 32px;font-size:.95rem}
.ftr a{color:var(--ice)}
.ftr a:hover{color:var(--pale)}
.ftr-grid{display:grid;gap:32px}
@media (min-width:800px){.ftr-grid{grid-template-columns:1.4fr 1fr 1fr}}
.ftr-h{font-weight:700;color:var(--ice);margin-block-end:8px}
html[lang="en"] .ftr-h{font-family:var(--f-label);font-weight:300;letter-spacing:.24em;text-transform:uppercase;font-size:.75rem;color:var(--pale)}
.ftr ul{display:grid;gap:6px}
.ftr li>a:not(.btn){display:inline-block;padding-block:4px}
.ftr .lockup img{inline-size:200px}
.ftr-tag{margin-block:16px;max-inline-size:30em}
.ftr .by{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--pale);font-size:.88rem}
.ftr .by img{inline-size:111px;block-size:auto}
.ftr .small{margin-block-start:32px;padding-block-start:16px;border-block-start:1px solid var(--deep);font-size:.88rem;display:grid;gap:6px}
.ftr .small.flat{border:0;margin:0;padding:0}
.ftr-inline{display:flex!important;flex-wrap:wrap;gap:4px 20px;margin-block-end:14px}
.ftr .btn{border-color:var(--pale);background:transparent;color:var(--ice)}
.ftr .btn:hover{background:var(--ice);color:var(--ink)}
.ftr :focus-visible{outline-color:var(--pale);box-shadow:none}

/* dialogs */
.dlg{border:0;padding:0;border-radius:var(--r-lg);background:var(--surface);color:var(--body);inline-size:min(520px,calc(100vw - 24px));max-block-size:calc(100dvh - 24px);box-shadow:0 24px 64px -12px rgba(4,48,42,.35)}
.dlg::backdrop{background:rgba(4,48,42,.55)}
.dlg-in{padding:24px 24px 20px}
.dlg-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-block-end:6px}
.dlg-head h2{font-size:1.35rem}
.x{flex:none;inline-size:44px;block-size:44px;display:grid;place-items:center;border:0;background:var(--ice);border-radius:var(--r-pill);color:var(--ink);cursor:pointer}
.x:hover{background:var(--mist)}
.dlg-p{color:var(--body);margin-block-end:14px}
.dlg-note{font-size:.8rem;color:var(--muted);margin-block-start:12px}
.field{display:grid;gap:4px;margin-block-end:14px}
.field label{font-weight:700;color:var(--ink);font-size:.95rem}
html[lang="en"] .field label{font-weight:600}
.field input:not([type="checkbox"]),.field select{min-block-size:48px;border:1px solid var(--field);border-radius:var(--r-md);padding-inline:14px;font:inherit;background:var(--surface);color:var(--ink);inline-size:100%}
.field input::placeholder{color:#557A70}
.field input[dir="ltr"]{text-align:end}
html[lang="en"] .field input[dir="ltr"]{text-align:start}
.field input:focus-visible,.field select:focus-visible{border-color:var(--ink);outline:2px solid var(--accent);outline-offset:2px;box-shadow:0 0 0 1px var(--ink)}
.field input[aria-invalid="true"],.field select[aria-invalid="true"]{border-color:var(--bad)}
.field.check label{display:flex;gap:10px;align-items:flex-start;font-weight:400;color:var(--body);font-size:.92rem;line-height:1.6}
.field.check input{inline-size:22px;block-size:22px;margin:2px 0 0;flex:none;accent-color:var(--ink)}
.field.check a{font-weight:700}
.hint{font-size:.82rem;color:var(--muted)}
.err{color:var(--bad);font-size:.88rem;font-weight:700}
.form-err{margin-block-end:12px}
.done{text-align:center;display:grid;gap:12px;justify-items:center;padding-block:10px 4px}
.done>.ic{inline-size:48px;block-size:48px;color:var(--ok)}
.done h3{font-size:1.25rem}
.done .btn{inline-size:100%}
.done:focus{outline:none}

/* legal pages */
.legal{padding-block:40px 64px;max-inline-size:760px}
.legal p,.legal li{max-inline-size:68ch}
.draft{background:#FBF1E1;color:#6B3F00;border:1px solid #E2C08A;border-radius:var(--r-lg);padding:12px 16px;margin-block:16px 28px;font-weight:700}
.legal h1{margin-block-end:4px}
.legal h2{font-size:1.25rem;margin-block:28px 8px}
.legal li{list-style:disc;margin-inline-start:22px;margin-block:4px}
.legal ul{padding:0}
/* Discount badge + pay link (8 Oct 2026) */
.price .base .pct{display:inline-flex;align-items:center;margin-inline-start:.4rem;padding:.1rem .5rem;border-radius:999px;background:var(--ink);color:var(--surface);font-weight:700;font-size:.8125rem;line-height:1.4;white-space:nowrap}
.pay-link{margin-block-start:.5rem}

/* The hidden SVG gradient/symbol definitions (was an inline style; the CSP allows styles from files only). */
.svg-defs{position:absolute}