/* Catalogue landing page (Wave 6.1) — six product-category tiles. */

.catalogue-tiles{
  padding:24px 0 64px;
}

.cat-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}

@media (max-width: 960px){
  .cat-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px){
  .cat-grid{ grid-template-columns: 1fr; }
}

.cat-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:28px 26px 24px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:transparent;
  color:inherit;
  text-decoration:none;
  min-height:240px;
  transition: background .25s ease, transform .25s ease;
}
.cat-card:hover{
  background:rgba(25,167,224,0.06);
}
.cat-card--soon{
  background:rgba(207,216,226,0.02);
}
.cat-card--soon:hover{
  background:rgba(207,216,226,0.05);
}

.cat-card-head{
  display:flex; justify-content:space-between; align-items:flex-start;
}

.cat-ic{
  width:44px; height:44px;
  border:1px solid var(--line-2);
  border-radius:2px;
  display:grid; place-items:center;
  background:var(--ink-2);
  color:var(--cyan-2);
}
.cat-card--soon .cat-ic{ color:var(--muted); }

.cat-badge{
  font-family:"JetBrains Mono", monospace;
  font-size:9.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  padding:3px 7px;
  border:1px solid var(--line-2);
  border-radius:2px;
  color:var(--muted);
}

.cat-name{
  font-family:"Instrument Serif", serif;
  font-weight:400;
  font-size:32px;
  line-height:1.05;
  letter-spacing:-0.01em;
  margin:6px 0 0;
  color:var(--paper);
}

.cat-pitch{
  color:var(--paper-2);
  font-size:13px;
  line-height:1.55;
  margin:0;
}

.cat-foot{
  display:flex; justify-content:space-between; align-items:flex-end;
  margin-top:auto;
  padding-top:14px;
  border-top:1px dashed var(--line);
  gap:12px;
}

.cat-price{
  display:flex; flex-direction:column; gap:2px;
}
.cat-price-from{
  font-family:"JetBrains Mono", monospace;
  font-size:9.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
}
.cat-price-amt{
  font-family:"Instrument Serif", serif;
  font-style:italic;
  font-size:22px;
  line-height:1;
  color:var(--cyan-2);
}
.cat-card--soon .cat-price-amt{ color:var(--muted); font-style:normal; }
.cat-price-note{
  font-family:"JetBrains Mono", monospace;
  font-size:10px;
  letter-spacing:.06em;
  color:var(--muted);
}

.cat-cta{
  font-family:"JetBrains Mono", monospace;
  font-size:10.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--cyan-2);
  display:inline-flex; align-items:center; gap:6px;
  white-space:nowrap;
}
.cat-cta .arrow{ transition: transform .25s ease; }
.cat-card:hover .cat-cta .arrow{ transform: translateX(3px); }
.cat-card--soon .cat-cta{ color:var(--muted); }

/* Helper band below the grid. */
.cat-helper{
  margin-top:32px;
  padding:24px 26px;
  border:1px solid var(--line);
  background:linear-gradient(135deg, rgba(25,167,224,0.06), rgba(25,167,224,0.01));
  display:grid;
  grid-template-columns: 1fr auto;
  align-items:center;
  gap:24px;
}
@media (max-width: 720px){
  .cat-helper{ grid-template-columns: 1fr; }
}
.cat-helper-text strong{
  display:block;
  font-family:"Instrument Serif", serif;
  font-style:italic;
  font-size:22px;
  color:var(--paper);
  margin-bottom:4px;
}
.cat-helper-text span{
  color:var(--paper-2);
  font-size:13px;
  line-height:1.55;
}
.cat-helper-actions{
  display:flex; gap:10px; flex-wrap:wrap;
}

/* ────────────────────────────────────────────────────────────────
 * /hosting/browse — categorised plan grid.
 *
 * One <section.catalogue-plans> per category (Beginner / Standard /
 * VPS / Dedicated / Email). Inside each: a category head, an optional
 * shared-features panel, and a responsive grid of plan cards.
 *
 * Tokens follow the marketing site (Instrument Serif heads, Space
 * Grotesk body, JetBrains Mono meta). Light/dark mode handled via
 * the CSS variables already declared in site.css.
 * ──────────────────────────────────────────────────────────────── */

.catalogue-plans{
  padding:48px 0;
  border-top:1px solid var(--line);
}
.catalogue-plans:first-of-type{ border-top:0; padding-top:24px; }

.category-head{
  margin:0 0 22px;
}
.category-head h2{
  font-family:"Instrument Serif", serif;
  font-weight:400;
  font-size:34px;
  line-height:1.1;
  letter-spacing:-0.01em;
  margin:0;
  color:var(--paper);
}
.category-tagline{
  margin:6px 0 0;
  color:var(--cyan-2);
  font-family:"Instrument Serif", serif;
  font-style:italic;
  font-size:18px;
}

.category-shared{
  display:flex;
  flex-wrap:wrap;
  gap:14px 24px;
  margin:0 0 26px;
  padding:14px 18px;
  border:1px dashed var(--line-2);
  border-radius:4px;
  background:rgba(25,167,224,0.03);
}
.category-shared .shared-label{
  font-family:"JetBrains Mono", monospace;
  font-size:10.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  align-self:center;
}
.shared-features{
  list-style:none;
  margin:0; padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px 18px;
}
.shared-features li{
  font-size:12.5px;
  color:var(--paper-2);
  position:relative;
  padding-left:14px;
}
.shared-features li::before{
  content:"";
  position:absolute; left:0; top:8px;
  width:6px; height:6px;
  background:var(--cyan-2);
  border-radius:50%;
}

.category-empty{
  padding:22px 26px;
  border:1px dashed var(--line-2);
  border-radius:4px;
  color:var(--paper-2);
  font-size:13px;
  line-height:1.6;
  background:rgba(207,216,226,0.02);
}
.category-empty strong{
  color:var(--paper);
  font-family:"Instrument Serif", serif;
  font-style:italic;
  font-size:16px;
  font-weight:400;
}
.category-empty a{ color:var(--cyan-2); }

.plan-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:14px;
}
@media (max-width: 1100px){
  .plan-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px){
  .plan-grid{ grid-template-columns: 1fr; }
}

.plan-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:22px 20px 20px;
  border:1px solid var(--line);
  border-radius:4px;
  background:var(--ink-2);
  transition: border-color .25s ease, transform .25s ease;
}
.plan-card:hover{
  border-color:var(--line-2);
}
.plan-card--popular{
  border-color:var(--cyan-2);
  background:linear-gradient(180deg, rgba(25,167,224,0.04), var(--ink-2) 60%);
}
.plan-card--vps{
  background:rgba(93,211,255,0.02);
}

.plan-badge{
  position:absolute; top:-10px; left:50%;
  transform: translateX(-50%);
  padding:3px 10px;
  font-family:"JetBrains Mono", monospace;
  font-size:9.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  background:var(--cyan);
  color:#fff;
  border-radius:999px;
  white-space:nowrap;
}

.plan-head{
  border-bottom:1px solid var(--line);
  padding-bottom:10px;
}
.plan-tier{
  font-family:"JetBrains Mono", monospace;
  font-size:9.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  display:block;
}
.plan-name{
  font-family:"Instrument Serif", serif;
  font-weight:400;
  font-size:22px;
  line-height:1.15;
  letter-spacing:-0.01em;
  margin:4px 0 0;
  color:var(--paper);
}

.plan-price{
  display:flex; align-items:baseline; gap:4px;
}
.plan-price .amount{
  font-family:"Instrument Serif", serif;
  font-style:italic;
  font-size:30px;
  line-height:1;
  color:var(--cyan-2);
}
.plan-price .period{
  font-family:"JetBrains Mono", monospace;
  font-size:10.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
}
.plan-price--tbc .amount{
  color:var(--muted);
  font-style:normal;
  font-size:20px;
}
.plan-price-alt{
  font-family:"JetBrains Mono", monospace;
  font-size:10.5px;
  letter-spacing:.06em;
  color:var(--muted);
}

.plan-specs{
  margin:6px 0 0;
  padding:10px 0 4px;
  border-top:1px dashed var(--line);
  display:flex;
  flex-direction:column;
  gap:8px;
  font-size:12.5px;
  color:var(--paper-2);
}
/* Each spec row is a flex pair — label left, value right. When the value
 * is too long to share a line with the label (e.g. the inode "Soft 300,000
 * / Hard 350,000" on a narrow 4-up card), the value wraps below instead
 * of squeezing the label into a "INODE / LIMIT" two-line wrap. Short rows
 * like "DISK SPACE / 500 MB" stay on one line where they always have. */
.plan-spec{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:baseline;
  gap:4px 12px;
  margin:0;
}
.plan-spec dt{
  font-family:"JetBrains Mono", monospace;
  font-size:10.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0;
  white-space:nowrap;
}
.plan-spec dd{
  margin:0;
  margin-left:auto;
  text-align:right;
  color:var(--paper);
  font-variant-numeric: tabular-nums;
}

.plan-features{
  list-style:none;
  padding:0; margin:0;
  display:flex; flex-direction:column; gap:6px;
}
.plan-features li{
  font-size:12.5px;
  color:var(--paper-2);
  position:relative;
  padding-left:14px;
}
.plan-features li::before{
  content:"";
  position:absolute; left:0; top:8px;
  width:6px; height:6px;
  background:var(--cyan);
  border-radius:50%;
}

.plan-cta{
  margin-top:auto;
  text-align:center;
}
.plan-cta--soon{
  background:transparent;
  border:1px solid var(--line-2);
  color:var(--paper-2);
}

/* Out-of-stock cards stay visible (price + specs still shown), but the
 * CTA is replaced with an unclickable "OUT OF STOCK" pill so the
 * customer can see the plan exists without being able to add it to
 * cart. The configurator handler also refuses these plans server-side. */
.plan-card--oos{ opacity:.72 }
.plan-cta--oos{
  display:inline-block;
  margin-top:auto;
  padding:9px 18px;
  text-align:center;
  font-family:"JetBrains Mono", monospace;
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  background:rgba(255, 89, 89, 0.10);
  border:1px solid rgba(255, 89, 89, 0.45);
  color:#ffb1b1;
  border-radius:4px;
  cursor:not-allowed;
  user-select:none;
}
:root[data-theme="light"] .plan-cta--oos{
  background:rgba(197, 48, 48, 0.08);
  border-color:rgba(197, 48, 48, 0.45);
  color:#a4161a;
}

.plan-foot{
  margin:8px 0 0;
  font-size:12.5px;
  color:var(--muted);
  text-align:center;
}
.plan-foot a{ color:var(--cyan-2); }

/* ────────────────────────────────────────────────────────────────
 * /hosting/configure — per-plan configurator.
 *
 * Two-column layout: configurable form on the left, sticky summary
 * card on the right. Form sections are .config-block panels (drops
 * the ugly default fieldset chrome), billing cycle is rendered as
 * radio-cards, and the summary card mirrors the plan-card visual
 * language so the customer sees a consistent shape between picking
 * the plan and configuring it.
 *
 * Tokens use the existing CSS variables so light/dark both work.
 * ──────────────────────────────────────────────────────────────── */

.catalogue-configure{
  padding:40px 0 80px;
}

.configure-grid{
  display:grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap:32px;
  align-items:start;
}
@media (max-width: 980px){
  .configure-grid{ grid-template-columns: 1fr; }
}

/* The form now wraps the whole .configure-grid so the right-rail
 * "Cart preview" can host the submit + back buttons inside the same
 * <form>. Left-column field stack moves to .configure-fields. */
.configure-form{
  display:block;
  margin:0;
}
.configure-fields{
  display:flex;
  flex-direction:column;
  gap:18px;
  min-inline-size:0;
}

/* Drop browser's <fieldset> border/legend chrome and re-build as a panel. */
.config-block{
  border:1px solid var(--line);
  border-radius:4px;
  background:var(--ink-2);
  padding:20px 22px;
  margin:0;
  min-inline-size:0; /* fieldset default = min-content, breaks grid otherwise */
}
.config-block > legend{
  display:block;
  width:auto;
  padding:0 0 12px;
  margin:0;
  font-family:"Instrument Serif", serif;
  font-weight:400;
  font-size:20px;
  line-height:1.2;
  letter-spacing:-0.01em;
  color:var(--paper);
}
.config-required{
  display:inline-block;
  margin-left:8px;
  padding:2px 8px;
  vertical-align:middle;
  font-family:"JetBrains Mono", monospace;
  font-size:9.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--cyan-2);
  border:1px solid rgba(25,167,224,0.45);
  border-radius:999px;
}
.config-optional{
  display:inline-block;
  margin-left:8px;
  padding:2px 8px;
  vertical-align:middle;
  font-family:"JetBrains Mono", monospace;
  font-size:9.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  border:1px solid var(--line-2);
  border-radius:999px;
}
.config-help{
  margin:0 0 16px;
  font-size:13px;
  line-height:1.55;
  color:var(--paper-2);
}
.config-foot{
  margin:10px 0 0;
  font-size:12.5px;
  color:var(--muted);
}
.config-foot a{ color:var(--cyan-2); }

.config-input{
  display:block;
  margin:0;
}
.config-input .lbl{
  display:block;
  margin:0 0 6px;
  font-family:"JetBrains Mono", monospace;
  font-size:10.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}
.config-input input[type="text"],
.config-input input[type="email"],
.config-input input[type="password"],
.config-input input[type="url"],
.config-input input[type="tel"],
.config-input input[type="number"],
.config-input select{
  width:100%;
  background:var(--ink-3);
  border:1px solid var(--line);
  color:var(--paper);
  padding:10px 12px;
  border-radius:3px;
  font-family:inherit;
  font-size:13px;
  transition:border-color .15s ease;
}
.config-input input:focus,
.config-input select:focus{
  outline:none;
  border-color:var(--cyan);
}

/* Billing-cycle radio cards. Hide the native radio, render the
 * .cycle-card span as a clickable panel. */
.cycle-options{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
}
@media (max-width: 640px){
  .cycle-options{ grid-template-columns: 1fr; }
}
/* VPS plans are month-to-month only — annual card is removed and the
 * remaining card fills the row. */
.cycle-options--single{ grid-template-columns: 1fr; }
.cycle-option{
  position:relative;
  display:block;
  cursor:pointer;
  margin:0;
}
.cycle-option input[type="radio"]{
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
}
.cycle-card{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:4px;
  background:var(--ink-3);
  transition:border-color .15s ease, background .15s ease;
}
.cycle-option input[type="radio"]:checked + .cycle-card{
  border-color:var(--cyan-2);
  background:linear-gradient(180deg, rgba(25,167,224,0.10), var(--ink-3) 70%);
}
.cycle-option input[type="radio"]:focus-visible + .cycle-card{
  outline:2px solid var(--cyan);
  outline-offset:2px;
}
.cycle-name{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  font-weight:500;
  color:var(--paper);
}
.cycle-save{
  font-family:"JetBrains Mono", monospace;
  font-size:9.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--cyan-2);
  padding:2px 7px;
  border:1px solid rgba(25,167,224,0.45);
  border-radius:999px;
}
.cycle-price{
  font-family:"Instrument Serif", serif;
  font-style:italic;
  font-size:22px;
  color:var(--cyan-2);
  line-height:1;
}
.cycle-price small{
  font-family:"JetBrains Mono", monospace;
  font-style:normal;
  font-size:10px;
  letter-spacing:.10em;
  color:var(--muted);
  margin-left:4px;
}
.cycle-meta{
  font-size:11.5px;
  color:var(--paper-2);
}

.addons-empty{
  padding:14px 16px;
  border:1px dashed var(--line-2);
  border-radius:3px;
  background:rgba(207,216,226,0.02);
  color:var(--muted);
  font-size:13px;
  text-align:center;
}

/* Lives inside the right-rail .summary-card now — stack the two
 * actions full-width so the primary CTA hugs the card edge. */
.configure-actions{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:6px;
}
.configure-actions .btn{
  width:100%;
  text-align:center;
}

/* Sticky right-rail summary card. Mirrors .plan-card visuals so the
 * customer keeps the same mental picture from /hosting/browse. */
.configure-summary{
  position:sticky;
  top:90px; /* clears the sticky topbar */
}
.configure-summary .summary-card{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:22px 22px 20px;
  border:1px solid var(--line);
  border-radius:4px;
  background:var(--ink-2);
}
.summary-eyebrow{
  font-family:"JetBrains Mono", monospace;
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
}
.summary-name{
  font-family:"Instrument Serif", serif;
  font-weight:400;
  font-size:24px;
  line-height:1.15;
  letter-spacing:-0.01em;
  margin:0 0 4px;
  color:var(--paper);
}
.summary-tier{
  font-family:"JetBrains Mono", monospace;
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 6px;
}

/* Per-plan specs — table-style key/value pairs that mirror the
 * .plan-specs grid on /hosting/browse so the customer keeps the same
 * mental shape between picking the plan and configuring it. */
.summary-specs{
  margin:6px 0 0;
  padding:10px 0 6px;
  border-top:1px dashed var(--line);
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:12.5px;
  color:var(--paper-2);
}
.summary-spec{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:baseline;
  gap:4px 12px;
  margin:0;
}
.summary-spec dt{
  font-family:"JetBrains Mono", monospace;
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0;
  white-space:nowrap;
}
.summary-spec dd{
  margin:0;
  margin-left:auto;
  text-align:right;
  color:var(--paper);
  font-variant-numeric: tabular-nums;
}

/* Bundled features block (cPanel sharedFeatures, mostly). Tucked under
 * the specs table with a label-then-bullet pattern so it reads as a
 * companion list rather than a competing one. */
.summary-block{
  margin-top:10px;
  padding-top:10px;
  border-top:1px dashed var(--line);
}
.summary-block-label{
  font-family:"JetBrains Mono", monospace;
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:8px;
}

.summary-features{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.summary-features li{
  font-size:12px;
  color:var(--paper-2);
  position:relative;
  padding-left:14px;
}
.summary-features li::before{
  content:"";
  position:absolute; left:0; top:7px;
  width:5px; height:5px;
  background:var(--cyan);
  border-radius:50%;
}
.summary-divider{
  height:1px;
  background:var(--line);
  margin:8px 0;
}
.summary-line{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
  font-size:13px;
  color:var(--paper-2);
}
.summary-line .mono{
  font-family:"JetBrains Mono", monospace;
  font-size:13px;
  color:var(--paper);
}
/* The "you pay this" total row gets a bigger price than the secondary
 * summary lines. Only one of these is rendered at a time (the cycle
 * the customer picked) so it owns its line visually. */
.summary-line--total span:first-child{
  font-family:"JetBrains Mono", monospace;
  font-size:10.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
}
.summary-line--total .mono{
  font-family:"Instrument Serif", serif;
  font-style:italic;
  font-size:24px;
  color:var(--cyan-2);
}
.summary-save{
  margin-top:6px;
  padding:8px 12px;
  border:1px solid rgba(25,167,224,0.45);
  border-radius:3px;
  background:rgba(25,167,224,0.06);
  font-family:"JetBrains Mono", monospace;
  font-size:11px;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:var(--cyan-2);
  text-align:center;
}

/* ---------------------------------------------------------------------------
 * Cart line-items table + cart/checkout flash messages.
 *
 * These used to carry hardcoded light-only hex colours inline in the views
 * (#ddd/#f0f0f0 borders, #666 sub-text, #a33 remove button, #fee/#a00 flashes),
 * so the /cart and /checkout content read as a pale, washed-out area in dark
 * mode — it ignored the theme while the rest of the page frame followed it.
 * Moving them here, expressed in theme tokens, makes them follow dark/light
 * like everything else. (audit #78)
 * ------------------------------------------------------------------------- */
.cart-lines{
  width:100%;
  border-collapse:collapse;
}
.cart-lines thead th{
  padding:.5rem;
  border-bottom:1px solid var(--line);
  color:var(--paper);
}
.cart-lines tbody td{
  padding:.75rem .5rem;
  border-bottom:1px solid var(--line);
  color:var(--paper);
  vertical-align:top;
}
.cart-lines .cart-item-config{
  color:var(--muted);
}
.cart-lines .cart-remove{
  background:none;
  border:0;
  padding:0;
  color:var(--cyan-2);
  cursor:pointer;
  font:inherit;
}
.cart-lines .cart-remove:hover{
  color:var(--cyan);
  text-decoration:underline;
}

/* Flash / alert boxes shared by the cart review and the 3 checkout steps.
 * Previously these classes had no CSS at all, so the markup relied on inline
 * styles (or rendered unstyled). */
.cart-flash{
  padding:.75rem 1rem;
  border-radius:4px;
  margin-bottom:1rem;
  border:1px solid var(--line);
  background:var(--ink-2);
  color:var(--paper);
}
.cart-flash-error{
  background:rgba(255,89,89,.10);
  border-color:rgba(255,89,89,.45);
  color:var(--red);
}
.cart-flash-success,
.cart-flash-info{
  background:rgba(93,211,255,.08);
  border-color:rgba(93,211,255,.45);
  color:var(--cyan-2);
}