/* HomeIsSecure, human redesign 2026-10-14: how it works, FAQ, pricing, join and contact (ART-DIRECTION.md section 5).
   1 how it works (the route of five stops, the charcoal board of commitments, is / is not)  2 FAQ (the ledger book:
   index tabs on a white ledger sheet on a charcoal board, the help desk at its foot)  3 pricing (hang-tags, the comparison table, the questions)  4 join (the kraft plan
   hang-tag beside the work-order sheet)  5 contact (the sheet, the photo, the contact tag)  6 form controls on the
   work-order sheets  7 tablets and phones. */

:root { --kraft-50: #f3ebde; }   /* kraft half-way to white: the fill of the sheet's fields */

/* ---------------------------------------------------------------- 1 how it works (.h-howp) */
.hw-head { padding: 28px 0 56px; }
.hw-top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); align-items: start; margin-bottom: 40px; }
.hw-top h1 { grid-column: 1 / span 6; max-width: 12ch; margin: 0; font-size: 64px; line-height: 1; }
.hw-intro { grid-column: 8 / -1; padding-top: 6px; }
.hw-intro .lede { margin-bottom: 28px; }
.hw-strip { aspect-ratio: 31 / 11; margin: 0; }
/* the left third of the source is an out-of-focus monitor: the frame is enlarged towards the coordinator (review
   2026-10-14). Photos pass 2026-10-14 (owner: "head is cutting"): 1.3 times about her eyes cut her head off at the top
   on every screen; now 1.12 times about the top edge, with the crop at the top of the source (object-position 70% 2%,
   set on the photo in HowItWorksContent.tsx), so the strip shows her whole head, headset included, at every size */
.hw-strip img { transform: scale(1.12); transform-origin: 70% 0; }
/* the five stops: a 3 px sky line down the left through square tan markers; each stop a ruled row */
.hw-steps { padding: 32px 0 72px; }
.hw-route { position: relative; margin: 0; padding: 0; list-style: none; }
.hw-route::before { content: ""; position: absolute; left: 23px; top: 40px; bottom: 80px; width: 3px; background: repeating-linear-gradient(180deg, var(--sky) 0 12px, transparent 12px 21px); }
.hw-stop { position: relative; display: grid; grid-template-columns: 46px minmax(0, 5fr) minmax(0, 6fr); column-gap: 40px; align-items: start; max-width: none; margin: 0; padding: 36px 0 40px; scroll-margin-top: calc(var(--hdr) + 16px); }
.hw-stop + .hw-stop { border-top: 1px solid var(--line-soft); }
.hw-stop > * { min-width: 0; }
.hw-mk { position: relative; z-index: 1; display: grid; place-items: center; width: 46px; height: 46px; border: 3px solid var(--charcoal); border-radius: 4px; background: var(--tan); color: var(--charcoal); font: 400 18px / 1 var(--f-tag); }
.hw-k { margin: 2px 0 10px; color: var(--muted); font: 400 12px / 1.3 var(--f-tag); letter-spacing: var(--track-tag); text-transform: uppercase; }
.hw-title h2 { max-width: 16ch; margin: 0; font-size: 36px; line-height: 1.08; }
.hw-txt { max-width: 58ch; margin: 30px 0 0; font-size: 18px; line-height: 1.6; }
/* what we stand by: the heading beside the checklist on a charcoal board */
.hw-rgrid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); align-items: start; }
.hw-rhead { grid-column: 1 / span 4; }
.hw-rhead h2 { margin: 0 0 18px; color: var(--white); }
.hw-rhead .lead { color: var(--on-dark-muted); }
.hw-rlist { grid-column: 6 / -1; }
.hw-rlist > li:first-child { padding-top: 4px; }
.hw-rlist > li + li { border-top-color: rgba(255, 255, 255, 0.16); }
.hw-rlist h3 { color: var(--white); font-size: 22px; }
.hw-rlist p { color: var(--on-dark-muted); }
/* is / is not: the photo, a kraft card with tan checks, an outlined card with charcoal crosses, the note */
.hw-isnot { padding: 72px 0 64px; }
.hw-isnot > .wrap > h2 { max-width: 20ch; margin: 0 0 40px; }
.hw-igrid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gut); align-items: stretch; }
.hw-iph { grid-column: 1 / span 4; grid-row: 1 / span 2; min-height: 420px; margin: 0; }
.hw-iph img { position: absolute; inset: 0; }
.in-c { padding: 30px 32px 30px; border-radius: var(--card-r); }
.in-c.yes { grid-column: 5 / span 4; }
.in-c.no { grid-column: 9 / span 4; border: 1.5px solid var(--charcoal); background: var(--white); }
.in-c h3 { margin: 0 0 18px; font-size: 24px; }
.in-c ul { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.in-c li { display: flex; align-items: flex-start; gap: 12px; max-width: none; margin: 0; font-size: 17px; line-height: 1.45; }
.in-c li .ck { margin-top: 2px; }
.in-c.yes { background-image: var(--grain); }
.xk { position: relative; flex: none; width: 18px; height: 18px; margin-top: 3px; border: 1.5px solid var(--charcoal); border-radius: 3px; }
.xk::before, .xk::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; background: var(--charcoal); }
.xk::before { transform: translate(-50%, -50%) rotate(45deg); }
.xk::after { transform: translate(-50%, -50%) rotate(-45deg); }
.hw-igrid .in-note { grid-column: 5 / -1; align-self: end; max-width: none; margin: 0; padding: 18px 22px; border-left: 6px solid var(--tan); border-radius: 4px; background: var(--kraft-50); font-size: 17px; line-height: 1.55; }

/* ---------------------------------------------------------------- 2 FAQ (.h-faqp): the ledger book (re-set after the
   client review of 2026-10-14: tabs over an accordion beside a sidebar is the layout three other JDA sites use, and
   the count chips on the tabs read as an admin dashboard). The h1 and lede on white; then a charcoal board holding a
   white ledger sheet with four equal index tabs standing on its top edge (kraft, the open one white, taller and joined
   to the sheet); on the sheet a margin column with the topic's Michroma number and h2 beside the ledger rows (Q.01
   tag column, inner.css section 5); at the board's foot the help desk on one line. */
.fqp-head { padding: 28px 0 48px; }
.fqp-head h1 { margin: 0 0 18px; font-size: 64px; line-height: 1; }
.fqp-head .lede { margin: 0; }
.h-faqp main > .fq-book { margin-top: 0; padding: 64px 0 52px; }
/* the tabs share the row height; the closed ones stand 10 px lower, so the open one is the tallest and joins the sheet */
.fqt-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-items: stretch; margin: 0; padding: 0; border: 0; }
.fqt-row .fqt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
  min-height: 72px;
  margin: 10px 0 0;
  padding: 12px 20px 13px;
  border: 0;
  border-radius: 10px 10px 0 0;
  background: var(--kraft) var(--grain);
  color: var(--charcoal);
  font: 400 12px / 1.3 var(--f-tag);
  letter-spacing: 0.1em;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.fqt-row .fqt:hover { background-color: var(--kraft-50); }
.fqt-row .fqt.on, .fqt-row .fqt[aria-selected="true"] { margin-top: 0; padding-bottom: 16px; background: var(--white); color: var(--charcoal); }
.fqt-row .fqt:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }
.fqt-no { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; letter-spacing: var(--track-tag); }
.fqt-no::before { content: ""; width: 8px; height: 8px; border: 1.5px solid currentColor; border-radius: 1px; }
.fqt.on .fqt-no, .fqt[aria-selected="true"] .fqt-no { color: var(--charcoal); }
.fqt.on .fqt-no::before, .fqt[aria-selected="true"] .fqt-no::before { border-color: var(--tan); background: var(--tan); }
/* the topic's name in Schibsted Grotesk 700, 16 px; Michroma only for the small 01-04 numeral (client review
   2026-10-14: whole phrases in wide Michroma read as sci-fi) */
.fqt-t { max-width: 100%; font: 700 16px / 1.25 var(--f-sans); letter-spacing: -0.005em; text-transform: none; overflow-wrap: break-word; text-wrap: balance; }
.fq-sheet { position: relative; border-radius: 0 0 var(--card-r) var(--card-r); background: var(--white); color: var(--charcoal); }
.fq-sheet :focus-visible { outline-color: var(--charcoal); }
/* the sheet is white inside the on-dark board: its stamped tags print charcoal again */
.fq-sheet .tag { color: var(--charcoal); }
.fqp { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); align-items: start; padding: 48px 48px 44px; }
.fqp[hidden] { display: none; }
.fqp-side { grid-column: 1 / span 4; padding-right: 16px; }
.fqp-no { display: block; margin: 0 0 16px; color: var(--charcoal); font: 400 48px / 1 var(--f-tag); letter-spacing: -0.02em; }
.fqp-side h2 { max-width: 12ch; margin: 0; font-size: 34px; line-height: 1.1; }
.fqp .ledger { grid-column: 5 / -1; border-top: 2px solid var(--charcoal); }
/* the help desk: the question and the reply time, the work-order lines side by side, the button (client review
   2026-10-14: the stock person-at-laptop photo beside "Still have a question?" is the layout other JDA sites use; it
   is left out) */
.fq-desk { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; column-gap: 32px; margin-top: 36px; }
.fq-dtxt h3 { margin: 0 0 6px; color: var(--white); font-size: 26px; line-height: 1.15; }
.fq-dtxt p { max-width: 34ch; margin: 0; color: var(--on-dark-muted); font-size: 17px; line-height: 1.5; }
.fq-desk .in-wo { grid-auto-flow: column; grid-auto-columns: max-content; column-gap: 26px; max-width: none; padding: 12px 30px 12px 22px; }
.fq-desk .in-wo .wo-line + .wo-line { padding: 8px 0 8px 26px; border-top: 0; border-left: 1px dashed rgba(36, 34, 31, 0.3); }
.fq-desk .in-wo b { font-size: 19px; white-space: nowrap; overflow-wrap: normal; }
.fq-desk .in-wo .wo-line, .fq-desk .in-wo .wo-line:visited, .fq-desk .in-wo .wo-line:hover { color: var(--charcoal); }
.fq-desk .in-wo :focus-visible { outline-color: var(--charcoal); }
.fq-desk .h-btn { justify-self: end; }

/* ---------------------------------------------------------------- 3 pricing (.h-pricing) */
.pr-head { padding: 28px 0 8px; }
.pr-top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); align-items: start; }
.pr-top h1 { grid-column: 1 / span 6; max-width: 10ch; margin: 0; font-size: 64px; line-height: 1; }
.pr-intro { grid-column: 8 / -1; padding-top: 6px; }
.pr-intro .lede { margin-bottom: 22px; }
.pr-incl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; margin: 0; padding: 0; list-style: none; }
.pr-incl li { display: flex; align-items: flex-start; gap: 10px; max-width: none; margin: 0; font-size: 16px; font-weight: 700; line-height: 1.35; }
.pr-incl .ck { margin-top: 1px; }
.pr-plans { padding: 64px 0 72px; }
.pr-plans .pl-note { max-width: none; margin: 40px 0 0; color: var(--muted); font-size: 16px; text-align: center; }
/* the comparison table on the kraft board: a sticky charcoal header row, Michroma prices, tan ticks */
.pr-compare { scroll-margin-top: calc(var(--hdr) - 8px); }
.h-pricing .cmp-wrap { overflow: visible; }
.h-pricing .cmp { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; background: var(--white); border-radius: var(--card-r); font-size: 16px; line-height: 1.5; }
.h-pricing .cmp thead th { position: sticky; z-index: 2; top: calc(var(--hdr) - 1px); padding: 18px 20px; border: 0; background: var(--charcoal); color: var(--white); font: 800 22px / 1.15 var(--f-sans); letter-spacing: -0.01em; vertical-align: top; }
.h-pricing .cmp thead th:first-child { width: 24%; border-top-left-radius: var(--card-r); }
.h-pricing .cmp thead th:last-child { border-top-right-radius: var(--card-r); }
.h-pricing .cmp thead th > span { display: block; margin-bottom: 4px; }
.h-pricing .cmp thead th > a, .h-pricing .cmp thead th > a:visited { display: inline-flex; align-items: center; min-height: 36px; color: var(--white); font: 700 15px / 1.3 var(--f-sans); text-decoration: underline; text-decoration-color: var(--tan); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.h-pricing .cmp thead th > a:focus-visible { outline-color: var(--sky); }
/* a printed spec sheet (client review 2026-10-14: zebra rows and a tick in every cell read as a settings matrix): ruled
   rows, a 2 px charcoal rule under the prices; the tan tick only where a cell names an included feature, the charcoal
   crossed square of "It is not" (.xk) where it is not included, and the quantities as Michroma figures without a tick */
.h-pricing .cmp tbody th, .h-pricing .cmp td { padding: 16px 20px; border-bottom: 1px solid var(--ink-20); vertical-align: top; }
.h-pricing .cmp tbody tr:last-child > * { border-bottom: 0; }
.h-pricing .cmp tbody th { color: var(--charcoal); font: 700 16px / 1.4 var(--f-sans); }
.h-pricing .cmp td { position: relative; padding-left: 46px; }
.h-pricing .cmp td::before { content: ""; position: absolute; left: 18px; top: 19px; width: 16px; height: 16px; border-radius: 2px; background: var(--tan) var(--check) no-repeat center / 11px 11px; }
.h-pricing .cmp td.is-na::before { box-sizing: border-box; border: 1.5px solid var(--charcoal); border-radius: 3px; background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 1.5l7 7M8.5 1.5l-7 7' fill='none' stroke='%2324221f' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat center / 9px 9px; }
.h-pricing .cmp .na { color: var(--muted); }
.h-pricing .cmp .cmp-price td { padding-left: 20px; font: 400 26px / 1.2 var(--f-tag); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.h-pricing .cmp .cmp-price > * { border-bottom: 2px solid var(--charcoal); }
.h-pricing .cmp .cmp-qty td { padding-left: 20px; font: 400 16px / 1.45 var(--f-tag); letter-spacing: 0.01em; font-variant-numeric: tabular-nums; }
.h-pricing .cmp .cmp-price td::before, .h-pricing .cmp .cmp-qty td::before { content: none; }
/* phones (< 700 px, with scripts): one plan column at a time beside the features (main.js sets .cmp[data-show]) */
.h-pricing .cmp-switch { display: none; }
@media (max-width: 699.98px) {
  /* the middle column is wider: STANDARD in Michroma is about 92 px at 11 px (review 2026-10-14: at 12 px / 0.08em
     its last letter stood outside the charcoal fill) */
  .js .h-pricing .cmp-switch { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr); gap: 8px; margin: 0 0 16px; }
  .js .h-pricing .cmp-switch button { min-width: 0; min-height: 48px; margin: 0; padding: 6px 4px; border: 1.5px solid var(--charcoal); border-radius: 3px; background: var(--white); color: var(--charcoal); font: 400 11px / 1.1 var(--f-tag); letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; }
  .js .h-pricing .cmp-switch button.on, .js .h-pricing .cmp-switch button[aria-pressed="true"] { background: var(--charcoal); color: var(--white); }
  .js .h-pricing .cmp thead th:not(:first-child), .js .h-pricing .cmp td { display: none; }
  .js .h-pricing .cmp[data-show="2"] thead th:nth-child(2), .js .h-pricing .cmp[data-show="2"] td:nth-child(2),
  .js .h-pricing .cmp[data-show="3"] thead th:nth-child(3), .js .h-pricing .cmp[data-show="3"] td:nth-child(3),
  .js .h-pricing .cmp[data-show="4"] thead th:nth-child(4), .js .h-pricing .cmp[data-show="4"] td:nth-child(4) { display: table-cell; }
  .js .h-pricing .cmp thead th:first-child { width: 40%; }
  .js .h-pricing .cmp thead th:nth-child(n) { border-radius: 0; }
  .js .h-pricing .cmp thead th:first-child { border-top-left-radius: var(--card-r); }
  .js .h-pricing .cmp[data-show] thead th:nth-child(n+2) { border-top-right-radius: var(--card-r); }
}
.pr-faq { padding: 72px 0 64px; }
.pr-fgrid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); align-items: start; }
.pr-fhead { grid-column: 1 / span 4; }
.pr-fhead h2 { margin: 0 0 16px; }
.pr-fhead > p { max-width: 32ch; margin: 0 0 24px; font-size: 18px; line-height: 1.55; }
.pr-fph { aspect-ratio: 4 / 3; margin: 24px 0 0; max-width: 360px; }
.pr-fbody { grid-column: 6 / -1; }
.pr-fbody .ledger { border-top: 2px solid var(--charcoal); }

/* ---------------------------------------------------------------- 4 join (.h-start): the kraft plan hang-tag beside
   the work-order sheet */
.jn-head { padding: 28px 0 40px; }
.jn-head h1 { margin: 0 0 18px; font-size: 64px; line-height: 1; }
.h-join { padding: 0 0 80px; }
.jn-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); align-items: start; }
.jn-sum { position: relative; grid-column: 1 / span 4; padding: 54px 26px 28px; border-radius: 6px; background: var(--kraft); background-image: var(--grain); clip-path: polygon(30px 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 0 100%, 0 30px); }
.jn-hole { position: absolute; top: 20px; left: 50%; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: var(--white); box-shadow: 0 0 0 4px rgba(36, 34, 31, 0.16), inset 0 1px 2px rgba(36, 34, 31, 0.4); }
.jn-ph { display: block; aspect-ratio: 16 / 9; margin: 0 0 20px; overflow: hidden; border-radius: var(--card-r); background: var(--white); }
.jn-ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.jn-sum .jp-lab { margin: 0 0 14px; font-size: var(--t-tag); }
.jn-pick { display: grid; margin: 0 0 22px; border-top: 1px solid var(--ink-20); }
.jn-pick a, .jn-pick a:visited { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 8px 10px 8px 12px; border-bottom: 1px solid var(--ink-20); border-left: 4px solid transparent; color: var(--charcoal); text-decoration: none; }
.jn-pick a b { font-size: 17px; font-weight: 800; }
.jn-pick a span { color: var(--muted); font: 400 12px / 1.2 var(--f-tag); white-space: nowrap; }
.jn-pick a:hover b { text-decoration: underline; text-decoration-color: var(--tan); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.jn-pick a.on { border-left-color: var(--charcoal); background: rgba(255, 255, 255, 0.5); }
.jn-pick a.on span { color: var(--charcoal); }
.jn-sum h2 { margin: 0 0 4px; font-size: 30px; }
.jn-sum .hp-tag { margin: 0 0 12px; color: var(--muted); font-size: 15px; font-weight: 700; }
.jn-sum .hp-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; margin: 0 0 14px; }
.jn-sum .hp-price b { font: 400 44px / 1 var(--f-tag); letter-spacing: -0.03em; }
.jn-sum .hp-price span { color: var(--muted); font-size: 15px; }
.jn-sum .hp-price s { font-family: var(--f-tag); font-size: 15px; text-decoration-thickness: 2px; }
.jn-sum .pl-b { margin: 0 0 16px; font-size: 16px; line-height: 1.5; }
.jn-sum .pl-f { display: grid; gap: 8px; margin: 0 0 18px; padding: 14px 0 0; border-top: 1.5px dashed rgba(36, 34, 31, 0.35); list-style: none; }
.jn-sum .pl-f li { position: relative; max-width: none; margin: 0; padding-left: 28px; font-size: 15px; line-height: 1.45; }
.jn-sum .pl-f li::before { content: ""; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 3px; background: var(--tan) var(--check) no-repeat center / 12px 12px; }
.jn-sum .pl-f li .ic { display: none; }
.jn-sum .jn-pp { margin: 0; color: var(--charcoal); font-size: 15px; font-weight: 600; }
/* phones: the feature list folds behind "What's included (n)" (the pricing hang-tags' toggle, home.css .ht-more /
   .ht-fold; hidden from 768 px and without scripts). n is the length of the list main.js shows for the chosen plan. */
.jn-sum:has(.pl-f > li:nth-child(6):last-child) .jn-n::before { content: "(6)"; }
.jn-sum:has(.pl-f > li:nth-child(7):last-child) .jn-n::before { content: "(7)"; }
.jn-sum:has(.pl-f > li:nth-child(8):last-child) .jn-n::before { content: "(8)"; }
.jn-sum:has(.pl-f > li:nth-child(9):last-child) .jn-n::before { content: "(9)"; }
.jn-sum:has(.pl-f > li:nth-child(10):last-child) .jn-n::before { content: "(10)"; }
.jn-sum:has(.pl-f > li:nth-child(11):last-child) .jn-n::before { content: "(11)"; }
.jn-sum:has(.pl-f > li:nth-child(12):last-child) .jn-n::before { content: "(12)"; }

/* the work-order sheet */
.jn-main { grid-column: 6 / -1; overflow: hidden; border: 1px solid var(--line-soft); border-radius: var(--card-r); background: var(--white); }
/* max-width: none: the strips are <p> elements and base.css caps every p at the 64ch measure, which left the strip
   7-8 px short of the sheet's right border (reviews 2026-10-14) */
.jn-strip { display: flex; align-items: center; max-width: none; min-height: 64px; margin: 0; padding: 12px 32px; background: var(--charcoal); background-image: var(--weave); }
.jn-strip .tag { color: var(--kraft); font-size: 13px; }
.jn-form, .jn-wait, .jn-done { padding: 32px 36px 36px; }
.jn-form > h2 { margin: 0 0 24px; font-size: 32px; }
.jn-form .row { --bs-gutter-x: 24px; --bs-gutter-y: 22px; }
.jn-wait, .jn-done { display: none; flex-direction: column; align-items: flex-start; gap: 12px; }
[data-join-wrap].loading .jn-form, [data-join-wrap].done .jn-form { display: none; }
[data-join-wrap].loading .jn-wait, [data-join-wrap].done .jn-done { display: flex; }
.jn-wait strong { font-size: 22px; }
.jn-wait small { color: var(--muted); font-size: 15px; }
.done-ic { display: block; width: 28px; height: 28px; border-radius: 3px; background: var(--tan) var(--check) no-repeat center / 18px 18px; }
.jn-done h2 { margin: 0; font-size: 32px; }
.jn-done p { margin: 0; font-size: 17px; }
.jn-done:focus-visible { outline: 3px solid var(--charcoal); outline-offset: -6px; }
.jn-help { color: var(--muted); }
/* the password toggle: a text button inside the field ("Show" / "Hide" follows main.js's .on) */
.h-start .pw { position: relative; }
/* the field keeps the toggle's width clear (in-between widths check, 16 Oct: "SHOW" is 83 px wide at 4 px from the
   edge, 87 px in all, and the 84 px reserve let the end of a long password and the caret slip 3 px under it) */
.h-start .pw .form-control { padding-right: 96px; }
.h-start .pw-t { position: absolute; top: 4px; right: 4px; bottom: 6px; display: flex; align-items: center; justify-content: center; min-width: 68px; padding: 0 12px; border: 0; border-radius: 3px; background: var(--white); color: var(--charcoal); font: 400 11px / 1 var(--f-tag); letter-spacing: var(--track-tag); text-transform: uppercase; cursor: pointer; }
.h-start .pw-t::after { content: "Show"; }
.h-start .pw-t.on::after { content: "Hide"; }
.h-start .pw-t:hover { background: var(--kraft); }
/* the SMS consent: a square box with a tan tick, the consent text, the two legal links under it */
.h-start .jn-consent { margin: 26px 0 22px; padding: 18px 0; border-top: 1.5px dashed rgba(36, 34, 31, 0.3); border-bottom: 1.5px dashed rgba(36, 34, 31, 0.3); }
.h-start .jn-consent .form-check-label { max-width: 66ch; color: var(--charcoal); font-size: 14px; line-height: 1.55; }
.h-start .jn-links { grid-column: 2; display: flex; flex-wrap: wrap; gap: 0 24px; margin: 6px 0 0; font-size: 15px; }
.h-start .jn-links a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.h-start .jn-submit { min-width: 220px; }
.h-start .jn-fine { max-width: 62ch; margin: 18px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; }

/* ---------------------------------------------------------------- 5 contact (.h-contact) */
.ct-head { padding: 28px 0 40px; }
.ct-head h1 { margin: 0 0 18px; font-size: 64px; line-height: 1; }
.ct-form { padding: 0 0 72px; }
.ct-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); align-items: start; }
.cf-card { grid-column: 1 / span 7; grid-row: 1 / span 2; overflow: hidden; border: 1px solid var(--line-soft); border-radius: var(--card-r); background: var(--white); }
.cf-strip { display: flex; align-items: center; max-width: none; min-height: 64px; margin: 0; padding: 12px 32px; background: var(--charcoal); background-image: var(--weave); }
.cf-strip .tag { color: var(--kraft); font-size: 13px; }
.cf-card form { padding: 32px 36px 36px; }
.cf-card form > h2 { margin: 0 0 6px; font-size: 32px; }
.cf-card .cf-sub { margin: 0 0 22px; color: var(--muted); font-size: 15px; }
.cf-card .row { --bs-gutter-x: 24px; --bs-gutter-y: 22px; }
.cf-card .cf-fine { max-width: 60ch; margin: 22px 0 22px; color: var(--muted); font-size: 15px; }
.cf-card [data-mini-form] .mini-wait, .cf-card [data-mini-form] .mini-done { padding: 8px 0; font-size: 18px; }
.ct-side { grid-column: 9 / -1; grid-row: 1; }
.ct-ph { aspect-ratio: 6 / 5; margin: 0 0 16px; }
.ct-panel { display: grid; padding: 18px 24px 20px; }
.ct-panel .cc, .ct-panel .cc:visited { display: grid; gap: 2px; min-height: 44px; padding: 12px 0; color: var(--charcoal); text-decoration: none; }
.ct-panel .cc + .cc { border-top: 1.5px dashed rgba(36, 34, 31, 0.3); }
.ct-panel .cc small { color: var(--muted); font: 400 11px / 1.3 var(--f-tag); letter-spacing: var(--track-tag); text-transform: uppercase; }
.ct-panel .cc b { font: 800 20px / 1.3 var(--f-sans); overflow-wrap: anywhere; }
.ct-panel .cc span { display: grid; }
.ct-panel .cc em { font-style: normal; font-size: 16px; }
.ct-panel a.cc:hover b { text-decoration: underline; text-decoration-color: var(--charcoal); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.ct-note { margin: 16px 0 0; padding: 16px 18px; border-left: 6px solid var(--tan); border-radius: 4px; background: var(--kraft-50); }
.ct-note p { margin: 0; font-size: 15px; line-height: 1.5; }
.ct-links { grid-column: 9 / -1; grid-row: 2; margin-top: 32px; }
.ct-links .qa-h { margin: 0 0 8px; font-size: 22px; }
.ct-qa { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--charcoal); }
.ct-qa li { max-width: none; margin: 0; border-bottom: 1px solid var(--ink-20); }
.ct-qa .qa, .ct-qa .qa:visited { display: grid; gap: 2px; min-height: 44px; padding: 14px 0; color: var(--charcoal); text-decoration: none; }
.ct-qa .qa b { font-size: 17px; font-weight: 800; }
.ct-qa .qa small { color: var(--muted); font-size: 15px; }
.ct-qa .qa:hover b { text-decoration: underline; text-decoration-color: var(--tan); text-decoration-thickness: 3px; text-underline-offset: 4px; }

/* ---------------------------------------------------------------- 6 form controls on the work-order sheets: labels
   Schibsted 700 15 px; fields 52 px on a pale kraft fill with a 2 px charcoal bottom edge; focus a 3 px charcoal
   ring; errors in words under the field */
.h-join .form-label, .ct-form .form-label { margin: 0 0 8px; color: var(--charcoal); font: 700 15px / 1.3 var(--f-sans); }
.h-join .form-control, .ct-form .form-control, .ct-form .form-select {
  min-height: 52px;
  padding: 12px 14px;
  border: 0;
  border-bottom: 2px solid var(--charcoal);
  border-radius: 4px 4px 0 0;
  background-color: var(--kraft-50);
  color: var(--charcoal);
  font: 400 17px / 1.4 var(--f-sans);
}
.ct-form textarea.form-control { min-height: 160px; }
.ct-form .form-select { padding-right: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M1 1l7 7 7-7' fill='none' stroke='%2324221f' stroke-width='2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 14px 9px; }
.h-join .form-control:focus, .ct-form .form-control:focus, .ct-form .form-select:focus { border-bottom-color: var(--charcoal); background-color: var(--white); outline: 3px solid var(--charcoal); outline-offset: 2px; box-shadow: none; }
.h-join .form-control.is-invalid, .ct-form .form-control.is-invalid, .ct-form .form-select.is-invalid { border: 2px solid var(--charcoal); border-radius: 4px; background-color: var(--white); }
.h-join .invalid-feedback, .ct-form .invalid-feedback { margin-top: 8px; padding: 2px 0 2px 10px; border-left: 3px solid var(--charcoal); color: var(--charcoal); font-size: 14px; }
.h-join .form-text { margin-top: 8px; color: var(--muted); font-size: 14px; }
.h-join .form-check-input { width: 24px; height: 24px; margin: 1px 0 0; border: 2px solid var(--charcoal); border-radius: 3px; background-color: var(--white); }
.h-join .form-check-input:checked { border-color: var(--charcoal); background: var(--tan) var(--check) no-repeat center / 15px 15px; }
.h-join .form-check-input:focus-visible { outline: 3px solid var(--charcoal); outline-offset: 2px; }
.h-join .form-check { grid-template-columns: 24px 1fr; column-gap: 14px; }

/* ---------------------------------------------------------------- 7 tablets and phones */
@media (max-width: 1199.98px) {
  .hw-top h1, .pr-top h1, .fqp-head h1, .jn-head h1, .ct-head h1 { font-size: 54px; }
  .hw-stop { grid-template-columns: 46px minmax(0, 1fr); row-gap: 14px; }
  .hw-txt { grid-column: 2; margin-top: 0; }
  .fqt-row .fqt { padding-inline: 16px; font-size: 11px; }
  .fqp { padding: 40px 36px 36px; }
  /* the question and reply time across the top, the work-order lines and the button under them */
  .fq-desk { grid-template-columns: minmax(0, 1fr) auto; row-gap: 20px; }
  .fq-dtxt { grid-column: 1 / -1; }
  .fq-desk .in-wo { grid-column: 1; grid-row: 2; justify-self: start; }
  .fq-desk .h-btn { grid-column: 2; grid-row: 2; }
  .jn-sum { grid-column: 1 / span 5; }
  .jn-main { grid-column: 6 / -1; }
}
@media (max-width: 991.98px) {
  .hw-top, .pr-top { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .hw-top h1, .hw-intro, .pr-top h1, .pr-intro { grid-column: 1; }
  .hw-strip { aspect-ratio: 16 / 8; }
  .hw-rgrid { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .hw-rhead, .hw-rlist { grid-column: 1; }
  .hw-igrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hw-iph { grid-column: 1 / -1; grid-row: auto; min-height: 0; aspect-ratio: 16 / 9; }
  .in-c.yes { grid-column: 1; }
  .in-c.no { grid-column: 2; }
  .hw-igrid .in-note { grid-column: 1 / -1; }
  .fqt-t { font-size: 15px; }
  .fqp { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .fqp-side, .fqp .ledger { grid-column: 1; }
  .fqp-side { display: flex; align-items: baseline; gap: 18px; padding: 0; }
  .fqp-no { margin: 0; font-size: 34px; }
  .fqp-side h2 { max-width: none; }
  .pr-fgrid { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  .pr-fhead, .pr-fbody { grid-column: 1; }
  .jn-grid { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .jn-sum, .jn-main { grid-column: 1; }
  .ct-grid { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .cf-card, .ct-side, .ct-links { grid-column: 1; grid-row: auto; }
  .ct-side { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
  .ct-ph { margin: 0; }
  .ct-note { grid-column: 1 / -1; margin: 0; }
  .ct-links { margin-top: 0; }
}
@media (max-width: 767.98px) {
  .hw-head, .fqp-head, .pr-head, .jn-head, .ct-head { padding-top: 16px; }
  .hw-top h1, .pr-top h1, .fqp-head h1, .jn-head h1, .ct-head h1 { font-size: 40px; line-height: 1.04; }
  .hw-strip { aspect-ratio: 4 / 3; }
  .hw-steps { padding: 16px 0 48px; }
  .hw-route::before { left: 21px; }
  .hw-stop { grid-template-columns: 44px minmax(0, 1fr); column-gap: 18px; padding: 28px 0 30px; }
  .hw-mk { width: 44px; height: 44px; font-size: 16px; }
  .hw-title h2 { font-size: 28px; }
  .hw-txt { font-size: 17px; }
  .hw-isnot { padding: 48px 0 40px; }
  .hw-igrid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .in-c.yes, .in-c.no { grid-column: 1; padding: 24px 22px; }
  /* phones: the four tabs two by two above the sheet, the numeral over the name (client review 2026-10-14: four
     full-width bars stacked like a settings menu) */
  .fqp-head { padding-bottom: 32px; }
  .h-faqp main > .fq-book { padding: 28px 0 32px; }
  .fqt-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
  .fqt-row .fqt, .fqt-row .fqt.on, .fqt-row .fqt[aria-selected="true"] { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 8px; min-height: 80px; margin: 0; padding: 12px 14px 14px; border-radius: 6px; font-size: 11px; }
  .fqt-t { font-size: 15px; line-height: 1.22; }
  .fq-sheet { border-radius: var(--card-r); }
  .fqp { padding: 24px 18px 22px; row-gap: 18px; }
  .fqp-no { font-size: 26px; }
  .fqp-side h2 { font-size: 26px; }
  .fq-desk { grid-template-columns: minmax(0, 1fr); row-gap: 18px; margin-top: 28px; }
  .fq-dtxt, .fq-desk .in-wo, .fq-desk .h-btn { grid-column: 1; grid-row: auto; }
  .fq-desk .in-wo { grid-auto-flow: row; grid-auto-columns: minmax(0, 1fr); justify-self: stretch; padding: 14px 20px 16px; }
  .fq-desk .in-wo .wo-line + .wo-line { padding: 12px 0 8px; border-left: 0; border-top: 1px dashed rgba(36, 34, 31, 0.3); }
  .fq-desk .h-btn { justify-self: start; }
  .pr-incl { grid-template-columns: minmax(0, 1fr); }
  .pr-plans { padding: 40px 0 48px; }
  .h-pricing .cmp thead th { top: calc(var(--hdr) - 1px); padding: 14px; font-size: 18px; }
  .h-pricing .cmp tbody th, .h-pricing .cmp td { padding: 14px; }
  .h-pricing .cmp td { padding-left: 40px; }
  .h-pricing .cmp td::before { left: 14px; top: 17px; }
  .h-pricing .cmp .cmp-price td { padding-left: 14px; font-size: 22px; }
  .h-pricing .cmp .cmp-qty td { padding-left: 14px; font-size: 15px; }
  .pr-faq { padding: 48px 0 40px; }
  .jn-sum { padding: 50px 18px 22px; }
  /* phones: the plan photo goes and the features fold, so the form starts on the second screen (review 2026-10-14) */
  .jn-ph { display: none; }
  .js .jn-sum .jn-more { margin: 4px 0 6px; }
  .js .jn-sum .pl-f { margin: 0 0 18px; padding-top: 10px; border-top: 0; }
  .jn-strip, .cf-strip { padding: 10px 20px; min-height: 56px; }
  .jn-form, .jn-wait, .jn-done, .cf-card form { padding: 24px 20px 26px; }
  .jn-form > h2, .cf-card form > h2, .jn-done h2 { font-size: 27px; }
  .h-start .jn-submit { width: 100%; }
  .ct-side { grid-template-columns: minmax(0, 1fr); }
  .ct-ph { aspect-ratio: 16 / 10; }
}
@media (prefers-reduced-motion: reduce) {
  .fqt-row .fqt { transition: none; }
}
/* devices pass 2026-10-14: the smallest phones (320-374 px), where text ran past its box */
@media (max-width: 374.98px) {
  /* "HomeIsSecure" is one long word: at 40 px it ran 18 px past the 272 px column at 320 px */
  .hw-top h1, .pr-top h1, .fqp-head h1, .jn-head h1, .ct-head h1 { font-size: 34px; }
  /* the plan switch: PREMIUM in Michroma ran 7 px past its button; the tracking goes, and (devices pass 2026-10-15:
     at 320 px PREMIUM and STANDARD still touched their borders) each button is as wide as its word, the space left
     shared equally, so every word has about 6 px either side */
  .js .h-pricing .cmp-switch { grid-template-columns: repeat(3, auto); gap: 4px; }
  .js .h-pricing .cmp-switch button { padding-inline: 2px; letter-spacing: 0; }
  /* the feature names (e.g. "Finding homeowners") get a wider first column */
  .js .h-pricing .cmp thead th:first-child { width: 46%; }
  .h-pricing .cmp tbody th { padding-inline: 12px; }
  /* FAQ: the tab "About HomeIsSecure" broke inside the word ("HomeIsSecur / e") and the sheet's heading ran into the
     sheet's padding */
  .fqt-row .fqt, .fqt-row .fqt.on, .fqt-row .fqt[aria-selected="true"] { padding-inline: 10px; }
  .fqt-t { font-size: 14px; }
  .fqp-side { gap: 12px; }
  .fqp-no { font-size: 22px; }
  .fqp-side h2 { font-size: 22px; }
}
/* devices pass 2026-10-15: at 375-389 px PREMIUM still touched its button's border; there too each button is as wide
   as its word and the space left is shared equally (the 320-374 px rule above) */
@media (min-width: 375px) and (max-width: 389.98px) {
  .js .h-pricing .cmp-switch { grid-template-columns: repeat(3, auto); }
}
/* ==== extra look 1200/1536 (2026-10-16)
   FAQ index tabs, tablets and desktops (768 px up): where one topic name wraps to two lines (768-1216 px, e.g.
   "Property and homeowner data" at 1200 px) the tabs, which set their content on the bottom edge, pushed that tab's
   01-04 numeral 19-23 px above the numerals of the other tabs. The numeral now keeps its place under the tab's top
   edge and the extra height goes between numeral and name, so the numerals stay in one line and the names still sit
   on the bottom edge. The top paddings equal the old free space above the numeral where no name wraps (1232 px up),
   so those widths draw exactly as before (the open tab's numeral 3 px higher, as there). */
@media (min-width: 768px) {
  .fqt-row .fqt { padding-top: 16.7px; }
  .fqt-row .fqt.on, .fqt-row .fqt[aria-selected="true"] { padding-top: 23.7px; }
  .fqt-row .fqt .fqt-no { margin-bottom: auto; }
}