/* =========================================================================
   Intech — storefront theme
   =========================================================================
   The customer-facing half of the panel, wearing the admin's own clothes.
   admin/redesign.css settled this look already (near-black primary, zinc
   neutrals, hairline borders, shadows that barely exist), so the theme takes
   the same decisions rather than inventing a second set: an owner moving
   between their storefront and their admin should not feel they changed
   product.

   Written fresh rather than forked from Simplify. It keeps the --smm-* token
   names on purpose - the same names mean the same things in both files, and
   anyone who has read one can read the other.

   Three widths, the same three the admin uses:

     < 768px    app shape: fixed bottom nav, no rail
     768-1199   icon rail, labels hidden
     >= 1200    full sidebar with labels

   Icons are inline SVG in the templates - stroke, 1.5px, 24-box. No icon
   font and no CDN: every other theme here points at a CDN that has since
   gone NXDOMAIN, and an icon set that cannot 404 is worth the few bytes.
   ====================================================================== */

/* ---------------------------------------------------------------- tokens */

:root {
  --bg:            #fafafa;
  --surface:       #ffffff;
  --surface-2:     #f4f4f5;
  --surface-3:     #e4e4e7;
  --border:        #e4e4e7;
  --border-strong: #d4d4d8;

  --text:          #09090b;
  --muted:         #52525b;
  /* Was #a1a1aa: 2.56:1 on white, which is below the 4.5:1 WCAG AA needs
     for body text. This token is the placeholder colour, the table header
     colour and every "meta" label in the theme, so it was the most-read
     failing colour on the panel. #71717a measures 4.83:1. */
  --faint:         #71717a;
  --invert:        #ffffff;

  --primary:       #18181b;
  --primary-hover: #27272a;
  --primary-soft:  #f4f4f5;
  --accent:        #2563eb;
  --accent-hover:  #1d4ed8;
  --accent-soft:   #eff6ff;
  --on-accent:     #ffffff;

  --success:       #15803d;  --success-soft: #f0fdf4;
  --warning:       #b45309;  --warning-soft: #fffbeb;
  --danger:        #dc2626;  --danger-soft:  #fef2f2;
  --info:          #2563eb;  --info-soft:    #eff6ff;

  --radius-sm:  8px;
  --radius:    10px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(9,9,11,.04);
  --shadow:    0 1px 2px rgba(9,9,11,.05);
  --shadow-md: 0 8px 24px rgba(9,9,11,.08);

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 40px;

  --sidebar-w:  240px;
  --rail-w:      68px;
  --topbar-h:    60px;
  --bottomnav-h: 62px;

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --t: .16s;

  color-scheme: light;
}

/* Dark follows the system unless the toggle has said otherwise. Both the
   media query and the attribute set the same tokens, so nothing below this
   block ever needs a second rule. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            #09090b;
    --surface:       #18181b;
    --surface-2:     #27272a;
    --surface-3:     #3f3f46;
    --border:        #27272a;
    --border-strong: #3f3f46;
    --text:          #fafafa;
    --muted:         #a1a1aa;
    --faint:         #8b8b93;
    --invert:        #09090b;
    --primary:       #fafafa;
    --primary-hover: #e4e4e7;
    --primary-soft:  #27272a;
    --accent:        #60a5fa;
    --accent-hover:  #93c5fd;
    --accent-soft:   #1e293b;
    --on-accent:     #09090b;
    --success:       #4ade80;  --success-soft: #14301f;
    --warning:       #fbbf24;  --warning-soft: #33280f;
    --danger:        #f87171;  --danger-soft:  #341c1e;
    --info:          #60a5fa;  --info-soft:    #1e293b;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow:    0 1px 2px rgba(0,0,0,.45);
    --shadow-md: 0 8px 24px rgba(0,0,0,.55);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg:            #09090b;
  --surface:       #18181b;
  --surface-2:     #27272a;
  --surface-3:     #3f3f46;
  --border:        #27272a;
  --border-strong: #3f3f46;
  --text:          #fafafa;
  --muted:         #a1a1aa;
  --faint:         #8b8b93;
  --invert:        #09090b;
  --primary:       #fafafa;
  --primary-hover: #e4e4e7;
  --primary-soft:  #27272a;
  --accent:        #60a5fa;
  --accent-hover:  #93c5fd;
  --accent-soft:   #1e293b;
  --on-accent:     #09090b;
  --success:       #4ade80;  --success-soft: #14301f;
  --warning:       #fbbf24;  --warning-soft: #33280f;
  --danger:        #f87171;  --danger-soft:  #341c1e;
  --info:          #60a5fa;  --info-soft:    #1e293b;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow:    0 1px 2px rgba(0,0,0,.45);
  --shadow-md: 0 8px 24px rgba(0,0,0,.55);
  color-scheme: dark;
}

/* ------------------------------------------------------------------ base */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body.it {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.it h1, .it h2, .it h3, .it h4 {
  margin: 0 0 var(--sp-3);
  font-weight: 600;
  letter-spacing: -.018em;
  line-height: 1.25;
  color: var(--text);
}
.it h1 { font-size: 26px; letter-spacing: -.024em; }
.it h2 { font-size: 20px; }
.it h3 { font-size: 16px; }
.it h4 { font-size: 14px; }
.it p  { margin: 0 0 var(--sp-3); }

.it a { color: var(--text); text-decoration: none; }
.it a:hover { color: var(--accent); }

.it img { max-width: 100%; height: auto; }

.it hr { border: 0; border-top: 1px solid var(--border); margin: var(--sp-5) 0; }

.it small, .it .muted { color: var(--muted); }
.it .faint { color: var(--faint); }

/* The icon element. One size, one stroke, so a row of them lines up without
   per-icon nudging. */
.it .i {
  width: 20px; height: 20px;
  flex: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  vertical-align: -4px;
}
.it .i--sm { width: 16px; height: 16px; vertical-align: -3px; }
.it .i--lg { width: 24px; height: 24px; }

/* ---------------------------------------------------------------- layout */

.it-shell { display: flex; min-height: 100vh; }

.it-side {
  position: fixed;
  top: 0; bottom: 0; left: 0;
  width: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-right: 1px solid var(--border);
  z-index: 1040;
}

.it-side__brand {
  display: flex; align-items: center; gap: var(--sp-3);
  height: var(--topbar-h);
  padding: 0 var(--sp-4);
  border-bottom: 1px solid var(--border);
  font-weight: 650;
  letter-spacing: -.02em;
  white-space: nowrap;
  overflow: hidden;
}
.it-side__brand img { max-height: 28px; width: auto; }

.it-side__nav {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--sp-3) var(--sp-3) var(--sp-5);
}
.it-side__group {
  margin: var(--sp-4) 0 var(--sp-2);
  padding: 0 var(--sp-3);
  font-size: 10.5px; font-weight: 650;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--faint);
}
.it-side__group:first-child { margin-top: 0; }

.it-nav {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 9px var(--sp-3);
  margin-bottom: 2px;
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: 13.5px; font-weight: 500;
  white-space: nowrap;
  transition: background var(--t) ease, color var(--t) ease;
}
.it-nav:hover { background: var(--surface-2); color: var(--text); }
.it-nav.is-active { background: var(--surface-2); color: var(--text); font-weight: 600; }
.it-nav__label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
.it-nav__badge {
  flex: none;
  padding: 1px 7px; border-radius: var(--radius-pill);
  background: var(--primary); color: var(--invert);
  font-size: 10.5px; font-weight: 650;
}

.it-body {
  flex: 1 1 auto;
  min-width: 0;
  margin-left: var(--sidebar-w);
  display: flex;
  flex-direction: column;
}

/* --------------------------------------------------------------- top bar */

.it-top {
  position: sticky; top: 0; z-index: 1030;
  display: flex; align-items: center; gap: var(--sp-3);
  height: var(--topbar-h);
  padding: 0 var(--sp-5);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(10px) saturate(1.4);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  border-bottom: 1px solid var(--border);
}
/* min-width:0, or this does not shrink. A flex item's automatic minimum size
   is its min-content, and a page title is one long word's worth of that at
   least - so it held its full width and pushed everything to its right off the
   end of the bar instead of trimming itself. */
.it-top__title {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 15px; font-weight: 600; letter-spacing: -.012em;
}
.it-top__spacer { flex: 1 1 auto; }

.it-balance {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: 13px;
  white-space: nowrap;
}
.it-balance b { font-weight: 650; font-variant-numeric: tabular-nums; }
.it-balance span { color: var(--faint); font-size: 11px; }

.it-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  transition: background var(--t) ease, color var(--t) ease, border-color var(--t) ease;
}
.it-iconbtn:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); }

.it-main {
  flex: 1 1 auto;
  padding: var(--sp-5);
  padding-bottom: var(--sp-6);
}
.it-wrap { max-width: 1240px; margin: 0 auto; }

/* ------------------------------------------------------------ page head */

.it-head { margin-bottom: var(--sp-5); }
.it-head h1 { margin-bottom: 4px; }
.it-head p { margin: 0; color: var(--muted); }

/* ----------------------------------------------------------------- card */

.it-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.it-card__head {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border);
}
.it-card__head h2, .it-card__head h3 { margin: 0; font-size: 15px; }
.it-card__body { padding: var(--sp-5); }
.it-card__body > :last-child { margin-bottom: 0; }

.it-grid { display: grid; gap: var(--sp-4); }
.it-grid--2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.it-grid--3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* ----------------------------------------------------------------- stat */

.it-stat {
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.it-stat__k {
  display: flex; align-items: center; gap: var(--sp-2);
  color: var(--faint);
  font-size: 11px; font-weight: 650;
  letter-spacing: .07em; text-transform: uppercase;
}
.it-stat__v {
  margin-top: 6px;
  font-size: 24px; font-weight: 650;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.it-stat__s { margin-top: 2px; font-size: 12.5px; color: var(--muted); }

/* -------------------------------------------------------------- buttons */

.it-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: 9px 16px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--primary);
  color: var(--invert);
  font-family: inherit; font-size: 13.5px; font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t) ease, border-color var(--t) ease, color var(--t) ease;
}
.it-btn:hover { background: var(--primary-hover); color: var(--invert); }
.it-btn--ghost {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
.it-btn--ghost:hover { background: var(--surface-2); border-color: var(--border-strong); color: var(--text); }
.it-btn--accent { background: var(--accent); color: var(--on-accent); }
.it-btn--accent:hover { background: var(--accent-hover); color: var(--on-accent); }
.it-btn--danger { background: var(--danger); color: #fff; }
.it-btn--block { width: 100%; }
/* 43px with the padding alone, which is under the 44 a finger needs and a
   shade shorter than the 46px controls it sits under on the order form. */
.it-btn--lg { min-height: 46px; padding: 12px 20px; font-size: 14.5px; }
.it-btn--sm { padding: 6px 11px; font-size: 12.5px; }
.it-btn[disabled], .it-btn.is-disabled { opacity: .55; pointer-events: none; }

/* ---------------------------------------------------------------- forms */

.it-field { margin-bottom: var(--sp-4); }
.it-field:last-child { margin-bottom: 0; }
.it-label {
  display: block;
  margin-bottom: 6px;
  font-size: 12.5px; font-weight: 600;
  color: var(--text);
}
.it-label .req { color: var(--danger); }
.it-hint { margin: 6px 0 0; font-size: 12px; color: var(--muted); }

.it-input, .it-select, .it-textarea {
  display: block;
  width: 100%;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.4;
  transition: border-color var(--t) ease, box-shadow var(--t) ease;
}
.it-textarea { min-height: 110px; resize: vertical; }
.it-input:focus, .it-select:focus, .it-textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);
}
.it-input::placeholder, .it-textarea::placeholder { color: var(--faint); }

/* The arrow is drawn rather than fetched, so the control has no image to
   404 the way the themes that inherited a dead CDN do. */
.it-select {
  appearance: none; -webkit-appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2352525b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
}
:root[data-theme="dark"] .it-select,
:root:not([data-theme="light"]) .it-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .it-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2352525b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  }
}

.it-check { display: flex; align-items: flex-start; gap: var(--sp-3); font-size: 13.5px; }
.it-check input { width: 16px; height: 16px; margin: 2px 0 0; flex: none; accent-color: var(--primary); }

/* The reveal button sits inside the field's box rather than beside it, so a
   password input is the same width as every other input on the form. */
.it-reveal { position: relative; }
.it-reveal .it-input { padding-right: 42px; }
.it-reveal__btn {
  position: absolute; top: 50%; right: 6px;
  transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  padding: 0; border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--faint);
  cursor: pointer;
}
.it-reveal__btn:hover { background: var(--surface-2); color: var(--text); }

.it-hint.is-ok  { color: var(--success); }
.it-hint.is-bad { color: var(--warning); }

/* A one-time code is read back digit by digit, so it gets the spacing to be
   read that way rather than the body font's. */
.it-code {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: 22px;
  letter-spacing: .32em;
  text-align: center;
  padding-block: 14px;
}
.it-code::placeholder { letter-spacing: .32em; color: var(--surface-3); }

/* ---------------------------------------------------------------- table */

.it-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.it-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.it-table th {
  padding: 10px var(--sp-4);
  border-bottom: 1px solid var(--border);
  color: var(--faint);
  font-size: 11px; font-weight: 650;
  letter-spacing: .07em; text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
}
.it-table td {
  padding: 13px var(--sp-4);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.it-table tbody tr:last-child td { border-bottom: 0; }
.it-table tbody tr:hover { background: var(--surface-2); }
.it-table .num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Placed over the API. Small, quiet and monospaced - it is a fact about the
   order, not a status, so it does not borrow the status colours. */
.it-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--surface-3);
  color: var(--muted);
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 9.5px; font-weight: 650; letter-spacing: .06em;
  vertical-align: 2px;
}

/* --------------------------------------------------------------- badges */

.it-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 11.5px; font-weight: 600;
  white-space: nowrap;
}
.it-badge--ok      { background: var(--success-soft); color: var(--success); }
.it-badge--warn    { background: var(--warning-soft); color: var(--warning); }
.it-badge--danger  { background: var(--danger-soft);  color: var(--danger); }
.it-badge--info    { background: var(--info-soft);    color: var(--info); }

/* --------------------------------------------------------------- alerts */

.it-alert {
  display: flex; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 13.5px;
}
.it-alert--ok     { background: var(--success-soft); border-color: color-mix(in srgb, var(--success) 30%, transparent); color: var(--success); }
.it-alert--danger { background: var(--danger-soft);  border-color: color-mix(in srgb, var(--danger) 30%, transparent);  color: var(--danger); }
.it-alert--warn   { background: var(--warning-soft); border-color: color-mix(in srgb, var(--warning) 30%, transparent); color: var(--warning); }
.it-alert__x {
  margin-left: auto;
  background: none; border: 0; padding: 0;
  color: inherit; opacity: .6; cursor: pointer;
}
.it-alert__x:hover { opacity: 1; }

/* ---------------------------------------------------------------- empty */

.it-empty {
  padding: var(--sp-6) var(--sp-5);
  text-align: center;
  color: var(--muted);
}
.it-empty .i { width: 32px; height: 32px; color: var(--faint); margin-bottom: var(--sp-3); }
.it-empty h3 { margin-bottom: 4px; }

/* -------------------------------------------------------------- toolbar */

.it-toolbar {
  display: flex; align-items: center; gap: var(--sp-3) var(--sp-4);
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}

/* The tab strip scrolls sideways rather than wrapping to a second line: seven
   statuses on a phone would otherwise push the table down a whole row. */
.it-tabs {
  display: flex; gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}
.it-tabs::-webkit-scrollbar { display: none; }
.it-tab {
  flex: none;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  color: var(--muted);
  font-size: 13px; font-weight: 500;
  white-space: nowrap;
  transition: background var(--t) ease, color var(--t) ease;
}
.it-tab:hover { background: var(--surface-2); color: var(--text); }
.it-tab.is-active { background: var(--primary); color: var(--invert); font-weight: 600; }

/* .it-tab was written for the <a> Orders uses. Tickets filters in the browser,
   so its tabs are <button> - which a browser gives its own border, background,
   font and cursor, none of which the rule above overrides. Said here rather
   than at each use, so the next button tab looks like the anchors beside it. */
button.it-tab {
  border: 0; background: transparent;
  font-family: var(--font); cursor: pointer;
}
/* A filter strip sits between a heading and a card, so it needs the gap a tab
   bar at the top of a page does not. */
.it-tabs--filter { margin-bottom: var(--sp-3); }

.it-search { position: relative; display: flex; align-items: center; margin-left: auto; }
.it-search--wide { min-width: min(340px, 100%); }
.it-search .i { position: absolute; left: 11px; color: var(--faint); pointer-events: none; }
.it-search .it-input { padding-left: 36px; min-width: 200px; }
@media (max-width: 767.98px) {
  .it-search { margin-left: 0; width: 100%; }
  .it-search .it-input { min-width: 0; width: 100%; }
}

/* ------------------------------------------------------------ table cells */

.it-cell-link a { color: var(--accent); }
.it-cell-link { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.it-cell-service { max-width: 340px; }

/* --------------------------------------------------- one list, two shapes */

.it-only-narrow { display: none; }
@media (max-width: 767.98px) {
  .it-only-wide   { display: none; }
  .it-only-narrow { display: block; }
  /* Named with both classes because .it-orders below would otherwise win on
     source order alone and leave the card list on screen at every width -
     which is what it did the first time. */
  .it-orders.it-only-narrow,
  .it-svcs.it-only-narrow { display: grid; }
}

/* No display here: the width decides it, above. */
/* ---- services on a phone -------------------------------------------------
   The catalogue as cards. The table stays for wide screens; below the
   breakpoint the three figures a customer reads for - price, minimum,
   maximum - go under the name in a row of their own instead of off the right
   edge behind a scroll nobody finds. Built from the same loop as the table,
   so a column added there is added here.

   Padded and separated like .it-order, deliberately: a customer moving
   between Orders and Services should not have to learn a second card. */
/* No display here either: .it-only-narrow hides it above and the media
   query below turns it on, for the reason recorded there. */
.it-svcs { gap: var(--sp-3); padding: var(--sp-3); }
.it-svc-c {
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.it-svc-c__top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.it-svc-c__id { font-weight: 650; font-size: 12.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
.it-svc-c__name { margin: var(--sp-2) 0 0; font-size: 13.5px; line-height: 1.45; }
.it-svc-c__meta {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-2) var(--sp-3); margin: var(--sp-3) 0 0;
}
.it-svc-c__meta dt { font-size: 11px; color: var(--faint); font-weight: 600; }
.it-svc-c__meta dd { margin: 1px 0 0; font-size: 13.5px; font-variant-numeric: tabular-nums; }
/* The one action a card carries. Full width, because on a phone a button that
   is not is a button somebody misses. */
.it-svc-c__act { margin: var(--sp-3) 0 0; }
.it-svc-c__act .it-btn { width: 100%; justify-content: center; }
/* The order button is the point of the card, so it gets the full width and
   its own air rather than trailing the figures. */
.it-svc-c .it-btn--block { margin-top: var(--sp-3); }
.it-svc-c .it-svc__more { margin-top: var(--sp-3); }

.it-orders { gap: var(--sp-3); }
.it-order {
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.it-order__top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.it-order__id { font-weight: 650; font-variant-numeric: tabular-nums; }
.it-order__service { margin: var(--sp-3) 0 2px; font-size: 13.5px; }
.it-order__link {
  display: block; color: var(--accent); font-size: 12.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.it-order__meta {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3); margin: var(--sp-4) 0 0;
}
.it-order__meta dt { font-size: 11px; color: var(--faint); font-weight: 600; }
.it-order__meta dd { margin: 1px 0 0; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.it-order__foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  margin-top: var(--sp-4); padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
  font-size: 12px;
}

/* --------------------------------------------------------------- pager */

.it-pager {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-4);
  margin-top: var(--sp-5);
}
.it-pager__at { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------- services */

.it-cat { margin-bottom: var(--sp-4); }
.it-cat__n { margin-left: auto; }
.it-svc__more {
  margin-left: var(--sp-2);
  padding: 1px 7px;
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: transparent; color: var(--muted);
  font-family: inherit; font-size: 11px; font-weight: 600;
  cursor: pointer;
}
.it-svc__more:hover { background: var(--surface-2); color: var(--text); }
.it-svc__desc {
  margin-top: var(--sp-2);
  padding: var(--sp-3);
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  font-size: 12.5px; line-height: 1.55;
  color: var(--muted);
  white-space: normal;
}
.it-svc__desc img { border-radius: var(--radius-sm); }

/* ------------------------------------------------------------- new order */

/* minmax(0,1fr), not the default auto track.
   A grid track sized `auto` is at least the min-content of what is in it, and
   a card holding an eighty-character service name has a wide one. At 375 that
   stretched the single column to 392 and the document to 409, so the whole page
   scrolled sideways: everything centred looked off-centre and the top bar's
   "Add funds" was cut in half. The two-column rule below already guarded its
   first track this way; the one-column default did not. */
.it-order-grid { display: grid; grid-template-columns: minmax(0, 1fr);
                 gap: var(--sp-4); align-items: start; }
@media (min-width: 1000px) {
  .it-order-grid { grid-template-columns: minmax(0, 1fr) 300px; gap: var(--sp-5); }
  .it-side-col { position: sticky; top: calc(var(--topbar-h) + var(--sp-4)); }
}
.it-side-col { display: grid; gap: var(--sp-4); }

/* The server writes the service's own fields in here. It has no classes of
   this theme's, so the shapes it uses are matched instead - see the fallback
   layer at the end of this file for the rest. */
#neworder_fields .form-group { margin-bottom: var(--sp-4); }
#neworder_fields label { display: block; margin-bottom: 6px; font-size: 12.5px; font-weight: 600; }
/* These are the fields anyone actually types into - the link and the quantity -
   and they were the old .form-control shape: 14px in a 10/12 box with the small
   radius, directly under this theme's own 46px, 15px selects. Same form, two
   designs, and the join was halfway down it. Matched to the controls above.

   The selector is (1,0,1) - an id and an attribute - so it quietly beats every
   `.it .form-control` rule in the sheet. Anything meant to reach these fields
   has to be set here; that is why the values are repeated rather than left to
   the control rule near the end of the file. */
#neworder_fields input[type="text"],
#neworder_fields input[type="number"],
#neworder_fields input[type="url"],
#neworder_fields textarea,
#neworder_fields select {
  display: block; width: 100%;
  min-height: 46px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--text);
  font-family: inherit; font-size: 15px;
}
/* Under 16px iOS zooms the viewport when a field takes focus, and these are
   the two fields a phone customer fills on every order. */
@media (max-width: 640px) {
  #neworder_fields input[type="text"],
  #neworder_fields input[type="number"],
  #neworder_fields input[type="url"],
  #neworder_fields textarea,
  #neworder_fields select { font-size: 16px; }
}
#neworder_fields input:focus, #neworder_fields textarea:focus, #neworder_fields select:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);
}
#neworder_fields .hidden { display: none; }

.it-desc-slot:empty { display: none; }

.it-charge {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
}
.it-charge__row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.it-charge__k { font-size: 13px; color: var(--muted); font-weight: 600; }
.it-charge__v {
  width: auto; max-width: 55%;
  padding: 0; border: 0; background: none;
  color: var(--text);
  font-family: inherit; font-size: 22px; font-weight: 650;
  letter-spacing: -.02em; text-align: right;
  font-variant-numeric: tabular-nums;
}
.it-charge__v:focus { outline: none; }
.it-charge__note { margin: var(--sp-3) 0 0; font-size: 12px; color: var(--muted); text-align: center; }
.it-charge__note a { color: var(--accent); }

/* On a phone the price and the button stay put while the fields scroll: the
   two things checked last should not be the two furthest away. */
@media (max-width: 767.98px) {
  .it-charge {
    position: sticky;
    bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px));
    margin: var(--sp-4) calc(var(--sp-4) * -1) calc(var(--sp-4) * -1);
    padding: var(--sp-3) var(--sp-4) var(--sp-4);
    background: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: 0 -2px 10px rgba(9,9,11,.06);
  }
  .it-charge__note { display: none; }
}

.it-news article { padding-bottom: var(--sp-3); margin-bottom: var(--sp-3); border-bottom: 1px solid var(--border); font-size: 13px; }
.it-news article:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
.it-news p { margin: 0 0 4px; font-size: 11.5px; }

/* ----------------------------------------------------------------- auth */

.it-auth {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-5) var(--sp-4);
}
.it-auth__card {
  width: 100%; max-width: 420px;
  padding: var(--sp-6) var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.it-auth__brand {
  display: block; margin-bottom: var(--sp-5);
  font-weight: 650; font-size: 17px; letter-spacing: -.02em;
}
.it-auth__brand img { max-height: 32px; width: auto; }
.it-auth__title { margin-bottom: 4px; font-size: 22px; }
.it-auth__sub { margin-bottom: var(--sp-5); color: var(--muted); font-size: 13.5px; }
.it-auth__foot { margin: var(--sp-5) 0 0; text-align: center; font-size: 13px; color: var(--muted); }
.it-auth__foot a { color: var(--accent); font-weight: 600; }

/* A rule with the word on it, drawn rather than three elements. */
.it-auth__or {
  display: flex; align-items: center; gap: var(--sp-3);
  margin: var(--sp-5) 0;
  color: var(--faint); font-size: 12px;
}
.it-auth__or::before, .it-auth__or::after {
  content: ""; flex: 1; height: 1px; background: var(--border);
}
.it-auth__social { display: grid; gap: var(--sp-2); }
/* auth.php's blob opens with its own <hr>, for themes whose sign-in box has no
   separator of its own. This one draws .it-auth__or directly above it, so the
   two stacked into a double rule under the word "or". */
.it-auth__social hr { display: none; }

/* The reset at .it p is (0,1,1) and this class is (0,1,0), so the top margin
   below has never once applied - the divider above happened to be supplying
   the gap, and removing it left the sign-up line welded to the button. */
.it .it-auth__foot { margin-top: var(--sp-5); }

/* Two fields per row where there is room, one where there is not. */
.it-pair { display: grid; gap: 0 var(--sp-4); }
@media (min-width: 760px) { .it-pair { grid-template-columns: 1fr 1fr; } }

@media (max-width: 767.98px) {
  .it-auth { padding: var(--sp-4); align-items: flex-start; }
  .it-auth__card { padding: var(--sp-5) var(--sp-4); border-radius: var(--radius); }
}

/* -------------------------------------------------------------- account */

/* Who you are and what you have, read before anything asks to be filled in. */
.it-idcard {
  display: flex; align-items: center; gap: var(--sp-4) var(--sp-5);
  flex-wrap: wrap;
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.it-idcard__who { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.it-idcard__who strong { font-size: 15px; letter-spacing: -.01em; }
.it-idcard__who p { margin: 1px 0 0; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; }
.it-avatar {
  flex: none;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--primary); color: var(--invert);
  font-size: 17px; font-weight: 650;
}
.it-idcard__figs { display: flex; gap: var(--sp-5); margin: 0 0 0 auto; }
.it-idcard__figs dt { font-size: 11px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); }
.it-idcard__figs dd { margin: 2px 0 0; font-size: 18px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
@media (max-width: 767.98px) {
  .it-idcard { padding: var(--sp-4); }
  .it-idcard__figs { margin-left: 0; gap: var(--sp-4); }
}

/* Two columns of cards where there is room, one where there is not. Grouped
   rather than stacked: eleven forms down a single column means scrolling past
   ten to reach the one you came for. */
.it-cols { display: grid; gap: var(--sp-5); align-items: start; }
@media (min-width: 1000px) { .it-cols { grid-template-columns: 1fr 1fr; } }
.it-col { display: grid; gap: var(--sp-4); align-content: start; }
.it-col__head {
  margin: 0;
  font-size: 11px; font-weight: 650;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--faint);
}
.it-col .it-card__head h3 { margin: 0; font-size: 14.5px; }
.it-col .it-card__head .it-badge { margin-left: auto; }

/* A connected service is a row, not a card: they are read as a list of
   on-or-off, and giving each its own border makes three boxes of one. */
.it-conns { display: grid; gap: 0; }
.it-conn {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border);
}
.it-conn:first-child { padding-top: 0; }
.it-conn:last-child { padding-bottom: 0; border-bottom: 0; }
.it-conn b { font-size: 13.5px; }
.it-conn p { margin: 1px 0 0; font-size: 12px; }

/* The password policy, ticking as it is met. The mark is a ring that fills
   and takes a tick, so the state does not rest on colour alone. */
.it-rules { list-style: none; margin: var(--sp-2) 0 0; padding: 0; display: grid; gap: 4px; }
.it-rules li {
  display: flex; align-items: center; gap: var(--sp-2);
  color: var(--muted); font-size: 12.5px;
}
.it-rules__mark {
  width: 14px; height: 14px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--border-strong); background: var(--surface);
  position: relative;
}
.it-rules li.is-met { color: var(--text); }
.it-rules li.is-met .it-rules__mark { border-color: var(--success); background: var(--success); }
.it-rules li.is-met .it-rules__mark::after {
  content: ""; position: absolute; left: 4px; top: 1px;
  width: 3px; height: 7px; border: solid #fff; border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}

/* --------------------------------------------------- settings rows

   A settings list, for the several one-field forms an account page collects.
   Each row is its own <form> posting to its own route - they have to be, the
   controller has a route per field - but they share one card instead of
   taking a head, a body and a button apiece. What the setting is and what it
   currently says sit on the left; the control that changes it on the right.

   Two columns once there is room for the label to stop crowding the field,
   one below that. The label column is capped rather than fractional so the
   input keeps a usable width on a laptop. */
.it-setrows { display: block; }
.it-setrow {
  display: grid; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border);
}
.it-setrow:last-child { border-bottom: 0; }
@media (min-width: 700px) {
  .it-setrow {
    grid-template-columns: minmax(0, 190px) minmax(0, 1fr);
    align-items: start; gap: var(--sp-5);
  }
}
.it-setrow__k { display: block; margin: 0; font-size: 13.5px; font-weight: 600; color: var(--text); }
/* Owner emails and time-zone names are long and unbroken; without this the
   value sets the column's min-content and the field beside it is squeezed. */
.it-setrow__v {
  margin: 2px 0 0; min-width: 0;
  color: var(--muted); font-size: 12.5px; overflow-wrap: anywhere;
}
.it-setrow__act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
/* 140, not 190. This page puts the rows inside one of two page columns, so
   the control side is about 260px on a laptop - at a 190px basis the button
   no longer fitted beside the field and dropped to its own line. At 140 they
   share a line and the field still takes whatever is left. */
.it-setrow__act .it-input, .it-setrow__act .it-select { flex: 1 1 140px; min-width: 0; }
.it-setrow__act .it-btn { flex: 0 0 auto; }
/* The note goes under both, on its own line, rather than wrapping around the
   button and pushing it about. */
.it-setrow__note { flex: 1 1 100%; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }

.it-key {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: 13px;
  letter-spacing: .02em;
}

/* Owner-written HTML. It brings its own tags and no classes, so the shapes it
   can contain are given the theme's treatment rather than left to the
   browser's defaults. */
.it-prose { margin-bottom: var(--sp-5); overflow-wrap: break-word; }
.it-prose h1, .it-prose h2, .it-prose h3 { margin-top: var(--sp-4); }
.it-prose h1:first-child, .it-prose h2:first-child, .it-prose h3:first-child { margin-top: 0; }
.it-prose ul, .it-prose ol { margin: 0 0 var(--sp-3); padding-left: var(--sp-5); }
.it-prose li { margin-bottom: 4px; }
.it-prose a { color: var(--accent); }
.it-prose img { border-radius: var(--radius-sm); }
.it-prose table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.it-prose td, .it-prose th { padding: 8px var(--sp-3); border-bottom: 1px solid var(--border); text-align: left; }

/* ------------------------------------------------------- shared shapes */

/* A page that is one form does not need the full width to say so. */
.it-narrow { max-width: 520px; }

.it-back {
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: var(--sp-3);
  color: var(--muted); font-size: 12.5px; font-weight: 600;
}
.it-back:hover { color: var(--text); }
.it-back .i { transform: rotate(180deg); }

.it-facts { margin: 0 0 var(--sp-4); display: grid; gap: var(--sp-3); }
.it-facts > div { display: flex; justify-content: space-between; gap: var(--sp-4); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--border); }
.it-facts > div:last-child { padding-bottom: 0; border-bottom: 0; }
.it-facts dt { color: var(--muted); font-size: 13px; }
.it-facts dd { margin: 0; font-weight: 650; font-variant-numeric: tabular-nums; }

.it-pre {
  margin: 0 0 var(--sp-3);
  padding: var(--sp-3);
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: 12.5px; line-height: 1.6;
  overflow-x: auto;
  white-space: pre;
}
.it-mass {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: 13px; line-height: 1.7;
  min-height: 220px;
  white-space: pre;
}

/* A readonly value with its own copy button. The input flexes and the button
   does not, so a long value never squeezes the button off the row. */
.it-copy { display: flex; gap: var(--sp-2); }
.it-copy .it-input { flex: 1 1 auto; min-width: 0; }
.it-copy .it-btn { flex: none; }
.it-copy .it-btn.is-done { background: var(--success); border-color: var(--success); color: #fff; }

/* ---------------------------------------------------------- add funds */

/* ---- add funds -----------------------------------------------------------
   The balance, the method's own terms, the quick amounts and the settlement.
   All four were facts the page already had and did not print. */

/* The one number a customer came here to change. It was a sentence in the
   subheading, in the smallest type on the page. */
.it-bal { margin-bottom: var(--sp-4); }
.it-bal__in {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-3); padding: var(--sp-4);
}
.it-bal__k { font-size: 12.5px; color: var(--faint); font-weight: 600; }
.it-bal__v {
  font-size: 26px; font-weight: 700; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

/* A method card carries a name and, under it, what the method costs and what
   it pays. Two lines, so a long name does not push the terms off the row. */
.it-pay__body { flex: 1 1 auto; min-width: 0; }
.it-pay__terms {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-top: 3px;
}
.it-pay__lim { font-size: 11.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
.it-tag--ok   { background: var(--success-soft); color: var(--success); }
.it-tag--warn { background: var(--warning-soft); color: var(--warning); }

/* Quick amounts. Buttons, so they are reachable by keyboard and say what they
   do; the ladder itself is built from the method's own floor and ceiling. */
.it-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.it-chips .it-chip {
  cursor: pointer; font-family: var(--font); color: var(--text);
  font-variant-numeric: tabular-nums;
}
.it-chips .it-chip:hover { background: var(--surface-3); }
.it-chips .it-chip.is-on {
  background: var(--primary); border-color: var(--primary); color: var(--invert);
}

/* What the panel will actually credit, worked out the way the server does it.
   A ledger, not a pair of read-only inputs pretending to be fields. */
.it-sum {
  margin: var(--sp-4) 0 0; padding: var(--sp-3) var(--sp-4);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius); font-size: 13.5px;
}
.it-sum__row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-3); padding: 3px 0;
}
.it-sum__row dt { color: var(--muted); }
.it-sum__row dd { margin: 0; font-variant-numeric: tabular-nums; }
.it-sum__row.is-out dd { color: var(--warning); }
.it-sum__row.is-in  dd { color: var(--success); }
.it-sum__row.is-total {
  margin-top: 4px; padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
}
.it-sum__row.is-total dt { color: var(--text); font-weight: 600; }
.it-sum__row.is-total dd { font-weight: 700; }

.it-pays { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.it-pay {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color var(--t) ease, background var(--t) ease;
}
.it-pay:hover { background: var(--surface-2); }
.it-pay input { width: 16px; height: 16px; margin: 0; flex: none; accent-color: var(--primary); }
.it-pay__name { flex: 1 1 auto; font-size: 13.5px; font-weight: 500; }
.it-pay__tick { opacity: 0; color: var(--primary); }
.it-pay:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.it-pay:has(input:checked) .it-pay__tick { opacity: 1; }

/* .it label wins on specificity.
   ------------------------------------------------------------------------
   Line 1725 sets `.it label, .it .control-label { display: inline-block }` -
   two selectors, so (0,1,1) - against .it-pay's (0,1,0). A payment method is
   a <label>, so its display:flex above has never applied and the row has
   never been a flex row. Nothing showed while the card held one line of text;
   the tick simply sat after the name. Adding the method's limits and its
   bonus underneath gave it a second line, and the tick dropped onto a third.

   Matched on the same weight rather than !important, so the next person to
   read .it-pay sees a rule that works instead of one that is overridden four
   hundred lines later. */
.it .it-pay { display: flex; align-items: center; }

/* ------------------------------------------------------------- tickets */

.it-threads { display: grid; }
.it-thread {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border);
}
.it-thread:last-child { border-bottom: 0; }
.it-thread:hover { background: var(--surface-2); }
.it-thread__main { flex: 1 1 auto; min-width: 0; }
.it-thread__main b { font-size: 13.5px; }
.it-thread__main p { margin: 1px 0 0; font-size: 12px; }
.it-thread.is-new .it-thread__main b { font-weight: 700; }
.it-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

.it-thread-view { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.it-msg {
  max-width: 88%;
  margin-left: auto;
  padding: var(--sp-3) var(--sp-4);
  background: var(--primary); color: var(--invert);
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-sm) var(--radius-lg);
}
.it-msg--them {
  margin-left: 0; margin-right: auto;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) var(--radius-sm);
}
.it-msg__who { font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; opacity: .75; margin-bottom: 4px; }
.it-msg__who span { text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: 6px; }
.it-msg--them .it-msg__who { color: var(--faint); opacity: 1; }
.it-msg__body { font-size: 13.5px; line-height: 1.55; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- blog */

.it-posts { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.it-post {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--t) ease, box-shadow var(--t) ease;
}
@media (hover: hover) { .it-post:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); } }
.it-post__img {
  aspect-ratio: 16 / 9;
  display: grid; place-items: center;
  background: var(--surface-2);
  color: var(--faint);
  overflow: hidden;
}
.it-post__img img { width: 100%; height: 100%; object-fit: cover; }
.it-post__title { margin: 0; padding: var(--sp-4); font-size: 14.5px; line-height: 1.4; }

.it-article { max-width: 720px; }
.it-article__img { width: 100%; border-radius: var(--radius-lg); margin-bottom: var(--sp-4); }

/* --------------------------------------------------------- referrals */

.it-reflink { margin-bottom: var(--sp-4); }
.it-refstats { margin-bottom: var(--sp-4); }

/* ------------------------------------------------------ child panels */

.it-ns { margin-bottom: var(--sp-5); }
.it-ns h3 { margin-bottom: 4px; }
.it-ns__pair { display: grid; gap: var(--sp-2); margin-top: var(--sp-3); }
@media (min-width: 760px) { .it-ns__pair { grid-template-columns: 1fr 1fr; } }

.it-plans { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.it-plan { display: block; cursor: pointer; }
.it-plan input { position: absolute; opacity: 0; width: 0; height: 0; }
.it-plan__box {
  display: block;
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  transition: border-color var(--t) ease, box-shadow var(--t) ease;
}
.it-plan input:checked + .it-plan__box {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
}
.it-plan input:focus-visible + .it-plan__box { outline: 2px solid var(--accent); outline-offset: 2px; }
.it-plan__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.it-plan__top b { font-size: 15px; }
.it-plan__price { font-size: 17px; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.it-plan__feats { display: grid; gap: 4px; margin-top: var(--sp-3); }
.it-plan__feats span { display: flex; align-items: flex-start; gap: 7px; font-size: 12.5px; color: var(--muted); }
.it-plan__feats .i { color: var(--success); margin-top: 2px; }

.it-code--wide { letter-spacing: .18em; }

/* ------------------------------------------------------- signed-out bar */

.it-pubnav {
  position: sticky; top: 0; z-index: 1035;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px) saturate(1.4);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  border-bottom: 1px solid var(--border);
}
/* The bar's background is full-bleed and its contents are not.
   ------------------------------------------------------------------
   The markup asked for that with `class="wrap it-pubnav__in"`, and `.wrap`
   has no rule in this stylesheet - it is the marketing site's container
   class, carried over with the markup. So the bar had no gutter and no
   ceiling at any width: the brand sat hard against x=0, Get started against
   the right edge, and on a wide screen the two stretched to 1366+ while the
   page under them stayed centred.

   The measurements belong to `.it-pubnav__in` rather than to a shared
   container class, because that split is what this element is for. Same
   1240px as .it-wrap and the same gutter as .it-main, so the brand lines up
   with the content below it. */
.it-pubnav__in {
  display: flex; align-items: center; gap: var(--sp-4);
  height: var(--topbar-h);
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: var(--sp-5);
}
.it-pubnav__brand {
  flex: none;
  display: flex; align-items: center; gap: var(--sp-3);
  font-weight: 650; font-size: 15px; letter-spacing: -.02em;
  white-space: nowrap;
}
.it-pubnav__brand img { max-height: 26px; width: auto; display: block; }

/* The mark. A filled square carrying the first letter of the site name -
   no asset, so it works on a panel whose owner never uploaded a logo, which
   is most of them. Square-ish rather than round: the panel's cards and
   buttons are all soft rectangles and a circle here reads as a foreign
   avatar. */
.it-pubnav__mark {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 9px;
  background: var(--text);
  color: var(--bg);
  font-size: 14px; font-weight: 700; line-height: 1;
}

/* The links scroll sideways rather than wrapping the bar to two rows: a
   panel can have a dozen public pages and the bar has one row to give. */
.it-pubnav__links {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: var(--sp-2);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.it-pubnav__links::-webkit-scrollbar { display: none; }
.it-pubnav__links a {
  flex: none;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: 13.5px; font-weight: 500;
  white-space: nowrap;
}
.it-pubnav__links a:hover { background: var(--surface-2); color: var(--text); }
.it-pubnav__links a.is-active { color: var(--text); font-weight: 600; }

.it-pubnav__acts { flex: none; display: flex; align-items: center; gap: var(--sp-2); }

/* -------------------------------------------------- the signed-out drawer */

/* The burger is the desktop's spare part and the phone's only control. */
.it-pubnav__burger { display: none; margin-inline-start: auto; }

/* The drawer sits outside .it-pubnav__in - it is a sibling of the bar row,
   not a child - so it needs the same gutter and ceiling of its own, or its
   links start at x=0 while the brand above them starts at 16. */
.it-pubdrawer {
  display: none;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: var(--sp-5);
}
.it-pubdrawer__links { display: flex; flex-direction: column; }
.it-pubdrawer__links a {
  padding: 12px 2px;
  color: var(--muted);
  font-size: 15px; font-weight: 500;
  border-bottom: 1px solid var(--border);
}
.it-pubdrawer__links a.is-active { color: var(--text); font-weight: 600; }
.it-pubdrawer__acts {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding-top: var(--sp-4);
}

/* Below 1200 the links and the buttons move into the drawer.
   ------------------------------------------------------------------
   1200 because that is where the panel's own shell swaps its sidebar for a
   drawer, so both sides of the panel change shape at the same width rather
   than at two numbers a hundred pixels apart.

   This replaces two earlier attempts at the same problem, both of which
   treated the symptom. The bar used to hide "Sign in" under 560px to buy the
   links room to scroll, and the links strip carried a fade so its clipping
   read as a scroller rather than as breakage. Neither made the menu usable:
   measured at 375px the strip was 89px holding 369px of links, so five of the
   six sat past the edge whatever the edge looked like. A drawer gives all of
   them a full-width row and needs no scrolling sideways at all. */
@media (max-width: 1199.98px) {
  .it-pubnav__links,
  .it-pubnav__acts { display: none; }
  .it-pubnav__burger { display: inline-flex; }

  .it-pubdrawer {
    flex-direction: column;
    padding: var(--sp-4) 0 var(--sp-5);
    border-top: 1px solid var(--border);
  }
  .it-pubdrawer.is-open { display: flex; }
}

/* The signed-out page body. No sidebar, so the content is centred on the
   page rather than offset by a rail. */
.it-pub .it-main { padding-top: var(--sp-5); }

/* ---------------------------------------------------------- index split */

/* The signed-out index: pitch beside the form above 900px, form first below
   it. Not centred like the other bare pages - this one has two things to
   show and centring a 420px card next to a column of text just moves both
   off their own axes. */
.it-auth--split {
  align-items: center;
  justify-content: center;
  gap: var(--sp-6);
  max-width: 1060px;
  margin-inline: auto;
}
@media (min-width: 900px) {
  .it-auth--split { display: grid; grid-template-columns: minmax(0, 1fr) 420px; }
  .it-auth--split .it-auth__card { width: 100%; max-width: none; }
}

.it-pitch { min-width: 0; }
/* Below 900 the pitch follows the form: somebody who came to sign in should
   not scroll past an advert to reach the box. */
@media (max-width: 899.98px) {
  .it-auth--split { display: flex; flex-direction: column; gap: var(--sp-5); }
  .it-pitch { order: 2; }
  .it-auth--split .it-auth__card { order: 1; }
}

.it-pitch__eyebrow {
  margin: 0 0 var(--sp-2);
  font-size: 11px; font-weight: 650;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--faint);
}
.it-pitch__head {
  margin: 0 0 var(--sp-5);
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 650;
  letter-spacing: -.028em;
  line-height: 1.15;
  max-width: 18ch;
  text-wrap: balance;
}
.it-pitch__list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sp-3); }
.it-pitch__list li {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  font-size: 13.5px; line-height: 1.55; color: var(--muted);
  max-width: 46ch;
}
.it-pitch__list .i { flex: none; margin-top: 2px; color: var(--text); }

.it-pitch__label {
  margin: var(--sp-5) 0 var(--sp-2);
  font-size: 11px; font-weight: 650;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--faint);
}
.it-pitch__prices { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; max-width: 420px; }
.it-pitch__price {
  /* A grid item's automatic minimum is its min-content too, so this row had
     to be let off the same leash as the span inside it - otherwise the row
     stayed 578px wide in a 420px grid and the span never got the chance to
     truncate. Both are needed; neither alone does anything. */
  min-width: 0;
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4);
  padding: 10px var(--sp-4);
  background: var(--surface);
  font-size: 13px;
}
/* min-width: 0 is what makes the ellipsis work at all.
   A flex item's automatic minimum size is its min-content, and with
   `white-space: nowrap` that is the whole service name unwrapped - so the
   name never truncated, it pushed the row wider instead, and the row pushed
   the 420px grid, the pitch, and the page. Measured on a stocked catalogue at
   412px: the document scrolled to 501. Service names here are written by the
   panel's owner and run to eighty characters, so this is the normal case, not
   an edge one. */
.it-pitch__price span {
  min-width: 0;
  color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.it-pitch__price b { flex: none; font-variant-numeric: tabular-nums; }

/* Reviews under the pitch. Not the bordered grid the prices use - a price list
   is a table and a quote is not, so these sit on the ground with a rule down
   the side, which is what a pull quote has always looked like. Two at most:
   the sidebar is beside a sign-in form, and a third pushes the form off a
   laptop screen. */
.it-quotes { display: grid; gap: var(--sp-3); max-width: 420px; }
.it-quote { margin: 0; padding: 0 0 0 var(--sp-3); border-left: 2px solid var(--border); }
.it-quote blockquote {
  margin: 0 0 var(--sp-2);
  font-size: 13.5px; line-height: 1.6; color: var(--muted);
}
.it-quote figcaption {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: 12.5px; font-weight: 600; color: var(--text);
}
.it-quote figcaption img,
.it-quote__initial {
  width: 26px; height: 26px; flex: none; border-radius: 50%;
  object-fit: cover;
}
/* No avatar is the common case, so the fallback is designed rather than left
   as a broken image. */
.it-quote__initial {
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); color: var(--muted);
  font-size: 11.5px; font-weight: 700;
}

/* --------------------------------------------------------------- footer */

.it-foot {
  border-top: 1px solid var(--border);
  padding: var(--sp-5);
  color: var(--muted);
  font-size: 12.5px;
}
.it-foot__in {
  display: flex; align-items: center; gap: var(--sp-3) var(--sp-5);
  flex-wrap: wrap;
}
.it-foot nav { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-4); margin-left: auto; }
.it-foot a { color: var(--muted); }
.it-foot a:hover { color: var(--text); }
@media (max-width: 767.98px) {
  .it-foot nav { margin-left: 0; }
  .it-foot { padding: var(--sp-4); }
}

/* ------------------------------------------------------------ bottom nav */

.it-bottom {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1045;
  background: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: 0 -1px 3px rgba(9,9,11,.06);
  /* clear of the iOS home indicator, like the admin's own bar */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.it-bottom__in { display: flex; align-items: stretch; height: var(--bottomnav-h); }
.it-bottom a {
  flex: 1 1 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px;
  color: var(--faint);
  font-size: 10.5px; font-weight: 600;
  min-width: 0;
}
.it-bottom a span {
  max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.it-bottom a.is-active { color: var(--primary); }
.it-bottom a.is-active .i { transform: translateY(-1px); }

/* ------------------------------------------------------- whatsapp button */

/* WhatsApp's own green, because this button is recognised by its colour
   rather than by belonging to the theme - the one place a literal is right. */
.it-wa {
  position: fixed;
  bottom: var(--sp-5);
  z-index: 1044;
  display: grid; place-items: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  box-shadow: 0 6px 18px rgba(9,9,11,.22);
  transition: transform var(--t) ease;
}
.it-wa--right { right: var(--sp-5); }
.it-wa--left  { left:  var(--sp-5); }
@media (hover: hover) { .it-wa:hover { transform: translateY(-2px); color: #fff; } }

/* Above the app bar, not behind it - and clear of the home indicator. */
@media (max-width: 767.98px) {
  .it-wa {
    bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px) + var(--sp-3));
    width: 46px; height: 46px;
  }
  .it-wa--right { right: var(--sp-4); }
  .it-wa--left  { left:  var(--sp-4); }
}

/* -------------------------------------------------------------- drawer */

.it-scrim {
  display: none;
  position: fixed; inset: 0;
  background: rgba(9,9,11,.45);
  z-index: 1039;
}
.it-scrim.is-open { display: block; }

/* ==========================================================================
   Three widths
   ========================================================================== */

/* --- tablet: the sidebar becomes an icon rail ------------------------- */
@media (max-width: 1199.98px) and (min-width: 768px) {
  .it-side { width: var(--rail-w); }
  .it-body { margin-left: var(--rail-w); }
  .it-side__brand { justify-content: center; padding: 0; }
  .it-side__brand .it-brand__text { display: none; }
  .it-side__group { display: none; }
  .it-nav { justify-content: center; padding: 11px 0; }
  .it-nav__label, .it-nav__badge { display: none; }
  /* The label has to exist somewhere once it is off the screen. */
  .it-nav { position: relative; }
  .it-main { padding: var(--sp-4); }
  /* The signed-out bar takes the same narrower gutter, so the brand keeps
     lining up with the content under it rather than stepping in and out. */
  .it-pubnav__in,
  .it-pubdrawer { padding-inline: var(--sp-4); }
}

/* --- phone: no rail at all, a fixed app bar along the bottom ---------- */
@media (max-width: 767.98px) {
  .it-side {
    width: min(84vw, 300px);
    transform: translateX(-100%);
    transition: transform var(--t) ease;
    box-shadow: var(--shadow-md);
  }
  .it-side.is-open { transform: none; }
  .it-body { margin-left: 0; }
  .it-top { padding: 0 var(--sp-4); }
  .it-main {
    padding: var(--sp-4) var(--sp-4);
    /* room for the bar, and for the home indicator under it */
    padding-bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px) + var(--sp-5));
  }
  .it-bottom { display: block; }
  /* The bar carries a burger, a title, the balance pill, Add funds and the
     theme toggle. At 375 those measure 422: Add funds was squeezed to its
     icon - "Add fu" - and the theme toggle sat entirely off-screen, with no
     way to reach it on a phone.

     The balance is the one that goes. It is the widest of them at 144px, and
     it is the only one already said twice elsewhere on the phone layout: the
     bottom bar this rule switches on has a Funds tab, and every page that
     needs the number shows it in the page itself. */
  .it-balance { display: none; }
  /* Same narrower gutter as .it-main above, so the signed-out bar's brand
     stays on the same left edge as the content under it. */
  .it-pubnav__in,
  .it-pubdrawer { padding-inline: var(--sp-4); }
  .it-card__body { padding: var(--sp-4); }
  .it-card__head { padding: var(--sp-3) var(--sp-4); }
  .it h1 { font-size: 22px; }
  .it-stat__v { font-size: 21px; }
  /* A table on a phone scrolls in its own box rather than widening the page. */
  .it-table { min-width: 560px; }
}

/* --- desktop ---------------------------------------------------------- */
@media (min-width: 1200px) {
  .it-burger { display: none; }
}

/* The burger only exists below the rail breakpoint. */
.it-burger { display: none; }
@media (max-width: 767.98px) { .it-burger { display: inline-flex; } }

/* ------------------------------------------------------------- a11y ---- */

.it a:focus-visible,
.it button:focus-visible,
.it input:focus-visible,
.it select:focus-visible,
.it textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.it-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .it *, .it *::before, .it *::after {
    transition-duration: .001ms !important;
    animation-duration: .001ms !important;
  }
}

/* ==========================================================================
   Fallback pages
   ==========================================================================
   A page this theme does not carry falls through to Simplify, which is
   Bootstrap markup. Rather than ship a copy of Bootstrap to make those look
   right, the handful of classes those pages actually lean on are given the
   same treatment as their Intech equivalents. It is not Bootstrap - it is
   enough that a fallen-through page reads as part of this theme instead of
   as unstyled HTML.
   ====================================================================== */

.it .container, .it .container-fluid { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 var(--sp-4); }
.it .row { display: flex; flex-wrap: wrap; margin: 0 -8px; }
.it [class*="col-"] { padding: 0 8px; width: 100%; }
@media (min-width: 768px) {
  .it .col-md-6 { width: 50%; } .it .col-md-4 { width: 33.3333%; }
  .it .col-md-3 { width: 25%; }  .it .col-md-8 { width: 66.6667%; }
  .it .col-md-12 { width: 100%; }
}
@media (min-width: 992px) {
  .it .col-lg-6 { width: 50%; } .it .col-lg-4 { width: 33.3333%; }
  .it .col-lg-3 { width: 25%; } .it .col-lg-8 { width: 66.6667%; }
}

/* A card drawn around owner-written HTML. The padding used to live only on
   .card-body, on the assumption that pasted Bootstrap always brings one - and
   the stock FAQ does not: it wraps each answer in faq-block__* divs instead.
   So the box got a border and no padding, and the text sat flush against it,
   which reads as text escaping its container. Pad the card itself, and stand
   down when it does carry a body or header of its own, which pads for us.
   Without :has() a well-formed card is merely roomy, never broken. */
.it .card, .it .panel, .it .well {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  margin-bottom: var(--sp-4);
  padding: var(--sp-5);
}
.it .card:has(> .card-body), .it .card:has(> .card-header),
.it .panel:has(> .panel-body), .it .panel:has(> .panel-heading),
.it .well:has(> .card-body) { padding: 0; }
.it .card-body, .it .panel-body { padding: var(--sp-5); }
.it .card-header, .it .panel-heading {
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border);
  font-weight: 600;
}

.it .form-control { /* same box as .it-input */
  display: block; width: 100%;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: inherit; font-size: 14px;
}
.it .form-control:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);
}
.it label, .it .control-label { font-size: 12.5px; font-weight: 600; color: var(--text); margin-bottom: 6px; display: inline-block; }
.it .form-group { margin-bottom: var(--sp-4); }

.it .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: 9px 16px;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--text);
  font-size: 13.5px; font-weight: 600; line-height: 1.2;
  cursor: pointer; text-decoration: none;
}
.it .btn-primary { background: var(--primary); color: var(--invert); }
.it .btn-primary:hover { background: var(--primary-hover); color: var(--invert); }
.it .btn-danger  { background: var(--danger); color: #fff; }
.it .btn-success { background: var(--success); color: #fff; }
.it .btn-block   { width: 100%; }

.it .table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.it .table th { padding: 10px var(--sp-4); border-bottom: 1px solid var(--border); color: var(--faint); font-size: 11px; text-transform: uppercase; letter-spacing: .07em; text-align: left; }
.it .table td { padding: 13px var(--sp-4); border-bottom: 1px solid var(--border); }

.it .alert {
  padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4);
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); font-size: 13.5px;
}
.it .alert-success { background: var(--success-soft); color: var(--success); border-color: color-mix(in srgb, var(--success) 30%, transparent); }
.it .alert-danger  { background: var(--danger-soft);  color: var(--danger);  border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
.it .alert-warning { background: var(--warning-soft); color: var(--warning); border-color: color-mix(in srgb, var(--warning) 30%, transparent); }
.it .alert-info    { background: var(--info-soft);    color: var(--info);    border-color: color-mix(in srgb, var(--info) 30%, transparent); }

.it .label, .it .badge {
  display: inline-block; padding: 3px 9px; border-radius: var(--radius-pill);
  background: var(--surface-2); color: var(--muted);
  font-size: 11.5px; font-weight: 600;
}
.it .label-success, .it .badge-success { background: var(--success-soft); color: var(--success); }
.it .label-danger,  .it .badge-danger  { background: var(--danger-soft);  color: var(--danger); }
.it .label-warning, .it .badge-warning { background: var(--warning-soft); color: var(--warning); }

.it .text-center { text-align: center; }
.it .text-right  { text-align: right; }
.it .d-flex      { display: flex; }
.it .hidden      { display: none; }
.it .mt-3 { margin-top: var(--sp-3); }   .it .mb-3 { margin-bottom: var(--sp-3); }
.it .mt-4 { margin-top: var(--sp-4); }   .it .mb-4 { margin-bottom: var(--sp-4); }

/* =========================================================================
   PREMIUM LAYER
   -------------------------------------------------------------------------
   Everything above is the working theme: tokens, layout and the components
   the 37 templates already use. Everything below raises it to the finish a
   paid SaaS product is expected to have, without renaming a single class -
   the templates keep working untouched, and the polish arrives on all of
   them at once.

   Ordering is deliberate. These rules sit after the originals so the plain
   ones stay as the fallback: if a browser cannot parse a modern value here
   (color-mix, backdrop-filter) it keeps the flat version above rather than
   losing the component altogether.
   ========================================================================= */

/* ------------------------------------------------------- extended tokens */
/* The originals carry three shadows. A premium surface needs a real
   elevation ladder instead: each step is two shadows, a tight contact
   shadow that anchors the edge and a wide ambient one that lifts it. One
   shadow alone is what makes a card look printed on rather than resting. */
:root {
  --e1: 0 1px 2px rgba(9,9,11,.04), 0 1px 3px rgba(9,9,11,.06);
  --e2: 0 2px 4px rgba(9,9,11,.04), 0 4px 12px rgba(9,9,11,.07);
  --e3: 0 4px 8px rgba(9,9,11,.05), 0 12px 28px rgba(9,9,11,.10);
  --e4: 0 8px 16px rgba(9,9,11,.06), 0 24px 56px rgba(9,9,11,.14);

  /* One ring, used by every focusable thing. Defined as a token so a skin
     changes the focus colour with everything else and never falls out of
     step with the accent. */
  --ring:       0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
  --ring-danger:0 0 0 3px color-mix(in srgb, var(--danger) 28%, transparent);

  /* A hairline that reads as a border on any surface, including over an
     image, where a solid grey line would look pasted on. */
  --hairline: color-mix(in srgb, var(--text) 8%, transparent);

  --grad-accent: linear-gradient(135deg,
                   color-mix(in srgb, var(--accent) 92%, white),
                   var(--accent) 55%,
                   color-mix(in srgb, var(--accent) 88%, black));
  --grad-sheen:  linear-gradient(180deg,
                   rgba(255,255,255,.10), rgba(255,255,255,0) 60%);

  /* Motion. Two durations and one easing curve, so nothing on screen moves
     at a speed nothing else uses. The curve overshoots very slightly, which
     is what separates "it moved" from "it responded". */
  --t-fast: .12s;
  --t-slow: .28s;
  --ease:   cubic-bezier(.22, 1, .36, 1);

  /* A named ladder, so a dropdown can never be accidentally filed beneath
     the sticky header it has to escape. */
  --z-base: 1;
  --z-sticky: 100;
  --z-side: 200;
  --z-dropdown: 300;
  --z-overlay: 400;
  --z-modal: 410;
  --z-toast: 500;

  --container: 1240px;
}

/* Dark needs its own shadows: the light ones are tuned for dark ink on a
   pale ground and vanish entirely on a near-black surface. Depth in dark UI
   comes from a lighter surface plus a top highlight, not from a darker
   shadow. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --e1: 0 1px 2px rgba(0,0,0,.5);
    --e2: 0 2px 6px rgba(0,0,0,.55);
    --e3: 0 8px 24px rgba(0,0,0,.6);
    --e4: 0 16px 48px rgba(0,0,0,.7);
    --hairline: color-mix(in srgb, white 10%, transparent);
    --grad-sheen: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 60%);
  }
}
:root[data-theme="dark"] {
  --e1: 0 1px 2px rgba(0,0,0,.5);
  --e2: 0 2px 6px rgba(0,0,0,.55);
  --e3: 0 8px 24px rgba(0,0,0,.6);
  --e4: 0 16px 48px rgba(0,0,0,.7);
  --hairline: color-mix(in srgb, white 10%, transparent);
  --grad-sheen: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 60%);
}

/* ------------------------------------------------------------------ skins */
/* Simplify ships twelve colour schemes as twelve near-identical 89KB
   stylesheets - the same rules over and over with one hue changed, which is
   why that theme is 1.5MB of CSS. Here a skin is the accent triplet and
   nothing else, because every component already draws from the token. Eight
   lines each, one HTTP request, and a skin can never drift from the
   components the way a forked stylesheet does.

   Set with data-skin on <html>. Absent, the default blue above applies. */
:root[data-skin="violet"]     { --accent-raw:#7c3aed; --accent:#7c3aed; --accent-hover:#6d28d9; --accent-soft:#f5f3ff; }
:root[data-skin="emerald"]    { --accent-raw:#059669; --accent:#059669; --accent-hover:#047857; --accent-soft:#ecfdf5; }
:root[data-skin="rose"]       { --accent-raw:#e11d48; --accent:#e11d48; --accent-hover:#be123c; --accent-soft:#fff1f2; }
:root[data-skin="amber"]      { --accent-raw:#d97706; --accent:#d97706; --accent-hover:#b45309; --accent-soft:#fffbeb; }
:root[data-skin="cyan"]       { --accent-raw:#0891b2; --accent:#0891b2; --accent-hover:#0e7490; --accent-soft:#ecfeff; }
:root[data-skin="indigo"]     { --accent-raw:#4f46e5; --accent:#4f46e5; --accent-hover:#4338ca; --accent-soft:#eef2ff; }
:root[data-skin="teal"]       { --accent-raw:#0d9488; --accent:#0d9488; --accent-hover:#0f766e; --accent-soft:#f0fdfa; }
:root[data-skin="orange"]     { --accent-raw:#ea580c; --accent:#ea580c; --accent-hover:#c2410c; --accent-soft:#fff7ed; }
:root[data-skin="fuchsia"]    { --accent-raw:#c026d3; --accent:#c026d3; --accent-hover:#a21caf; --accent-soft:#fdf4ff; }
:root[data-skin="lime"]       { --accent-raw:#4d7c0f; --accent:#4d7c0f; --accent-hover:#3f6212; --accent-soft:#f7fee7; }
:root[data-skin="slate"]      { --accent-raw:#475569; --accent:#475569; --accent-hover:#334155; --accent-soft:#f8fafc; }
:root[data-skin="crimson"]    { --accent-raw:#b91c1c; --accent:#b91c1c; --accent-hover:#991b1b; --accent-soft:#fef2f2; }

/* Derived from --accent-raw, never from --accent. A custom property that
   references itself is a cycle, and a cyclic property computes to nothing at
   all - which wiped the accent colour out of dark mode entirely for every
   skin rather than failing loudly.

   The soft tints are near-white and become unreadable panels on a dark
   ground, so dark mode lifts the accent and derives the tint from it. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-skin]  {
    --accent-soft: color-mix(in srgb, var(--accent-raw) 22%, #18181b);
    --accent:      color-mix(in srgb, var(--accent-raw) 72%, white);
    --accent-hover:color-mix(in srgb, var(--accent-raw) 55%, white);
  }
}
:root[data-theme="dark"][data-skin] {
  --accent-soft: color-mix(in srgb, var(--accent-raw) 22%, #18181b);
  --accent:      color-mix(in srgb, var(--accent-raw) 72%, white);
  --accent-hover:color-mix(in srgb, var(--accent-raw) 55%, white);
}

/* -------------------------------------------------- surfaces and elevation */
/* Cards were a flat border on a white ground. They keep the border - it is
   what holds the shape in dark mode, where shadows do almost nothing - and
   gain a real elevation plus a one-pixel top highlight, which is the detail
   that reads as a physical surface rather than a rectangle. */
.it .it-card {
  box-shadow: var(--e1);
  transition: box-shadow var(--t-slow) var(--ease),
              transform  var(--t-slow) var(--ease),
              border-color var(--t) var(--ease);
}
.it .it-card:hover { box-shadow: var(--e2); }

/* Only cards that are themselves a link or a control lift. A static panel
   that rises under the cursor is movement promising an action that is not
   there. */
.it a.it-card:hover,
.it .it-card--action:hover { transform: translateY(-2px); box-shadow: var(--e3); }

.it .it-card__head {
  border-bottom-color: var(--hairline);
  letter-spacing: -.01em;
}

/* --------------------------------------------------------------- top bar */
/* Frosted, so content scrolling underneath stays legible without the bar
   turning into an opaque slab. The fallback above stays in place for
   anything without backdrop-filter: the bar is simply solid there, which is
   correct rather than transparent-and-unreadable. */
@supports (backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px)) {
  .it .it-top {
    background: color-mix(in srgb, var(--surface) 78%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
  }
}
.it .it-top { border-bottom-color: var(--hairline); z-index: var(--z-sticky); }
.it .it-side { z-index: var(--z-side); }

/* ---------------------------------------------------------------- buttons */
/* The primary button carries the one gradient in the theme. Used once per
   screen it reads as the thing to press; used on every button it would read
   as decoration, which is why the ghost and default buttons stay flat. */
.it .it-btn {
  transition: background var(--t) var(--ease),
              border-color var(--t) var(--ease),
              box-shadow var(--t) var(--ease),
              transform var(--t-fast) var(--ease),
              color var(--t) var(--ease);
  will-change: transform;
}
.it .it-btn--accent {
  background: var(--grad-accent);
  border-color: color-mix(in srgb, var(--accent) 78%, black);
  box-shadow: var(--e1), inset 0 1px 0 rgba(255,255,255,.16);
}
.it .it-btn--accent:hover {
  box-shadow: var(--e2), inset 0 1px 0 rgba(255,255,255,.22);
  filter: brightness(1.04);
}
/* Pressed state moves one pixel and drops the lift. Without it a tap on a
   phone gives no acknowledgement at all until the next page paints. */
.it .it-btn:active   { transform: translateY(1px); }
.it .it-btn--accent:active { box-shadow: var(--e1); filter: brightness(.98); }

.it .it-btn[disabled], .it .it-btn[aria-disabled="true"] {
  opacity: .55; cursor: not-allowed; transform: none; filter: none; box-shadow: none;
}

/* A button that is working keeps its width and swaps its label for a
   spinner, so the row it sits in cannot jump under a thumb mid-press. */
.it .it-btn.is-loading { color: transparent !important; pointer-events: none; position: relative; }
.it .it-btn.is-loading::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 16px; height: 16px; margin: -8px 0 0 -8px;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; color: var(--on-accent);
  animation: it-spin .6s linear infinite;
}
.it .it-btn--ghost.is-loading::after,
.it .it-btn.is-loading:not(.it-btn--accent)::after { color: var(--text); }
@keyframes it-spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------------ focus */
/* One ring, on everything, and never removed. :focus-visible so it appears
   for keyboard users without trailing every mouse click around the screen.
   This is the single most common accessibility regression in a restyle, so
   it is stated once here for every control at the same time. */
.it a:focus-visible,
.it button:focus-visible,
.it [role="button"]:focus-visible,
.it .it-btn:focus-visible,
.it .it-iconbtn:focus-visible,
.it .it-tab:focus-visible,
.it .it-nav a:focus-visible,
.it .it-input:focus-visible,
.it .it-select:focus-visible,
.it .it-textarea:focus-visible,
.it input:focus-visible,
.it select:focus-visible,
.it textarea:focus-visible {
  outline: 2px solid transparent;      /* keeps a ring in forced-colors mode */
  outline-offset: 2px;
  box-shadow: var(--ring);
  border-color: var(--accent);
}
.it .it-input[aria-invalid="true"],
.it .it-input.is-error { border-color: var(--danger); }
.it .it-input[aria-invalid="true"]:focus-visible,
.it .it-input.is-error:focus-visible { box-shadow: var(--ring-danger); border-color: var(--danger); }

/* ------------------------------------------------------------------ forms */
.it .it-input, .it .it-select, .it .it-textarea {
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease),
              background var(--t) var(--ease);
}
.it .it-input:hover:not(:focus),
.it .it-select:hover:not(:focus),
.it .it-textarea:hover:not(:focus) { border-color: var(--border-strong); }
.it .it-input::placeholder, .it .it-textarea::placeholder { color: var(--faint); }

/* ------------------------------------------------------------------ table */
/* Digits get tabular figures so a column of prices lines up on the decimal
   and stops jittering as values refresh. */
.it .it-table { font-variant-numeric: tabular-nums; }
.it .it-table thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--surface-2);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  letter-spacing: .02em;
}
.it .it-table tbody tr { transition: background var(--t-fast) var(--ease); }
.it .it-tablewrap { box-shadow: var(--e1); }

/* --------------------------------------------------------------- stat card */
/* The number is the content; everything else is a caption for it. Given the
   accent as a hairline on the left so a row of stats has rhythm without
   twelve competing colours. */
.it .it-stat { position: relative; overflow: hidden; box-shadow: var(--e1); }
.it .it-stat::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--grad-accent); opacity: .9;
}
.it .it-stat__v { font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.it .it-stat:hover { box-shadow: var(--e2); }

/* ------------------------------------------------- the five unstyled parts */
/* All five already worked by inheriting .it-card or .it-table. They render,
   so nothing was visibly broken - they just had no treatment of their own,
   which is why the services list and the order form read as generic panels
   in a theme where everything else is considered. */

/* The services table is scanned, not read: hundreds of rows, one of which
   the customer is hunting for. Row height is tightened and the hovered row
   is lifted so the eye can track across a wide row without losing it. */
.it .it-svc tbody tr { cursor: pointer; }
.it .it-svc__row > td { padding-top: 10px; padding-bottom: 10px; }
.it .it-svc__row:hover > td { background: var(--accent-soft); }
.it .it-svc__row:focus-within > td { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.it .it-svc__row[hidden] { display: none; }

/* Shown when a filter matches nothing. The empty state is a designed state,
   not an accident: it says what would be here and what to do instead. */
.it .it-svc__none { text-align: center; padding: var(--sp-6) var(--sp-4); }
.it .it-svc__none[hidden] { display: none; }

/* The order form is the page that takes money, so it gets the one elevated
   surface on the screen and a slightly wider gutter than a plain card. */
.it .it-orderform { box-shadow: var(--e2); padding: var(--sp-5); }
@media (max-width: 640px) { .it .it-orderform { padding: var(--sp-4); } }

/* A reply box is an input area, not a document: the accent edge marks it as
   the thing you are expected to act in. */
.it .it-reply { border-left: 3px solid var(--accent); }

/* --------------------------------------------------------------- skeleton */
/* The loading half of every data view. A skeleton in the shape of the real
   content stops the layout jumping when the content lands, which a spinner
   followed by a swap cannot do. */
.it-skel {
  background: linear-gradient(90deg,
              var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);
  background-size: 400% 100%;
  animation: it-shimmer 1.4s ease infinite;
  border-radius: var(--radius-sm);
  display: block;
}
@keyframes it-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.it-skel--text  { height: 12px; margin: 8px 0; }
.it-skel--title { height: 18px; width: 40%; margin: 10px 0; }
.it-skel--line  { height: 12px; width: 100%; }
.it-skel--line.is-short { width: 60%; }
.it-skel--circle{ width: 40px; height: 40px; border-radius: 50%; }
.it-skel--row   { height: 44px; margin: 6px 0; }
.it-skel--card  { height: 120px; }

/* ------------------------------------------------------- empty and error */
/* The other two states. Both say what happened in words and offer the one
   action that resolves it - never a bare panel, never a raw error code. */
.it .it-empty__icon, .it-state__icon {
  width: 44px; height: 44px; margin: 0 auto var(--sp-3);
  display: grid; place-items: center;
  border-radius: var(--radius-lg);
  background: var(--surface-2); color: var(--muted);
}
.it-state {
  text-align: center; padding: var(--sp-6) var(--sp-4);
  color: var(--muted);
}
.it-state__title { font-size: 15px; font-weight: 600; color: var(--text); margin: 0 0 4px; }
.it-state__body  { margin: 0 auto var(--sp-4); max-width: 46ch; }
.it-state--error .it-state__icon { background: var(--danger-soft); color: var(--danger); }

/* ----------------------------------------------------------------- toast */
.it-toasts {
  position: fixed; z-index: var(--z-toast);
  right: var(--sp-4); bottom: calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: var(--sp-2);
  max-width: min(380px, calc(100vw - 32px));
}
.it-toast {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: 12px 14px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--e3);
  animation: it-toast-in var(--t-slow) var(--ease) both;
}
@keyframes it-toast-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.it-toast--ok    { border-left: 3px solid var(--success); }
.it-toast--warn  { border-left: 3px solid var(--warning); }
.it-toast--error { border-left: 3px solid var(--danger); }
.it-toast__x { margin-left: auto; background: none; border: 0; color: var(--faint); cursor: pointer; }

/* --------------------------------------------------------------- tooltip */
.it-tip { position: relative; }
.it-tip::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translate(-50%, 4px);
  padding: 6px 9px; border-radius: var(--radius-sm);
  background: var(--text); color: var(--invert);
  font-size: 12px; line-height: 1.3; white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
  z-index: var(--z-dropdown);
}
.it-tip:hover::after, .it-tip:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }

/* -------------------------------------------------------------- progress */
.it-progress { height: 6px; border-radius: var(--radius-pill); background: var(--surface-3); overflow: hidden; }
.it-progress__bar {
  height: 100%; border-radius: inherit;
  background: var(--grad-accent);
  transition: width var(--t-slow) var(--ease);
}
.it-progress--ok   .it-progress__bar { background: var(--success); }
.it-progress--warn .it-progress__bar { background: var(--warning); }

/* ------------------------------------------------------ segmented control */
.it-seg {
  display: inline-flex; padding: 3px; gap: 2px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius); 
}
.it-seg__btn {
  appearance: none; border: 0; background: none; cursor: pointer;
  padding: 6px 12px; min-height: 32px;
  border-radius: calc(var(--radius) - 4px);
  font: inherit; font-size: 13px; color: var(--muted);
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
}
.it-seg__btn:hover { color: var(--text); }
.it-seg__btn[aria-pressed="true"], .it-seg__btn.is-active {
  background: var(--surface); color: var(--text);
  box-shadow: var(--e1); font-weight: 550;
}

/* ------------------------------------------------------------ chip / kbd */
.it-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--radius-pill);
  background: var(--surface-2); border: 1px solid var(--border);
  font-size: 12.5px; color: var(--muted);
}
.it-chip--accent { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
.it-kbd {
  display: inline-block; padding: 2px 6px; min-width: 20px; text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px;
  background: var(--surface-2); border: 1px solid var(--border-strong);
  border-bottom-width: 2px; border-radius: 6px; color: var(--muted);
}

/* --------------------------------------------------------------- overlay */
.it-scrim, .it-overlay {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  background: color-mix(in srgb, #09090b 55%, transparent);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}

/* The phone drawer, stacked so it is actually usable.

   This sheet carries two generations of z-index. The older one put the scrim
   at 1039 under a 1045 bottom bar; the later token scale put the sidebar at
   --z-side 200 and the scrim at --z-overlay 400, and being later it won. So
   the scrim came out ON TOP of the drawer it is supposed to sit behind, and
   every tap on a menu row hit the scrim instead of the link - which closed the
   drawer. The menu could be opened, and nothing in it could be reached; it
   also explains why the open drawer looked washed out, because it was being
   painted through 55% black.

   The token scale is right for a desktop sidebar, which sits in the layout and
   is not modal. On a phone the same element is a modal surface, so it belongs
   above the scrim - and the scrim above the bottom bar, or that bar stays lit
   and clickable through a modal, and covers the last rows of the menu with it.
   Only the open state is touched; closed, the scrim is display:none. */
@media (max-width: 767.98px) {
  .it-scrim.is-open { z-index: 1050; }
  .it-side.is-open  { z-index: 1060; }
}
.it-sheet {
  position: fixed; z-index: var(--z-modal);
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - 32px)); max-height: 85vh; overflow: auto;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--e4);
  animation: it-sheet-in var(--t-slow) var(--ease) both;
}
@keyframes it-sheet-in { from { opacity: 0; transform: translate(-50%, -46%) scale(.98); } }
/* On a phone a centred dialog fights the keyboard; it becomes a bottom
   sheet instead, which is where a thumb already is. */
@media (max-width: 560px) {
  .it-sheet {
    top: auto; bottom: 0; left: 0; transform: none;
    width: 100%; max-height: 90vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  @keyframes it-sheet-in { from { opacity: 0; transform: translateY(12px); } }
}

/* ------------------------------------------------------- motion and a11y */
/* Anything decorative stops when the reader has asked for less movement.
   The shimmer and the spinner are the ones that matter: a permanent
   animation is a genuine problem for vestibular disorders, not a taste
   preference. */
@media (prefers-reduced-motion: reduce) {
  .it *, .it *::before, .it *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .it-skel { animation: none; background: var(--surface-2); }
}

/* Touch targets. An icon button at its natural 24px icon size is the usual
   violation; padded out here once rather than per component. */
@media (pointer: coarse) {
  .it .it-iconbtn, .it .it-btn--sm, .it .it-tab, .it .it-seg__btn { min-height: 44px; min-width: 44px; }
}

/* Screen-reader-only text that still takes focus - used for skip links. */
.it-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.it-sr-only:focus-visible {
  position: fixed; top: 12px; left: 12px; z-index: var(--z-toast);
  width: auto; height: auto; clip: auto; margin: 0;
  padding: 10px 14px; background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--e3);
}

/* Windows high-contrast mode draws its own colours and drops backgrounds;
   without this the only thing marking a selected row would disappear. */
@media (forced-colors: active) {
  .it .it-btn, .it .it-card, .it .it-input { border: 1px solid ButtonBorder; }
  .it .it-btn:focus-visible { outline: 2px solid Highlight; }
}

.it [hidden] { display: none !important; }

/* =========================================================================
   PUBLIC SITE
   -------------------------------------------------------------------------
   The signed-out pages - landing, pricing, blog, FAQ, terms - are the only
   thing a prospect sees before deciding whether this panel looks like a
   business or somebody's weekend project. They were styled like the app:
   correct, plain, and indistinguishable from the dashboard behind them.

   Everything here targets classes the templates already carry, so the
   marketing pages change without a single template edit.
   ========================================================================= */

/* ------------------------------------------------------------- public nav */
/* Glass, and only once it has been scrolled past - a solid bar at the top of
   a hero cuts the page in half before the reader has seen it. */
.it .it-pubnav {
  position: sticky; top: 0; z-index: var(--z-sticky);
  border-bottom: 1px solid transparent;
  transition: background var(--t-slow) var(--ease),
              border-color var(--t-slow) var(--ease),
              box-shadow var(--t-slow) var(--ease);
}
@supports (backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px)) {
  .it .it-pubnav.is-stuck {
    background: color-mix(in srgb, var(--surface) 76%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
  }
}
.it .it-pubnav.is-stuck { border-bottom-color: var(--hairline); box-shadow: var(--e1); }

.it .it-pubnav__brand { font-weight: 650; letter-spacing: -.02em; }
.it .it-pubnav__links a {
  position: relative; color: var(--muted);
  transition: color var(--t) var(--ease);
}
.it .it-pubnav__links a:hover { color: var(--text); }
/* The underline grows from the centre rather than appearing whole, which is
   the difference between a hover state and a flicker. */
.it .it-pubnav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
  border-radius: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: 50% 50%;
  transition: transform var(--t-slow) var(--ease);
}
.it .it-pubnav__links a:hover::after,
.it .it-pubnav__links a[aria-current]::after { transform: scaleX(1); }

/* ------------------------------------------------------------------- hero */
/* Two very large, very soft accent blooms behind the headline. They are
   drawn with radial-gradients on a pseudo-element rather than shipped as an
   image: no request, no layout shift, and they re-tint themselves when the
   skin changes. Pointer-events off so they can never eat a click. */
.it .it-pitch { position: relative; }
.it .it-pitch::before {
  content: ""; position: absolute; z-index: -1;
  inset: -18% -12% auto -12%; height: 460px;
  pointer-events: none;
  background:
    radial-gradient(42% 55% at 22% 28%,
      color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%),
    radial-gradient(38% 48% at 82% 8%,
      color-mix(in srgb, var(--accent) 14%, transparent), transparent 72%);
  filter: blur(8px);
}
.it .it-pitch__head {
  background: linear-gradient(180deg, var(--text), color-mix(in srgb, var(--text) 72%, var(--muted)));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
/* A gradient headline is invisible if background-clip is unsupported, so the
   colour is restored wherever it is not. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .it .it-pitch__head { -webkit-text-fill-color: currentColor; color: var(--text); }
}

.it .it-pitch__list li {
  position: relative;
  transition: transform var(--t) var(--ease);
}
.it .it-pitch__list li:hover { transform: translateX(2px); }

/* --------------------------------------------------------------- pricing */
/* One plan is the recommended one and it should look it: raised, ringed, and
   a hair larger. Everything else stays quiet so the choice reads in a
   glance rather than as three equal walls of text. */
.it .it-plan {
  position: relative;
  transition: transform var(--t-slow) var(--ease), box-shadow var(--t-slow) var(--ease),
              border-color var(--t-slow) var(--ease);
}
.it .it-plan:hover { transform: translateY(-3px); box-shadow: var(--e3); }

/* The chosen plan, not a hard-coded "most popular" one.
   ------------------------------------------------------------------
   .it-plan is a <label> wrapping a radio (child-panels.twig), so the
   selected plan can be drawn from the markup that already exists rather
   than from a flag no template sets. A picker whose selection is marked
   only by a small radio dot is the reason people submit the wrong plan.
   .is-featured is kept alongside it for a template that does want to
   promote one. */
.it .it-plan:has(input:checked),
.it .it-plan.is-featured {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  box-shadow: var(--e3), 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent);
}
.it .it-plan:has(input:checked)::before,
.it .it-plan.is-featured::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; background: var(--grad-sheen);
}
/* Older engines without :has() still get a clear selected state from the
   focus ring and the radio itself; nothing is lost, only the emphasis. */
.it .it-plan__price { font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.it .it-plan__feats li { position: relative; }

/* ------------------------------------------------------------ blog cards */
.it .it-post {
  overflow: hidden;
  transition: transform var(--t-slow) var(--ease), box-shadow var(--t-slow) var(--ease);
}
.it .it-post:hover { transform: translateY(-3px); box-shadow: var(--e3); }
.it .it-post__img { overflow: hidden; }
.it .it-post__img img {
  transition: transform var(--t-slow) var(--ease);
  will-change: transform;
}
.it .it-post:hover .it-post__img img { transform: scale(1.04); }
.it .it-post__title { letter-spacing: -.015em; text-wrap: balance; }

/* ------------------------------------------------------------------ prose */
/* Terms, privacy and blog bodies are owner-written HTML with no classes, so
   the shapes are set on the tags. Measure is capped at 68 characters, which
   is the readable band - full-width legal text on a wide monitor is the
   reason nobody reads it. */
.it .it-prose, .it .it-article {
  max-width: 68ch;
  font-size: 15px;
  line-height: 1.75;
  color: var(--muted);
}
.it .it-prose h2, .it .it-article h2 { margin-top: var(--sp-6); color: var(--text); letter-spacing: -.02em; }
.it .it-prose h3, .it .it-article h3 { margin-top: var(--sp-5); color: var(--text); }
.it .it-prose a, .it .it-article a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--t) var(--ease);
}
.it .it-prose a:hover, .it .it-article a:hover { text-decoration-color: var(--accent); }
.it .it-prose blockquote, .it .it-article blockquote {
  margin: var(--sp-5) 0; padding: var(--sp-2) 0 var(--sp-2) var(--sp-4);
  border-left: 3px solid var(--accent);
  color: var(--text); font-style: normal;
}
.it .it-prose code, .it .it-article code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em;
  background: var(--surface-2); padding: 2px 6px; border-radius: 6px;
}
.it .it-prose img, .it .it-article img { border-radius: var(--radius); }
.it .it-prose table, .it .it-article table { width: 100%; border-collapse: collapse; }
.it .it-prose th, .it .it-prose td,
.it .it-article th, .it .it-article td {
  padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left;
}

/* ----------------------------------------------------------------- footer */
.it .it-foot { border-top: 1px solid var(--hairline); }
.it .it-foot a { color: var(--muted); transition: color var(--t) var(--ease); }
.it .it-foot a:hover { color: var(--text); }

/* =========================================================================
   SPECIFICITY REPAIR
   -------------------------------------------------------------------------
   The base layer styles bare tags inside .it - `.it a`, `.it h2`, `.it label`.
   Those selectors score 0,1,1. Every component class here scores 0,1,0. So
   for any property both set, the generic tag rule wins and the component's
   own intention never reaches the page. The components looked under-designed
   because most of them were never being applied.

   What that actually cost, measured on the live panel:

     - `.it a` beat `.it-btn`, so a button written as a link took the link
       colour. "Get started" in the public bar rendered as rgb(9,9,11) text
       on an rgb(24,24,27) background - black on black, a contrast ratio of
       about 1:1. The primary call to action on the signed-out page was
       invisible.
     - `.it h2` beat `.it-pitch__head`, so the hero headline set to
       clamp(24px, 3vw, 34px) rendered at a flat 20px. The landing page read
       as small and unfinished because its headline was body-sized.
     - `.it h1` beat `.it-auth__title`, and `.it label` beat `.it-label`.

   Re-stated here with the `.it` scope, which takes each to 0,2,0 and puts the
   component back in charge. Restating rather than editing the originals in
   place: the originals stay readable as the definition of the component, and
   this block is a single place to find every collision.
   ========================================================================= */
.it .it-btn          { color: var(--invert); }
.it .it-btn--ghost,
.it .it-btn--ghost:hover { color: var(--text); }
.it .it-btn--accent,
.it .it-btn--accent:hover { color: var(--on-accent); }
.it .it-btn--danger  { color: #fff; }
.it .it-label {
  display: block; margin-bottom: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--text);
}

/* ------------------------------------------------------------------ scale */
/* With the collisions cleared, the type can carry the weight a landing page
   needs. A hero headline at 20px is not a hero; it is a paragraph in bold.
   Tracking tightens as the size grows, which is what stops a large heading
   looking loose. */
.it .it-pitch__head {
  font-size: clamp(30px, 4.4vw, 46px);
  font-weight: 680;
  letter-spacing: -.032em;
  line-height: 1.08;
  max-width: 15ch;
}
.it .it-pitch__eyebrow { font-size: 11.5px; letter-spacing: .12em; color: var(--accent); }
.it .it-pitch__list { font-size: 14.5px; gap: var(--sp-4); }

.it .it-auth__title { font-size: 26px; letter-spacing: -.022em; }
.it .it-auth__card  { padding: var(--sp-6) var(--sp-5); box-shadow: var(--e3); }

/* Controls sized for a thumb and for a paid product. 42px is the minimum a
   form can be; 46 with a 15px face is the size that stops a signup form
   feeling like a settings dialog - and 16px on mobile is what stops iOS
   zooming the viewport when a field takes focus. */
.it .it-input, .it .it-select, .it .it-textarea, .it .form-control {
  min-height: 46px; padding: 12px 14px; font-size: 15px;
  border-radius: var(--radius);
}
.it .it-textarea { min-height: 110px; }

/* ---------------------------------------------- the server's half of a form

   The order form is written by two hands. The category and service selects are
   this theme's; Link, Quantity, comments and drip-feed come back from
   ajax_data.php as Bootstrap - .form-control, .control-label, .help-block -
   because which fields a service takes is decided per service, server-side.

   .form-control called itself "same box as .it-input" and had drifted to 39px
   against the selects' 46, at 14px against 15 and an 8px radius against 10, so
   the form changed design halfway down. It is in the sizing rule above now, so
   the two halves cannot drift again. The mobile font-size rule below matters
   more here than anywhere: Link and Quantity are the fields anyone actually
   types into, and under 16px iOS zooms the viewport on focus. */

/* "Min: 10 - Max: 1000000" ships as a bare <small>, which is an inline run of
   shrunken text welded to the bottom of the quantity box. It is a hint, so it
   is given the hint's shape. */
.it .help-block, .it .min-max {
  display: block; margin-top: 6px;
  color: var(--muted); font-size: 12.5px; line-height: 1.5;
}
.it .form-group + .help-block, .it .form-group + .min-max { margin-top: -12px; }

/* Description and average time arrive as .panel-body, which the compatibility
   layer pads by 24px for a card. Inside a form field they are a paragraph, not
   a card - and .border-solid.border-rounded, which is what was meant to draw
   the box that padding sits in, has no rule anywhere in this sheet. */
#neworder_fields .panel-body {
  padding: 0;
  color: var(--muted); font-size: 13.5px; line-height: 1.6;
}
/* The reveal button sits inside the field, so the text has to stop short of it.
   .it-reveal .it-input said so back at the component, but the padding shorthand
   above is the same specificity and comes later, so it won and the eye has been
   sitting on top of the typed password on every page that uses it. */
.it .it-reveal .it-input { padding-right: 42px; }
/* And the search boxes, for the same reason and with the same fix. The icon
   sits at left:11px inside the field, .it-search .it-input asked for 36px of
   room back at the component, and the shorthand above overrode it to 14px -
   so on Orders, Refill, Updates, Subscriptions, Drip-feed, Tickets and
   Services the icon was drawn on top of the first letter of the placeholder.
   Reported from Orders. Any future padding a component asks .it-input for
   has to be restated here, below the shorthand. */
.it .it-search .it-input { padding-left: 36px; }
@media (max-width: 640px) {
  .it .it-input, .it .it-select, .it .it-textarea, .it .form-control { font-size: 16px; }
  /* The 16px above is there to stop iOS zooming the viewport when a field
     takes focus, and that zoom comes with the keyboard. A readonly field
     raises no keyboard, so it is exempt - and the exemption matters, because
     16px is wider than the box for a 32-character API key, which is the one
     value on this theme a customer has to be able to read. */
  .it .it-input[readonly].it-key { font-size: 13px; letter-spacing: 0; }
}
.it .it-auth__card .it-btn { min-height: 46px; font-size: 15px; }

/* The hero bloom sat at a fixed 460px from the top of its own column, which
   put it behind nothing in particular on a tall viewport. Anchored to the
   headline instead, and widened, so it reads as light behind the words. */
.it .it-pitch::before {
  inset: -30% -20% auto -20%;
  height: 620px;
  filter: blur(18px);
}

/* Below 900 the pitch is the full width of the page, so that -20% is a bleed
   off the side of the screen rather than into a page margin - and an absolute
   box hanging past the right edge is scrollable width even when it is
   invisible. Measured on a 412px phone: the pitch is 380 wide, -20% puts the
   bloom's right edge at 456, and the document scrolled to 472. Nothing was
   visible out there; the page just had 60px of empty space to the right of
   everything, and the content looked pushed off-centre because of it.

   -16px instead, which is .it-auth's own side padding: the bloom still
   reaches both screen edges, and stops exactly there. */
@media (max-width: 899.98px) {
  .it .it-pitch::before { inset: -30% -16px auto -16px; }
}

/* =========================================================================
   LANDING SECTIONS
   -------------------------------------------------------------------------
   The signed-out index was a sign-in box on an empty page. These are the
   sections below it - how it works, what the panel includes, the real
   catalogue, and a closing call to action. Markup is in footer.twig, drawn
   only on the index and only from what the panel actually has.
   ========================================================================= */

.it .it-land {
  padding: clamp(56px, 8vw, 104px) var(--sp-4);
  border-top: 1px solid var(--hairline);
}
/* The section headings share the hero's voice: the same tight tracking and
   the same balance, so the page reads as one document rather than a stack of
   separate blocks. */
.it .it-land__eyebrow {
  margin: 0 0 var(--sp-2);
  font-size: 11.5px; font-weight: 650;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent);
}
.it .it-land__h {
  margin: 0 0 var(--sp-6);
  font-size: clamp(24px, 3.2vw, 34px);
  font-weight: 680; letter-spacing: -.028em; line-height: 1.15;
  max-width: 20ch; text-wrap: balance;
}
.it .it-land__more { margin: var(--sp-5) 0 0; }

/* ------------------------------------------------------------------ steps */
.it .it-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  counter-reset: step;
}
.it .it-step { position: relative; padding-top: var(--sp-4); }
/* A hairline above each step rather than a card around it. Three boxes in a
   row is the default and it makes a simple sequence look like a pricing
   table; a rule and a number reads as steps. */
.it .it-step::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--surface-3);
}
.it .it-step:first-child::before { background: var(--accent); }
.it .it-step__n {
  display: inline-grid; place-items: center;
  width: 26px; height: 26px; margin-bottom: var(--sp-3);
  border-radius: 50%;
  background: var(--accent-soft); color: var(--accent);
  font-size: 12.5px; font-weight: 700;
}
.it .it-step__h { margin: 0 0 6px; font-size: 16px; }
.it .it-step__p { margin: 0; color: var(--muted); max-width: 34ch; }

/* --------------------------------------------------------------- features */
.it .it-feats {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.it .it-feat {
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--e1);
  transition: transform var(--t-slow) var(--ease), box-shadow var(--t-slow) var(--ease),
              border-color var(--t) var(--ease);
}
.it .it-feat:hover {
  transform: translateY(-2px); box-shadow: var(--e2);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
}
.it .it-feat .i { color: var(--accent); margin-bottom: var(--sp-3); }
.it .it-feat__h { margin: 0 0 6px; font-size: 15px; }
.it .it-feat__p { margin: 0; color: var(--muted); font-size: 13.5px; }

/* -------------------------------------------------------------- catalogue */
.it .it-cats {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.it .it-cat-card {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--sp-4);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.it .it-cat-card__n { font-weight: 600; }
.it .it-cat-card__c { color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------- closing */
.it .it-land--cta { border-top: 0; }
.it .it-cta {
  position: relative; overflow: hidden;
  padding: clamp(40px, 6vw, 72px) var(--sp-5);
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
  background:
    radial-gradient(60% 120% at 50% 0%,
      color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%),
    var(--surface);
  text-align: center;
}
.it .it-cta__h {
  margin: 0 0 var(--sp-2);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 680; letter-spacing: -.028em;
}
.it .it-cta__p { margin: 0 auto var(--sp-5); color: var(--muted); max-width: 46ch; }

/* The landing footer sits at the very end of a full-width page, so it gets
   the page gutter the in-app one does not need. */
.it .it-foot--land { padding: var(--sp-5) var(--sp-4); }
.it .it-foot--land .it-foot__in { justify-content: space-between; }
.it .it-foot--land nav { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); }

/* Footer and section links are inline text, which on a phone leaves a target
   about 20px tall - half what a thumb needs, and seven of them in a row along
   the bottom of the landing page. Padded on touch devices only, so the desktop
   footer keeps its tight line. */
@media (pointer: coarse) {
  .it .it-foot--land nav a,
  .it .it-land a:not(.it-btn) {
    display: inline-flex; align-items: center;
    min-height: 44px; padding: 0 2px;
  }
}

/* =========================================================================
   ICONS
   -------------------------------------------------------------------------
   The sprite is fine - clean 24x24 geometry on a 1.5 stroke. What was wrong
   was the presentation. A 16px hairline glyph sitting loose beside a line of
   text has no weight and no frame, so a plus, a list, an arc and a chevron
   read as four stray marks rather than as icons. In the hero list they were
   doing the job of bullets while looking like punctuation.

   Given a container instead: a tinted rounded square, the accent on a soft
   ground. No markup changes - an <svg> takes padding, background and a
   radius like any other element, and box-sizing keeps the drawing area at
   its old size inside the new chip.
   ========================================================================= */

/* A hairline reads as grey rather than as a line once it is under about
   18px, so the stroke thickens as the icon gets smaller - the opposite of
   what scaling one drawing does on its own. */
.it .i     { stroke-width: 1.6; }
.it .i--sm { stroke-width: 1.85; }
.it .i--lg { stroke-width: 1.5; }

/* ------------------------------------------------------- hero pitch list */
.it .it-pitch__list li { align-items: center; gap: var(--sp-3); font-size: 14px; }
.it .it-pitch__list .i {
  box-sizing: border-box;
  width: 30px; height: 30px; padding: 7px;
  margin-top: 0;
  border-radius: 9px;
  background: var(--accent-soft);
  color: var(--accent);
  stroke-width: 2;
}

/* ------------------------------------------------------------ feature card */
/* Larger, because the card has room and the icon is the first thing scanned.
   The sheen is the same one the featured plan uses, so the two read as the
   same family rather than as two different card styles. */
.it .it-feat .i {
  box-sizing: border-box;
  width: 42px; height: 42px; padding: 9px;
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: var(--accent);
  stroke-width: 1.75;
  margin-bottom: var(--sp-4);
  transition: transform var(--t-slow) var(--ease), background var(--t) var(--ease);
}
.it .it-feat:hover .i { transform: translateY(-1px) scale(1.04); }

/* --------------------------------------------------------- empty / state */
.it .it-state__icon .i, .it .it-empty .i { color: inherit; }

/* ------------------------------------------------------------- nav icons */
/* Deliberately left bare. A sidebar of thirteen tinted chips is a wall of
   colour with no hierarchy left in it; nav icons are markers, not features,
   and they read better as plain strokes that inherit the row's colour. */
.it .it-nav .i { stroke-width: 1.7; }
.it .it-nav.is-active .i { color: var(--accent); }

/* =========================================================================
   INTERFACE PREVIEW
   -------------------------------------------------------------------------
   The index page was entirely words. This draws the panel out of the theme's
   own parts rather than shipping a screenshot: a sidebar, three stat tiles
   and an orders table at reduced scale, using the same tokens as the real
   thing. It re-tints with the skin and re-grounds in dark mode for free,
   which no PNG does, and there is no asset to go stale when the UI moves.

   aria-hidden on the frame: it is a picture of an interface, and a screen
   reader walking a fake sidebar and a fake table finds six links that are
   not links and four rows of data that are not data. The caption above it
   carries the meaning instead.
   ========================================================================= */

.it .it-shot__cap {
  margin: -24px 0 var(--sp-5);
  color: var(--faint); font-size: 13px;
}

.it .it-shot {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--e4);
  overflow: hidden;
  /* Sat back a little, so it reads as a thing being shown rather than
     another panel on the page. */
  transform: perspective(1400px) rotateX(1.4deg);
  transform-origin: 50% 0;
}
@media (prefers-reduced-motion: reduce) { .it .it-shot { transform: none; } }

/* -------------------------------------------------------------- chrome */
.it .it-shot__bar {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.it .it-shot__dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--surface-3);
}
.it .it-shot__addr {
  margin-left: 10px;
  font-size: 11.5px; color: var(--faint);
  font-variant-numeric: tabular-nums;
}

.it .it-shot__body { display: grid; grid-template-columns: 176px 1fr; min-height: 300px; }

/* ------------------------------------------------------------- sidebar */
.it .it-shot__side {
  display: flex; flex-direction: column; gap: 2px;
  padding: 14px 10px;
  border-right: 1px solid var(--border);
  background: var(--surface);
}
.it .it-shot__brand {
  padding: 0 8px 12px;
  font-size: 12.5px; font-weight: 650; letter-spacing: -.01em;
  color: var(--text);
}
.it .it-shot__row {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 8px; border-radius: 7px;
  font-size: 12px; color: var(--muted);
}
.it .it-shot__row i {
  width: 13px; height: 13px; border-radius: 4px;
  background: var(--surface-3); flex: none;
}
.it .it-shot__row.is-on {
  background: var(--accent-soft); color: var(--accent); font-weight: 600;
}
.it .it-shot__row.is-on i { background: var(--accent); }

/* ---------------------------------------------------------------- main */
.it .it-shot__main { padding: 16px; display: grid; gap: 14px; align-content: start; }

.it .it-shot__tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.it .it-shot__tile {
  position: relative; overflow: hidden;
  padding: 11px 12px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface);
}
.it .it-shot__tile::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 2px;
  background: var(--accent);
}
.it .it-shot__tile span { display: block; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.it .it-shot__tile b { font-size: 16px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

.it .it-shot__table { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.it .it-shot__tr {
  display: grid; grid-template-columns: 1fr 74px 92px; gap: 10px;
  padding: 9px 12px; font-size: 12px;
  border-top: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}
.it .it-shot__tr:first-child { border-top: 0; }
.it .it-shot__tr--head {
  background: var(--surface-2); color: var(--faint);
  font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
}
.it .it-shot__pill {
  justify-self: start;
  padding: 2px 8px; border-radius: var(--radius-pill);
  font-size: 10.5px; font-weight: 600;
  /* A status is two words and reads as one label. Left to wrap it broke
     "In progress" across two lines inside the pill, which then grew past its
     column and was cut off by the table's overflow: hidden. */
  white-space: nowrap;
}
.it .it-shot__pill.is-done { background: var(--success-soft); color: var(--success); }
.it .it-shot__pill.is-run  { background: var(--accent-soft);  color: var(--accent); }

/* On a phone the sidebar is noise at this size - the table is the part
   worth seeing, so the frame drops to one column. */
@media (max-width: 720px) {
  .it .it-shot__body { grid-template-columns: 1fr; }
  .it .it-shot__side { display: none; }
  .it .it-shot__tiles { grid-template-columns: 1fr 1fr; }
  /* The status column takes what the widest pill needs rather than a fixed
     60px: "In progress" does not fit in 60 and was clipped. minmax(0, 1fr) on
     the service name so it is the side that yields the space. */
  .it .it-shot__tr { grid-template-columns: minmax(0, 1fr) auto; }
  .it .it-shot__tr > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .it .it-shot__tr span:nth-child(2) { display: none; }
  .it .it-shot { transform: none; }
}

/* ==========================================================================
   Searchable select  (public/intech/js/select.js)
   --------------------------------------------------------------------------
   Covers the two native selects on the new order page. The native control is
   still in the DOM and still holds the value - see the note at the top of the
   script - so this only has to hide it without removing it from the form.

   Every colour here is a token. The theme ships twelve accent skins and a
   dark mode, and a dropdown with its own greys would be the one control that
   did not follow them.
   ========================================================================== */

.itsel { position: relative; }

/* Hidden, not removed: it still posts, and ajax.js still reads and rewrites
   it. clip-path rather than display:none because a display:none select is
   skipped by some browsers' form restoration. */
.itsel__native {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.itsel__btn {
  display: flex; align-items: center; gap: var(--sp-2);
  width: 100%; min-height: 44px;              /* thumb-sized on mobile */
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit; font-size: 14px; line-height: 1.4;
  text-align: left; cursor: pointer;
  transition: border-color var(--t) ease, box-shadow var(--t) ease;
}
.itsel__btn:hover:not(:disabled) { border-color: var(--faint); }
.itsel__btn:disabled { cursor: not-allowed; opacity: .6; }

/* Never removed, only replaced - and :focus-visible so it follows the
   keyboard without trailing every mouse click. */
.itsel__btn:focus { outline: none; }
.itsel__btn:focus-visible,
.itsel.is-open .itsel__btn {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
}

.itsel__val {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.itsel__val.is-placeholder { color: var(--faint); }

.itsel__caret {
  flex: none; width: 10px; height: 10px;
  border-right: 1.5px solid var(--faint);
  border-bottom: 1.5px solid var(--faint);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--t) ease;
}
.itsel.is-open .itsel__caret { transform: rotate(-135deg) translate(-2px, -2px); }

.itsel__pop {
  position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  animation: itsel-in .12s ease;
}
@keyframes itsel-in { from { opacity: 0; transform: translateY(-4px); } }

.itsel__search { padding: var(--sp-2); border-bottom: 1px solid var(--border); }
.itsel__input {
  display: block; width: 100%; min-height: 38px; padding: 8px 10px;
  background: var(--surface-2);
  border: 1px solid transparent; border-radius: var(--radius-sm);
  color: var(--text); font: inherit; font-size: 14px;
}
.itsel__input::placeholder { color: var(--faint); }
.itsel__input:focus {
  outline: none; background: var(--surface);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
}

.itsel__list {
  margin: 0; padding: var(--sp-1); list-style: none;
  max-height: 260px; overflow-y: auto; overscroll-behavior: contain;
}

.itsel__opt {
  display: flex; align-items: center; gap: var(--sp-2);
  min-height: 40px; padding: 8px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 14px; line-height: 1.35;
}
/* One highlight for both keyboard and pointer. Two - a hover colour and a
   separate active colour - means two rows look chosen at once the moment the
   mouse rests anywhere while arrowing. */
.itsel__opt.is-active { background: var(--surface-2); }
.itsel__opt[aria-selected="true"] { font-weight: 600; }
.itsel__opt[aria-selected="true"] .itsel__label { color: var(--accent); }

.itsel__chip {
  flex: none;
  padding: 2px 7px; border-radius: var(--radius-pill);
  background: var(--surface-3); color: var(--muted);
  font-size: 11.5px; font-weight: 600;
  font-variant-numeric: tabular-nums;   /* ids line up down the column */
}
.itsel__label { flex: 1 1 auto; min-width: 0; }

.itsel__none {
  margin: 0; padding: var(--sp-4) var(--sp-3);
  color: var(--faint); font-size: 13.5px; text-align: center;
}

/* The list is the tallest thing on a phone and the search field sits above
   it, so it gets less height and the rows get more finger. */
@media (max-width: 480px) {
  .itsel__list { max-height: 210px; }
  .itsel__opt  { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .itsel__pop { animation: none; }
  .itsel__btn, .itsel__caret { transition: none; }
}

/* Average delivery time  (smm_avg_time() in app/helper/data_control.php)
   --------------------------------------------------------------------------
   A duration, not a sentence: 45m, 2h 21m, 1d 6h. The tint says how fast that
   is at a glance, and says nothing that the label does not already say in
   words - a customer who cannot tell the three apart still reads the time. */
.it-avg {
  display: inline-block;
  padding: 2px 8px; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 600; white-space: nowrap;
  font-variant-numeric: tabular-nums;
  background: var(--surface-2); color: var(--muted);
}
.it-avg--fast { background: var(--success-soft); color: var(--success); }
.it-avg--ok   { background: var(--surface-2);    color: var(--muted); }
.it-avg--slow { background: var(--warning-soft); color: var(--warning); }
/* Nothing reported. Not an error and not slow - just unknown, so it recedes
   rather than colouring. */
.it-avg--none { background: transparent; color: var(--faint); font-weight: 400; }

/* Order placed  (the dialog at the foot of intech/neworder.twig)
   --------------------------------------------------------------------------
   The ring draws, then the tick, then the card settles - about half a second
   in total. Long enough to read as an answer to the button that was just
   pressed, short enough that nobody waits for it: the buttons are live from
   the first frame and Escape closes it throughout. */
.it-placed {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-4);
  background: color-mix(in srgb, #09090b 55%, transparent);
  animation: itp-fade .18s ease;
  transition: opacity .2s ease;
}
.it-placed.is-out { opacity: 0; }
@keyframes itp-fade { from { opacity: 0; } }

.it-placed__card {
  width: 100%; max-width: 380px;
  padding: var(--sp-5) var(--sp-4) var(--sp-4);
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  text-align: center;
  animation: itp-rise .28s cubic-bezier(.2, .8, .3, 1);
}
@keyframes itp-rise { from { opacity: 0; transform: translateY(10px) scale(.97); } }

.it-placed__mark { width: 62px; height: 62px; margin: 0 auto var(--sp-3); }
.it-placed__mark svg { width: 100%; height: 100%; }
.it-placed__ring {
  stroke: var(--success); stroke-width: 2.5;
  stroke-dasharray: 151; stroke-dashoffset: 151;
  animation: itp-draw .42s cubic-bezier(.65, 0, .45, 1) forwards;
}
.it-placed__tick {
  stroke: var(--success); stroke-width: 3.5;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 40; stroke-dashoffset: 40;
  animation: itp-draw .26s cubic-bezier(.65, 0, .45, 1) .34s forwards;
}
@keyframes itp-draw { to { stroke-dashoffset: 0; } }

.it-placed__t { margin: 0 0 4px; font-size: 19px; font-weight: 700; color: var(--text); }
.it-placed__s { margin: 0 0 var(--sp-4); font-size: 13.5px; color: var(--muted); }

.it-placed__facts { margin: 0 0 var(--sp-4); text-align: left; }
.it-placed__facts > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
  padding: 8px 0; border-bottom: 1px solid var(--border);
}
.it-placed__facts > div:last-child { border-bottom: 0; }
.it-placed__facts dt { margin: 0; font-size: 12.5px; color: var(--faint); }
.it-placed__facts dd {
  margin: 0; font-size: 13px; font-weight: 600; color: var(--text);
  text-align: right; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.it-placed__acts { display: grid; gap: var(--sp-2); }

/* The tick still ends up drawn - the animation is removed, not the end state -
   so the dialog reads the same without anything moving. */
@media (prefers-reduced-motion: reduce) {
  .it-placed, .it-placed__card { animation: none; }
  .it-placed { transition: none; }
  .it-placed__ring, .it-placed__tick { animation: none; stroke-dashoffset: 0; }
}

/* The average time under the service picker on the order form. */
.it-avgline {
  display: flex; align-items: center; gap: var(--sp-2);
  margin: var(--sp-2) 0 0;
  font-size: 12.5px; color: var(--faint);
}

/* The page loader's cover. The loader itself is drawn by the .pl-* rules the
   panel's admin emits; this is only the sheet it sits on. currentColor, so it
   is dark on the light theme and light on the dark one without a second rule. */
#it-boot {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
  color: var(--text);
}
@media (prefers-reduced-motion: reduce) { #it-boot { transition: none; } }