/*
 Theme Name:   Compost SaaS
 Theme URI:    https://compostiq.com.au
 Description:  Compost SaaS child theme for Unstrapped (Bootstrap 4). Engineering site plan aesthetic.
 Author:       Sequence Digital
 Author URI:   https://sequencedigital.com.au
 Template:     unstrapped
 Version:      2.0.0
 Text Domain:  compost-saas
*/

/* ============================================================
   SELF-HOSTED FONTS
   Inter (variable, 400-700) - body text
   IBM Plex Mono (400-700)   - headings, labels, data
   ============================================================ */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/inter.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-500.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-600.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-700.woff2') format('woff2');
}

/* ============================================================
   CUSTOM PROPERTIES - Engineering Plan Palette
   Extracted from v2-mission-control-prototype.html
   ============================================================ */
:root {
  /* Paper and surfaces */
  --ciq-paper: #f5f0eb;
  --ciq-surface: #ffffff;
  --ciq-surface-alt: #f9fafb;
  --ciq-surface-warm: #e8ddd4;
  --ciq-surface-warm-hover: #f0e7de;

  /* Text */
  --ciq-text: #1f2937;
  --ciq-text-secondary: #374151;
  --ciq-text-muted: #6b7280;
  --ciq-text-light: #9ca3af;

  /* Borders and lines */
  --ciq-border: #d1d5db;
  --ciq-border-warm: #c4b8a8;
  --ciq-border-hover: #9ca3af;
  --ciq-border-strong: #4b5563;

  /* Action (selection, focus, links) */
  --ciq-action: #2563eb;
  --ciq-action-hover: #1d4ed8;
  --ciq-action-light: #dbeafe;

  /* Accent (marketing/billing link colour, move-merge mode in layout manager) */
  --ciq-accent: #ca6a20;
  --ciq-accent-hover: #a0521a;

  /* Status - matched to prototype status bar palette */
  --ciq-error: #dc2626;
  --ciq-error-light: #fef2f2;
  --ciq-error-border: #fca5a5;
  --ciq-error-text: #991b1b;
  --ciq-warning: #d97706;
  --ciq-warning-light: #fffbeb;
  --ciq-warning-border: #fcd34d;
  --ciq-warning-text: #92400e;
  --ciq-success: #16a34a;
  --ciq-success-light: #dcfce7;
  --ciq-success-border: #86efac;
  --ciq-success-text: #166534;
  --ciq-info: #3b82f6;
  --ciq-info-light: #eff6ff;
  --ciq-info-border: #bfdbfe;
  --ciq-info-text: #1e40af;

  /* Typography */
  --ciq-font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --ciq-font-heading: 'IBM Plex Mono', 'Consolas', 'Monaco', monospace;

  /* Spacing and sizing */
  --ciq-radius: 2px;
  --ciq-transition: 0.15s ease;

  /* Grid */
  --ciq-grid-size: 20px;
  --ciq-grid-colour: #c4b8a8;
}

/* ============================================================
   BASE
   ============================================================ */
body {
  font-family: var(--ciq-font-body);
  color: var(--ciq-text);
  background: var(--ciq-paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--ciq-action);
  color: white;
}

a {
  color: var(--ciq-action);
  transition: color var(--ciq-transition);
}
a:hover {
  color: var(--ciq-action-hover);
}

/* ============================================================
   TYPOGRAPHY
   Headings use monospaced font for engineering document feel.
   Body text uses Inter for readability.
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ciq-font-heading);
  font-weight: 600;
  color: var(--ciq-text);
  letter-spacing: -0.01em;
  line-height: 1.3;
}

h1 {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
}
h2 {
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.25;
}
h3 {
  font-size: 1.1rem;
  font-weight: 600;
}
h4 {
  font-size: 0.95rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
h5, h6 {
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ciq-text-muted);
}

/* Annotation-style labels - engineering drawing convention */
.ciq-label,
label {
  font-family: var(--ciq-font-heading);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ciq-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

small,
.small,
.text-muted {
  color: var(--ciq-text-muted);
}

code, pre, kbd {
  font-family: var(--ciq-font-heading);
}

/* ============================================================
   ENGINEERING GRID BACKGROUND
   Applied to the main content area on subsites.
   Site 1 (billing portal) gets plain paper for cleaner marketing feel.
   ============================================================ */
.ciq-grid-bg {
  background-image:
    linear-gradient(0deg, transparent calc(var(--ciq-grid-size) - 1px), var(--ciq-grid-colour) calc(var(--ciq-grid-size) - 1px), var(--ciq-grid-colour) var(--ciq-grid-size)),
    linear-gradient(90deg, transparent calc(var(--ciq-grid-size) - 1px), var(--ciq-grid-colour) calc(var(--ciq-grid-size) - 1px), var(--ciq-grid-colour) var(--ciq-grid-size));
  background-size: var(--ciq-grid-size) var(--ciq-grid-size);
}

/* ============================================================
   NAVBAR
   White bar, thin bottom border, no gradient, no CTA pill.
   ============================================================ */
#wrapper-navbar {
  position: relative;
  background: var(--ciq-surface);
  border-bottom: 1px solid var(--ciq-border);
  box-shadow: none;
}
/* Remove gradient underline from old theme */
#wrapper-navbar::after {
  display: none;
}

#main-nav {
  padding: 10px 0;
}

#main-nav .navbar-brand {
  font-family: var(--ciq-font-heading);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ciq-text);
  letter-spacing: -0.01em;
  text-decoration: none;
  padding: 4px 0;
}
#main-nav .navbar-brand:hover {
  color: var(--ciq-text);
  text-decoration: none;
}
#main-nav .navbar-brand img,
#main-nav .ciq-nav-logo {
  height: 32px;
  width: auto;
  display: block;
  object-fit: contain;
}

/* Light navbar overrides */
#main-nav.navbar-light .navbar-nav .nav-link {
  color: var(--ciq-text-secondary);
  font-family: var(--ciq-font-heading);
  font-weight: 500;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: color var(--ciq-transition);
  padding: 8px 14px;
}
#main-nav.navbar-light .navbar-nav .nav-link:hover,
#main-nav.navbar-light .navbar-nav .nav-link:focus,
#main-nav.navbar-light .navbar-nav .active > .nav-link {
  color: var(--ciq-text);
}

/* Toggler */
#main-nav .navbar-toggler {
  border-color: var(--ciq-border);
  border-radius: var(--ciq-radius);
  padding: 6px 10px;
}
#main-nav .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ============================================================
   BUTTONS
   Squared off (2px radius), solid fills, no gradients.
   Engineering feel - precise, functional.
   ============================================================ */
/* Base button reset - engineering typography for all buttons */
.btn {
  font-family: var(--ciq-font-heading);
  font-weight: 500;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: var(--ciq-radius);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: all var(--ciq-transition);
}

/* Primary buttons - dark fill */
.btn-primary,
.ciq-btn-primary,
.woocommerce .button,
.woocommerce input.button,
.woocommerce a.button,
.woocommerce .button.alt {
  font-family: var(--ciq-font-heading);
  font-weight: 500;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: var(--ciq-radius);
  padding: 10px 20px;
  border: 1px solid var(--ciq-border-strong);
  background: var(--ciq-text);
  color: var(--ciq-surface);
  cursor: pointer;
  transition: all var(--ciq-transition);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
}
.btn-primary:hover,
.ciq-btn-primary:hover,
.woocommerce .button:hover,
.woocommerce input.button:hover,
.woocommerce a.button:hover,
.woocommerce .button.alt:hover {
  background: var(--ciq-text-secondary);
  border-color: var(--ciq-text-secondary);
  color: var(--ciq-surface);
  text-decoration: none;
  transform: none;
  box-shadow: none;
}
.btn-primary:focus,
.ciq-btn-primary:focus {
  outline: 2px solid var(--ciq-action);
  outline-offset: 2px;
  box-shadow: none;
}

/* Secondary buttons - outline */
.btn-secondary,
.ciq-btn-secondary,
.btn-outline-primary {
  background: transparent;
  color: var(--ciq-text);
  border: 1px solid var(--ciq-border);
  font-family: var(--ciq-font-heading);
  font-weight: 500;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: var(--ciq-radius);
  padding: 10px 20px;
  min-height: 44px;
}
.btn-secondary:hover,
.ciq-btn-secondary:hover,
.btn-outline-primary:hover {
  background: var(--ciq-surface-alt);
  border-color: var(--ciq-border-hover);
  color: var(--ciq-text);
  transform: none;
  box-shadow: none;
}

/* Status buttons - prototype status palette, engineering shape */
.btn-danger {
  background: var(--ciq-error-light);
  border: 1px solid var(--ciq-error-border);
  color: var(--ciq-error-text);
  border-radius: var(--ciq-radius);
}
.btn-danger:hover {
  background: var(--ciq-error-border);
  border-color: var(--ciq-error);
  color: var(--ciq-error-text);
}
.btn-success {
  background: var(--ciq-success-light);
  border: 1px solid var(--ciq-success-border);
  color: var(--ciq-success-text);
  border-radius: var(--ciq-radius);
}
.btn-success:hover {
  background: var(--ciq-success-border);
  border-color: var(--ciq-success);
  color: var(--ciq-success-text);
}
.btn-warning {
  background: var(--ciq-warning-light);
  border: 1px solid var(--ciq-warning-border);
  color: var(--ciq-warning-text);
  border-radius: var(--ciq-radius);
}
.btn-warning:hover {
  background: var(--ciq-warning-border);
  border-color: var(--ciq-warning);
  color: var(--ciq-warning-text);
}
.btn-info {
  background: var(--ciq-info-light);
  border: 1px solid var(--ciq-info-border);
  color: var(--ciq-info-text);
  border-radius: var(--ciq-radius);
}
.btn-info:hover {
  background: var(--ciq-info-border);
  border-color: var(--ciq-info);
  color: var(--ciq-info-text);
}


/* ============================================================
   FORMS
   Site inspection document feel - clean fields, precise labels.
   ============================================================ */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
textarea,
select,
.form-control {
  font-family: var(--ciq-font-body);
  font-size: 0.9rem;
  color: var(--ciq-text);
  background: var(--ciq-surface);
  border: 1px solid var(--ciq-border);
  border-radius: var(--ciq-radius);
  padding: 8px 10px;
  transition: border-color var(--ciq-transition);
  min-height: 44px;
}
input:focus,
textarea:focus,
select:focus,
.form-control:focus {
  border-color: var(--ciq-action);
  outline: none;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
}
input:disabled,
textarea:disabled,
select:disabled {
  background: var(--ciq-surface-alt);
  color: var(--ciq-text-light);
  cursor: not-allowed;
}

textarea {
  resize: vertical;
  min-height: 100px;
}

/* Checkbox and radio - larger targets */
input[type="checkbox"],
input[type="radio"] {
  width: 18px;
  height: 18px;
  margin-right: 6px;
  vertical-align: middle;
}

/* Form groups */
.form-group {
  margin-bottom: 1.25rem;
}

/* ============================================================
   TABLES
   Lab report style - thin lines, precise alignment.
   ============================================================ */
table,
.table,
.wp-block-table table,
.woocommerce table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--ciq-font-body);
  font-size: 0.875rem;
}
table th,
.table th,
.wp-block-table th,
.woocommerce table th {
  font-family: var(--ciq-font-heading);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ciq-text-muted);
  background: var(--ciq-surface-alt);
  border-bottom: 2px solid var(--ciq-border);
  padding: 10px 12px;
  text-align: left;
}
table td,
.table td,
.wp-block-table td,
.woocommerce table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--ciq-border);
  vertical-align: middle;
}
table tbody tr:hover,
.table tbody tr:hover {
  background: rgba(197, 184, 168, 0.08);
}

/* ============================================================
   CARDS AND PANELS
   White surface on paper background, thin border.
   ============================================================ */
.card {
  background: var(--ciq-surface);
  border: 1px solid var(--ciq-border);
  border-radius: var(--ciq-radius);
  box-shadow: none;
}
.card-header {
  background: var(--ciq-surface-alt);
  border-bottom: 1px solid var(--ciq-border);
  font-family: var(--ciq-font-heading);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 12px 16px;
}
.card-body {
  padding: 16px;
}

/* ============================================================
   ALERTS
   Subtle, engineering-style status indicators.
   ============================================================ */
.alert {
  border-radius: var(--ciq-radius);
  border-width: 1px;
  font-size: 0.875rem;
  padding: 12px 16px;
}
.alert-danger,
.woocommerce-error {
  background: var(--ciq-error-light);
  border-color: var(--ciq-error-border);
  color: var(--ciq-error-text);
}
.alert-warning {
  background: var(--ciq-warning-light);
  border-color: var(--ciq-warning-border);
  color: var(--ciq-warning-text);
}
.alert-info,
.woocommerce-info {
  background: var(--ciq-info-light);
  border-color: var(--ciq-info-border);
  color: var(--ciq-info-text);
}
.alert-success,
.woocommerce-message {
  background: var(--ciq-success-light);
  border-color: var(--ciq-success-border);
  color: var(--ciq-success-text);
}

/* ============================================================
   WP LOGIN PAGE
   Paper background, no WP logo, engineering styling.
   ============================================================ */
body.login {
  background: var(--ciq-paper);
}
.login h1 a {
  /* Hide WP logo - will be replaced by site name in text */
  background-image: none !important;
  font-family: var(--ciq-font-heading);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ciq-text);
  text-indent: 0;
  width: auto;
  height: auto;
  text-decoration: none;
  letter-spacing: -0.01em;
}
.login form {
  background: var(--ciq-surface);
  border: 1px solid var(--ciq-border);
  border-radius: var(--ciq-radius);
  box-shadow: none;
}
.login form .input,
.login input[type="text"],
.login input[type="password"] {
  border: 1px solid var(--ciq-border);
  border-radius: var(--ciq-radius);
  font-family: var(--ciq-font-body);
  font-size: 0.9rem;
  box-shadow: none;
  background: var(--ciq-surface);
}
.login form .input:focus,
.login input:focus {
  border-color: var(--ciq-action);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
}
.login .button-primary,
.login #wp-submit {
  background: var(--ciq-text);
  border: 1px solid var(--ciq-border-strong);
  border-radius: var(--ciq-radius);
  font-family: var(--ciq-font-heading);
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-shadow: none;
  box-shadow: none;
  min-height: 44px;
}
.login .button-primary:hover,
.login #wp-submit:hover {
  background: var(--ciq-text-secondary);
  border-color: var(--ciq-text-secondary);
}
.login label {
  font-family: var(--ciq-font-heading);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ciq-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.login #nav a,
.login #backtoblog a {
  color: var(--ciq-text-muted);
  font-size: 0.8rem;
}
.login #nav a:hover,
.login #backtoblog a:hover {
  color: var(--ciq-action);
}
/* Hide language switcher on login */
.language-switcher {
  display: none;
}

/* ============================================================
   FOOTER
   Light paper footer with thin top border. Not dark.
   ============================================================ */
.ciq-footer {
  background: var(--ciq-surface);
  border-top: 1px solid var(--ciq-border);
  padding: 16px 0 16px;
}
.ciq-footer-legal {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
}
.ciq-footer-legal p {
  font-family: var(--ciq-font-heading);
  font-size: 0.7rem;
  color: var(--ciq-text-light);
  margin-bottom: 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ciq-footer-legal a {
  color: var(--ciq-text-muted);
  text-decoration: underline;
}
.ciq-footer-legal a:hover {
  color: var(--ciq-action);
}


/* ============================================================
   WP CONTENT SPACING
   ============================================================ */
#content {
  padding-top: 20px;
}

/* ============================================================
   WOOCOMMERCE OVERRIDES
   ============================================================ */
.woocommerce .price,
.woocommerce .amount {
  font-family: var(--ciq-font-heading);
  font-weight: 600;
  color: var(--ciq-text);
}
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-info {
  border-radius: var(--ciq-radius);
  font-size: 0.875rem;
}

/* WP Block buttons (used by WooCommerce product grids) */
.wp-block-button__link {
  border-radius: var(--ciq-radius);
  font-family: var(--ciq-font-heading);
  font-weight: 500;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* WooCommerce form layout fixes */
.woocommerce-form-login .woocommerce-form-login__rememberme {
  display: block;
}
/* Bootstrap's .form-row is display:flex, WC's .form-row is a block field wrapper.
   Same class name, different intent. Bootstrap's theme.min.css loads after WC's
   so flex wins, which puts labels inline with inputs. Restore WC's block layout
   under the .woocommerce scope - same pattern as the .col2-set > .col-1 fix. */
.woocommerce .form-row,
.woocommerce-page .form-row {
  display: block;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 1rem;
}
/* Password field - ensure full width within its container */
.woocommerce .woocommerce-input-wrapper,
.woocommerce .password-input {
  width: 100%;
  flex: 1;
}
.woocommerce .woocommerce-input-wrapper input,
.woocommerce .password-input input {
  width: 100%;
}

/* Coupon UI: hide the "Have a coupon?" toggle and manual-entry form on cart
   and checkout. The only coupon in use (AORA26HOTDEAL) auto-applies, so the
   manual-entry surface is dead UI. Revisit if a second coupon is introduced. */
.woocommerce-form-coupon-toggle,
form.checkout_coupon,
.woocommerce-cart .cart .coupon {
  display: none !important;
}

/* Cart qty column: every CIQ product is sold_individually, so the qty cell is
   always empty. Hide the whole column to avoid a blank gap between Price and
   Subtotal. Applies to cart table only - checkout order review renders qty
   inline ("Tier X Monthly  x 1") which is fine as-is. */
.woocommerce-cart table.cart th.product-quantity,
.woocommerce-cart table.cart td.product-quantity {
  display: none;
}

/* AORA coupon totals row: append explanatory duration text to the label cell.
   CSS-only so the label stays plain text and doesn't leak HTML into the
   <td data-title="..."> attribute WC uses for responsive labels. */
tr.cart-discount.coupon-aora26hotdeal th::after {
  content: "discount applies for first 12 months";
  display: block;
  font-size: 11px;
  font-weight: normal;
  color: var(--ciq-text-muted);
  margin-top: 2px;
}

/* Home page hero - full-bleed image that ignores container padding.
   Uses viewport-width + negative margin trick to break out of .container. */
.ciq-hero {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-top: -20px;
  margin-bottom: 40px;
  width: 100vw;
  max-width: 100vw;
  overflow: hidden;
  background: var(--ciq-paper);
}
.ciq-hero img {
  display: block;
  width: 100%;
  height: auto;
}

/* ============================================================
   WOOCOMMERCE COLOUR OVERRIDE
   WC ships three purple-family colours:
     #720eec  --woocommerce/--wc-primary (variables + notice border + store notice bg)
     #7f54b3  .button.alt background, price slider, disabled buttons
     #f6f5f8  notice background (light purple tint)
     #e9e6ed  --wc-secondary (tabs, pagination, borders, cart totals)
     #fcfbfe  --wc-primary-text (near-white on purple)
   All overridden to our engineering-plan palette.
   ============================================================ */
:root {
  --woocommerce: var(--ciq-text) !important;
  --wc-primary: var(--ciq-text) !important;
  --wc-primary-text: var(--ciq-surface) !important;
  --wc-secondary: var(--ciq-border) !important;
  --wc-secondary-text: var(--ciq-text) !important;

  /* Bootstrap 4 primary - parent theme ships #007bff. Utilities that read
     the CSS variable will follow; hardcoded #007bff declarations need
     targeted rules below. */
  --primary: var(--ciq-text) !important;
  --blue: var(--ciq-text) !important;
}

/* Bootstrap 4 base link colour: parent theme hardcodes #007bff at
   unstrapped/css/theme.css:156, not via the variable. Override directly. */
a {
  color: var(--ciq-accent);
}
a:hover {
  color: var(--ciq-accent-hover);
}

/* Bootstrap .list-group-item.active (used by WC MyAccount nav current tab).
   Parent theme hardcodes #007bff background at theme.css:5605. */
.list-group-item.active,
.list-group-item.active a {
  background-color: var(--ciq-text) !important;
  border-color: var(--ciq-text) !important;
  color: var(--ciq-surface) !important;
}

/* Notices: border-top #720eec + background #f6f5f8 */
.woocommerce-error,
.woocommerce-info,
.woocommerce-message {
  border-top-color: var(--ciq-text) !important;
  background-color: var(--ciq-surface-alt) !important;
}

/* Store notice: background #720eec */
.woocommerce-store-notice,
p.demo_store {
  background-color: var(--ciq-text) !important;
}

/* .button.alt: background #7f54b3 (Place Order, all alt buttons) */
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
#place_order {
  background-color: var(--ciq-text) !important;
  color: var(--ciq-surface) !important;
}
.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
#place_order:hover {
  background-color: var(--ciq-text-secondary) !important;
  color: var(--ciq-surface) !important;
}

/* Disabled alt buttons: background #7f54b3 */
.woocommerce #respond input#submit.alt.disabled,
.woocommerce #respond input#submit.alt:disabled,
.woocommerce a.button.alt.disabled,
.woocommerce a.button.alt:disabled,
.woocommerce button.button.alt.disabled,
.woocommerce button.button.alt:disabled,
.woocommerce input.button.alt.disabled,
.woocommerce input.button.alt:disabled {
  background-color: var(--ciq-text-muted) !important;
  color: var(--ciq-surface) !important;
}

/* Tabs: background #e9e6ed, box-shadow #e9e6ed */
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background-color: var(--ciq-surface-alt) !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
  box-shadow-color: var(--ciq-surface-alt) !important;
}

/* Pagination: background #e9e6ed */
.woocommerce nav.woocommerce-pagination ul li a:focus,
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--ciq-surface-warm) !important;
}

/* Cart totals borders: #e9e6ed */
#add_payment_method .cart-collaterals .cart_totals tr td,
#add_payment_method .cart-collaterals .cart_totals tr th,
.woocommerce-cart .cart-collaterals .cart_totals tr td,
.woocommerce-cart .cart-collaterals .cart_totals tr th,
.woocommerce-checkout .cart-collaterals .cart_totals tr td,
.woocommerce-checkout .cart-collaterals .cart_totals tr th {
  border-top-color: var(--ciq-border) !important;
}

/* Widget shopping cart border: #e9e6ed */
.woocommerce .widget_shopping_cart .total,
.woocommerce.widget_shopping_cart .total {
  border-top-color: var(--ciq-border) !important;
}

/* Price slider: #7f54b3 handle, #e9e6ed track */
.woocommerce .widget_price_filter .ui-slider .ui-slider-handle {
  background-color: var(--ciq-text) !important;
}
.woocommerce .widget_price_filter .ui-slider .ui-slider-range {
  background-color: var(--ciq-action) !important;
}
.woocommerce .widget_price_filter .price_slider_wrapper .ui-widget-content {
  background-color: var(--ciq-border) !important;
}

/* ============================================================
   CHECKOUT LAYOUT
   Parent theme's Bootstrap WC integration removed in functions.php.
   Bootstrap's .col-1 = 8.333% (grid fraction). WC's .col-1 = "column 1"
   (semantic name). Without the parent's fix, billing fields collapse.
   We fix col-1 to 100% for single-column checkout and hide col-2.
   WC's own form-row-first/form-row-last handles the field pairs.
   ============================================================ */
.woocommerce .col2-set > .col-1 {
  flex: 0 0 100%;
  max-width: 100%;
  width: 100%;
}
.woocommerce .col2-set > .col-2 {
  display: none;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  width: 100%;
}

/* Payment section */
#add_payment_method #payment,
.woocommerce-cart #payment,
.woocommerce-checkout #payment {
  background: var(--ciq-surface);
  border-radius: var(--ciq-radius);
}

/* Licence picker section */
#ciq-licence-picker {
  margin-bottom: 20px;
}
#ciq-licence-picker select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--ciq-border);
  border-radius: var(--ciq-radius);
  font-size: 0.95rem;
  background: var(--ciq-surface);
}
#ciq-licence-display {
  margin: 8px 0 16px;
  font-family: var(--ciq-font-heading);
  font-size: 0.85rem;
  color: var(--ciq-text-secondary);
}

/* Other notice styling */
.ciq-notice-box {
  background: var(--ciq-surface-alt);
  border: 1px solid var(--ciq-border);
  border-radius: var(--ciq-radius);
  padding: 20px;
  margin: 16px 0;
}
.ciq-other-form label {
  font-family: var(--ciq-font-heading);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ciq-text-muted);
}
.ciq-other-form input,
.ciq-other-form textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--ciq-border);
  border-radius: var(--ciq-radius);
  font-size: 0.95rem;
  margin-top: 4px;
}

/* WooCommerce breadcrumb */
.woocommerce .woocommerce-breadcrumb {
  font-family: var(--ciq-font-heading);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ciq-text-muted);
  padding: 8px 0;
}
.woocommerce .woocommerce-breadcrumb a {
  color: var(--ciq-text-muted);
}
.woocommerce .woocommerce-breadcrumb a:hover {
  color: var(--ciq-action);
}

/* WooCommerce product list labels */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering select {
  font-family: var(--ciq-font-heading);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ============================================================
   BOOTSTRAP OVERRIDES
   Override Bootstrap 4 defaults that clash with engineering aesthetic.
   ============================================================ */
.bg-primary {
  background-color: var(--ciq-text) !important;
}
.text-primary {
  color: var(--ciq-action) !important;
}
.badge {
  border-radius: var(--ciq-radius);
  font-family: var(--ciq-font-heading);
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 8px;
}
.dropdown-menu {
  border: 1px solid var(--ciq-border);
  border-radius: var(--ciq-radius);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.dropdown-item {
  font-size: 0.85rem;
  padding: 8px 16px;
}
.dropdown-item:hover {
  background: var(--ciq-surface-alt);
}
.breadcrumb {
  background: transparent;
  font-family: var(--ciq-font-heading);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 8px 0;
}
.pagination .page-link {
  color: var(--ciq-text);
  border-color: var(--ciq-border);
  border-radius: var(--ciq-radius);
  font-family: var(--ciq-font-heading);
  font-size: 0.8rem;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pagination .page-item.active .page-link {
  background: var(--ciq-text);
  border-color: var(--ciq-text);
  color: var(--ciq-surface);
}

/* ============================================================
   RESPONSIVE
   Site 1 must work well on mobile for purchase journey.
   ============================================================ */
@media (max-width: 767.98px) {
  h1 { font-size: 1.4rem; }
  h2 { font-size: 1.15rem; }
  h3 { font-size: 1rem; }

  .ciq-footer-legal {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
  }
  /* Ensure nav links have adequate tap targets */
  #main-nav.navbar-light .navbar-nav .nav-link {
    padding: 12px 14px;
    min-height: 44px;
  }
}

/* ============================================================
   PRINT
   Engineering documents must print cleanly.
   ============================================================ */
@media print {
  body {
    background: white;
    color: black;
    font-size: 11pt;
  }

  /* Remove non-content elements */
  #wrapper-navbar,
  .ciq-footer,
  .woocommerce-breadcrumb,
  .no-print {
    display: none !important;
  }

  /* Clean up content area */
  #content {
    padding-top: 0;
  }

  /* Tables print with visible borders */
  table, .table {
    border-collapse: collapse;
  }
  table th, .table th {
    background: #f5f5f5 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    border-bottom: 2px solid #333;
  }
  table td, .table td {
    border-bottom: 1px solid #ccc;
  }

  /* Links show URL */
  a[href]:after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666;
  }
  /* Don't show URL for internal/hash/js links */
  a[href^="#"]:after,
  a[href^="javascript"]:after,
  a[href^="/"]:after {
    content: none;
  }

  /* Cards and panels lose shadow, keep border */
  .card {
    border: 1px solid #ccc;
    box-shadow: none;
  }

  /* Buttons look like text */
  .btn, .button {
    border: 1px solid #999;
    background: transparent !important;
    color: black !important;
    box-shadow: none;
  }

  /* Avoid page breaks inside key elements */
  table, .card, .form-group {
    page-break-inside: avoid;
  }
  h1, h2, h3, h4 {
    page-break-after: avoid;
  }
}

/* ============================================================
   MARKETING PAGES - scoped to .ciq-who wrapper on Who We Are

   Why it lives here instead of inline <style> in post_content:
   WordPress's wpautop filter wraps blank lines in <p> tags, which
   mangles CSS rules when they're separated by empty lines. Keeping
   the rules in the enqueued child-theme stylesheet sidesteps the
   filter entirely.
   ============================================================ */
.ciq-who, .ciq-who * { box-sizing: border-box; }
.ciq-who {
  --ciq-who-paper:      #f5f0eb;
  --ciq-who-paper-alt:  #ede6dc;
  --ciq-who-surface:    #ffffff;
  --ciq-who-ink:        #1f2937;
  --ciq-who-ink-soft:   #374151;
  --ciq-who-ink-muted:  #6b7280;
  --ciq-who-rule:       #c4b8a8;
  --ciq-who-accent:     #ca6a20;
  --ciq-who-mono: 'IBM Plex Mono', 'SF Mono', Menlo, Consolas, monospace;
  --ciq-who-body: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--ciq-who-paper);
  color: var(--ciq-who-ink);
  font-family: var(--ciq-who-body);
  line-height: 1.65;
  /* Previously pulled up -160px to butt against the nav, which hid the
     hero's own padding-top behind the nav and made the bottom look
     heavier than the top. Now we zero the theme container's top padding
     on these pages (see the #content.container rule below) so the hero
     flows naturally directly under the nav without needing to overlap. */
  margin: 0 0 -32px;
  /* No overflow clip here - it was visually clipping the full-width hero
     back to the container width. The horizontal containment lives on body
     (see the :has() rule below) so older Safari without :has() falls back
     to the natural clipping at #page.site width=viewport. */
}
/* Contain horizontal overflow from the 100vw hero breakout. The scroll
   root is <html> in both Chrome and Safari, so the clip has to live there
   rather than on body. Scoped via :has() so it only affects marketing
   pages. Safari 15.4+ / Chrome 105+. WP also adds page-id-N to body, so
   the page-id-77 fallback catches older browsers specifically on the
   Who We Are page. */
html:has(.ciq-who) { overflow-x: clip; }
body.page-id-18,
body.page-id-77 { overflow-x: clip; }

/* Zero every wrapper's vertical padding + margin on marketing pages so
   the hero sits flush under the nav. Understrap's default scaffolding
   (container + row + col + main) contributes a ~85px cream gap
   otherwise. Each selector hits one layer of that stack. */
body.page-id-18 #no-title-page-wrapper,
body.page-id-77 #no-title-page-wrapper,
body.page-id-18 #content.container,
body.page-id-77 #content.container,
body.page-id-18 #content.container > .row,
body.page-id-77 #content.container > .row,
body.page-id-18 #primary.content-area,
body.page-id-77 #primary.content-area,
body.page-id-18 #main.site-main,
body.page-id-77 #main.site-main,
body.page-id-18 article.page,
body.page-id-77 article.page,
body.page-id-18 .entry-content,
body.page-id-77 .entry-content,
body:has(.ciq-who) #no-title-page-wrapper,
body:has(.ciq-who) #content.container,
body:has(.ciq-who) #content.container > .row,
body:has(.ciq-who) #primary.content-area,
body:has(.ciq-who) #main.site-main,
body:has(.ciq-who) article.page,
body:has(.ciq-who) .entry-content {
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
}

/* Hero, closing strip, rule, facility block and pillars bar all break
   out of the theme's .container to run edge to edge. */
.ciq-who-hero,
.ciq-who-closing,
.ciq-who-rule,
.ciq-who-facility-block,
.ciq-who-pillars {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  position: relative;
}
.ciq-who img { max-width: 100%; height: auto; display: block; }
.ciq-who a { color: inherit; }
.ciq-who p { font-size: 1rem; color: var(--ciq-who-ink-soft); font-weight: 400; }
.ciq-who-section { padding: clamp(3rem, 7vw, 6rem) 1.5rem; }
.ciq-who-section.ciq-who-alt { background: var(--ciq-who-paper-alt); }
.ciq-who-rule {
  height: 2px;
  margin: 0;
  background: linear-gradient(90deg, var(--ciq-who-rule) 0%, var(--ciq-who-accent) 50%, var(--ciq-who-rule) 100%);
}
.ciq-who-hero {
  background: #1f2937;
  color: #f5f0eb;
  padding: clamp(3.5rem, 8vw, 6rem) 1.5rem clamp(3rem, 7vw, 5rem);
}
.ciq-who-hero .ciq-who-eyebrow {
  color: var(--ciq-who-accent);
  font-family: var(--ciq-who-mono);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
  display: inline-block;
  padding-right: 1rem;
  border-right: 2px solid var(--ciq-who-accent);
}
.ciq-who-hero h1 {
  font-family: var(--ciq-who-mono);
  /* IBM Plex Mono is already wide; negative tracking makes it look cramped
     around ligatures and between similar glyphs (r-i, m-p). Hold to 0 for
     evenness. */
  font-size: clamp(1.8rem, 3.6vw, 2.2rem);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0;
  margin: 0 0 1.25rem;
  color: #ffffff;
}
.ciq-who .ciq-who-accent-text { color: var(--ciq-who-accent); }
.ciq-who-hero p.ciq-who-hero-sub {
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  color: rgba(245, 240, 235, 0.8);
  line-height: 1.7;
  margin-bottom: 2rem;
  max-width: 42rem;
}
.ciq-who-hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.ciq-who-btn {
  display: inline-block;
  padding: 0.85rem 1.5rem;
  font-family: var(--ciq-who-mono);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.ciq-who-btn-primary {
  background: var(--ciq-who-accent);
  color: #ffffff;
  border-color: var(--ciq-who-accent);
}
.ciq-who-btn-primary:hover {
  background: #a0521a;
  border-color: #a0521a;
  color: #ffffff;
}
.ciq-who-btn-ghost {
  background: transparent;
  color: #f5f0eb;
  border-color: rgba(245, 240, 235, 0.5);
}
.ciq-who-btn-ghost:hover {
  background: rgba(245, 240, 235, 0.1);
  border-color: #f5f0eb;
  color: #ffffff;
}
/* No chrome on the hero visual - image fills its column. */
.ciq-who-hero-visual {
  padding: 0;
  background: transparent;
  border: 0;
}
.ciq-who-hero-visual img {
  border: 0;
  box-shadow: none;
  width: 100%;
  height: auto;
}
/* Specificity note: .ciq-who p (0,1,1) beats the single-class caption
   selector (0,1,0), so qualify with .ciq-who to match specificity, then
   source order wins. */
.ciq-who p.ciq-who-hero-visual-caption {
  font-family: var(--ciq-who-mono);
  font-size: 0.82rem;
  color: #ffffff;
  margin: 1rem 0 0;
  line-height: 1.55;
}
.ciq-who-label {
  font-family: var(--ciq-who-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ciq-who-accent);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.ciq-who-label::before {
  content: '';
  width: 24px;
  height: 2px;
  background: var(--ciq-who-accent);
  flex-shrink: 0;
}
/* Centred variant - dashes on both sides of the label. Used on the
   facility-block heading where the sentence is centred under the H2
   styling. */
.ciq-who-label-center {
  justify-content: center;
  text-align: center;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2.5rem;
}
.ciq-who-label-center::after {
  content: '';
  width: 24px;
  height: 2px;
  background: var(--ciq-who-accent);
  flex-shrink: 0;
}
.ciq-who-title {
  font-family: var(--ciq-who-mono);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ciq-who-ink);
  margin: 0 0 1.5rem;
}
.ciq-who .ciq-who-full {
  width: 100%;
  border-radius: 4px;
  object-fit: cover;
}
/* Shared "slight shadow pop" treatment - applied to every content photo
   on the page so the facility drone, the two-image pair, and the
   How We Work / Industry Leaders photos all share the same surface
   language. Pattern borrowed from SD's .sd-img-pop. */
.ciq-who .ciq-who-img-pop {
  border-radius: 4px;
  box-shadow:
    0 0 0 1px rgba(31, 41, 55, 0.06),
    0 10px 32px rgba(31, 41, 55, 0.18);
  border: 1px solid rgba(31, 41, 55, 0.06);
  transition: box-shadow 0.2s ease;
}
.ciq-who .ciq-who-pair img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Facility block - full-width warm background behind the H2 + facility
   image + Raj/Patrick pair. Matches the hero's edge-to-edge behaviour. */
.ciq-who-facility-block {
  background: var(--ciq-who-paper-alt);
  padding: clamp(3rem, 6vw, 5rem) 1.5rem;
}
.ciq-who-section-heading {
  font-family: var(--ciq-who-mono);
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-weight: 600;
  color: var(--ciq-who-ink);
  text-align: center;
  max-width: 880px;
  margin: 0 auto 2.5rem;
  line-height: 1.55;
  letter-spacing: -0.005em;
}

/* Extra vertical spacing when two rows stack inside the same section */
.ciq-who-row-spaced { margin-top: clamp(3rem, 6vw, 5rem); }

/* Pillars bar - thin 4-column strip sitting directly against the hero
   (no gap, no separator). Warm beige background like SD's .sd-pillars.
   Small mono uppercase H3 + short body copy, modest vertical padding. */
.ciq-who-pillars {
  background: #e8e5e1;
  padding: clamp(1.75rem, 3.5vw, 2.75rem) 0;
}
.ciq-who-pillar {
  text-align: center;
  padding: 0.5rem 1rem;
}
.ciq-who-pillar h3 {
  font-family: var(--ciq-who-mono);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ciq-who-ink);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 0.5rem;
}
.ciq-who-pillar p {
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--ciq-who-ink-soft);
  margin: 0;
  font-weight: 400;
}

/* Centred title variant - used on the facility block where the H2
   heads a centred intro paragraph instead of a two-column row. */
.ciq-who .ciq-who-title-center {
  text-align: center;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1rem;
}
/* Intro paragraph that sits under a centred title */
.ciq-who .ciq-who-intro {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 2.5rem;
  font-size: 1.05rem;
  line-height: 1.7;
}
.ciq-who-closing {
  background: #1f2937;
  color: #f5f0eb;
  padding: clamp(3rem, 6vw, 4.5rem) 1.5rem;
  text-align: center;
}
.ciq-who-closing h2 {
  font-family: var(--ciq-who-mono);
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: #ffffff;
  margin: 0 0 1rem;
  letter-spacing: -0.01em;
}
.ciq-who-closing p {
  color: rgba(245, 240, 235, 0.8);
  max-width: 36rem;
  margin: 0 auto 1.75rem;
}
/* Mobile / tablet - below Bootstrap's lg breakpoint, col-lg-* stacks.
   Centre every block on the page (text, headings, buttons, labels).
   Images are already width:100% block elements so they sit centred
   by default; the margin auto here handles any image that isn't. */
@media (max-width: 991.98px) {
  .ciq-who,
  .ciq-who-hero,
  .ciq-who-section,
  .ciq-who-hero .col-lg-7,
  .ciq-who-hero .col-lg-5,
  .ciq-who-section .col-lg-6 {
    text-align: center;
  }
  .ciq-who-hero h1,
  .ciq-who-hero p,
  .ciq-who-hero-sub,
  .ciq-who .ciq-who-title,
  .ciq-who-section p {
    text-align: center;
  }
  .ciq-who-hero-actions { justify-content: center; }
  .ciq-who .ciq-who-label { justify-content: center; }
  .ciq-who .ciq-who-full,
  .ciq-who .ciq-who-img-pop,
  .ciq-who .ciq-who-pair img {
    margin-left: auto;
    margin-right: auto;
  }
  /* Constrain hero visual + image columns so they don't hit viewport edges */
  .ciq-who-hero-visual,
  .ciq-who-section .col-lg-6 > img,
  .ciq-who-section .col-lg-6 > a {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
  }
}
@media (max-width: 767.98px) {
  .ciq-who-label { font-size: 0.72rem; }
  .ciq-who-hero { padding: 2.5rem 1.25rem; }
}

/* ============================================================
   CHECKOUT - outside-Victoria notice + beta acknowledgement
   ============================================================ */
.ciq-outside-vic-notice {
  margin: 16px 0;
  padding: 12px 16px;
  background: var(--ciq-error-light);
  border: 1px solid var(--ciq-error);
  border-left: 4px solid var(--ciq-error);
  color: var(--ciq-error-text);
  font-weight: 500;
  font-size: 0.95rem;
  line-height: 1.5;
}
.ciq-outside-vic-notice p { margin: 0; }

/* Beta acknowledgement checkbox uses WC's native form_field render so
   it looks like every other checkout checkbox. Only override the parts
   that bleed from theme defaults (all-caps labels, bold weight) so the
   long sentence reads as body copy. */
.ciq-beta-ack label {
  text-transform: none !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 1.5 !important;
}

/* Dev-environment flag rendered next to the brand when WP_DEBUG is on.
   Red, small, all-caps, easy to see in peripheral vision so Patrick
   never loses track of which environment he's hitting. */
.ciq-dev-flag {
  display: inline-block;
  margin-left: 12px;
  padding: 2px 8px;
  background: var(--ciq-error);
  color: #fff;
  font-family: var(--ciq-font-heading);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  border-radius: 2px;
  vertical-align: middle;
  cursor: help;
}

/* Beta-software flag rendered on subsites in production only. Muted
   amber notice - visible enough to set expectations, not so loud that
   it competes with operator workflow. */
.ciq-beta-flag {
  display: inline-block;
  margin-left: 12px;
  padding: 2px 8px;
  background: var(--ciq-warning-light);
  color: var(--ciq-warning-text);
  border: 1px solid var(--ciq-warning-border);
  font-family: var(--ciq-font-heading);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  border-radius: 2px;
  vertical-align: middle;
  cursor: help;
}

/* AORA conference launch-deal callout on /pricing/. Mirrors the flyer
   palette - accent orange ground with the paper colour as text - so
   the block reads as a continuation of the printed material people
   picked up at the conference. Centred per Patrick's brief. */
.ciq-launch-deal {
  background: var(--ciq-accent);
  color: var(--ciq-paper);
  text-align: center;
  padding: 32px 28px;
  margin: 32px 0;
  border-radius: 6px;
}
.ciq-launch-deal h2,
.ciq-launch-deal p {
  color: var(--ciq-paper);
}
.ciq-launch-deal h2 {
  margin-top: 0;
  margin-bottom: 16px;
}
.ciq-launch-deal p:last-child {
  margin-bottom: 0;
}