/* Momentum - shared shell.
   Colours, type and the trapezoid motif are carried over unchanged from the
   approved prototypes so this reads as the same product. */

:root {
  --charcoal: #131313;
  --charcoal-soft: #1c1c1c;
  --cream: #f7f5f2;
  --paper: #fdfcfb;
  --ink: #1a1a1a;
  --ink-soft: #6b6862;
  --ink-faint: #9b9890;
  --rust: #ee6a2c;
  --rust-deep: #b34700;
  --rust-soft: #f6b98f;
  --hairline: #e7e3dc;
  --hairline-dark: #333130;
  --navy: #1f3350;
  --good: #2e7d51;
  --warn: #b06a10;
  --bad: #b3261e;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1140px; margin: 0 auto; padding: 0 40px; }
@media (max-width: 860px) { .wrap { padding: 0 20px; } }

a { color: inherit; }

/* ---------- the gate ---------- */

#gate {
  position: fixed; inset: 0; z-index: 999;
  background: var(--charcoal);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
#gate .box {
  width: 100%; max-width: 360px;
  background: var(--charcoal-soft);
  border: 1px solid var(--hairline-dark);
  border-radius: 14px;
  padding: 32px 30px;
  text-align: center;
}
#gate .wordmark {
  font-family: 'Montserrat', sans-serif;
  font-size: 26px; font-weight: 900; letter-spacing: -0.5px;
  text-transform: uppercase; color: var(--cream);
}
#gate .rule { height: 3px; width: 46px; background: var(--rust); margin: 14px auto 16px; }
#gate p { color: #a8a49c; font-size: 13px; margin-bottom: 18px; }
#gate input {
  width: 100%; height: 44px; text-align: center;
  background: #101010; border: 1px solid #3a3835; border-radius: 7px;
  color: var(--cream); font-size: 15px; font-family: inherit; outline: none;
}
#gate input:focus { border-color: var(--rust); }
/* the email box sits above the password; the gap keeps them from reading as
   one control, and the hint explains that leaving it empty is a real option */
#gate #em-input { margin-bottom: 9px; }
#gate .or { color: #6e6a63; font-size: 11.5px; margin: 12px 0 0; }
#gate button {
  width: 100%; height: 44px; margin-top: 12px;
  background: var(--rust); color: #fff; border: none; border-radius: 7px;
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 13px;
  letter-spacing: 0.6px; text-transform: uppercase; cursor: pointer;
}
#gate button:hover { background: #de5a1e; }
#gate button[disabled] { opacity: 0.55; cursor: progress; }
#gate .err { color: #ff8a7a; font-size: 12.5px; min-height: 18px; margin-top: 12px; }
#app[hidden] { display: none; }

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

.topbar { background: var(--charcoal); padding: 16px 0; }
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
/* ⛔ `.hero` is gone from the hub (2026-09-03, the full-bleed banner) - the
 * wordmark now sits in `.topbanner-bar`, laid over the artwork. The old
 * selector is kept so nothing else that still uses a hero loses its name. */
.topbar .name, .hero .name, .topbanner-bar .name {
  font-family: 'Montserrat', sans-serif; font-size: 20px; font-weight: 900;
  letter-spacing: -0.4px; text-transform: uppercase; color: var(--cream);
  text-decoration: none;
}
.topnav { display: flex; align-items: center; gap: 22px; font-size: 13px; color: #c9c6bf; }
.topnav a { color: inherit; text-decoration: none; transition: color 0.15s ease; }
.topnav a:hover, .topnav a[aria-current='page'] { color: var(--cream); }
.topnav a[aria-current='page'] { border-bottom: 2px solid var(--rust); padding-bottom: 2px; }
.lockbtn {
  background: transparent; border: 1px solid var(--hairline-dark); color: #c9c6bf;
  border-radius: 20px; padding: 5px 13px; font-size: 12px; cursor: pointer; font-family: inherit;
}
.lockbtn:hover { border-color: var(--rust); color: var(--rust); }
@media (max-width: 720px) { .topnav { gap: 14px; font-size: 12px; } }

/* ---------- headings ---------- */

.crumb { padding: 18px 0 0; font-size: 12px; color: var(--ink-faint); }
.crumb a { color: var(--ink-faint); text-decoration: none; }
.crumb a:hover { color: var(--rust); }
.crumb .sep { margin: 0 6px; }
.crumb .current { color: var(--ink); font-weight: 500; }

.page-head { padding: 16px 0 26px; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.page-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--rust-deep); margin-bottom: 6px;
}
.page-title { font-family: 'Montserrat', sans-serif; font-size: 30px; font-weight: 900; text-transform: uppercase; letter-spacing: -0.3px; }
.page-sub { font-size: 14px; color: var(--ink-soft); margin-top: 6px; max-width: 620px; }

.title-trapezoid {
  background: var(--charcoal);
  clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
  padding: 7px 30px 7px 14px;
  display: inline-block;
}
.section-title {
  font-family: 'Montserrat', sans-serif; font-size: 15px; font-weight: 800;
  text-transform: uppercase; color: var(--cream); letter-spacing: 0.3px;
}
.section-sub { font-size: 13px; color: var(--ink-soft); margin-top: 8px; }

/* ---------- controls ---------- */

.btn {
  background: var(--rust); color: #fff; border: none;
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 13px;
  letter-spacing: 0.4px; text-transform: uppercase; padding: 11px 20px;
  border-radius: 6px; cursor: pointer;
}
.btn:hover { background: #de5a1e; }
.btn.ghost { background: transparent; color: var(--ink-soft); border: 1px solid var(--hairline); }
.btn.ghost:hover { border-color: var(--rust); color: var(--rust-deep); background: transparent; }
.btn[disabled] { opacity: 0.5; cursor: default; }

input[type='text'], input[type='search'], input[type='number'], select, textarea {
  font-family: inherit; font-size: 14px; color: var(--ink);
  border: 1px solid var(--hairline); border-radius: 8px;
  padding: 10px 12px; background: #fff; outline: none; width: 100%;
}
input:focus, select:focus, textarea:focus { border-color: var(--rust); }
label.field { display: block; }
label.field > span {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.7px;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 6px;
}

.chip {
  font-family: 'Archivo', sans-serif; font-size: 12px; font-weight: 600;
  padding: 7px 14px; border-radius: 20px; border: 1px solid var(--hairline);
  background: #fff; color: var(--ink-soft); cursor: pointer; transition: all 0.15s ease;
}
.chip:hover { border-color: var(--rust); color: var(--rust-deep); }
.chip.active { background: var(--rust); border-color: var(--rust); color: #fff; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }

.tag {
  display: inline-block; font-family: 'Archivo', sans-serif; font-size: 11px;
  font-weight: 600; padding: 3px 9px; border-radius: 20px; margin: 2px 4px 2px 0;
  background: var(--cream); border: 1px solid var(--hairline); color: var(--ink-soft);
}
.tag.product { background: #fbe4d5; border-color: #f6d0b8; color: var(--rust-deep); }
.tag.shot { background: #dfe9f8; border-color: #cddcf0; color: #24558f; }
.tag.colour { background: #eae7f5; border-color: #dcd7ee; color: #4b3f86; }

.panel { border: 1px solid var(--hairline); border-radius: 12px; padding: 22px; margin-bottom: 22px; background: #fff; }

.notice { border-radius: 10px; padding: 12px 16px; font-size: 13px; margin-bottom: 16px; border: 1px solid; }
.notice.warn { background: #fdf5e7; border-color: #f0dfc0; color: var(--warn); }
.notice.bad { background: #fdeceb; border-color: #f4cdc9; color: var(--bad); }
.notice.info { background: #eef4fb; border-color: #d6e4f3; color: #24558f; }

table { width: 100%; border-collapse: collapse; }
th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--ink-faint); font-weight: 700; padding: 10px 12px; border-bottom: 1px solid var(--hairline);
}
td { padding: 11px 12px; border-bottom: 1px solid var(--hairline); font-size: 13px; vertical-align: top; }
.mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11.5px; color: var(--ink-soft); word-break: break-all; }

.muted { color: var(--ink-faint); }
.empty { text-align: center; padding: 54px 0; color: var(--ink-faint); font-size: 14px; }

footer.foot {
  border-top: 1px solid var(--hairline); margin-top: 60px; padding: 22px 0;
  font-size: 12px; color: var(--ink-faint);
}
footer.foot .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }

.spinner {
  width: 15px; height: 15px; border: 2px solid var(--hairline);
  border-top-color: var(--rust); border-radius: 50%; display: inline-block;
  animation: spin 0.7s linear infinite; vertical-align: -2px;
}
@keyframes spin { to { transform: rotate(360deg); } }

.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;
}

/* ---------- the spine ----------
 *
 * Russell asked for less vertical scrolling and suggested dropdowns; Enia
 * picked the Spine out of the variations. This is it: the six shelves become a
 * standing index down the left, and ONE shelf is shown at a time.
 *
 * The point is not that it looks tidier. It is that the hub was 2,040px and
 * half its destinations were below the fold, so the things a rep needs were
 * things they had to go looking for. With the spine every shelf is one click
 * from the top of the page and nothing is hidden by scroll position.
 *
 * ⛔ It degrades to the old stacked page with no JS and on a narrow screen -
 * the sections are visible by default and only hidden once the spine exists.
 */
.spine-layout { display: grid; grid-template-columns: 218px 1fr; gap: 30px; align-items: start; }
@media (max-width: 900px) { .spine-layout { grid-template-columns: 1fr; gap: 14px; } }

/*
 * ⛔⛔ min-width: 0 - WITHOUT IT THE WHOLE HUB SCROLLS SIDEWAYS.
 *
 * A grid item defaults to `min-width: auto`, which means it refuses to shrink
 * below its content's minimum. The panel holds the three month cards, and once
 * the spine took 260px off the row they no longer fit, so the `1fr` track grew
 * past its share and pushed the page 187px wide - a horizontal scrollbar under
 * every screen of the hub, on the first page anybody sees.
 *
 * The columns are what should give, not the page.
 */
.spine-layout > * { min-width: 0; }

.spine { position: sticky; top: 18px; display: flex; flex-direction: column; gap: 2px; }
@media (max-width: 900px) {
  .spine { position: static; flex-direction: row; overflow-x: auto; gap: 8px; padding-bottom: 4px; }
  .spine::-webkit-scrollbar { height: 0; }
}

.spine button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 11px 13px; border: none; background: none; cursor: pointer;
  font-family: 'Archivo', sans-serif; font-size: 13.5px; font-weight: 600;
  color: var(--ink-soft); text-align: left; border-radius: 8px; white-space: nowrap;
}
.spine button:hover { background: var(--cream); color: var(--ink); }
.spine button[aria-selected="true"] { background: var(--charcoal); color: var(--cream); }
.spine button .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--hairline); flex: 0 0 auto;
}
.spine button[aria-selected="true"] .dot { background: var(--rust); }
.spine button .n {
  margin-left: auto; font-size: 11px; font-weight: 700; color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.spine button[aria-selected="true"] .n { color: #b9b5ae; }
@media (max-width: 900px) {
  .spine button { width: auto; border: 1px solid var(--hairline); }
  .spine button .n { display: none; }
}

/* one shelf at a time, and no top margin on it because the spine is the header now */
.spine-on [data-section] { display: none; }
.spine-on [data-section].on { display: block; }
.spine-on [data-section] { margin-top: 0; }

/* ---------------------------------------------------------------- the tier bar
   Stated in words, percent and colour, full width, and it never scrolls away,
   because quoting the wrong tier is the most expensive mistake this hub can
   cause. It lives here rather than in prices.html because the tier is now a
   hub-wide setting - the price list and the calculators share one value.
   Zac 2026-08-27: "the logic of switching between gold, distributor, retail
   should be everywhere". */
.tierbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 12px 0; color: #fff;
}
.tierbar .wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; width: 100%; }
.tierbar.dist { background: #1c5c78; }
.tierbar.gold { background: #8a6212; }
.tierbar.rrp  { background: #2c6f4b; }
.tierbar.flat { background: #242153; }
.tier-say { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 15px; }
.tier-say em { font-style: normal; letter-spacing: 0.4px; }
.tierseg { margin-left: auto; display: flex; border: 1px solid rgba(255,255,255,0.45); border-radius: 4px; overflow: hidden; }
.tierseg button {
  font-family: 'Archivo', sans-serif; font-size: 12.5px; font-weight: 600;
  padding: 7px 14px; background: transparent; color: rgba(255,255,255,0.9);
  border: none; cursor: pointer;
}
.tierseg button[aria-pressed="true"] { background: #fff; color: var(--ink); }

/* ------------------------------------------------- the spine, 2026-08-27
   Enia: the search "needs to be better attatched with the spine ... it needs to
   be apparently obvious you are searching the spine when you are using it", the
   nav is folded in, and anything here can be starred into the pinned strip. */

/* the search and the list are ONE column now, so the grid child is the wrapper */
.spine-layout.spine-has-search { grid-template-columns: 260px 1fr; }
.spine-search {
  display: flex; flex-direction: column; gap: 8px; align-self: start;
  background: var(--cream); border: 1px solid var(--hairline);
  border-radius: 10px; padding: 12px 12px 10px;
}
.spine-search-label {
  font-family: 'Archivo', sans-serif; font-size: 10.5px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; color: var(--ink-faint);
}
/* the box was styled for the dark hero; it lives on cream now */
.spine-search .search-row { margin-top: 0; max-width: none; }
.spine-search .search-row .field { background: #fff; border: 1px solid var(--hairline); border-right: none; }
.spine-search .search-row input { background: #fff; height: 38px; font-size: 13px; }
.spine-search .search-btn { height: 38px; width: 40px; }
.spine-search .spine { margin-top: 2px; }

/* ---------------------------------------------- Simple or Advanced, 2026-09-04
   Zac: "let's create two different versions a simple and expanded ... A small
   toggle at the top." Simple is Ed's five and the default; Advanced puts every
   destination back in the list and breaks Resources out into its own sections.
   It is small, it is grey until it is chosen, and it sits directly above the
   list it changes - the same argument that moved the search here. */
.viewseg { display: flex; align-items: center; gap: 4px; }
.viewseg-label {
  font-family: 'Archivo', sans-serif; font-size: 10.5px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; color: var(--ink-faint);
  margin-right: auto;
}
.viewseg button {
  font-family: 'Archivo', sans-serif; font-size: 11.5px; font-weight: 600;
  padding: 4px 10px; border: 1px solid var(--hairline); border-radius: 999px;
  background: #fff; color: var(--ink-soft); cursor: pointer; white-space: nowrap;
}
.viewseg button:hover { color: var(--ink); border-color: var(--ink-faint); }
.viewseg button[aria-pressed="true"] {
  background: var(--charcoal); border-color: var(--charcoal); color: var(--cream);
}

/* a group of Resources, drawn as a child of it - only in Advanced */
.spine button.is-group { padding-left: 30px; font-size: 12.5px; font-weight: 500; }
.spine button.is-group .dot { width: 4px; height: 4px; }
@media (max-width: 900px) {
  /* the spine is a horizontal scroller here, so there is no parent above a
     child to indent from */
  .spine button.is-group { padding-left: 13px; }
}

/*
 * ⛔⛔ THE ONLY PLACE A GROUP IS HIDDEN BY THE SPINE, AND IT IS A CLASS.
 *
 * hub.js's search writes inline `display` on these same blocks, and an inline
 * style beats a class - so the spine must never write one, and its narrowing
 * stands down (`groups-searching`) for as long as there is a query. See the
 * matching note in spine.js paintGroups().
 */
.spine-on.groups-narrowed:not(.groups-searching) .res-group.group-off { display: none; }
/* ⛔ .res-group + .res-group draws a rule ABOVE every group but the first, and a
   sibling selector does not care that the sibling is hidden - so the one group
   left standing kept a border and 48px of space with nothing above it. */
.spine-on.groups-narrowed:not(.groups-searching) .res-group:not(.group-off) {
  margin-top: 0; padding-top: 0; border-top: 0;
}

/* an entry that the search does not match: dimmed, never removed, so the list
   does not jump around under the cursor */
.spine button.dim { opacity: 0.32; }
.spine.filtering button:not(.dim) { border-color: var(--rust); }

/* a destination rather than a shelf */
.spine button .go { margin-left: auto; color: var(--ink-faint); font-size: 13px; }
.spine button[aria-selected="true"] .go { color: #b9b5ae; }

/* the star that pins */
.spine button { position: relative; padding-right: 30px; }
.spine .star {
  position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; border-radius: 4px;
}
.spine .star svg { width: 14px; height: 14px; fill: none; stroke: var(--ink-faint); stroke-width: 1.6; }
.spine .star:hover svg { stroke: var(--rust); }
.spine .star.on svg { fill: var(--rust); stroke: var(--rust); }
.spine button[aria-selected="true"] .star svg { stroke: #b9b5ae; }
.spine button[aria-selected="true"] .star.on svg { fill: var(--rust); stroke: var(--rust); }

/*
 * THE SAME STAR, ON AN ITEM INSIDE A SHELF.
 *
 * Zac 2026-08-27: "you can only pin the parent folders, should be able to pin
 * say like brand guidelines under marketing resources."
 *
 * ⛔ It only appears on hover or once it is pinned. An item row already carries
 * an icon, a title, a subtitle, a chevron and sometimes a badge; a permanent
 * sixth control on all of them would turn a clean list into a control panel.
 * A pinned one stays visible, because that is state, not an affordance.
 */
.item { position: relative; }
.item-star {
  position: absolute; top: 8px; right: 8px; width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  border: none; background: transparent; cursor: pointer; border-radius: 5px;
  padding: 0; opacity: 0; transition: opacity 0.12s ease;
}
.item-star svg { width: 15px; height: 15px; fill: none; stroke: var(--ink-faint); stroke-width: 1.6; }
.item:hover .item-star, .item-star:focus-visible { opacity: 1; }
.item-star:hover { background: rgba(0,0,0,0.05); }
.item-star:hover svg { stroke: var(--rust); }
.item-star.on { opacity: 1; }
.item-star.on svg { fill: var(--rust); stroke: var(--rust); }
/* ⛔ the chevron sits top-right too on some items - move it out of the way */
.item:hover .chev, .item-star.on ~ .chev { opacity: 0.35; }
@media (hover: none) { .item-star { opacity: 1; } }

/* the pinned strip at the top of the hub */
#pinned .qa-label { text-align: center; }
/* which shelf a pinned ITEM came from - "Brand guidelines" alone is ambiguous
 * once four of them are sitting side by side */
#pinned .qa-where {
  display: block; font-family: 'Inter', sans-serif; font-weight: 500;
  font-size: 10.5px; letter-spacing: .02em; color: #b9b5ae; margin-top: 3px;
  text-transform: none;
}
#pinned a { position: relative; }
#pinned .unpin {
  position: absolute; top: 4px; right: 6px; width: 20px; height: 20px; line-height: 1;
  border: none; background: transparent; color: var(--ink-faint); cursor: pointer;
  font-size: 15px; border-radius: 4px; padding: 0;
}
#pinned .unpin:hover { background: rgba(255,255,255,0.12); color: #fff; }
#pinned .pin-empty {
  grid-column: 1 / -1; color: #b9b5ae; font-size: 13px; padding: 10px 2px;
}

/* The "start here" strip on the price list, before anything is typed. */
.toppicks { margin: 0 0 18px; }
.toppicks-h { margin: 0 0 8px; font-weight: 650; font-size: 14px; letter-spacing: .01em; }
.toppicks .browse button { border-color: var(--line, #d8d8d8); }

/* ---------------------------------------------------------- My HubSpot ---- */
.hs-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin:0 0 18px; }
.hs-head h1 { margin:0 0 4px; }
.hs-head select { padding:8px 10px; border:1px solid var(--line,#d8d8d8); border-radius:8px; background:#fff; font:inherit; }
.hs-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin:0 0 26px; }
.hs-card { border:1px solid var(--line,#e2e2e2); border-radius:12px; padding:14px 16px; background:#fff;
  display:flex; flex-direction:column; align-items:flex-start; gap:0; text-align:left;
  font:inherit; color:inherit; cursor:pointer; }
.hs-card:hover { border-color:#bdbdbd; }
/* the one being filtered to, so it is obvious what the list is showing */
.hs-card.on { border-color:#111; box-shadow:inset 0 0 0 1px #111; }
.hs-card.bad { border-color:#e6b4b4; background:#fdf6f6; }
.hs-card.bad.on { border-color:#a33; box-shadow:inset 0 0 0 1px #a33; }
.hs-card-v { font-size:30px; font-weight:680; line-height:1.05; letter-spacing:-.01em; }
.hs-card-l { font-size:13px; font-weight:600; margin-top:2px; }
.hs-card-n { font-size:12px; opacity:.62; margin-top:2px; }

/* a task row: tick on the left, the row itself opens HubSpot */
.hs-task, .hs-item { gap:12px; }
/* ⛔ the whole row is a link, so every line inherited the underline and the row
 * read as three separate links. Only the title underlines, and only on hover. */
.hs-item .hs-row-main, .hs-task .hs-row-main { flex:1 1 auto; color:inherit; }
.hs-item .hs-row-main, .hs-item .hs-row-main b, .hs-item .hs-row-main .who,
.hs-task .hs-row-main, .hs-task .hs-row-main b, .hs-task .hs-row-main .who { text-decoration:none; }
.hs-item .hs-row-main:hover b, .hs-task .hs-row-main:hover b { text-decoration:underline; }
.hs-tick { flex:0 0 auto; width:30px; height:30px; border-radius:8px; cursor:pointer;
  border:1px solid var(--line,#d8d8d8); background:#fff; font-size:14px; line-height:1; color:#555; }
.hs-tick:hover { border-color:#2c7a4b; color:#2c7a4b; background:#f3faf5; }
.hs-tick.on { border-color:#cfcfcf; color:#777; }
.hs-row.done { opacity:.6; }
.hs-done { margin-top:14px; }
.hs-done-h { border:0; background:none; font:inherit; font-weight:650; cursor:pointer; padding:6px 0; color:inherit; opacity:.75; }
.hs-done-h:hover { opacity:1; text-decoration:underline; }
.hs-done-list { margin-top:6px; }
.hs-sec { margin:0 0 30px; }
.hs-sec h2 { font-size:16px; margin:0 0 10px; }
.hs-lab { font-size:12px; font-weight:650; text-transform:uppercase; letter-spacing:.06em; opacity:.6; margin:14px 0 6px; }
.hs-lab.bad { color:#a33; opacity:1; }
.hs-row { display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:11px 14px; border:1px solid var(--line,#ececec); border-radius:10px; margin-bottom:7px;
  background:#fff; color:inherit; text-decoration:none; }
a.hs-row:hover { border-color:#bdbdbd; background:#fbfbfb; }
.hs-row.bad { border-left:3px solid #c0504d; }
.hs-row-main { display:flex; flex-direction:column; min-width:0; }
.hs-row-main b { font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hs-row-right { flex:0 0 auto; font-size:13px; opacity:.7; text-align:right; white-space:nowrap; }

/* row controls: pin, colour bar, note + reminder panel, drag */
.hs-item { position:relative; align-items:flex-start; flex-wrap:wrap; padding-left:16px; }
.hs-item.pinned { border-color:#c9c9c9; background:#fcfcfa; }
.hs-item.drag { opacity:.45; }
.hs-item.over { border-color:#111; }
.hs-bar { position:absolute; left:0; top:0; bottom:0; width:5px; border-radius:10px 0 0 10px; }
.hs-acts { display:flex; gap:6px; flex:0 0 auto; padding-top:1px; }
.hs-ico { width:30px; height:30px; border-radius:8px; cursor:pointer; font-size:13px; line-height:1;
  border:1px solid var(--line,#e0e0e0); background:#fff; color:#666; }
.hs-ico:hover { border-color:#999; color:#111; }
.hs-ico.on { border-color:#111; color:#111; background:#f3f3f3; }
.hs-ico.has { box-shadow:inset 0 -2px 0 #e0c02f; }
.hs-panel { flex:1 0 100%; margin:10px 0 2px; padding:12px; border-top:1px solid var(--line,#ececec);
  display:flex; flex-direction:column; gap:9px; }
.hs-panel-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.hs-panel-row.end { justify-content:flex-end; }
.hs-panel-l { flex:0 0 78px; font-size:12px; font-weight:650; text-transform:uppercase;
  letter-spacing:.05em; opacity:.6; }
.hs-panel input[type=text] { flex:1 1 220px; min-width:160px; padding:8px 10px;
  border:1px solid var(--line,#d8d8d8); border-radius:8px; font:inherit; }
.hs-panel input[type=date] { padding:8px 10px; border:1px solid var(--line,#d8d8d8); border-radius:8px; font:inherit; }
.hs-sws { display:flex; gap:6px; flex-wrap:wrap; }
.hs-sw { width:24px; height:24px; border-radius:50%; border:2px solid transparent; cursor:pointer;
  padding:0; line-height:1; color:#fff; font-size:12px; }
.hs-sw.on { border-color:#111; }
.hs-sw.none { background:#fff; border:1px solid var(--line,#d0d0d0); color:#888; }
.hs-save { padding:8px 16px; border-radius:8px; border:1px solid #111; background:#111; color:#fff;
  font:inherit; font-weight:600; cursor:pointer; }
.hs-save:hover { background:#000; }
.hs-clear { padding:8px 14px; border-radius:8px; border:1px solid var(--line,#d8d8d8);
  background:#fff; font:inherit; cursor:pointer; color:#a33; }
.hs-panel-n { margin:0; font-size:12px; opacity:.6; }
.hs-mynote { font-style:italic; }
.hs-rem { font-weight:600; }
.hs-tick[disabled] { opacity:.35; cursor:not-allowed; }
.hs-tick[disabled]:hover { border-color:var(--line,#d8d8d8); color:#555; background:#fff; }

/* ---------------------------------------------------------- Submit content */
/* Zac 2026-08-31, relaying Russell: a suggestion box for the whole team.
   ⛔ Everything here reuses the page vocabulary above - .chip for the three
   kinds and the triage buttons, .btn/.btn.ghost for the actions, .notice for
   what happened, .tag for the state. Only the things that genuinely have no
   equivalent are new. */
.sub-kinds { margin-bottom: 18px; }
.sub-signed { margin: 0 0 16px; }
.sub-who { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.sub-who label, .sub-l { display: block; flex: 1 1 220px; font-size: 13px;
  font-weight: 600; color: var(--ink-soft); margin-bottom: 16px; }
.sub-who input, .sub-l input, .sub-l textarea { display: block; width: 100%;
  margin-top: 6px; font-weight: 400; }
.sub-l textarea { resize: vertical; }
.sub-attach { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
/* ⛔ a <label> styled as the button, driving a visually-hidden input - app.css
   styles no input[type=file], and a bare one reads as a broken control */
.sub-pick { display: inline-block; }
.sub-files { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.sub-file { display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  border: 1px solid var(--hairline); border-radius: 8px; font-size: 13px; }
.sub-file-n { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sub-x { border: none; background: none; font-size: 18px; line-height: 1;
  cursor: pointer; color: var(--ink-faint); padding: 0 4px; }
.sub-x:hover { color: var(--bad); }
.sub-go { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 4px 0 14px; }

.sub-tabs { margin: 0 0 16px; }
.sub-card { border: 1px solid var(--hairline); border-radius: 12px; padding: 18px;
  margin-bottom: 14px; background: #fff; }
/* the one Enia followed a link to */
.sub-card.hit { border-color: var(--rust); box-shadow: 0 0 0 1px var(--rust); }
.sub-card-h { display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px; margin-bottom: 10px; }
.sub-card-h .who { display: block; font-size: 12px; color: var(--ink-faint); margin-top: 3px; font-weight: 400; }
/* ⛔ pre-wrap, and the text is escaped before it gets here - a pasted URL stays
   text on purpose, in the email and on the page */
.sub-msg { white-space: pre-wrap; line-height: 1.5; font-size: 14px; margin-bottom: 12px; }
.sub-shots { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.sub-shots img { width: 132px; height: 132px; object-fit: cover; border-radius: 8px;
  border: 1px solid var(--hairline); display: block; }
.sub-card-f { display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap; font-size: 12px; }
.sub-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.sub-h2 { font-family: 'Montserrat', sans-serif; font-size: 15px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.3px; margin: 0 0 14px; }
.sub-acts .chip[disabled] { opacity: .45; cursor: not-allowed; }
.sub-acts .chip[disabled]:hover { border-color: var(--hairline); color: var(--ink-soft); }

/* ⛔ .src-note lived ONLY in an inline <style> in calculators.html, so every
   other page using it - hubspot.html since 28 Aug, submit.html now - rendered
   the class unstyled and nobody noticed, because unstyled body text still
   reads. Defined here it works everywhere; calculators.html's inline copy
   simply restates it. */
.src-note { padding: 12px 0; font-size: 12.5px; line-height: 1.55; color: var(--ink-soft); }
.src-note b { color: var(--ink); }

/* ---- resource product folders (Ross, 31 Aug) ---- */
.chips.folders { margin-top: 10px; align-items: center; }
.folder-lab { font-family: 'Archivo', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: 0.6px; text-transform: uppercase; color: var(--ink-faint); margin-right: 4px; }
.folder-n { opacity: 0.55; font-weight: 500; }
.chip.active .folder-n { opacity: 0.8; }
/* the category catch-alls read as secondary to the product lines */
.chip.folder-cat { color: var(--ink-faint); border-style: dashed; }
.chip.folder-cat.active { color: #fff; border-style: solid; }
/* ⛔ AU / NZ on a document. 27 titles exist twice - one per storefront, same
   name, different file - so this is what stops a rep sending the wrong one. */
.pill.mkt { font-weight: 700; letter-spacing: 0.4px; }
.pill.mkt-au { background: #eef4fb; color: #24558f; border-color: #d6e4f3; }
.pill.mkt-nz { background: #f0f7f1; color: #2f6b3f; border-color: #d5e8da; }

/* ⛔ Clear the size on a custom-size row. Ross, 31 Aug: a measurement typed for
   one customer stayed on the row all session, priced and looking authoritative,
   and the next quote off that product silently inherited it. */
.clr { border: none; background: none; cursor: pointer; font-size: 15px; line-height: 1;
  padding: 0 3px; color: var(--ink-faint); vertical-align: baseline; }
.clr:hover { color: var(--bad); }
.clr-wide { display: inline-block; margin: 4px 0 10px; padding: 6px 12px; font: inherit;
  font-size: 12px; border: 1px solid var(--hairline); border-radius: 6px; background: #fff;
  color: var(--ink-soft); cursor: pointer; }
.clr-wide:hover { border-color: var(--rust); color: var(--rust-deep); }

/* ---------- the role tools in the spine ----------
 *
 * Zac 2026-09-03: "add some sort of visual flair for the admin tabs to make it
 * obvious its admin in a UI/UX good way."
 *
 * ⛔ NOT A WARNING. These are ordinary tools that happen to belong to this
 * login, so the treatment is a quiet rule, a key and a warmer ground - not red,
 * not a triangle. The thing worth signalling is "your colleague cannot see
 * this", which is what makes somebody pause before changing a rate the whole
 * team quotes.
 */
.spine-rule {
  display: flex; align-items: center; gap: 9px;
  margin: 14px 2px 6px; font-family: 'Archivo', sans-serif;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--ink-faint); white-space: nowrap;
}
.spine-rule::after {
  content: ''; flex: 1; height: 1px; background: var(--hairline);
}
/* ⛔ :not(selected) - otherwise this tint wins over the charcoal selected state
 * purely by coming later in the file, and the open tool stops looking open. */
.spine button[data-role-tool]:not([aria-selected="true"]) { background: rgba(238, 106, 44, 0.045); }
.spine button[data-role-tool]:not([aria-selected="true"]):hover { background: rgba(238, 106, 44, 0.1); }
.spine button[data-role-tool] .dot { background: var(--rust-soft); }
.spine button[data-role-tool][aria-selected="true"] .dot { background: var(--rust); }
.spine .rolekey {
  width: 13px; height: 13px; margin-left: 6px; flex: 0 0 auto;
  fill: none; stroke: var(--rust-deep); stroke-width: 1.7; stroke-linecap: round; opacity: .75;
}
.spine button[aria-selected="true"] .rolekey { stroke: var(--rust-soft); }
/* the key sits between the label and the arrow, so the label may shrink */
.spine button[data-role-tool] .lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* ⛔ on a phone the spine is a horizontal scroller, so the full-width rule would
 * eat the row. It becomes a short upright divider with the words dropped - the
 * tint and the key still carry the meaning. */
@media (max-width: 900px) {
  .spine-rule { margin: 0; align-self: stretch; flex: 0 0 auto; }
  .spine-rule span { display: none; }
  .spine-rule::after { width: 1px; height: auto; align-self: stretch; flex: 0 0 1px; }
}
/* a pinned role tool keeps the signal up top, but with no icon - the pin strip
 * holds five chips on one line and the label needs every pixel */
/* ⛔ the chip is a bordered column card - so tint the ground and warm the border
 * it already has. Adding a thicker edge would shift the icon off the shared
 * baseline and break the row. */
#pinned a[data-role-pin] { background: rgba(238, 106, 44, 0.05); border-color: var(--rust-soft); }
#pinned a[data-role-pin]:hover { border-color: var(--rust); }

/* the same signal at the destination, so the spine's key is not the only place
 * it is said. One line under the crumb - it names the audience, not a hazard. */
.role-flag {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 12px;
  background: rgba(238, 106, 44, 0.07); border: 1px solid rgba(238, 106, 44, 0.22);
  border-radius: 20px; padding: 5px 13px 5px 10px;
  font-family: 'Archivo', sans-serif; font-size: 11.5px; font-weight: 600; color: var(--rust-deep);
}
.role-flag svg { width: 13px; height: 13px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.role-flag b { font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.role-flag span { color: var(--ink-soft); font-weight: 500; }