/* Cura Core · portal.css
   Portal pages, "Bound Manual" redesign (October 2026): dashboard (hero band, tiles, feed, upsell, ring card),
   policies list, downloads, locked feature page, plan, team sign-off, survey day, agency details, the super user
   console (requests, package picker, feature rows, policy switches, secrets) and adding your own policy.
   Base components (.btn, .badge, .card, .stat, .input, .switch, .chip, .tab, .table, .list, .status, .notice)
   live in components.css; only this area's own selectors and modifiers are styled here. */

/* ---------------- dashboard: the cover band ---------------- */

.hero {
  position: relative; overflow: hidden; contain: paint; border-radius: var(--radius); padding: 32px 36px;
  background: var(--cover); color: var(--cover-ink);
}
.hero h2 { font-family: var(--font-serif); font-weight: 500; font-size: 28px; line-height: 1.15; letter-spacing: 0; color: var(--cover-cream); max-width: 30ch; }
.hero p { color: var(--cover-ink); font-size: 15.5px; line-height: 1.55; margin: 8px 0 0; max-width: 60ch; }
.hero .btns { position: relative; display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.hero .btn-secondary { background: rgba(255, 255, 255, .06); color: #fff; border-color: rgba(255, 255, 255, .28); box-shadow: none; }
.hero .btn-secondary:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .28); color: #fff; }
.hero .btn-white { box-shadow: none; }
.hero-stats { display: flex; gap: 32px; margin-top: 24px; flex-wrap: wrap; }
.hero-stats div { font-size: 13px; color: var(--cover-ink-2); }
.hero-stats b {
  display: block; font-family: var(--font-serif); font-weight: 500; font-size: 32px; line-height: 1.1; letter-spacing: -.01em;
  color: var(--cover-cream); font-variant-numeric: lining-nums tabular-nums;
}
.hero-art { position: absolute; right: -10px; bottom: -24px; width: 220px; opacity: .14; pointer-events: none; }
.hero-art path { fill: var(--mint); }

/* ---------------- dashboard: tiles, feed, upsell, ring ---------------- */

.tile {
  padding: 20px; display: flex; flex-direction: column; gap: 10px; min-height: 160px; color: inherit; text-decoration: none !important;
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.tile:hover { border-color: var(--line-2); box-shadow: var(--shadow); transform: translateY(-1px); }
.tile .tile-ico { width: 36px; height: 36px; border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--blue-soft); color: var(--blue); }
.tile .tile-ico .i { width: 18px; height: 18px; }
.tile .tile-ico.teal { background: var(--teal-soft); color: var(--teal-ink); }
.tile .tile-ico.gold { background: var(--gold-soft); color: var(--gold); }
.tile h3 { font-size: 18px; }
.tile p { color: var(--ink-2); font-size: 13.5px; line-height: 1.5; margin: 0; }
.tile .foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--blue); }
.tile .foot .i { width: 16px; height: 16px; }
.tile.locked { background: #fff; border-color: var(--gold-line); }
.tile.locked .foot { color: var(--gold-ink); }

.feed { list-style: none; margin: 0; padding: 0; }
.feed li { display: flex; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.5; }
.feed li:first-child { border-top: 0; padding-top: 0; }
.feed li:last-child { padding-bottom: 0; }
.feed .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); margin-top: 7px; flex: none; }
.feed .dot.sign { background: var(--teal); }
.feed .when { color: var(--ink-3); font-size: 12.5px; white-space: nowrap; margin-left: auto; padding-left: 10px; font-variant-numeric: tabular-nums; }
.feed .who { all: unset; font-weight: 600; color: var(--ink); }

.upsell {
  display: flex; gap: 18px; align-items: center; padding: 22px 24px; border-radius: var(--radius); border: 1px solid var(--gold-line);
  background: #fff; box-shadow: inset 3px 0 0 var(--gold), var(--shadow-sm);
}
.upsell .ico { width: 44px; height: 44px; border-radius: var(--radius-sm); background: var(--gold-soft); color: var(--gold); display: grid; place-items: center; flex: none; }
.upsell .ico .i { width: 22px; height: 22px; }
.upsell h3 { font-size: 19px; }
.upsell p { margin: 4px 0 0; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.upsell .grow { flex: 1; min-width: 0; }

.ring-card { display: flex; align-items: center; gap: 18px; }
.ring-card .ring { flex: none; }
.ring-card .txt { min-width: 0; }
.ring-card .txt h3 { font-size: 18px; }
.ring-card .txt p { margin: 4px 0 0; color: var(--ink-3); font-size: 13px; line-height: 1.5; }

/* the one amber chip (attention, not Premium): "Still to sign" on the team page */
.stat .ico-chip.amber { background: var(--amber-soft); color: var(--amber-ink); }

/* ---------------- policies list ---------------- */

.toolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.toolbar .input-icon { flex: 1; min-width: 240px; max-width: 440px; }
.cat-block + .cat-block { margin-top: 26px; }
.cat-block .card { border-radius: var(--radius-sm); }
.cat-title {
  display: flex; align-items: baseline; gap: 8px; margin: 0 0 8px 2px;
  font-family: var(--font-sans); font-size: 11.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3);
}
.cat-title .muted { letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.pol-row {
  display: flex; align-items: center; gap: 16px; padding: 14px 18px; min-height: 56px; border-top: 1px solid var(--line);
  color: inherit; text-decoration: none !important; transition: background var(--dur-1) var(--ease);
}
a.pol-row { cursor: pointer; }
.pol-row:first-child { border-top: 0; }
.pol-row:hover { background: var(--surface-2); }
.pol-row:focus-visible { outline-offset: -2px; }
.pol-row .grow { flex: 1; min-width: 0; }
.pol-row .title { font-family: var(--font-serif); font-weight: 500; font-size: 17px; line-height: 1.3; color: var(--ink); text-wrap: pretty; }
.pol-row a.title { color: var(--ink); }
.pol-row a.title:hover { text-decoration: underline; color: var(--ink); }
.pol-row .meta { display: flex; gap: 6px 12px; align-items: center; flex-wrap: wrap; margin-top: 4px; font-size: 13px; color: var(--ink-3); }
.pol-row .side-bits { display: flex; align-items: center; gap: 6px; flex: none; }
.pol-row .sig { width: 110px; margin-right: 8px; font-size: 12px; color: var(--ink-3); text-align: right; font-variant-numeric: tabular-nums; }
.pol-row .sig .bar { margin-top: 5px; }
.pol-row .side-bits > .icon-btn { color: var(--ink-3); background: none; pointer-events: none; }
.pol-row:hover .side-bits > .icon-btn { color: var(--ink); }
.pol-ico {
  width: 34px; height: 34px; border-radius: var(--radius-sm); display: grid; place-items: center; flex: none;
  background: var(--surface-2); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line);
}
.pol-ico .i { width: 17px; height: 17px; }

/* ---------------- downloads ---------------- */

.dl-card { padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.dl-card .top { display: flex; gap: 14px; align-items: flex-start; }
.dl-card .top > div { min-width: 0; }
.dl-card .ico {
  width: 44px; height: 44px; border-radius: var(--radius-sm); display: grid; place-items: center; flex: none;
  background: var(--surface-2); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line);
}
.dl-card .ico.ico-cover { background: var(--cover); color: var(--mint); box-shadow: none; }
.dl-card .ico .i { width: 22px; height: 22px; }
.dl-card h3 { font-size: 19px; }
.dl-card p { color: var(--ink-2); font-size: 14px; line-height: 1.5; margin: 4px 0 0; }
.dl-card .btns { display: flex; gap: 8px; margin-top: auto; flex-wrap: wrap; align-items: center; }

/* ---------------- locked feature page ---------------- */

.locked-page { max-width: 720px; margin: 20px auto; text-align: center; }
.locked-page .big-ico {
  width: 64px; height: 64px; border-radius: var(--radius-lg); display: grid; place-items: center; margin: 0 auto 18px;
  background: var(--gold-soft); color: var(--gold); border: 1px solid var(--gold-line);
}
.locked-page .big-ico .i { width: 30px; height: 30px; }
.locked-page .lead { color: var(--ink-2); font-size: 16.5px; line-height: 1.55; margin: 10px auto 26px; max-width: 52ch; }
.feature-list { list-style: none; margin: 0; padding: 0; text-align: left; }
.feature-list li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--line); }
.feature-list li:first-child { border-top: 0; padding-top: 0; }
.feature-list li:last-child { padding-bottom: 0; }
.feature-list .fi { width: 34px; height: 34px; border-radius: var(--radius-sm); display: grid; place-items: center; flex: none; background: var(--teal-soft); color: var(--teal-ink); }
.feature-list .fi.off { background: var(--surface-2); color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line); }
.feature-list .fi.gold { background: var(--gold-soft); color: var(--gold); }
.feature-list .fi .i { width: 17px; height: 17px; }
.feature-list .t { font-weight: 600; font-size: 15px; }
.feature-list .d { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; margin-top: 1px; }

/* ---------------- plan and logins ---------------- */

.pkg-card { padding: 26px; position: relative; display: flex; flex-direction: column; }
.pkg-card.current { border: 1.5px solid var(--ink); }
.pkg-card .tag { position: absolute; top: -12px; left: 20px; background: var(--bg); border-color: var(--ink); color: var(--ink); }
.pkg-card .price {
  display: block; position: static; margin: 8px 0 4px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  font-family: var(--font-serif); font-weight: 500; font-size: 34px; line-height: 1.1; letter-spacing: -.01em; color: var(--ink);
  font-variant-numeric: lining-nums tabular-nums;
}
.pkg-card .price.unset { font-family: var(--font-sans); font-weight: 500; font-size: 18px; letter-spacing: 0; color: var(--ink-3); }
.pkg-card .blurb { color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.ticks { list-style: none; margin: 14px 0 0; padding: 0; font-size: 14px; }
.card-body > .ticks:first-child { margin-top: 0; }
.ticks li { display: flex; gap: 9px; align-items: flex-start; padding: 5px 0; line-height: 1.45; }
.ticks .i { width: 16px; height: 16px; margin-top: 2px; color: var(--teal-ink); }
.ticks li.off { color: var(--ink-3); }
.ticks li.off .i { color: var(--line-2); }

/* people in plain lists (logins, former staff) are circles; organisations keep the square tile */
.list > li > .avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--surface-3); color: var(--ink-2); font-size: 12.5px; font-weight: 600; }

/* ---------------- team sign-off ---------------- */

.person { display: flex; align-items: center; gap: 12px; min-width: 0; }
.person > div { min-width: 0; }
.person .avatar { width: 32px; height: 32px; border-radius: 50%; font-size: 12.5px; font-weight: 600; background: var(--surface-3); color: var(--ink-2); }
.person .avatar-org { border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent-ink); }
.table .t-name.username { font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; letter-spacing: .02em; color: var(--ink); }
.table .icon-btn { color: var(--ink-3); }
.table .icon-btn:hover { color: var(--ink); }
.status-ok { color: var(--teal-ink); font-weight: 600; font-size: 13px; display: inline-flex; gap: 5px; align-items: center; font-variant-numeric: tabular-nums; }
.status-ok .i { width: 15px; height: 15px; }
.qr-box { display: flex; gap: 18px; align-items: center; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); }
.qr-box img { width: 132px; height: 132px; background: #fff; border-radius: var(--radius-xs); padding: 4px; border: 1px solid var(--line); flex: none; }
.link-field { display: flex; gap: 8px; }
.link-field .input { font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: .02em; color: var(--ink-2); background: #fff; }
.link-field .btn { flex: none; }
.health-bar { display: flex; align-items: center; gap: 10px; min-width: 150px; }
.health-bar .bar { flex: 1; }
.health-bar b { font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 600; width: 36px; text-align: right; }
.table th.t-signed { min-width: 170px; }

/* ---------------- survey day ---------------- */

.check-ico { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.check-ico .i { width: 17px; height: 17px; }
.check-count { font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; }
.check-state { font-size: 13px; font-weight: 600; color: var(--ink-3); }
.check-state.ok { color: var(--teal-ink); }
.check-state.todo { color: var(--amber-ink); }

/* ---------------- agency details ---------------- */

.done-card { border-top: 2px solid var(--rule-2); border-radius: var(--radius-xs); }
.done-card strong { font-size: 15px; }

/* ---------------- super user console ---------------- */

.feature-row { display: flex; align-items: center; gap: 14px; padding: 14px 22px; border-top: 1px solid var(--line); }
.feature-row:first-child { border-top: 0; }
.feature-row .fi {
  width: 36px; height: 36px; border-radius: var(--radius-sm); display: grid; place-items: center; flex: none;
  background: var(--surface-2); color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line);
}
.feature-row.on .fi { background: var(--teal-soft); color: var(--teal-ink); box-shadow: inset 0 0 0 1px var(--teal-line); }
.feature-row .fi .i { width: 17px; height: 17px; }
.feature-row .grow { flex: 1; min-width: 0; }
.feature-row .t { font-weight: 600; font-size: 15px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.feature-row .d { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; margin-top: 2px; }
.pkg-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pkg-opt {
  position: relative; display: block; padding: 16px 18px; border: 1.5px solid var(--line-2); border-radius: var(--radius-sm); cursor: pointer; background: #fff;
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.pkg-opt:hover { border-color: var(--field); }
.pkg-opt:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.pkg-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pkg-opt.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: var(--accent-ring); }
.pkg-opt .t { font-weight: 600; font-size: 15px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pkg-opt .p { color: var(--ink-2); font-size: 13.5px; line-height: 1.45; margin-top: 3px; }
.pkg-opt .radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--field); background: #fff; display: grid; place-items: center; flex: none; }
.pkg-opt.on .radio { border-color: var(--accent); }
.pkg-opt.on .radio::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.pol-switch-row { display: flex; align-items: center; gap: 12px; padding: 10px 22px; min-height: 56px; border-top: 1px solid var(--line); }
.pol-switch-row .grow { flex: 1; min-width: 0; }
.pol-switch-row .title { font-family: var(--font-serif); font-weight: 500; font-size: 16px; line-height: 1.3; color: var(--ink); }
.pol-switch-row.off .title { color: var(--ink-3); }
.cat-sub {
  padding: 9px 22px; background: var(--surface-2); border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 12px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.req { display: flex; gap: 14px; padding: 16px 22px; border-top: 1px solid var(--line); align-items: flex-start; }
.req:first-child { border-top: 0; }
.req .grow { flex: 1; min-width: 0; }
.req .grow strong { font-size: 14.5px; }
.req-list { position: relative; max-height: 400px; overflow-y: auto; scrollbar-width: thin; }
/* the scroll cue: a fade that sticks to the visible foot of the list while there is more below, and comes to rest in the
   last row's bottom padding once everything is in view */
.req-list::after {
  content: ''; display: block; position: sticky; bottom: 0; height: 28px; margin-top: -16px;
  background: linear-gradient(rgba(255, 255, 255, 0), #fff 80%); pointer-events: none;
}
.req .msg {
  margin: 8px 0 12px; padding: 10px 14px; background: var(--surface-2); border: 0; border-left: 2px solid var(--line-2); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 15px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty;
}
.req .btn-group { margin-top: 2px; }
.req .row-between > .small { white-space: nowrap; flex: none; font-variant-numeric: tabular-nums; }
.coming { display: flex; flex-wrap: wrap; gap: 8px; }
.pick-list { max-height: 280px; overflow-y: auto; border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 6px; }
.pick-list label { display: flex; gap: 10px; align-items: flex-start; min-height: 36px; padding: 7px 8px; border-radius: var(--radius-xs); cursor: pointer; font-size: 14px; line-height: 1.45; }
.pick-list label:hover { background: var(--surface-2); }
.pick-list input { margin-top: 3px; accent-color: var(--accent); }
.secret {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: 15px; font-weight: 500; letter-spacing: .02em; color: var(--ink); word-break: break-all;
}
.secret .btn { flex: none; font-family: var(--font-sans); letter-spacing: .005em; }
.t-stopped { color: var(--red); font-weight: 600; font-size: 12.5px; }
.t-premium-ask { color: var(--gold-ink); font-weight: 600; font-size: 13px; }
.pkg-sees { padding-top: 4px; font-family: var(--font-serif); font-weight: 500; font-size: 19px; line-height: 1.3; color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
/* the customer page head: tags read as outline labels, "Active" as a pill */
.head-tags .badge { background: transparent; border-color: var(--line-2); color: var(--ink-2); }
.head-tags .badge-blue { border-color: var(--blue-line); color: var(--blue-ink); }
.head-tags .badge-gold { border-color: var(--gold-line); color: var(--gold-ink); }
.head-tags .badge-teal { border-color: var(--teal-line); color: var(--teal-ink); }
.head-tags .badge-red { border-color: var(--red-line); color: var(--red); }
.head-tags .badge-dot { border-radius: var(--radius-pill); }
/* rule-update articles: the summary keeps the reading measure; policy tags are links, so they darken their edge instead of underlining */
article.card .card-body > p { max-width: var(--measure); }
article.card .wrap-gap { gap: 10px 8px; }
article.card .wrap-gap a.badge { position: relative; }
article.card .wrap-gap a.badge:hover { text-decoration: none; border-color: var(--blue); }

/* ---------------- adding your own policy ---------------- */

.drop {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 42px 20px; border: 1.5px dashed var(--field); border-radius: var(--radius);
  background: var(--surface-2); text-align: center; cursor: pointer; transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.drop:hover, .drop.over { border-color: var(--blue-bright); background: var(--blue-soft); }
.drop:focus-visible { border-color: var(--blue-bright); background: var(--blue-soft); outline: 2px solid var(--focus); outline-offset: 2px; }
.drop.busy-drop { opacity: .6; pointer-events: none; }
.drop .ico-chip { width: 52px; height: 52px; border-radius: var(--radius); }
.drop .ico-chip .i { width: 24px; height: 24px; }
.drop strong { font-family: var(--font-serif); font-weight: 500; font-size: 19px; line-height: 1.3; color: var(--ink); }
.drop .btn { margin-top: 6px; }
.spinner-inline {
  display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--blue); border-color: var(--blue) var(--blue) transparent transparent;
  animation: spin .7s linear infinite; vertical-align: -2px; margin-right: 6px;
}
.steps-list { margin: 0; padding-left: 20px; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.steps-list li { margin: 6px 0; padding-left: 2px; }
.steps-list li::marker { color: var(--ink-3); font-weight: 600; }
.blocks { max-height: 70vh; overflow: auto; }
.blk { display: flex; gap: 12px; align-items: flex-start; padding: 10px 18px; border-top: 1px solid var(--line); }
.blk:first-child { border-top: 0; }
.blk .grow { flex: 1; min-width: 0; }
.blk .txt { font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.blk .li-mark { display: inline-block; width: 18px; color: var(--ink-3); font-weight: 600; }
.blk .acts { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; align-items: center; flex: none; max-width: 50%; }
.blk-h { align-items: center; background: var(--surface-2); flex-wrap: nowrap; }
.blk-h.lvl-2 { padding-left: 38px; }
.blk-h .blk-input { flex: 1; min-width: 180px; font-weight: 600; min-height: 36px; padding-top: 6px; padding-bottom: 6px; }
.blk-h.lvl-1 .blk-input { font-size: 15.5px; }
.blk-h .acts { max-width: none; flex-wrap: nowrap; }
.blk-h .acts .btn { white-space: nowrap; }
.mini-table { border-collapse: collapse; font-size: 12.5px; width: 100%; }
.mini-table th, .mini-table td { border: 1px solid var(--line); padding: 4px 6px; text-align: left; vertical-align: top; }
.mini-table th { background: var(--surface-2); font-weight: 600; }
.check-head { flex-wrap: wrap; }
.check-head .seg button { white-space: nowrap; }
.preview-title { font-family: var(--font-serif); font-weight: 500; font-size: 26px; line-height: 1.15; letter-spacing: -.01em; color: var(--ink); }
.stack-btns { display: grid; gap: 8px; }
.stack-btns .btn { justify-content: flex-start; }
.job-picks { display: grid; gap: 10px; margin-top: 4px; }
.kv-left dd { text-align: left; word-break: break-all; }

/* ---------------- responsive and print rules for this area (moved here from legacy-responsive.css) ---------------- */

@media (max-width: 1180px) {
  /* tables in the two-column layouts: the columns marked hide-sm go first, cells tighten, long emails ellipsise */
  .table th.hide-sm, .table td.hide-sm { display: none; }
  .table th, .table td { padding-left: 10px; padding-right: 10px; }
  .table .t-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px; }
  .table th.t-signed { min-width: 120px; }
  .health-bar { min-width: 110px; }
  .table-wrap { scrollbar-width: thin; }
}
@media (max-width: 900px) {
  .pol-row .sig { display: none; }
  .pkg-pick { grid-template-columns: 1fr; }
  .blk-h { flex-wrap: wrap; }
  .blk-h .acts { flex-wrap: wrap; }
  .hero { padding: 26px 22px; }
  .req-list { max-height: none; }
  .req-list::after { display: none; }
  .locked-page { margin-top: 8px; }
}
@media (max-width: 640px) {
  .blk { flex-direction: column; }
  .blk .acts { max-width: none; justify-content: flex-start; }
  .ack-card { padding: 18px; }
  .hero-art { display: none; }
  .hero h2 { font-size: 26px; }
  .pkg-card { padding: 22px 18px; }
  .dl-card { padding: 18px; }
  .feature-row, .pol-switch-row, .req { padding-left: 16px; padding-right: 16px; }
  .cat-sub { padding-left: 16px; padding-right: 16px; }
  /* the team table as stacked rows: name and email, then the status pill, then the signed bar, with the two actions at the
     right; Job and Sign-in details live in the row's dialog. Hover and click stay on the row. */
  .team-wrap .table, .team-wrap tbody { display: block; width: 100%; }
  .team-wrap > .table, .team-wrap > .table:has(th:nth-child(4)) { min-width: 0; } /* stacked rows need no scroll width */
  .team-wrap > .table:has(th:nth-child(4)) .t-name { white-space: normal; }
  .team-wrap thead { display: none; }
  .team-wrap tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who acts" "state acts" "signed acts";
    column-gap: 12px; row-gap: 8px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line);
  }
  .team-wrap tbody tr:last-child { border-bottom: 0; }
  .team-wrap td { display: block; padding: 0; border: 0; }
  .team-wrap td:nth-child(1) { grid-area: who; }
  .team-wrap td:nth-child(2), .team-wrap td:nth-child(5) { display: none; }
  .team-wrap td:nth-child(3) { grid-area: state; }
  .team-wrap td:nth-child(4) { grid-area: signed; }
  .team-wrap td:nth-child(6) { grid-area: acts; display: grid; gap: 2px; justify-items: end; }
  .team-wrap tr.clickable:hover { background: var(--surface-2); }
  .team-wrap tr.clickable:hover td { background: transparent; }
  .team-wrap .t-sub { max-width: none; }
  .team-wrap .health-bar { min-width: 0; max-width: 220px; }
}
@media (max-width: 560px) {
  .grid-4 > .tile { grid-column: 1 / -1; min-height: 0; }
  .pol-row { flex-wrap: wrap; gap: 10px 14px; padding: 14px 16px; }
  .pol-row .side-bits { width: 100%; justify-content: flex-end; }
  .upsell { flex-direction: column; align-items: flex-start; }
  .qr-box { flex-direction: column; align-items: flex-start; }
  .qr-box > div { width: 100%; }
  .hero-stats { gap: 20px; }
  .hero-stats b { font-size: 28px; }
  .req .btn-group .btn-ghost { border-color: var(--line-2); background: #fff; }
}
@media (pointer: coarse) {
  .pick-list label { min-height: 44px; }
  /* policy tags that are links keep their 22px look and take a 40px touch area; the rows are 10px apart */
  article.card .wrap-gap a.badge::after { content: ''; position: absolute; inset: -9px -4px; }
}
@media print {
  .hero, .upsell, .drop, .qr-box .btn, .qr-box .btn-group, .pol-row .side-bits .btn { display: none !important; }
  .pol-row, .feature-row, .pol-switch-row, .req { break-inside: avoid; }
  .tile, .dl-card, .pkg-card { box-shadow: none !important; }
  .req-list { max-height: none; overflow: visible; }
  .req-list::after { display: none; }
}

/* ======================================================================
   Bento layer (October 2026): portal pages as plates
   ======================================================================
   Same classes as above. The dashboard band is the website's navy plate; the tiles, download cards and
   Premium cards are white plates with gradient cubes; list cards round off; dense rows, tables and
   charts keep their hairlines and do not move. Lifting plates (a.card: dashboard tiles and the figure
   tiles) come from the .lift rules in components.css. Gold is Premium only. */

.hero {
  border-radius: var(--r-plate-xl); padding: 40px 44px; background: var(--navy-plate); box-shadow: var(--plate-navy);
}
.hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px); background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%); mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
}
.hero > * { position: relative; }
.hero > .hero-art { position: absolute; }
.hero .btn-secondary, .hero .btn-secondary:hover {
  color: #fff; background: rgba(255, 255, 255, .08); border: 0; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .24) inset, 0 8px 20px -10px rgba(0, 0, 0, .6);
}
.hero .btn-secondary:hover { background: rgba(255, 255, 255, .14); }
.hero .btn-white { box-shadow: 0 1px 0 #fff inset, 0 6px 16px -6px rgba(0, 0, 0, .45), 0 2px 0 #C9C1B1; }

.tile { padding: 24px; gap: 12px; min-height: 176px; }
.tile .tile-ico {
  --c1: #2A80B8; --c2: #134B70; --cs: rgba(19, 75, 112, .55);
  width: 46px; height: 46px; border-radius: 14px; color: #fff; background: linear-gradient(145deg, var(--c1), var(--c2));
  box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 -3px 0 rgba(0, 0, 0, .18) inset, 0 8px 14px -6px var(--cs);
}
.tile .tile-ico .i { width: 22px; height: 22px; }
.tile .tile-ico.teal { --c1: #2BB39F; --c2: #0B6B5E; --cs: rgba(11, 107, 94, .5); background: linear-gradient(145deg, var(--c1), var(--c2)); color: #fff; }
.tile .tile-ico.gold { --c1: #B8730F; --c2: #7F540C; --cs: rgba(154, 102, 16, .45); background: linear-gradient(145deg, var(--c1), var(--c2)); color: #fff; }
.tile .foot .i { transition: transform .2s ease; }
.tile:is(:hover, :focus-visible) .foot .i { transform: translateX(4px); }
.tile.locked { --sh: 0 0 0 1px var(--gold-line), var(--plate); --sh-hi: 0 0 0 1px var(--gold-line), var(--plate-hi); }

.upsell {
  border: 0; border-radius: var(--r-plate); padding: 24px 28px;
  background: linear-gradient(180deg, #fff, #FFFCF5); box-shadow: 0 0 0 1px var(--gold-line), var(--plate);
}
.upsell .ico, .locked-page .big-ico {
  border: 0; color: #fff; background: linear-gradient(145deg, #B8730F, #7F540C);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 -3px 0 rgba(0, 0, 0, .18) inset, 0 8px 14px -6px rgba(154, 102, 16, .45);
}
.upsell .ico { width: 46px; height: 46px; border-radius: 14px; }
.locked-page .big-ico { border-radius: 20px; }

.shell .cat-block + .cat-block { margin-top: 30px; }
.shell .cat-block .card { border-radius: var(--r-plate); }
.shell .cat-title { margin-left: 6px; }
.pol-ico, .feature-list .fi, .feature-row .fi, .check-ico { border-radius: 11px; }
.pol-row { padding: 15px 22px; }

.dl-card { padding: 26px; gap: 16px; }
.dl-card .ico {
  width: 46px; height: 46px; border-radius: 14px; color: #fff; background: linear-gradient(145deg, #2A80B8, #134B70);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 -3px 0 rgba(0, 0, 0, .18) inset, 0 8px 14px -6px rgba(19, 75, 112, .55);
}
.dl-card .ico.ico-cover { color: var(--mint); background: linear-gradient(145deg, #34495A, #16222C); box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset, 0 -3px 0 rgba(0, 0, 0, .25) inset, 0 8px 14px -6px rgba(22, 34, 44, .55); }

.pkg-card { overflow: visible; padding: 28px; }
.pkg-card.current { border: 0; --sh: 0 0 0 2px var(--ink), var(--plate); }
.pkg-card .tag { border-radius: 999px; box-shadow: 0 4px 10px -4px rgba(22, 34, 44, .3); }

:where(#app > :not(.site), .modal-wrap) .pkg-opt { border-radius: var(--r-plate-md); transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease), box-shadow .25s var(--ease-plate); }
@media (hover: hover) { :where(#app > :not(.site), .modal-wrap) .pkg-opt:hover { box-shadow: 0 10px 20px -12px rgba(22, 34, 44, .3); } }
:where(#app > :not(.site), .modal-wrap) :is(.pkg-opt.on, .pkg-opt.on:hover) { box-shadow: var(--accent-ring), 0 10px 20px -12px rgba(22, 34, 44, .3); }

.qr-box, .secret, .pick-list, .drop, .done-card { border-radius: var(--r-plate-md); }
.qr-box img { border-radius: 10px; }
.done-card { border-top: 0; }
.drop { border-radius: var(--r-plate); }
.drop .ico-chip { border-radius: 16px; }
.req .msg { border-radius: 0 12px 12px 0; }
.blk-h { border-radius: 0; }
/* a long policy name in a rule-update tag wraps inside its pill instead of running past the rounded card */
article.card .wrap-gap .badge { max-width: 100%; height: auto; min-height: 24px; padding-top: 3px; padding-bottom: 3px; white-space: normal; line-height: 1.3; }

@media (max-width: 900px) {
  .hero { padding: 28px 24px; }
}
@media (max-width: 640px) {
  .hero { border-radius: 24px; }
  .pkg-card { padding: 24px 18px; }
  .dl-card { padding: 20px 18px; }
  .pol-row { padding: 14px 16px; }
}
@media print {
  .tile, .dl-card, .pkg-card, .upsell { box-shadow: none !important; transform: none !important; }
}

/* ---------------- retired for one release: the gradient surfaces this redesign flattened (do not re-enable) ----------------
.hero { background: radial-gradient(700px 300px at 100% 0%, rgba(43, 179, 159, .45), transparent 60%), linear-gradient(135deg, var(--navy) 0%, var(--blue-deep) 55%, #175B87 100%); box-shadow: var(--shadow); border-radius: 20px; }
.upsell { background: radial-gradient(500px 200px at 0% 0%, #FFF6E2, transparent 70%), #FFFDF8; }
.tile.locked { background: linear-gradient(180deg, #FFFCF5, #fff); }
--------------------------------------------------------------------------------------------------------------------------- */