/* =========================================================================
   Kitimba billing panel — monochrome design system
   State is carried by fill, weight, border and position, never by hue, so
   every status stays legible in greyscale and for colour-blind readers.
   ========================================================================= */

:root {
    --bg:          #ffffff;
    --surface:     #fafafa;
    --surface-2:   #f2f2f2;
    --border:      #e4e4e4;
    --border-mid:  #cfcfcf;
    --border-str:  #1a1a1a;
    --text:        #121212;
    --muted:       #6b6b6b;
    --faint:       #9a9a9a;
    --inverse:     #ffffff;
    --accent:      #121212;

    --r-sm: 6px; --r-md: 10px; --r-lg: 14px;
    --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
    --shadow-1: 0 1px 2px rgba(0,0,0,.05);
    --shadow-2: 0 2px 8px rgba(0,0,0,.07);
    --sidebar: 244px;
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #0c0c0c; --surface: #141414; --surface-2: #1c1c1c;
        --border: #2a2a2a; --border-mid: #3a3a3a; --border-str: #f0f0f0;
        --text: #f0f0f0; --muted: #9d9d9d; --faint: #6e6e6e;
        --inverse: #0c0c0c; --accent: #f0f0f0;
        --shadow-1: 0 1px 2px rgba(0,0,0,.4); --shadow-2: 0 2px 10px rgba(0,0,0,.5);
    }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0; background: var(--bg); color: var(--text);
    font-family: var(--font); font-size: 15px; line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--text); text-decoration-color: var(--border-mid); text-underline-offset: 2px; }
a:hover { text-decoration-color: var(--text); }
h1,h2,h3 { letter-spacing: -0.02em; }
h1 { font-size: 1.55rem; margin: 0 0 var(--s2); }
h2 { font-size: 1.05rem; margin: var(--s6) 0 var(--s3); }
h3 { font-size: .98rem; margin: 0; }
.lede  { color: var(--muted); margin: 0 0 var(--s5); }
.muted { color: var(--muted); }
.small { font-size: .82rem; }
.mono  { font-family: var(--mono); }
.hint  { color: var(--muted); font-size: .85rem; }
.r { text-align: right; } .center { text-align: center; }

/* ---------- app shell ---------- */
.app { display: grid; grid-template-columns: var(--sidebar) 1fr; min-height: 100vh; }

.sidebar {
    background: var(--surface); border-right: 1px solid var(--border);
    padding: var(--s5) 0; display: flex; flex-direction: column;
    position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.sidebar .brand {
    display: flex; align-items: center; gap: var(--s2);
    padding: 0 var(--s5) var(--s5); font-weight: 700; font-size: 1.02rem;
    text-decoration: none; letter-spacing: -0.02em;
}
.sidebar .brand .mark {
    width: 26px; height: 26px; border-radius: var(--r-sm);
    background: var(--accent); color: var(--inverse);
    display: grid; place-items: center; font-size: .78rem; font-weight: 800; flex: none;
}
.navgroup { padding: var(--s3) var(--s3) 0; }
.navgroup .lbl {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .09em;
    color: var(--faint); padding: 0 var(--s3) var(--s2);
}
.sidebar nav a {
    display: flex; align-items: center; gap: 10px;
    padding: 9px var(--s3); border-radius: var(--r-sm);
    text-decoration: none; color: var(--muted); font-size: .9rem; margin-bottom: 2px;
}
.sidebar nav a:hover { background: var(--surface-2); color: var(--text); }
.sidebar nav a.on { background: var(--accent); color: var(--inverse); font-weight: 600; }
.sidebar nav a .ico { width: 17px; height: 17px; flex: none; }
.sidebar nav a .badge {
    margin-left: auto; background: var(--accent); color: var(--inverse);
    border-radius: 9px; font-size: .68rem; padding: 1px 7px; font-weight: 700;
}
.sidebar nav a.on .badge { background: var(--inverse); color: var(--accent); }
.sidebar .foot { margin-top: auto; padding: var(--s4) var(--s5) 0; color: var(--faint); font-size: .76rem; }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar {
    height: 58px; border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 var(--s6); position: sticky; top: 0; background: var(--bg); z-index: 10;
}
.topbar .who { display: flex; align-items: center; gap: var(--s3); font-size: .86rem; color: var(--muted); }
.avatar {
    width: 28px; height: 28px; border-radius: 50%; background: var(--accent);
    color: var(--inverse); display: grid; place-items: center; font-size: .74rem; font-weight: 700;
}
.content { padding: var(--s6); max-width: 1080px; width: 100%; }
.menu-toggle { display: none; }

/* ---------- cards ---------- */
.card {
    border: 1px solid var(--border); border-radius: var(--r-md);
    padding: var(--s5); background: var(--bg); box-shadow: var(--shadow-1);
}
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--s4); }
.grid.stats { grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); }
.card.stat { padding: var(--s4) var(--s5); }
.card.stat .n { font-size: 1.65rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; }
.card.stat .l { color: var(--muted); font-size: .74rem; text-transform: uppercase;
                letter-spacing: .06em; margin-top: var(--s1); }
.card.stat .ico { width: 16px; height: 16px; color: var(--faint); float: right; }

/* ---------- status vocabulary (no hue) ---------- */
.chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: 20px; font-size: .77rem;
    border: 1px solid var(--border-mid); color: var(--muted); white-space: nowrap;
}
.chip .glyph { font-size: .68em; line-height: 1; }
.chip-ok      { background: var(--accent); color: var(--inverse); border-color: var(--accent); font-weight: 600; }
.chip-pending { border-style: dashed; }
.chip-warn    { border-color: var(--text); color: var(--text); font-weight: 600; border-width: 1.5px; }
.chip-alert   { background: var(--accent); color: var(--inverse); border-color: var(--accent);
                font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- services ---------- */
.services { display: flex; flex-direction: column; gap: var(--s3); margin-bottom: var(--s6); }
.card.service { padding: var(--s5); }
.rule-3 { border-left: 3px solid var(--text); }
.rule-5 { border-left: 5px solid var(--text); background: var(--surface); box-shadow: var(--shadow-2); }
.service-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s3); }
.service .note { margin: var(--s2) 0 0; }
.facts { display: flex; flex-wrap: wrap; gap: var(--s5); margin: var(--s4) 0 0; }
.facts dt { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); }
.facts dd { margin: 2px 0 0; font-size: .9rem; }
.service-actions { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; margin-top: var(--s4); }
.renewform { display: flex; gap: 6px; align-items: center; }
.renewform input { width: 148px; }

.dnsbox { margin: var(--s4) 0 0; padding: var(--s4); border: 1px dashed var(--border-mid);
          border-radius: var(--r-sm); background: var(--surface); }
.dnsbox strong { display: block; margin-bottom: var(--s1); }

/* ---------- forms ---------- */
form.stack { max-width: 430px; }
label { display: block; margin: var(--s4) 0 var(--s1); font-size: .84rem; color: var(--muted); font-weight: 500; }
input[type=text],input[type=email],input[type=password],input[type=tel],select,textarea {
    width: 100%; padding: 9px 12px; font: inherit; font-size: .92rem;
    border: 1px solid var(--border-mid); border-radius: var(--r-sm);
    background: var(--bg); color: var(--text);
}
textarea { min-height: 130px; resize: vertical; line-height: 1.55; }
input:focus,select:focus,textarea:focus { outline: 2px solid var(--text); outline-offset: 1px; border-color: var(--text); }
.field-hint { font-size: .79rem; color: var(--faint); margin-top: var(--s1); }

.btn {
    display: inline-flex; align-items: center; gap: 6px; justify-content: center;
    padding: 9px 17px; border-radius: var(--r-sm); font: inherit; font-size: .89rem; font-weight: 500;
    background: var(--accent); color: var(--inverse); border: 1px solid var(--accent);
    text-decoration: none; cursor: pointer;
}
.btn:hover { opacity: .87; }
.btn.ghost { background: transparent; color: var(--text); border-color: var(--border-mid); }
.btn.ghost:hover { border-color: var(--text); opacity: 1; }
.btn.small { padding: 5px 11px; font-size: .8rem; }
.btn.block { width: 100%; }
.btn .ico { width: 15px; height: 15px; }
form.inline { display: inline; }

/* ---------- notices ---------- */
.notice {
    border: 1px solid var(--border); border-left: 4px solid var(--text);
    border-radius: var(--r-sm); padding: var(--s3) var(--s4);
    margin: 0 0 var(--s4); background: var(--surface); font-size: .9rem;
}
.notice.rule-heavy { border-left-width: 5px; }
.notice.ok { border-left-color: var(--border-mid); }

/* ---------- tables ---------- */
.table-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-md); }
table { width: 100%; border-collapse: collapse; font-size: .89rem; }
th { text-align: left; font-weight: 600; color: var(--muted); font-size: .72rem;
     text-transform: uppercase; letter-spacing: .06em; padding: 11px var(--s4);
     border-bottom: 1px solid var(--border); background: var(--surface); white-space: nowrap; }
td { padding: 12px var(--s4); border-bottom: 1px solid var(--border); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--surface); }
td.actions { white-space: nowrap; }

table.kv { border: 0; }
table.kv th { width: 200px; background: none; text-transform: none; letter-spacing: 0;
              font-size: .84rem; font-weight: 500; padding: 10px var(--s4) 10px 0; vertical-align: top; }
table.kv td { padding: 10px 0; }

table.lineitems { border: 0; }
table.lineitems tfoot th { font-size: .95rem; text-transform: none; letter-spacing: 0;
                           color: var(--text); background: none;
                           border-top: 2px solid var(--text); border-bottom: 0; padding-top: var(--s3); }

.searchbar { display: flex; gap: var(--s2); margin-bottom: var(--s4); max-width: 440px; }

/* ---------- empty states ---------- */
.empty { text-align: center; padding: var(--s7) var(--s5); border: 1px dashed var(--border-mid);
         border-radius: var(--r-md); color: var(--muted); }
.empty .ico { width: 30px; height: 30px; color: var(--faint); margin-bottom: var(--s3); }
.empty h3 { margin-bottom: var(--s1); color: var(--text); }

/* ---------- tickets ---------- */
.thread { display: flex; flex-direction: column; gap: var(--s3); margin: var(--s4) 0; }
.msg { border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s4) var(--s5); background: var(--bg); }
.msg.staff { background: var(--surface); border-left: 3px solid var(--text); }
.msg .meta { display: flex; justify-content: space-between; gap: var(--s3);
             font-size: .78rem; color: var(--faint); margin-bottom: var(--s2); }
.msg .body { white-space: pre-wrap; font-size: .92rem; }

/* ---------- auth pages (no shell) ---------- */
.authwrap { min-height: 100vh; display: grid; place-items: center; padding: var(--s5); }
.authcard { width: 100%; max-width: 400px; }
.authcard .brand { display: flex; align-items: center; justify-content: center; gap: var(--s2);
                   margin-bottom: var(--s5); font-weight: 700; font-size: 1.1rem; text-decoration: none; }
.authcard form.stack { max-width: none; }
.authfoot { text-align: center; margin-top: var(--s4); font-size: .86rem; color: var(--muted); }

/* ---------- printable invoice ---------- */
body.print { background: var(--bg); }
.sheet { max-width: 760px; margin: var(--s6) auto; padding: 0 var(--s5); }
.sheet-head { display: flex; justify-content: space-between; align-items: flex-start;
              border-bottom: 2px solid var(--text); padding-bottom: var(--s4); }
.sheet-head h1 { font-size: 1.25rem; }
.docnum { font-size: 1.05rem; font-weight: 700; font-family: var(--mono); }
.sheet-meta { display: flex; gap: var(--s7); margin: var(--s5) 0; }
.sheet-meta .lbl { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
                   color: var(--muted); margin-top: var(--s3); }
.paidmark { margin-top: var(--s4); font-weight: 700; letter-spacing: .1em;
            border: 2px solid var(--text); display: inline-block; padding: 5px var(--s4); }
.sheet-foot { margin-top: var(--s7); padding-top: var(--s4); border-top: 1px solid var(--border); }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
    .app { grid-template-columns: 1fr; }
    .sidebar {
        position: fixed; inset: 0 auto 0 0; width: 260px; z-index: 40;
        transform: translateX(-100%); transition: transform .18s ease;
        box-shadow: var(--shadow-2);
    }
    #navtoggle:checked ~ .app .sidebar { transform: translateX(0); }
    .menu-toggle { display: grid; place-items: center; width: 34px; height: 34px;
                   border: 1px solid var(--border-mid); border-radius: var(--r-sm); cursor: pointer; }
    .menu-toggle .ico { width: 17px; height: 17px; }
    .content { padding: var(--s4); }
    .topbar { padding: 0 var(--s4); }
    h1 { font-size: 1.3rem; }
    .facts { gap: var(--s4); }
    .service-actions { gap: 6px; }
    .renewform { width: 100%; }
    .renewform input { flex: 1; width: auto; }
}

@media print {
    .noprint, .sidebar, .topbar { display: none !important; }
    .app { display: block; }
    .content, .sheet { padding: 0; margin: 0; max-width: none; }
    body { font-size: 11pt; }
    table.lineitems { page-break-inside: avoid; }
    a { text-decoration: none; color: #000; }
}

/* ---------- monochrome bar chart ---------- */
.chart { display: flex; align-items: flex-end; gap: 6px; height: 190px; }
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center;
           height: 100%; min-width: 0; }
.bar-val { font-size: .68rem; color: var(--muted); height: 15px; white-space: nowrap; }
.bar-track { flex: 1; width: 100%; display: flex; align-items: flex-end;
             border-bottom: 1px solid var(--border); }
.bar { width: 100%; background: var(--accent); border-radius: 3px 3px 0 0; min-height: 2px; }
.bar-col:hover .bar { opacity: .75; }
.bar-lbl { font-size: .68rem; color: var(--faint); margin-top: 5px; }

@media (max-width: 640px) {
    .chart { height: 150px; gap: 3px; }
    .bar-val { display: none; }
    .bar-lbl { font-size: .6rem; }
}

/* =========================================================================
   Utilities — these exist because the CSP sends `style-src 'self'` with no
   'unsafe-inline', which blocks inline style="" attributes outright. Adding
   'unsafe-inline' would have been the lazy fix; it would also have traded a
   real XSS control away on pages that take payment details.
   ========================================================================= */
.mt-0{margin-top:0}.mt-1{margin-top:var(--s2)}.mt-2{margin-top:var(--s3)}
.mt-3{margin-top:var(--s4)}.mt-4{margin-top:var(--s5)}.mt-5{margin-top:var(--s6)}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:var(--s2)}.mb-2{margin-bottom:var(--s3)}
.mb-3{margin-bottom:var(--s4)}.mb-4{margin-bottom:var(--s5)}
.maxw-sm{max-width:430px}.maxw-md{max-width:560px}.maxw-lg{max-width:640px}
.maxw-none{max-width:none}
.grid-wide{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid-mid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.w-150{width:150px;display:inline-block}
.nowrap{white-space:nowrap}
.eyebrow{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--faint);font-weight:600}
.price-lg{font-size:1.7rem;font-weight:700;letter-spacing:-.03em;margin:10px 0 0}
.price-md{font-size:1.55rem;font-weight:700;letter-spacing:-.03em;margin:8px 0 0}

/* =========================================================================
   Landing page — bold editorial monochrome.
   No JavaScript, no webfonts, no external requests of any kind.
   ========================================================================= */
.lp { --measure: 1120px; }
.lp .wrap { max-width: var(--measure); margin: 0 auto; padding: 0 var(--s5); }

.skip { position:absolute; left:-9999px; }
.skip:focus { left:var(--s4); top:var(--s4); z-index:100; background:var(--accent);
              color:var(--inverse); padding:10px 16px; border-radius:var(--r-sm); }

/* header */
.lp-head { position:sticky; top:0; z-index:20; background:var(--bg);
           border-bottom:1px solid var(--border); }
.lp-head .wrap { display:flex; align-items:center; justify-content:space-between;
                 height:66px; gap:var(--s4); }
.lp-brand { display:flex; align-items:center; gap:10px; font-weight:800;
            letter-spacing:-.03em; text-decoration:none; font-size:1.05rem; }
.lp-nav { display:flex; align-items:center; gap:var(--s5); }
.lp-nav a { color:var(--muted); text-decoration:none; font-size:.9rem; }
.lp-nav a:hover { color:var(--text); }
.lp-nav .btn { color:var(--inverse); }

/* hero */
.hero { padding: clamp(56px, 11vw, 128px) 0 clamp(40px, 7vw, 80px); }
.hero h1 { font-size: clamp(2.6rem, 7vw, 5.2rem); line-height:1.02; letter-spacing:-.045em;
           font-weight:800; margin:0 0 var(--s4); max-width:15ch; }
.hero p.sub { font-size: clamp(1.02rem, 1.9vw, 1.3rem); color:var(--muted);
              max-width:52ch; margin:0 0 var(--s5); line-height:1.5; }
.hero-cta { display:flex; flex-wrap:wrap; gap:var(--s3); }
.hero .btn { padding:13px 26px; font-size:1rem; }

/* fact strip */
.facts-band { border-top:1px solid var(--border); border-bottom:1px solid var(--border);
              padding:var(--s5) 0; }
.facts-band .wrap { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
                    gap:var(--s5); }
.fact .k { display:flex; align-items:center; gap:8px; font-weight:700; margin-bottom:2px; }
.fact .k .ico { width:17px; height:17px; flex:none; }
.fact .v { color:var(--muted); font-size:.88rem; }

/* generic section */
.sec { padding: clamp(56px, 9vw, 104px) 0; }
.sec + .sec { border-top:1px solid var(--border); }
.sec-head { max-width:60ch; margin-bottom:var(--s6); }
.sec-head h2 { font-size:clamp(1.7rem, 3.6vw, 2.7rem); line-height:1.1;
               letter-spacing:-.035em; font-weight:800; margin:var(--s2) 0 var(--s3); }
.sec-head p { color:var(--muted); font-size:1.02rem; margin:0; }

/* plans */
.plan-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(272px,1fr)); gap:var(--s4); }
.plan { border:1px solid var(--border); border-radius:var(--r-lg); padding:var(--s5);
        display:flex; flex-direction:column; background:var(--bg); }
.plan.featured { border-color:var(--text); border-width:2px; box-shadow:var(--shadow-2); }
.plan .tagline { min-height:2.4em; color:var(--muted); font-size:.86rem; margin:2px 0 var(--s4); }
.plan h3 { font-size:1.15rem; font-weight:800; letter-spacing:-.02em; }
.plan .amount { font-size:2.3rem; font-weight:800; letter-spacing:-.04em; line-height:1; }
.plan .per { color:var(--muted); font-size:.84rem; margin:6px 0 var(--s5); }
.plan ul { list-style:none; padding:0; margin:0 0 var(--s5); flex:1; }
.plan li { display:flex; gap:9px; padding:7px 0; font-size:.9rem;
           border-bottom:1px solid var(--border); }
.plan li:last-child { border-bottom:0; }
.plan li .tick { font-weight:800; flex:none; }
.badge-pop { display:inline-block; background:var(--accent); color:var(--inverse);
             font-size:.66rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
             padding:3px 9px; border-radius:20px; margin-bottom:var(--s2); }

/* included */
.feat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:var(--s5); }
.feat .ico { width:22px; height:22px; margin-bottom:var(--s2); }
.feat h3 { font-size:1rem; font-weight:700; margin-bottom:var(--s1); }
.feat p { color:var(--muted); font-size:.9rem; margin:0; line-height:1.55; }

/* steps */
.steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:var(--s5); }
.step .n { font-size:2.6rem; font-weight:800; letter-spacing:-.04em; line-height:1;
           color:var(--border-mid); margin-bottom:var(--s2); }
.step h3 { font-size:1.02rem; font-weight:700; margin-bottom:var(--s1); }
.step p { color:var(--muted); font-size:.9rem; margin:0; }

/* comparison */
.cmp th:first-child, .cmp td:first-child { position:sticky; left:0; background:var(--bg); }
.cmp thead th { background:var(--surface); }

/* faq */
.faq { max-width:74ch; }
.faq details { border-bottom:1px solid var(--border); }
.faq summary { cursor:pointer; padding:var(--s4) 0; font-weight:600; font-size:1rem;
               list-style:none; display:flex; justify-content:space-between; gap:var(--s4); }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:'+'; font-weight:400; font-size:1.4rem; line-height:1;
                      color:var(--muted); flex:none; }
.faq details[open] summary::after { content:'\2212'; }
.faq .ans { padding:0 0 var(--s4); color:var(--muted); font-size:.94rem; max-width:66ch; }

/* closing cta */
.cta-band { background:var(--accent); color:var(--inverse);
            padding:clamp(48px,8vw,88px) 0; text-align:center; }
.cta-band h2 { font-size:clamp(1.7rem,4vw,2.9rem); letter-spacing:-.04em; font-weight:800;
               margin:0 0 var(--s3); }
.cta-band p { opacity:.78; margin:0 auto var(--s5); max-width:48ch; }
.cta-band .btn { background:var(--inverse); color:var(--accent); border-color:var(--inverse);
                 padding:13px 30px; font-size:1rem; }

/* footer */
.lp-foot { border-top:1px solid var(--border); padding:var(--s6) 0; color:var(--muted);
           font-size:.87rem; }
.lp-foot .wrap { display:flex; flex-wrap:wrap; gap:var(--s5); justify-content:space-between; }
.lp-foot a { color:var(--muted); }
.lp-foot a:hover { color:var(--text); }

/* Scroll reveal is progressive enhancement only: content is visible by default,
   so a browser without animation-timeline shows a complete page, never a blank one. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .reveal { animation: reveal-in linear both; animation-timeline: view();
              animation-range: entry 5% cover 26%; }
    @keyframes reveal-in { from { opacity:0; transform:translateY(14px); }
                           to   { opacity:1; transform:none; } }
  }
}

@media (max-width: 820px) {
  .lp-nav .hide-sm { display:none; }
  .hero { padding-top:48px; }
  .lp .wrap { padding:0 var(--s4); }
}

/* Bar-chart heights. The CSP blocks style="height:N%", so the height is
   snapped to the nearest 2% and applied as a class instead. */
.bh-0{height:0%}
.bh-2{height:2%}
.bh-4{height:4%}
.bh-6{height:6%}
.bh-8{height:8%}
.bh-10{height:10%}
.bh-12{height:12%}
.bh-14{height:14%}
.bh-16{height:16%}
.bh-18{height:18%}
.bh-20{height:20%}
.bh-22{height:22%}
.bh-24{height:24%}
.bh-26{height:26%}
.bh-28{height:28%}
.bh-30{height:30%}
.bh-32{height:32%}
.bh-34{height:34%}
.bh-36{height:36%}
.bh-38{height:38%}
.bh-40{height:40%}
.bh-42{height:42%}
.bh-44{height:44%}
.bh-46{height:46%}
.bh-48{height:48%}
.bh-50{height:50%}
.bh-52{height:52%}
.bh-54{height:54%}
.bh-56{height:56%}
.bh-58{height:58%}
.bh-60{height:60%}
.bh-62{height:62%}
.bh-64{height:64%}
.bh-66{height:66%}
.bh-68{height:68%}
.bh-70{height:70%}
.bh-72{height:72%}
.bh-74{height:74%}
.bh-76{height:76%}
.bh-78{height:78%}
.bh-80{height:80%}
.bh-82{height:82%}
.bh-84{height:84%}
.bh-86{height:86%}
.bh-88{height:88%}
.bh-90{height:90%}
.bh-92{height:92%}
.bh-94{height:94%}
.bh-96{height:96%}
.bh-98{height:98%}
.bh-100{height:100%}
.chiprow{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--s2)}
.h-90{height:90px}

/* ---------- monthly / annual toggle ----------
   Two radios plus sibling selectors. No JavaScript, so the page keeps a strict
   CSP and the toggle still works with scripting disabled. The radios stay
   focusable (opacity 0, not display:none) so keyboard users can operate it. */
.term-radio { position:absolute; opacity:0; width:0; height:0; pointer-events:none; }
.term-switch { display:inline-flex; border:1px solid var(--border-mid); border-radius:30px;
               padding:3px; gap:2px; margin-bottom:var(--s5); }
.term-switch label { margin:0; padding:8px 20px; border-radius:30px; cursor:pointer;
                     font-size:.88rem; font-weight:600; color:var(--muted);
                     white-space:nowrap; transition:background .12s ease; }
.term-switch label:hover { color:var(--text); }
.term-switch .save { font-weight:500; opacity:.75; font-size:.82em; }

#term-m:checked ~ .term-switch label[for="term-m"],
#term-y:checked ~ .term-switch label[for="term-y"] { background:var(--accent); color:var(--inverse); }
#term-m:focus-visible ~ .term-switch label[for="term-m"],
#term-y:focus-visible ~ .term-switch label[for="term-y"] { outline:2px solid var(--text); outline-offset:2px; }

/* default state = monthly */
.term-annual { display:none; }
#term-y:checked ~ .plan-grid .term-month,
#term-y:checked ~ .table-scroll .term-month { display:none; }
#term-y:checked ~ .plan-grid .term-annual,
#term-y:checked ~ .table-scroll .term-annual { display:revert; }

/* price-lock band */
.lock { border:2px solid var(--text); border-radius:var(--r-lg); padding:var(--s6);
        display:grid; grid-template-columns:auto 1fr; gap:var(--s5); align-items:start; }
.lock .ico { width:30px; height:30px; flex:none; }
.lock h3 { font-size:1.25rem; font-weight:800; letter-spacing:-.025em; margin-bottom:var(--s2); }
.lock p { color:var(--muted); margin:0 0 var(--s2); max-width:62ch; }
.lock p:last-child { margin-bottom:0; }
@media (max-width:640px){ .lock { grid-template-columns:1fr; padding:var(--s5); } }

/* Monthly is the headline price; annual is an explicit secondary choice rather
   than a toggle, so the cheaper entry number is what the eye lands on first. */
.plan .amount{font-size:2.6rem}
.annual-alt{display:block;text-align:center;margin-top:10px;font-size:.83rem;
            color:var(--muted);text-decoration:none}
.annual-alt:hover{color:var(--text);text-decoration:underline}