/* r2d2hosting.com — instrument panel / datasheet. Warm dark, mono numbers,
   thin rules, no decoration. System fonts only, no external request. */

/* ---------- Tokens ---------- */
:root {
    --ground:     #14120F;
    --panel:      #1D1A16;
    --panel-2:    #26221C;
    --rule:       #38322A;   /* hairlines between rows and sections */
    --edge:       #7A705F;   /* border of anything you can click or type in */
    --dim:        #9C9385;
    --ink:        #EFE9DD;
    --accent:     #E04B2A;
    --accent-lit: #F2916F;
    --ok:         #8AA85F;
    --warn:       #D9A441;

    --mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo,
            "Liberation Mono", Consolas, monospace;
    --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
            Arial, sans-serif;

    /* ---- Type scale. Six steps, nothing between them. ----
       12  tracked labels: utility bar, units, rail marks, field labels
       13  mono annotation: notes, navigation, buttons, footer links
       15  reading size: prose, list items, table values, form input
       17  lede, question headings, the wordmark
       22  section headings and the price figure inside a table
       30  page title and the single standalone figure on a page
       Five text steps plus one display step. A step exists because a role
       exists; a role without a step borrows the nearest one. */
    --fs-micro:   12px;
    --fs-label:   13px;
    --fs-body:    15px;
    --fs-lead:    17px;
    --fs-head:    22px;
    --fs-display: 30px;
}
/* ---- Face and colour, the two rules the whole sheet obeys ----
   mono: numbers, prices, technical values, labels, navigation, footer.
   sans: anything read as a sentence — paragraphs, list items, descriptions.
   Inside one block: --ink carries the value, --dim carries everything that
   labels or qualifies it. --accent is a fill or a hairline, never text;
   --accent-lit is a link, a focus ring and the required-field mark. */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; border-radius: 0; }
html { -webkit-text-size-adjust: 100%; }
/* Column layout so a short page (404, payment) still pins the footer to the
   bottom instead of leaving it floating in the middle of the screen. */
body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--ground);
    color: var(--ink);
    font: var(--fs-body)/1.5 var(--sans);
    overflow-x: hidden;
}
.page { flex: 1 0 auto; }
.foot { flex-shrink: 0; }
img, svg { max-width: 100%; }
svg { display: block; }
/* Visible keyboard focus, everywhere, no exception. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--accent-lit);
    outline-offset: 1px;
}
/* ---------- Layout ----------
   The measure rule comes before every component that also uses .wrap, and it
   only sets the two sides it owns. A padding shorthand here would silently
   flatten the vertical padding of .head__in, .page and .foot__in below. */
.wrap { max-width: 1180px; margin: 0 auto; padding-left: 28px; padding-right: 28px; }
/* ---------- Typography ---------- */
h1, h2, h3, h4 { margin: 0 0 12px; line-height: 1.15; }
h1 {
    font: 700 var(--fs-display)/1.15 var(--sans);
    letter-spacing: -0.01em;
    margin-bottom: 16px;
}
h2 { font: 700 var(--fs-head)/1.2 var(--sans); margin-top: 32px; }
h3 {
    font: 400 var(--fs-label)/1.3 var(--mono);
    color: var(--dim);
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-top: 28px;
}
h4 { font: 700 var(--fs-body)/1.35 var(--sans); }
p, ul, ol { margin: 0 0 14px; }
ul, ol { padding-left: 20px; }
li { margin-bottom: 5px; }
a { color: var(--accent-lit); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--ink); }
strong, b { font-weight: 700; }
code, .mono, kbd { font-family: var(--mono); font-size: var(--fs-label); }
.lede { font: var(--fs-lead)/1.5 var(--sans); max-width: 62ch; color: var(--ink); }
/* An annotation. Mono by default, because most of them are values or labels;
   sans when it is a whole paragraph, because then it is read as a sentence. */
.note {
    display: block;
    font: var(--fs-label)/1.5 var(--mono);
    color: var(--dim);
    letter-spacing: .01em;
}
p.note { font-family: var(--sans); letter-spacing: normal; }
.rule { border: 0; border-top: 1px solid var(--rule); margin: 0; }
/* ---------- Shell: utility bar ---------- */
.bar {
    background: var(--panel);
    border-bottom: 1px solid var(--rule);
    font: var(--fs-micro)/1 var(--mono);
}
.bar__in { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 36px; }
.bar__l, .bar__r { display: flex; align-items: center; gap: 16px; }
.bar a { color: var(--dim); text-decoration: none; }
.bar a:hover { color: var(--ink); }
/* Segmented switch: language, currency. The chosen side is marked by fill and
   full-strength ink, not by colour: two orange switches sat above the one
   orange button in the masthead and all three competed. */
.seg { display: inline-flex; border: 1px solid var(--edge); }
.seg a, .seg button {
    font: var(--fs-micro)/1 var(--mono);
    color: var(--dim);
    background: transparent;
    border: 0;
    padding: 6px 9px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 100ms linear;
}
.seg a + a, .seg button + button { border-left: 1px solid var(--edge); }
.seg a:hover, .seg button:hover { background: var(--panel-2); color: var(--ink); }
.seg .on { background: var(--panel-2); color: var(--ink); }
/* ---------- Shell: masthead ---------- */
.head { border-bottom: 1px solid var(--rule); }
.head__in {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
    padding-top: 22px;
    padding-bottom: 22px;
}
.logo { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); }
.logo__t { display: block; }
.logo__n { display: block; font: 700 var(--fs-lead)/1.1 var(--mono); letter-spacing: -0.01em; }
.logo__n b { color: var(--accent-lit); font-weight: 700; }
.logo__s { display: block; font: var(--fs-label)/1.3 var(--mono); color: var(--dim); margin-top: 3px; white-space: nowrap; }
.nav { display: flex; align-items: center; gap: 24px; }
.nav a {
    font: var(--fs-label)/1 var(--mono);
    color: var(--dim);
    text-decoration: none;
    padding: 4px 0;
    border-bottom: 1px solid transparent;
    transition: color 100ms linear;
}
.nav a:hover { color: var(--ink); }
.nav a.on { color: var(--ink); border-bottom-color: var(--accent); }
/* .nav a out-specifies .act, so the header CTA needs its colours restated.
   The extra left margin holds the button off the last menu item: at 1199px
   they were 20px apart and read as one orange word at the end of the menu. */
.nav a.act { color: var(--ground); border-bottom: 0; margin-left: 16px; }
.nav a.act:hover { color: var(--ground); border-bottom: 0; }
/* ---------- Page frame ---------- */
.page { padding-top: 32px; padding-bottom: 56px; }
/* Page opening: title and lede sit outside the numbered grid on every page. */
.page > h1 { margin-top: 0; }
.page > .lede { margin-bottom: 32px; }
.page > hr.rule + .doc { padding-top: 32px; }
/* Asymmetric document grid: mono rail mark on the left, content on the right. */
.doc { display: grid; grid-template-columns: 132px 1fr; gap: 32px; align-items: start; }
.rail {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font: var(--fs-micro)/1.4 var(--mono);
    color: var(--dim);
    letter-spacing: .1em;
    padding-top: 5px;
}
.rail span { letter-spacing: .02em; }
.col { min-width: 0; }
/* One distance between sections, on every page, all the way down. */
.doc + .doc { margin-top: 48px; padding-top: 48px; border-top: 1px solid var(--rule); }
.cols2, .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
/* ---------- Figures and marks ---------- */
/* A figure inside a table is a value among other values, so it sits on the
   heading step. A figure standing alone in a column is the point of that
   column, and there is only ever one, so it gets the display step. */
.fig {
    display: inline-block;
    font: 700 var(--fs-head)/1.2 var(--mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    color: var(--ink);
}
p.fig { font-size: var(--fs-display); }
.unit { font: var(--fs-micro)/1 var(--mono); color: var(--dim); margin-left: 5px; }
.mark { color: var(--ok); font-family: var(--mono); }
.mark--no { color: var(--dim); }
/* Bordered notice: accent edge, no fill wash. */
.flag {
    border: 1px solid var(--rule);
    border-left: 3px solid var(--accent);
    padding: 12px 14px;
    margin: 0 0 20px;
    background: transparent;
}
/* ---------- Questions ---------- */
.qa { border-top: 1px solid var(--rule); }
.qa__i { border-bottom: 1px solid var(--rule); padding-bottom: 6px; }
/* A question is a heading, so it resets what the generic h3 rule applies. */
.q {
    font: 700 var(--fs-lead)/1.35 var(--sans);
    color: var(--ink);
    letter-spacing: normal;
    text-transform: none;
    margin: 22px 0 6px;
}
.a { margin: 0 0 18px; max-width: 68ch; }
.a:last-child { padding-bottom: 4px; }
/* ---------- Tables ----------
   One rhythm across all three: 10px above and below a cell, 12px in the
   price matrix where a cell stacks a figure, a unit and a note. One hairline
   under every row, values in mono, sentences in sans. */
.scroll { overflow-x: auto; margin-bottom: 18px; }
.spec, .matrix, .compare { width: 100%; border-collapse: collapse; }
.spec th, .spec td {
    text-align: left;
    padding: 10px 14px 10px 0;
    border-bottom: 1px solid var(--rule);
    vertical-align: top;
}
.spec th {
    font: 400 var(--fs-label)/1.5 var(--mono);
    color: var(--dim);
    width: 34%;
}
.spec td { font-family: var(--mono); font-variant-numeric: tabular-nums; }
/* A spec cell holding sentences, not values: read it in the prose face. */
.spec td p { font-family: var(--sans); margin-bottom: 10px; }
.spec td p:last-child { margin-bottom: 0; }
/* Price matrix: terms down the first column, plans across. */
.matrix { table-layout: fixed; min-width: 700px; }
.matrix th, .matrix td {
    text-align: left;
    padding: 10px 16px;
    border-bottom: 1px solid var(--rule);
    vertical-align: top;
}
.matrix thead th, .matrix thead td { border-bottom: 1px solid var(--rule); background: var(--panel-2); padding-top: 14px; padding-bottom: 14px; }
.matrix__corner, .matrix thead th { width: 25%; }
.matrix thead th { font-weight: 400; }
.matrix__name { display: block; font: 700 var(--fs-head)/1.2 var(--mono); color: var(--ink); }
.matrix__disk { display: block; font: var(--fs-label)/1.4 var(--mono); color: var(--dim); margin: 3px 0 7px; }
.matrix__for { display: block; font: var(--fs-label)/1.45 var(--sans); color: var(--dim); }
.matrix tbody th { font: 400 var(--fs-body)/1.4 var(--mono); color: var(--ink); }
/* Only the term name resists wrapping; its description must be free to wrap,
   otherwise the first column grows to the width of the longest sentence. */
.matrix tbody th .note { white-space: normal; font-family: var(--sans); letter-spacing: normal; margin-top: 4px; }
.matrix tbody td { font-family: var(--mono); padding-top: 12px; padding-bottom: 12px; }
.matrix tbody td .note { margin-top: 4px; }
.matrix tbody tr:last-child th, .matrix tbody tr:last-child td { border-bottom: 1px solid var(--rule); }
.matrix tfoot td { border-bottom: 0; padding-top: 16px; }
/* The default plan is marked quietly: a panel tint and one accent hairline. */
.pick { background: var(--panel); }
.matrix thead th.pick { background: var(--panel); border-top: 1px solid var(--accent); }
/* One filled button in the row, on the plan the tint already points at. Three
   solid orange blocks side by side told the reader nothing and shouted it. */
.matrix tfoot td:not(.pick) .act {
    background: transparent;
    border-color: var(--edge);
    color: var(--ink);
}
.matrix tfoot td:not(.pick) .act:hover { background: var(--panel-2); color: var(--ink); }
/* Comparison table: one row per limit, one column per plan. Fixed layout,
   because auto layout gave the last plan a third of the width of the first. */
.compare { table-layout: fixed; min-width: 680px; }
.compare th, .compare td {
    text-align: left;
    padding: 10px 14px 10px 0;
    border-bottom: 1px solid var(--rule);
    vertical-align: top;
}
.compare thead th {
    font: 700 var(--fs-body)/1.3 var(--mono);
    color: var(--ink);
    width: 22%;
    padding-top: 0;
}
.compare thead th .note { margin-top: 3px; }
.compare th[scope="colgroup"] {
    font: 400 var(--fs-label)/1.3 var(--mono);
    color: var(--dim);
    letter-spacing: .08em;
    text-transform: uppercase;
    padding-top: 26px;
}
.compare th[scope="row"] {
    font: 400 var(--fs-body)/1.45 var(--sans);
    color: var(--ink);
    width: 34%;
}
.compare td {
    font: var(--fs-body)/1.45 var(--mono);
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}
/* ---------- Controls ---------- */
.act {
    display: inline-block;
    font: var(--fs-label)/1 var(--mono);
    background: var(--accent);
    color: var(--ground);
    border: 1px solid var(--accent);
    padding: 11px 18px;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: background-color 100ms linear, color 100ms linear;
}
/* Hover lightens rather than darkens: the dark label needs the fill to stay
   bright enough to read against. */
.act:hover { background: var(--accent-lit); border-color: var(--accent-lit); color: var(--ground); }
.act--ghost {
    background: transparent;
    border: 1px solid var(--edge);
    color: var(--ink);
}
.act--ghost:hover { background: var(--panel-2); border-color: var(--edge); color: var(--ink); }
.act--sm { padding: 7px 12px; }
.act--block { display: block; width: 100%; }
.act[disabled], button[disabled] { opacity: .5; cursor: default; }
/* ---------- Forms ---------- */
.fld { margin-bottom: 14px; }
.lbl {
    display: block;
    font: var(--fs-micro)/1.4 var(--mono);
    color: var(--dim);
    letter-spacing: .04em;
    margin-bottom: 5px;
}
.req { color: var(--accent-lit); }

/* A spec table whose values are sentences, not figures: read them in the prose face. */
.spec--prose td { font: var(--fs-body)/1.5 var(--sans); }

/* Consent checkbox in the order sheet. The box itself stays native and
   keyboard-operable; only its colour and alignment are ours. */
.chk { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 16px; font: var(--fs-label)/1.5 var(--sans); color: var(--ink); cursor: pointer; }
.chk input { flex: none; width: 17px; height: 17px; margin: 2px 0 0; accent-color: var(--accent); cursor: pointer; }
.chk a { color: var(--accent-lit); }
.inp, .sel, .txa {
    display: block;
    width: 100%;
    font: var(--fs-body)/1.4 var(--mono);
    background: var(--panel);
    color: var(--ink);
    border: 1px solid var(--edge);
    padding: 9px 11px;
    transition: border-color 100ms linear;
}
.txa { resize: vertical; min-height: 76px; }
.inp::placeholder, .txa::placeholder { color: var(--dim); }
.inp:hover, .sel:hover, .txa:hover { border-color: var(--dim); }
.inp:focus, .sel:focus, .txa:focus {
    border-color: var(--accent);
    outline: 2px solid var(--accent-lit);
    outline-offset: 1px;
}
.msg { font: var(--fs-label)/1.5 var(--mono); margin: 0 0 12px; }
.msg:empty { display: none; }
.msg--ok { color: var(--ok); border-left: 3px solid var(--ok); padding: 8px 12px; }
.msg--err { color: var(--warn); border-left: 3px solid var(--accent); padding: 8px 12px; }
/* ---------- Modal sheet ---------- */
.sheet {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(10, 9, 7, .82);
    padding: 32px 20px;
    overflow-y: auto;
}
.sheet.open { display: block; }
.sheet__box {
    max-width: 640px;
    margin: 0 auto;
    background: var(--ground);
    border: 1px solid var(--rule);
    box-shadow: 4px 4px 0 var(--rule);
}
.sheet__hd {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--rule);
    background: var(--panel);
}
.sheet__hd h3 { margin: 0; color: var(--ink); }
.sheet__x {
    background: transparent;
    border: 1px solid var(--edge);
    color: var(--dim);
    font: var(--fs-body)/1 var(--mono);
    padding: 5px 10px;
    cursor: pointer;
    transition: background-color 100ms linear, color 100ms linear;
}
.sheet__x:hover { background: var(--panel-2); color: var(--ink); }
.sheet__bd { padding: 18px; }
.sheet__bd .flag { margin-bottom: 18px; }
/* ---------- Footer ---------- */
.foot { border-top: 1px solid var(--rule); background: var(--panel); margin-top: 48px; }
.foot__in {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 32px;
    padding-top: 36px;
    padding-bottom: 28px;
}
.foot__wide { max-width: 56ch; }
.foot__say { margin-bottom: 10px; }
.foot h4 { font: 400 var(--fs-micro)/1.3 var(--mono); color: var(--dim); letter-spacing: .08em; text-transform: uppercase; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: 6px; }
.foot a { font: var(--fs-label)/1.5 var(--mono); color: var(--ink); text-decoration: none; }
.foot a:hover { color: var(--accent-lit); }
/* Operator identity. Required disclosure, so it reads as a record, not decoration. */
.foot__legal {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    border-top: 1px solid var(--rule);
    padding-top: 14px;
    padding-bottom: 12px;
    font: var(--fs-micro)/1.6 var(--mono);
    color: var(--dim);
}
.foot__court { flex-basis: 100%; }

.foot__bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    justify-content: space-between;
    border-top: 1px solid var(--rule);
    padding-top: 14px;
    padding-bottom: 20px;
    font: var(--fs-micro)/1.5 var(--mono);
    color: var(--dim);
}
.foot__bar a { font-size: var(--fs-micro); color: var(--dim); }
/* ---------- Below 900px: the rail folds into an inline label ---------- */
@media (max-width: 900px) {
    .doc { grid-template-columns: 1fr; gap: 14px; }
    .rail {
        flex-direction: row;
        align-items: baseline;
        gap: 9px;
        padding-top: 0;
        padding-bottom: 8px;
        border-bottom: 1px solid var(--rule);
    }
    .head__in { flex-wrap: wrap; gap: 16px; padding-top: 18px; padding-bottom: 18px; }
    .nav { gap: 18px; flex-wrap: wrap; }
    .nav a.act { margin-left: 8px; }
    .cols2, .grid2 { grid-template-columns: 1fr; gap: 18px; }
    .foot__in { grid-template-columns: 1fr 1fr; }
    .foot__wide { grid-column: 1 / -1; }
}
/* ---------- Below 620px ---------- */
@media (max-width: 620px) {
    /* Sides only. A shorthand here would flatten the masthead again. */
    .wrap { padding-left: 16px; padding-right: 16px; }
    h1 { font-size: var(--fs-head); }
    h2 { font-size: var(--fs-lead); }
    .lede { font-size: var(--fs-body); }
    .page { padding-top: 24px; padding-bottom: 44px; }
    .bar__in { flex-wrap: wrap; gap: 8px; padding-top: 7px; padding-bottom: 7px; }
    /* Czech "Administrace" is one unbreakable word: without this the utility
       bar pushed a 320px screen into horizontal scroll. */
    .bar__l, .bar__r { gap: 6px 10px; flex-wrap: wrap; }
    .foot__in { grid-template-columns: 1fr; gap: 22px; }
    .sheet { padding: 0; }
    .sheet__box { max-width: none; min-height: 100%; border: 0; box-shadow: none; }
    .sheet__bd { padding: 14px; }
    .doc + .doc { margin-top: 34px; padding-top: 34px; }
}
/* ---------- Below 920px: tables stop being tables ----------
   The content column is narrower than the table from here down, so instead
   of pushing prices off the side of the screen, every row stacks. ---------- */
@media (max-width: 920px) {
/* Stack every table. Nothing scrolls sideways on a phone. */
.scroll { overflow-x: visible; }
.matrix, .compare, .spec { min-width: 0; table-layout: auto; }
.matrix, .matrix tbody, .matrix tfoot, .matrix tr, .matrix th, .matrix td,
.compare, .compare tbody, .compare thead, .compare tr, .compare th, .compare td,
.spec, .spec tbody, .spec tr, .spec th, .spec td {
    display: block;
    width: auto;
}
.matrix thead { display: none; }
.matrix tbody tr, .compare tbody tr {
    border-bottom: 1px solid var(--rule);
    padding-bottom: 10px;
    margin-bottom: 10px;
}
.matrix tbody th, .compare tbody th[scope="row"] {
    border-bottom: 0;
    padding: 4px 0 8px;
    /* width:34% carries the attribute selector's specificity into the stacked
       layout, where it would pin a row label to a third of the screen. */
    width: auto;
}
.matrix tbody td, .compare tbody td {
    border-bottom: 0;
    padding: 6px 0 6px 14px;
    border-left: 1px solid var(--rule);
    margin-bottom: 8px;
}
/* Each stacked cell says which plan it belongs to. */
.matrix tbody td::before, .compare tbody td::before {
    content: attr(data-plan);
    display: block;
    font: var(--fs-micro)/1.3 var(--mono);
    color: var(--dim);
    letter-spacing: .06em;
    margin-bottom: 3px;
}
.compare thead { display: none; }
.compare th[scope="colgroup"] { padding: 22px 0 8px; border-bottom: 1px solid var(--rule); }
.matrix tfoot td { padding: 0 0 10px; border-left: 0; }
.matrix tfoot td:empty { display: none; }
.matrix tfoot td::before { content: none; }
.matrix .pick, .compare .pick { background: transparent; }
.matrix thead th.pick { border-top: 0; }
.spec th { padding-bottom: 2px; border-bottom: 0; color: var(--dim); }
.spec td { padding-top: 0; padding-bottom: 14px; }
}
/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}