/* Stoneledger Hosts on the website (7 Oct 2026): the landing page, the free profit check and the
   guides for hosts. The site's own tokens only (brand/tokens.css, site.css), so all four themes dress
   these pages as they dress every other. Loaded after site.css on the Hosts pages alone. */

/* ---- the hero: the proposition beside a month that opens ---- */
.hx-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--space-6); align-items: center; padding-bottom: var(--space-6); }
.hx-title { max-width: 21ch; }
.hx-title-2 { display: block; margin-top: var(--space-2); color: var(--color-brand-ink, var(--color-brand-primary)); }
.hx-cta-row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
.hx-trust { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-4); font-size: 14px; color: var(--color-text-secondary); }
/* On a phone the theme's picture rises just under the hero's buttons (brand/tokens.css), and this line
   sits on it: so it stands on the page's own colour, as the site's peaks do (--peaks-backing). */
@media (max-width: 900px) {
  .hx-trust { width: fit-content; padding: 6px 12px; border-radius: 999px;
              background: color-mix(in srgb, var(--color-page) 88%, transparent); }
}
.hx-trust .ic { width: 16px; height: 16px; color: var(--color-accent); flex: none; }

.hx-demo { margin: 0; }
.hx-demo-card {
  position: relative; isolation: isolate;
  padding: var(--space-5); border-radius: var(--radius-panel);
  background: var(--surface-card, var(--color-surface)); border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card), var(--highlight-top);
}
/* Under a glass theme's card, a veil of the page's own colour (brand/tokens.css, --hx-demo-veil; none where the
   card is solid), above the card's own glass and below its words. */
.hx-demo-card::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--hx-demo-veil, transparent); }
.hx-demo-tag { margin: 0 0 var(--space-3); font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-secondary); }
.hx-demo-top { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--space-3); align-items: center; }
.hx-demo-top > div { display: grid; gap: 2px; min-width: 0; }
.hx-k { font-size: 12px; font-weight: 650; color: var(--color-text-secondary); }
.hx-v { font-family: var(--font-display); font-weight: 700; font-size: clamp(26px, 3vw, 36px); line-height: 1.05; letter-spacing: -0.02em; color: var(--color-text-primary); font-variant-numeric: lining-nums tabular-nums; }
.hx-demo-made .hx-v { color: var(--color-brand-ink, var(--color-brand-primary)); }
.hx-s { font-size: 12.5px; color: var(--color-text-secondary); }
.hx-demo-arrow { font-size: 24px; color: var(--color-text-muted); }
.hx-demo-lines { list-style: none; margin: var(--space-4) 0 0; padding: var(--space-2) 0 0; border-top: 1px solid var(--color-border); display: grid; gap: 2px; }
.hx-line {
  width: 100%; display: flex; justify-content: space-between; gap: var(--space-3); align-items: baseline;
  padding: 9px 10px; border: 0; border-radius: var(--radius-control); background: none; cursor: pointer;
  font: inherit; font-size: 14.5px; color: var(--color-text-primary); text-align: left;
}
.hx-line span { text-decoration: underline; text-decoration-color: var(--color-border-strong, var(--color-border)); text-underline-offset: 3px; }
.hx-line b { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hx-line:hover, .hx-line[aria-expanded="true"] { background: var(--color-surface-muted, var(--color-surface)); }
.hx-line:focus-visible { outline: 2px solid var(--color-focus, var(--color-text-primary)); outline-offset: 1px; }
.hx-pop { margin: 2px 10px 8px; padding: 9px 12px; border-left: 3px solid var(--color-accent); border-radius: 0 var(--radius-control) var(--radius-control) 0;
  background: var(--color-surface-muted, var(--color-surface)); font-size: 13.5px; line-height: 1.5; color: var(--color-text-secondary); }
/* On its own little backing: at the card's foot a glass theme's card is at its thinnest (Chrome Flow, 2.6:1
   in the sweep of 7 Oct 2026). */
.hx-demo-foot { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-3) 0 0; font-size: 13.5px; color: var(--color-text-secondary);
                width: fit-content; padding: 4px 10px 4px 8px; border-radius: 999px; background: color-mix(in srgb, var(--color-page) 82%, transparent); }
.hx-demo-foot .ic { width: 16px; height: 16px; color: var(--color-accent); }
.hx-demo-foot b { color: var(--color-text-primary); }

/* ---- Making Tax Digital is coming ---- */
.hx-mtd {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-6); align-items: center;
  padding: var(--space-6); border-radius: var(--radius-panel);
  background: var(--color-surface-raised); border: 1px solid var(--color-border); border-top: 3px solid var(--color-accent); box-shadow: var(--shadow-card);
}
.hx-mtd h2 { margin: var(--space-2) 0 var(--space-3); }
.hx-mtd-copy > p:not(.eyebrow) { font-size: 16.5px; line-height: 1.6; color: var(--color-text-secondary); }
.hx-mtd-dates { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.hx-mtd-dates li { display: grid; gap: 2px; padding: var(--space-3) var(--space-4); border-radius: var(--radius-card); border: 1px solid var(--color-border); background: var(--surface-card, var(--color-surface)); }
.hx-mtd-dates b { font-size: 17px; color: var(--color-text-primary); }
.hx-mtd-dates span { font-size: 14px; color: var(--color-text-secondary); }
.hx-mtd-dates li.next { border: 2px solid var(--color-accent); }

/* ---- steps, the chain, cards in fours and twos ---- */
.hx-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.hx-steps li { display: flex; gap: var(--space-3); align-items: flex-start; }
.hx-step-n { flex: none; display: inline-flex; width: 36px; height: 36px; border-radius: 50%; align-items: center; justify-content: center;
  background: var(--color-button-primary-bg); color: var(--color-button-primary-text); font-weight: 750; }
.hx-steps h3 { margin: 4px 0 var(--space-2); font-size: var(--h-card); font-weight: 650; }
.hx-steps p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--color-text-secondary); }
.hx-chain { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.hx-chain li { position: relative; display: grid; gap: 3px; padding: var(--space-4); border-radius: var(--radius-card);
  border: 1px solid var(--color-border); background: var(--surface-card, var(--color-surface)); }
.hx-chain li + li::before { content: "→"; position: absolute; left: calc(-1 * var(--space-4) + 2px); top: 50%; transform: translateY(-50%); color: var(--color-text-muted); font-size: 18px; }
.hx-chain li.ok { border: 2px solid var(--color-accent); }
.hx-chain-k { font-size: 11.5px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-secondary); }
.hx-chain b { font-size: 16.5px; color: var(--color-text-primary); }
.hx-chain span:not(.hx-chain-k) { font-size: 14px; color: var(--color-text-secondary); }
.crc-cards.hx-cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.crc-cards.hx-cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.crc-cards.hx-guides { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hx-status { margin-top: var(--space-6); }
.hx-cmp td.yes { color: var(--color-text-primary); font-weight: 650; }
.hx-cmp thead th:nth-child(n+2), .hx-cmp td { text-align: left; }
.hx-boxes thead th, .hx-boxes td, .hx-boxes th { text-align: left !important; white-space: normal !important; }

/* ---- pricing ---- */
.hx-prices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); align-items: stretch; }
.hx-price {
  position: relative; display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-5); border-radius: var(--radius-card);
  background: var(--surface-card, var(--color-surface)); border: 1px solid var(--color-border); box-shadow: var(--shadow-card), var(--highlight-top);
}
.hx-price-best { border: 2px solid var(--color-accent); }
.hx-price-flag { position: absolute; top: -12px; right: var(--space-4); margin: 0; padding: 3px 10px; border-radius: var(--radius-pill);
  background: var(--color-button-primary-bg); color: var(--color-button-primary-text); font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.hx-price-name { margin: 0; font-size: 13px; font-weight: 750; letter-spacing: var(--tracking-eyebrow, .08em); text-transform: uppercase; color: var(--color-text-secondary); }
.hx-price-big { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(44px, 4.6vw, 60px); line-height: 1; letter-spacing: -0.02em;
  color: var(--color-brand-ink, var(--color-brand-primary)); font-variant-numeric: lining-nums; }
.hx-price-big small { font-family: var(--font-body); font-size: 16px; font-weight: 500; letter-spacing: 0; color: var(--color-text-secondary); }
.hx-price-alt { margin: -2px 0 0; font-size: 14px; font-weight: 600; color: var(--color-text-secondary); }
.hx-price-what { margin: var(--space-2) 0 0; font-size: 15px; line-height: 1.6; color: var(--color-text-secondary); }
.hx-price-list { list-style: none; margin: var(--space-2) 0 var(--space-4); padding: 0; display: grid; gap: 6px; flex: 1; align-content: start; }
.hx-price-list li { position: relative; padding-left: 22px; font-size: 14.5px; color: var(--color-text-primary); }
.hx-price-list li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 10px; height: 6px; border-left: 2px solid var(--color-accent); border-bottom: 2px solid var(--color-accent); transform: rotate(-45deg); }
.hx-price .btn { align-self: flex-start; }

/* ---- accountants, questions, small print ---- */
.hx-acc { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap;
  padding: var(--space-6); border-radius: var(--radius-panel); background: var(--color-surface-raised); border: 1px solid var(--color-border); }
.hx-acc > div { max-width: 62ch; }
.hx-acc h2 { margin: var(--space-2) 0 var(--space-3); }
.hx-acc p:not(.eyebrow) { font-size: 16px; line-height: 1.6; color: var(--color-text-secondary); }
.hx-faq { max-width: 820px; display: grid; gap: var(--space-2); }
.hx-faq details { position: relative; isolation: isolate; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--surface-card, var(--color-surface)); }
/* The sample month's veil under each answer too: on a phone in Chrome Flow an open answer ran over bright chrome. */
.hx-faq details::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--hx-demo-veil, transparent); }
.hx-faq summary { cursor: pointer; padding: var(--space-4); font-size: 16.5px; font-weight: 650; color: var(--color-text-primary); }
.hx-faq summary:focus-visible { outline: 2px solid var(--color-focus, var(--color-text-primary)); outline-offset: 2px; border-radius: var(--radius-card); }
.hx-faq details p { margin: 0; padding: 0 var(--space-4) var(--space-4); font-size: 15.5px; line-height: 1.65; color: var(--color-text-primary); }
.hx-tm { margin-top: var(--space-4); font-size: 12.5px; line-height: 1.5; color: var(--color-text-secondary); }
.walk-cta-body .hx-tm { max-width: 70ch; margin-left: auto; margin-right: auto; }

/* ---- the guides: reading width ---- */
/* The guides' long text stands on the page's own colour, veiled, so it reads wherever a theme's picture
   rises behind it - the site's own --peaks-backing, a little stronger (the legibility sweep, 7 Oct 2026:
   1.1 to 2.9:1 on Ridge Peak and Chrome Flow where the words crossed the art). */
.hx-prose { max-width: 840px; padding-top: var(--space-6); padding-bottom: var(--space-6);
            background: color-mix(in srgb, var(--color-page) 92%, transparent); border-radius: var(--radius-panel);
            box-shadow: 0 0 0 1px var(--color-border); }
@media (min-width: 621px) { .hx-prose { padding-left: var(--space-6); padding-right: var(--space-6); } }
/* The features list, the same way: on a phone in Chrome Flow it ran over the brightest of the chrome
   (3.6 to 4.3:1 in the sweep of 7 Oct 2026). */
.hx-features .plan-list { padding: var(--space-5); border-radius: var(--radius-panel);
                          background: color-mix(in srgb, var(--color-page) 88%, transparent); box-shadow: 0 0 0 1px var(--color-border); }
.hx-prose h2 { margin: var(--space-6) 0 var(--space-3); font-size: clamp(22px, 2.2vw, 28px); line-height: 1.2; }
.hx-prose h2:first-child { margin-top: 0; }
.hx-prose p, .hx-prose li { font-size: 16.5px; line-height: 1.7; color: var(--color-text-secondary); }
.hx-prose p { margin: 0 0 var(--space-3); }
.hx-prose ul, .hx-prose ol { margin: 0 0 var(--space-4); padding-left: 1.3em; display: grid; gap: var(--space-2); }
.hx-prose b { color: var(--color-text-primary); }
.hx-prose .crc-cards { margin: var(--space-4) 0 var(--space-5); }
.hx-prose .compare-scroll { margin: var(--space-3) 0 var(--space-4); }
.hx-sources { margin-top: var(--space-6) !important; padding-top: var(--space-4); border-top: 1px solid var(--color-border); font-size: 13.5px !important; }

/* ---- the free profit check ---- */
.hx-check { display: grid; gap: var(--space-5); }
/* The check is a tool, so it stands on the calculators' own panel (brand/tokens.css, --tool-panel-*): on a
   phone the theme's picture rises just where its sample line sits (Ridge Peak, 1.75:1, 7 Oct 2026). */
.crc-section .hx-check { background: var(--tool-panel-bg); border: var(--tool-panel-border); border-radius: var(--radius-panel);
                         padding: var(--tool-panel-pad); box-shadow: var(--tool-panel-shadow); }
@media (max-width: 620px) { .crc-section .hx-check { padding: min(var(--tool-panel-pad), var(--space-4)); } }
.hx-drop {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; cursor: pointer;
  padding: var(--space-7) var(--space-5); border: 2px dashed var(--color-border-strong, var(--color-border)); border-radius: var(--radius-panel);
  background: var(--color-surface-muted, var(--color-surface)); color: var(--color-text-secondary);
}
.hx-drop:hover, .hx-drop.over { border-color: var(--color-accent); }
.hx-drop:focus-within { outline: 2px solid var(--color-focus, var(--color-text-primary)); outline-offset: 3px; }
.hx-drop .ic { width: 32px; height: 32px; color: var(--color-accent); }
.hx-drop b { font-size: 18px; color: var(--color-text-primary); }
.hx-drop span { font-size: 14.5px; }
.hx-check-sample { width: fit-content; margin: 0 auto; padding: 6px 14px; border-radius: 999px; font-size: 15px; color: var(--color-text-primary); text-align: center;
                    background: color-mix(in srgb, var(--color-page) 88%, transparent); }
.hx-msg { padding: var(--space-3) var(--space-4); border-radius: var(--radius-card); border: 1px solid var(--color-border); font-size: 15px; line-height: 1.55; color: var(--color-text-primary);
  background: var(--color-surface-muted, var(--color-surface)); }
.hx-msg.warn { border-left: 4px solid var(--color-warning, var(--color-accent)); }
.hx-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.hx-tile { display: grid; gap: 2px; padding: var(--space-4); border-radius: var(--radius-card); border: 1px solid var(--color-border); background: var(--surface-card, var(--color-surface)); }
.hx-tile .hx-k { font-size: 12px; }
.hx-tile .hx-v { font-size: clamp(22px, 2.4vw, 30px); }
.hx-tile.made { border: 2px solid var(--color-accent); }
.hx-check h3 { margin: 0 0 var(--space-3); font-size: var(--h-card); font-weight: 650; }
.hx-check table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.hx-check th, .hx-check td { padding: 9px 10px; border-bottom: 1px solid var(--color-border); text-align: left; color: var(--color-text-secondary); }
.hx-check thead th { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; font-weight: 650; }
.hx-check td.num, .hx-check th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--color-text-primary); }
.hx-costs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); }
.hx-costs label { display: grid; gap: 4px; font-size: 13.5px; font-weight: 650; color: var(--color-text-primary); }
.hx-costs label small { font-weight: 500; color: var(--color-text-secondary); }
.hx-costs input { height: 44px; padding: 0 12px; border-radius: var(--radius-control); border: 1px solid var(--color-border-strong, var(--color-border));
  background: var(--color-field-bg, var(--color-surface)); color: var(--color-field-text, var(--color-text-primary)); font: inherit; font-size: 16px; }
.hx-costs input:focus { outline: 2px solid var(--color-focus, var(--color-text-primary)); outline-offset: 1px; }
.hx-result { display: grid; gap: var(--space-3); padding: var(--space-5); border-radius: var(--radius-panel); border: 2px solid var(--color-accent); background: var(--surface-card, var(--color-surface)); }
.hx-result-row { display: flex; justify-content: space-between; gap: var(--space-3); font-size: 15.5px; color: var(--color-text-secondary); padding: 4px 0; border-bottom: 1px dashed var(--color-border); }
.hx-result-row b { color: var(--color-text-primary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hx-result-row.total { border-bottom: 0; border-top: 2px solid var(--color-text-secondary); padding-top: var(--space-2); font-size: 18px; font-weight: 700; color: var(--color-text-primary); }
.hx-caveat { font-size: 14.5px; line-height: 1.55; color: var(--color-text-secondary); }
.hx-next { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.hx-scroll { overflow-x: auto; }

/* ---- narrower screens ---- */
@media (max-width: 1000px) {
  .hx-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .crc-cards.hx-cards-4, .crc-cards.hx-guides { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hx-prices { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  .hx-mtd { grid-template-columns: minmax(0, 1fr); }
  .hx-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hx-costs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .hx-steps, .hx-chain { grid-template-columns: minmax(0, 1fr); }
  .hx-chain li + li::before { content: "↓"; left: 50%; top: calc(-1 * var(--space-4) + 2px); transform: translateX(-50%); }
  .crc-cards.hx-cards-2 { grid-template-columns: minmax(0, 1fr); }
  .hx-mtd { padding: var(--space-5); }
}
@media (max-width: 560px) {
  .crc-cards.hx-cards-4, .crc-cards.hx-guides { grid-template-columns: minmax(0, 1fr); }
  .hx-demo-top { grid-template-columns: minmax(0, 1fr); }
  .hx-demo-arrow { transform: rotate(90deg); justify-self: start; }
  .hx-costs { grid-template-columns: minmax(0, 1fr); }
  .hx-tiles { grid-template-columns: minmax(0, 1fr); }
}