/* Site kit UI — the kit's ONE stylesheet (swap the design here).
   Styles the client's elements (usage hint, windows, toast, account menu) and the kit pages
   (sign-in, account, pricing, checkout return, unavailable). Every selector is a kit class (.ht-*),
   or a sign-in widget class (.ext-*, .btn-ext) scoped under a kit container, so it never fights the
   host's own CSS. 390 px first.

   Brand colour comes ONLY from tokens: --ht-brand, --ht-brand-hover, --ht-brand-soft, and three
   optional ones for contrast — --ht-brand-text (the brand colour as text on white), --ht-brand-fill
   and --ht-brand-fill-hover (a surface under white text). A light brand colour (a green) needs
   darker shades there to reach 4.5:1; unset, they are --ht-brand and --ht-brand-hover.
   The host sets the tokens in its own stylesheet (web-account/host/slot.css) and ht-limits.js sets
   them from the catalog theme at runtime. The defaults below sit in :where(:root) — zero specificity —
   so a host's `:root { … }` wins whatever order the stylesheets load in. Tints of the brand colour
   use color-mix() inside @supports blocks, after a plain declaration that works without it. */
:where(:root) {
  --ht-brand: #4169E1;
  --ht-brand-hover: #3154C6;
  --ht-brand-soft: #eef2ff;
  /* What the rules below use for brand-coloured text and for fills under white text. */
  --ht-c-text: var(--ht-brand-text, var(--ht-brand));
  --ht-c-fill: var(--ht-brand-fill, var(--ht-brand));
  --ht-c-fill-hover: var(--ht-brand-fill-hover, var(--ht-brand-hover));
  --ht-ink: #0f1c33;
  --ht-text: #2b3442;
  --ht-muted: #5a6478;
  --ht-faint: #667085; /* the lightest text colour: still 4.5:1 on white and on the card tint */
  --ht-border: #e3e7ed;
  --ht-border-2: #dee2e6;
  --ht-card-line: #e8ecf4;
  --ht-line: #eef1f6;
  --ht-surface: #f7f8fb;
  --ht-hover: #f3f5f9;
  --ht-track: #e9edf3;
  --ht-ok-bg: #eaf7ef;
  --ht-ok-line: #cfe9da;
  --ht-ok-ink: #1f7a45;
  --ht-warn: #e0a100;
  --ht-warn-bg: #fff8e6;
  --ht-warn-line: #f3e2b3;
  --ht-warn-ink: #7a5a00;
  --ht-err: #c0392b;
  --ht-err-bg: #fdecec;
  --ht-err-line: #f6d2d2;
  --ht-danger: #b42318;
  --ht-radius: 14px;
  --ht-shadow: 0 18px 48px rgba(15, 28, 51, .18), 0 2px 8px rgba(15, 28, 51, .06);
  --ht-shadow-card: 0 4px 20px rgba(15, 28, 51, .05);
  --ht-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* Icons are masks painted with a token colour, so they follow the brand. */
  --ht-i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --ht-i-dash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M7 12h10'/%3E%3C/svg%3E");
  --ht-i-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E");
  --ht-i-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.6 5.6 6.1.7-4.5 4.1 1.2 6L12 16.5 6.6 19.4l1.2-6L3.3 9.3l6.1-.7z'/%3E%3C/svg%3E");
  --ht-i-long: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6h16M4 10h16M4 14h10M4 18h6'/%3E%3C/svg%3E");
  --ht-i-net: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M2 9a15 15 0 0 1 20 0M5 12.5a10 10 0 0 1 14 0M8.5 16a5 5 0 0 1 7 0'/%3E%3Ccircle cx='12' cy='19.5' r='1'/%3E%3C/svg%3E");
  --ht-i-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l9.5 16.5h-19z'/%3E%3Cpath d='M12 10v4.5M12 17.5v.01'/%3E%3C/svg%3E");
  --ht-i-back: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 14L4 9l5-5'/%3E%3Cpath d='M4 9h10.5a5.5 5.5 0 0 1 0 11H11'/%3E%3C/svg%3E");
  --ht-i-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
  --ht-i-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E");
  --ht-i-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}

/* ── Usage hint (#htUsage) ── */
/* The hint has ONE height from the moment it is shown (one line; two below 480 px, where the usual hint wraps), so
   "Checking your words…" → the numbers → a later answer never moves the page's button again. On a result toolbar
   (.ht-usage-inline) its line is also reserved while hidden, from the first paint. On a home page (an indexed page)
   it takes no space at rest — the page looks as without the kit — and appears on the visitor's first click into
   the text box. The same rules are in web-account/host/slot.css (the site's own stylesheet), which the first
   paint already has. */
.ht-usage {
  display: flex; flex-wrap: wrap; align-items: center; align-content: flex-start; gap: 4px 6px;
  margin: 8px 2px 0; font: 500 13px/1.45 var(--ht-font); color: var(--ht-muted); min-height: 1.45em;
}
.ht-usage[hidden] { display: none; }
@media (max-width: 480px) { .ht-usage { min-height: calc(2.9em + 4px); } }
/* Home: the hint flows under the textarea; the textarea's char counter (absolute, bottom-anchored to the
   wrapper) is lifted by the hint's height so it stays inside the textarea. --ht-hint-h is set by ht-limits.js. */
.textarea-wrapper > .ht-usage { margin: 8px 2px 0; }
.textarea-wrapper:has(> .ht-usage:not([hidden])) > .char-counter { bottom: calc(12px + var(--ht-hint-h, 0px)); }
/* A later part of the hint = its separator + its text, one unit: a wrap never leaves the `·` behind at a line end. */
.ht-usage-part { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; max-width: 100%; }
.ht-usage-sep { flex: none; color: #b5bccb; }
.ht-usage-link {
  background: none; border: 0; padding: 0; margin: 0; font: inherit; font-weight: 600;
  color: var(--ht-c-text); cursor: pointer; text-decoration: none;
}
.ht-usage-link:hover { color: var(--ht-c-fill-hover); text-decoration: underline !important; }
.ht-usage-link:focus-visible { outline: 2px solid var(--ht-brand); outline-offset: 2px; border-radius: 4px; }
.ht-usage.is-pro .ht-usage-text { color: var(--ht-ink); }
.ht-usage.is-warn { color: var(--ht-warn-ink); }
.ht-usage.is-warn .ht-usage-text::before,
.ht-usage.is-empty .ht-usage-text::before {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%;
  background: var(--ht-warn); vertical-align: 1px;
}
.ht-usage.is-empty:not(.is-warn) .ht-usage-text::before { background: var(--ht-err); }
/* Result page: the hint sits under the re-humanize button (wraps the row only while it is shown). */
.ht-usage.ht-usage-inline { justify-content: center; align-content: center; width: 100%; margin: 0; font-size: 12.5px; text-align: center; }
.ht-usage.ht-usage-inline[hidden] { display: flex; visibility: hidden; }
/* A hint that would need more lines than reserved (ht-limits.js fitHint): one line for the sentence, cut with an
   ellipsis, the link beside it (below it under 480 px); the full text is the title. The row never grows. */
.ht-usage.is-fit { flex-wrap: nowrap; }
.ht-usage.is-fit > .ht-usage-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ht-usage.is-fit > .ht-usage-part { flex: none; }
@media (max-width: 480px) {
  .ht-usage.is-fit { flex-wrap: wrap; }
  .ht-usage.is-fit > .ht-usage-text { max-width: 100%; }
  /* Result toolbar on a phone: three lines reserved — the sentence on up to two (clamped), the link on the third. */
  .section-action-center > .ht-usage-inline { min-height: calc(4.35em + 8px); }
  .ht-usage-inline.is-fit > .ht-usage-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; }
}
.section-action-center:has(> .ht-usage-inline) { flex-wrap: wrap; row-gap: 6px; }

/* ===== model switch ===== */
/* The model switch (ht-limits.js) rendered into the host element named by HT_WEB.page.<kind>.modelSwitch:
   a quiet trigger ("Model" + crown + short model name + chevron) and a small listbox (full model name, its
   one-line description, its status). The list is appended to <body> and placed with position: fixed by the
   script, so a host panel with overflow: hidden never clips it and it stays inside the viewport at 390 px.
   Also the "Model: Ultra" label of a result (.ht-used, HT_WEB.page.<kind>.modelUsed).
   --ht-crown is the premium mark's colour (.ht-crown is shared with the pages' block below). Text colours
   are the kit's text tokens (4.5:1 on white and on --ht-surface). */
:where(:root) {
  --ht-crown: #b45309;
  --ht-i-crown: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.5 7.5l4.75 4L12 4l4.75 7.5 4.75-4L19.5 18h-15L2.5 7.5zM5 19.5h14V21H5v-1.5z'/%3E%3C/svg%3E");
  /* The model switch's badge: white sparkles (an image on the badge's colour, not a mask). */
  --ht-i-sparkle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M10.5 3l2.1 5.9 5.9 2.1-5.9 2.1-2.1 5.9-2.1-5.9L2.5 11l5.9-2.1z'/%3E%3Cpath d='M18.5 14.5l1 2.5 2.5 1-2.5 1-1 2.5-1-2.5-2.5-1 2.5-1z'/%3E%3C/svg%3E");
}
.ht-crown { width: 1em; height: 1em; flex: none; fill: currentColor; color: var(--ht-crown); }
.ht-switch { display: inline-flex; align-items: center; flex: none; min-width: 0; max-width: 100%; }
.ht-switch[hidden] { display: none; }
/* The trigger (owner 2026-11-08: "this is where you choose the model", minimalist, not loud): a soft brand-tinted
   pill — a small badge (sparkles; amber for a premium model) · "MODEL" as a small caption over the model's name ·
   the chevron. Same markup as before (label, cell, chevron); the badge is the button's ::before. A premium model
   selected (.is-premium on the host, set by ht-limits.js / model-switch.ejs from the catalog's `premium`) turns the
   pill warm; a change of model rings it once (.is-flash). */
.ht-switch-btn {
  display: inline-grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center;
  align-content: center; column-gap: 8px; row-gap: 1px; box-sizing: border-box; max-width: 100%; min-height: 44px; margin: 0;
  padding: 4px 10px 4px 8px; border: 1px solid var(--ht-border); border-radius: 12px; background: #fff; text-align: left;
  font: 700 14.5px/1.2 var(--ht-font); color: var(--ht-ink); white-space: nowrap; cursor: pointer;
  -webkit-appearance: none; appearance: none; transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.ht-switch-btn::before {
  content: ""; grid-column: 1; grid-row: 1 / 3; width: 26px; height: 26px; border-radius: 8px;
  background: var(--ht-c-fill) var(--ht-i-sparkle) center / 16px no-repeat;
}
.ht-switch-btn:hover { border-color: var(--ht-brand); }
.ht-switch-btn:focus-visible { outline: 2px solid var(--ht-brand); outline-offset: 2px; }
.ht-switch-btn[aria-expanded="true"] { border-color: var(--ht-brand); box-shadow: 0 0 0 3px rgba(65, 105, 225, .12); }
.ht-switch-btn .ht-crown, .ht-switch-btn .ht-crown-gap { font-size: 14px; }
.ht-switch-label {
  grid-column: 2; grid-row: 1; min-width: 0; margin: 0; font-size: 10.5px; font-weight: 600; line-height: 1.15;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ht-muted);
}
.ht-switch-chev { grid-column: 3; grid-row: 1 / 3; }
.ht-switch.is-premium .ht-switch-btn { border-color: #efd3a1; background: #fffaf1; }
.ht-switch.is-premium .ht-switch-btn:hover, .ht-switch.is-premium .ht-switch-btn[aria-expanded="true"] { border-color: var(--ht-crown); }
.ht-switch.is-premium .ht-switch-btn::before { background-color: var(--ht-crown); }
.ht-switch.is-flash .ht-switch-btn { animation: ht-switch-flash .7s ease-out; }
@keyframes ht-switch-flash {
  0% { box-shadow: 0 0 0 0 rgba(65, 105, 225, .35); }
  100% { box-shadow: 0 0 0 8px rgba(65, 105, 225, 0); }
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .ht-switch-btn {
    border-color: color-mix(in srgb, var(--ht-brand) 28%, #fff);
    background: color-mix(in srgb, var(--ht-brand-soft) 55%, #fff);
  }
  .ht-switch-btn:hover { border-color: var(--ht-brand); background: var(--ht-brand-soft); }
  .ht-switch.is-premium .ht-switch-btn { border-color: #efd3a1; background: #fffaf1; }
  @keyframes ht-switch-flash {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ht-brand) 35%, transparent); }
    100% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--ht-brand) 0%, transparent); }
  }
}
/* Every model's short name sits in one grid cell (only the selected one visible): the trigger is as wide as the
   widest name, whichever model is selected, so a change of model never moves the host's button next to it. */
.ht-switch-cell { display: inline-grid; grid-column: 2; grid-row: 2; min-width: 0; }
.ht-switch-name, .ht-switch-size { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; }
.ht-switch-size { visibility: hidden; }
.ht-crown-gap { display: inline-block; flex: none; width: 1em; height: 1em; }
/* Narrow phones (360 px): a tighter trigger keeps "Model" visible next to the host's button in every language.
   Below 340 px the word "Model" leaves the picture but stays in the button's accessible name. */
@media (max-width: 374.98px) {
  .ht-switch-btn { column-gap: 6px; padding: 4px 7px 4px 6px; font-size: 13.5px; }
  .ht-switch-btn::before { width: 22px; height: 22px; border-radius: 7px; background-size: 14px; }
}
@media (max-width: 339.98px) {
  .ht-switch-label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.ht-switch-chev { width: 16px; height: 16px; flex: none; color: var(--ht-muted); transition: transform .2s ease; }
.ht-switch-btn[aria-expanded="true"] .ht-switch-chev { transform: rotate(180deg); }

.ht-switch-list {
  position: fixed; top: 0; left: 0; z-index: 10030; box-sizing: border-box; width: 320px; max-width: calc(100vw - 16px);
  overflow-y: auto; overscroll-behavior: contain; padding: 6px; background: #fff; border: 1px solid var(--ht-card-line);
  border-radius: 14px; box-shadow: var(--ht-shadow); font-family: var(--ht-font); text-align: left; outline: none;
  animation: ht-fade .12s ease-out; /* opacity only: the list appears in place, nothing slides */
}
.ht-switch-list[hidden] { display: none; }
/* An option: full name · status · check on the first line, the one-line description under them (full width). */
.ht-switch-opt {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, max-content) 16px; column-gap: 10px; row-gap: 3px; align-items: start;
  box-sizing: border-box; min-height: 44px; padding: 10px 10px 10px 12px;
  border-radius: 9px; cursor: pointer; -webkit-user-select: none; user-select: none;
}
.ht-switch-opt + .ht-switch-opt { margin-top: 2px; }
.ht-switch-opt.is-active { background: var(--ht-surface); }
.ht-switch-list.is-kbd .ht-switch-opt.is-active { box-shadow: inset 0 0 0 2px var(--ht-brand); }
.ht-switch-opt-name {
  grid-column: 1; grid-row: 1; display: flex; align-items: center; gap: 6px; min-width: 0;
  font: 600 14.5px/1.35 var(--ht-font); color: var(--ht-ink); overflow-wrap: anywhere;
}
.ht-switch-about { grid-column: 1 / 3; grid-row: 2; font-size: 13px; line-height: 1.4; color: var(--ht-muted); }
.ht-switch-status {
  grid-column: 2; grid-row: 1; max-width: 11em; padding-top: 2px; font-size: 12.5px; font-weight: 600; line-height: 1.35;
  text-align: right; color: var(--ht-muted); overflow-wrap: anywhere;
}
.ht-switch-status:empty { display: none; }
/* The clock of the words left ("today" / "this month") on its own line under the number: one plan can count
   one model per day and another per month, side by side. */
.ht-switch-per { display: block; font-weight: 500; }
.ht-switch-status.is-sign_up, .ht-switch-status.is-upgrade { color: var(--ht-c-text); }
.ht-switch-status.is-wait { color: var(--ht-warn-ink); }
.ht-switch-status.is-sign_up::before, .ht-switch-status.is-upgrade::before, .ht-switch-status.is-wait::before {
  content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 4px; vertical-align: -1px; background: currentColor;
  -webkit-mask: var(--ht-i-lock) center / contain no-repeat; mask: var(--ht-i-lock) center / contain no-repeat;
}
.ht-switch-status.is-wait::before { -webkit-mask-image: var(--ht-i-clock); mask-image: var(--ht-i-clock); }
.ht-switch-check { grid-column: 3; grid-row: 1; width: 16px; height: 16px; margin-top: 2px; color: var(--ht-c-text); visibility: hidden; }
.ht-switch-opt.is-selected .ht-switch-check { visibility: visible; }
/* Windows about a premium model carry the crown instead of the lock / star. */
.ht-modal-icon.is-crown { --ht-icon: var(--ht-i-crown); background: #fff4e5; }
.ht-modal-icon.is-crown::before { background: var(--ht-crown); }
/* Result toolbar (host hook, like the .section-action-center rule above): the switch sits at the right of the
   host's main button on the same row; the usage hint wraps under both. */
.section-action-center:has(> .ht-switch:not([hidden])) { flex-wrap: wrap; column-gap: 8px; row-gap: 6px; }
/* The host's button keeps its colour / shadow / lift transitions but never animates its size or place (a host
   `transition: all` would grow it from 0 when its flex values change). */
.section-action-center:has(> .ht-switch:not([hidden])) > button {
  flex: 1 1 0; width: auto; min-width: 0;
  transition-property: background-color, border-color, color, box-shadow, transform, opacity;
}
.section-action-center:has(> .ht-switch:not([hidden])) > .ht-switch { order: 1; max-width: 60%; }
.section-action-center:has(> .ht-switch:not([hidden])) > .ht-usage-inline { order: 2; }
/* "Model: Ultra" — which model produced the result. Quiet text next to a title in a flex header
   (margin-right: auto keeps the host's buttons at the far end); a plain inline element anywhere else. */
.ht-used {
  display: inline-block; margin: 0 auto 0 10px; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  vertical-align: middle; white-space: nowrap; font: 500 13px/1.4 var(--ht-font); color: var(--ht-muted);
}
.ht-used[hidden] { display: none; }
.ht-used-name { font-weight: 600; color: var(--ht-ink); }
.ht-used-name .ht-crown { margin-right: 3px; vertical-align: -.125em; }
/* Rate-limit toast kept clear of the page's main button (ht-limits.js adds .is-top when that button is in
   the lower half of the viewport; the base .ht-toast rules below keep it at the bottom otherwise). */
.ht-toast.is-top { top: 16px; bottom: auto; transform: translate(-50%, -12px); }
.ht-toast.is-top.is-on { transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) {
  .ht-switch-list { animation: none; }
  .ht-switch-btn, .ht-switch-chev { transition: none; }
  .ht-switch.is-flash .ht-switch-btn { animation: none; }
}
/* ===== /model switch ===== */

/* ── Buttons ── */
.ht-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; box-sizing: border-box;
  min-height: 46px; padding: 12px 22px; margin: 0; border: 1px solid transparent; border-radius: 10px;
  font: 600 15px/1.2 var(--ht-font); text-align: center; cursor: pointer; text-decoration: none !important;
  -webkit-appearance: none; appearance: none;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease, color .2s ease;
}
.ht-btn:focus-visible { outline: 2px solid var(--ht-brand); outline-offset: 2px; }
.ht-btn:disabled, .ht-btn[aria-disabled="true"] { opacity: .7; cursor: default; transform: none; box-shadow: none; }
.ht-btn.is-primary { background: var(--ht-c-fill); color: #fff !important; box-shadow: 0 4px 12px rgba(15, 28, 51, .16); }
.ht-btn.is-primary:not(:disabled):hover { background: var(--ht-c-fill-hover); box-shadow: 0 6px 16px rgba(15, 28, 51, .2); transform: translateY(-1px); }
.ht-btn.is-secondary { background: #fff; color: #1b1b1b !important; border-color: var(--ht-border-2); }
.ht-btn.is-secondary:not(:disabled):hover { border-color: var(--ht-brand); color: var(--ht-c-text) !important; }
.ht-btn.is-ghost { background: transparent; color: var(--ht-muted) !important; padding: 10px 14px; }
.ht-btn.is-ghost:not(:disabled):hover { color: var(--ht-ink) !important; background: var(--ht-hover); }
/* A quiet way out under a window's main offer (the too-long window's "Trim" for a visitor): reads as a link. */
.ht-btn.is-ghost.is-quiet { color: var(--ht-c-text) !important; font-weight: 500; text-decoration: underline !important; text-underline-offset: 3px; }
.ht-btn.is-danger { background: #fff; color: var(--ht-danger) !important; border-color: var(--ht-err-line); }
.ht-btn.is-danger:not(:disabled):hover { background: var(--ht-err-bg); border-color: var(--ht-danger); }
.ht-btn.is-danger-solid { background: var(--ht-danger); color: #fff !important; }
.ht-btn.is-danger-solid:not(:disabled):hover { background: #8f1c13; }
/* A plan the visitor already has: looks like a button, is not one. */
.ht-btn.is-current { background: var(--ht-surface); color: var(--ht-muted) !important; border-color: var(--ht-border); cursor: default; box-shadow: none; }
.ht-btn.is-block { display: flex; width: 100%; }
.ht-btn svg { width: 20px; height: 20px; flex: 0 0 auto; }
.ht-btn.is-busy { cursor: progress; }

/* ── Modal ── */
html.ht-modal-open { overflow: hidden; }
.ht-modal {
  position: fixed; inset: 0; z-index: 10050; display: flex; align-items: flex-end; justify-content: center;
  padding: 16px; box-sizing: border-box; background: rgba(15, 28, 51, .48);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); animation: ht-fade .18s ease-out;
}
.ht-modal-card {
  position: relative; width: 100%; max-width: 440px; max-height: calc(100vh - 32px); overflow-y: auto; box-sizing: border-box;
  padding: 28px 20px 18px; background: #fff; border: 1px solid var(--ht-card-line); border-radius: 16px; box-shadow: var(--ht-shadow);
  font-family: var(--ht-font); color: var(--ht-ink); text-align: left; animation: ht-rise .22s cubic-bezier(.2, .8, .2, 1);
}
.ht-modal-x {
  position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border: 0; border-radius: 10px;
  background: transparent; color: var(--ht-muted); font: 400 24px/1 var(--ht-font); cursor: pointer;
}
.ht-modal-x:hover { background: var(--ht-hover); color: var(--ht-ink); }
.ht-modal-x:focus-visible { outline: 2px solid var(--ht-brand); outline-offset: 1px; }
.ht-modal-icon { position: relative; width: 44px; height: 44px; margin-bottom: 14px; border-radius: 12px; background: var(--ht-brand-soft); }
.ht-modal-icon::before {
  content: ""; position: absolute; inset: 11px; background: var(--ht-brand);
  -webkit-mask: var(--ht-icon, none) center / contain no-repeat; mask: var(--ht-icon, none) center / contain no-repeat;
}
.ht-modal-icon.is-lock { --ht-icon: var(--ht-i-lock); }
.ht-modal-icon.is-up { --ht-icon: var(--ht-i-up); }
.ht-modal-icon.is-long { --ht-icon: var(--ht-i-long); }
.ht-modal-icon.is-net { --ht-icon: var(--ht-i-net); }
.ht-modal-icon.is-clock { --ht-icon: var(--ht-i-clock); }
.ht-modal-icon.is-alert { --ht-icon: var(--ht-i-alert); background: var(--ht-err-bg); }
.ht-modal-icon.is-alert::before { background: var(--ht-danger); }
.ht-modal-title { margin: 0 34px 8px 0; font: 700 21px/1.3 var(--ht-font); letter-spacing: -.2px; color: var(--ht-ink); }
.ht-modal-body { margin: 0 0 18px; font-size: 15px; line-height: 1.55; color: var(--ht-muted); }
.ht-modal-body.is-err { color: var(--ht-err); }
.ht-modal-note { margin: -8px 0 16px; font-size: 13.5px; color: var(--ht-muted); }
.ht-modal-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.ht-modal-actions .ht-btn { width: 100%; }
.ht-or {
  display: flex; align-items: center; gap: 12px; margin: 14px 0; font-size: 12px; font-weight: 600;
  letter-spacing: .4px; text-transform: uppercase; color: #9aa3b4;
}
.ht-or::before, .ht-or::after { content: ""; flex: 1; height: 1px; background: var(--ht-border); }

/* ── Sign-in widget (ht-auth.js: .ext-field, .ext-label, .ext-input, .btn-ext, .ext-status) ──
   Scoped to the kit's window and pages: on a host page that has its own extension.css the same
   classes outside these containers keep the host's look. */
:is(.ht-modal, .ht-page) .ext-field { margin: 0 0 14px; }
:is(.ht-modal, .ht-page) .ext-label { display: block; font-size: 14px; font-weight: 600; color: var(--ht-ink); margin-bottom: 8px; }
:is(.ht-modal, .ht-page) .ext-input {
  display: block; width: 100%; box-sizing: border-box; margin: 0; padding: 13px 15px; border: 1px solid #dde3ee; border-radius: 10px;
  font: 16px/1.3 var(--ht-font); color: #1b1b1b; background: #fcfcfd; transition: border-color .2s ease, box-shadow .2s ease;
}
:is(.ht-modal, .ht-page) .ext-input::placeholder { color: #a3aab8; }
:is(.ht-modal, .ht-page) .ext-input:focus { outline: none; border-color: var(--ht-brand); background: #fff; box-shadow: 0 0 0 3px var(--ht-brand-soft); }
:is(.ht-modal, .ht-page) .ext-input.code { font-size: 26px; letter-spacing: 10px; text-align: center; font-weight: 700; }
:is(.ht-modal, .ht-page) .ext-status { margin: 12px 0 0; font-size: 14px; line-height: 1.5; padding: 11px 13px; border-radius: 10px; }
:is(.ht-modal, .ht-page) .ext-status.ok { background: var(--ht-ok-bg); border: 1px solid var(--ht-ok-line); color: var(--ht-ok-ink); }
:is(.ht-modal, .ht-page) .ext-status.err { background: var(--ht-err-bg); border: 1px solid var(--ht-err-line); color: var(--ht-err); }
:is(.ht-modal, .ht-page) .ext-status.info { background: var(--ht-brand-soft); border: 1px solid var(--ht-card-line); color: var(--ht-ink); }
:is(.ht-modal, .ht-page) .btn-ext {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; box-sizing: border-box; min-height: 48px; margin: 0;
  padding: 13px 22px; background: var(--ht-c-fill); color: #fff !important; border: 0; border-radius: 10px;
  font: 600 16px/1.2 var(--ht-font); cursor: pointer; text-decoration: none !important; box-shadow: 0 4px 12px rgba(15, 28, 51, .16);
  transition: background .2s ease, box-shadow .2s ease;
}
:is(.ht-modal, .ht-page) .btn-ext:hover { background: var(--ht-c-fill-hover); }
:is(.ht-modal, .ht-page) .btn-ext:disabled { opacity: .7; cursor: default; box-shadow: none; }
:is(.ht-modal, .ht-page) .btn-ext.is-block { display: flex; width: 100%; }
:is(.ht-modal, .ht-page) .btn-ext.is-secondary { background: #fff; color: #1b1b1b !important; border: 1px solid var(--ht-border-2); box-shadow: none; }
:is(.ht-modal, .ht-page) .btn-ext.is-secondary:hover { border-color: var(--ht-brand); color: var(--ht-c-text) !important; }
:is(.ht-modal, .ht-page) .btn-ext.is-ghost {
  display: flex; width: 100%; background: transparent; color: var(--ht-c-text) !important; box-shadow: none;
  min-height: 0; padding: 10px 12px; margin-top: 4px; font-size: 14px;
}
:is(.ht-modal, .ht-page) .btn-ext.is-ghost:hover { background: var(--ht-hover); color: var(--ht-c-fill-hover) !important; }
:is(.ht-modal, .ht-page) .btn-ext:focus-visible { outline: 2px solid var(--ht-brand); outline-offset: 2px; }
.ht-auth form { margin: 0; }
:is(.ht-modal, .ht-page) .ht-auth form > .btn-ext[type="submit"] { width: 100%; }

/* ── Toast ── */
.ht-toast {
  position: fixed; left: 50%; bottom: 20px; z-index: 10060; max-width: calc(100vw - 32px); box-sizing: border-box;
  padding: 12px 18px; border-radius: 12px; background: var(--ht-ink); color: #fff; box-shadow: 0 10px 30px rgba(15, 28, 51, .28);
  font: 500 14px/1.45 var(--ht-font); text-align: center; pointer-events: none;
  opacity: 0; transform: translate(-50%, 12px); transition: opacity .2s ease, transform .2s ease; visibility: hidden;
}
.ht-toast.is-on { opacity: 1; transform: translate(-50%, 0); visibility: visible; }

/* ── Account menu (dropdown under the header avatar; positioning hook lives in the host's slot CSS) ── */
.ht-acct { position: relative; }
.ht-menu {
  display: block; position: absolute; top: calc(100% + 10px); right: 0; z-index: 10040; width: 260px; max-width: calc(100vw - 32px); box-sizing: border-box;
  padding: 6px; background: #fff; border: 1px solid var(--ht-card-line); border-radius: 14px; box-shadow: var(--ht-shadow);
  font-family: var(--ht-font); text-align: left; animation: ht-drop .14s ease-out;
}
.ht-menu[hidden] { display: none; }
.ht-menu-head { display: block; padding: 10px 12px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--ht-border); }
.ht-menu-email { display: block; font-size: 14px; font-weight: 600; color: var(--ht-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ht-menu-meta { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 13px; color: var(--ht-muted); }
.ht-menu .pill[hidden] { display: none; }
.ht-menu .pill, .ht-page .pill {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; line-height: 1.5;
  padding: 2px 8px; border-radius: 999px; background: #eef1f6; color: #5B6776; white-space: nowrap;
}
.ht-menu .pill.pro, .ht-page .pill.pro { color: #fff; background: var(--ht-c-fill); background: linear-gradient(135deg, var(--ht-c-fill-hover), var(--ht-c-fill)); }
.ht-menu-item {
  display: block; width: 100%; box-sizing: border-box; padding: 10px 12px; border: 0; border-radius: 9px; background: none;
  font: 500 14.5px/1.3 var(--ht-font); color: var(--ht-ink) !important; text-align: left; text-decoration: none !important; cursor: pointer;
}
.ht-menu-item:hover, .ht-menu-item:focus { background: var(--ht-hover); outline: none; }
.ht-menu-item:focus-visible { box-shadow: inset 0 0 0 2px var(--ht-brand); }
#htMenuPro { color: var(--ht-c-text) !important; font-weight: 600; }
#htSignOut { color: var(--ht-muted) !important; border-top: 1px solid var(--ht-border); border-radius: 0 0 9px 9px; margin-top: 4px; }

/* ════════════════════════════════════════════════════════════════════════════════════════════
   Kit pages. Every page is one <div class="ht-page" data-ht-page="…"> inside the host's <main>.
   ════════════════════════════════════════════════════════════════════════════════════════════ */
.ht-page {
  box-sizing: border-box; width: 100%; max-width: 1160px; margin: 0 auto; padding: 40px 16px 72px;
  font: 400 15px/1.55 var(--ht-font); color: var(--ht-text); text-align: left;
}
.ht-page *, .ht-page *::before, .ht-page *::after { box-sizing: border-box; }
.ht-page.is-narrow { max-width: 552px; }
.ht-page.is-medium { max-width: 632px; }
/* Resets inside the page at class specificity (:where adds none), so the class rules below win by order. */
.ht-page :where(p, h1, h2, h3, ul, ol, dl, dd) { margin: 0; padding: 0; }
.ht-page :where(h1, h2, h3) { color: var(--ht-ink); font-family: var(--ht-font); }
.ht-page :where(ul) { list-style: none; }
.ht-page :where(a) { color: var(--ht-c-text); }
.ht-page :where(a, button) { cursor: pointer; }
.ht-page :focus-visible { outline: 2px solid var(--ht-brand); outline-offset: 2px; }
.ht-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.ht-card {
  background: #fff; border: 1px solid var(--ht-card-line); border-radius: var(--ht-radius);
  padding: 24px 20px; box-shadow: var(--ht-shadow-card);
}
.ht-card + .ht-card { margin-top: 16px; }
.ht-card-title { font: 700 24px/1.25 var(--ht-font); letter-spacing: -.4px; }
.ht-card-sub { margin-top: 8px; font-size: 15px; color: var(--ht-muted); }
.ht-h2 { font: 700 18px/1.3 var(--ht-font); letter-spacing: -.2px; }

.ht-link { color: var(--ht-c-text) !important; font-weight: 600; text-decoration: none !important; border-radius: 4px; }
.ht-link:hover { color: var(--ht-c-fill-hover) !important; text-decoration: underline !important; }
.ht-link.has-arrow { display: inline-flex; align-items: center; gap: 6px; }
.ht-link.has-arrow::after {
  content: ""; width: 16px; height: 16px; flex: none; background: currentColor;
  -webkit-mask: var(--ht-i-arrow) center / contain no-repeat; mask: var(--ht-i-arrow) center / contain no-repeat;
  transition: transform .2s ease;
}
.ht-link.has-arrow:hover::after { transform: translateX(2px); }
/* Back link above a page's first card: top left, aligned with the card's edge (account page). */
.ht-link.ht-back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: -6px 0 6px; padding-right: 8px; font-size: 14.5px; }
.ht-link.ht-back::before {
  content: ""; width: 16px; height: 16px; flex: none; background: currentColor;
  -webkit-mask: var(--ht-i-arrow) center / contain no-repeat; mask: var(--ht-i-arrow) center / contain no-repeat;
  transform: scaleX(-1); transition: transform .2s ease;
}
.ht-link.ht-back:hover::before { transform: scaleX(-1) translateX(2px); }

.ht-notice { margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--ht-card-line); border-radius: 10px; font-size: 14px; line-height: 1.5; color: var(--ht-ink); background: var(--ht-brand-soft); }
.ht-notice.is-ok { background: var(--ht-ok-bg); border-color: var(--ht-ok-line); color: var(--ht-ok-ink); }
.ht-notice.is-warn { background: var(--ht-warn-bg); border-color: var(--ht-warn-line); color: var(--ht-warn-ink); }
.ht-notice.is-err { background: var(--ht-err-bg); border-color: var(--ht-err-line); color: var(--ht-danger); }

.ht-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.ht-actions.is-center { justify-content: center; }
.ht-footlinks { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin-top: 22px; font-size: 14px; }
.ht-footlinks .ht-link { font-weight: 500; color: var(--ht-muted) !important; }
.ht-footlinks .ht-link:hover { color: var(--ht-ink) !important; }
.ht-legal { margin-top: 18px; font-size: 13px; line-height: 1.55; color: var(--ht-faint); }
.ht-legal .ht-link { font-weight: 500; color: var(--ht-muted) !important; }

/* ── Sign-in page ── */
.ht-auth-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.ht-auth-logo { width: 36px; height: 36px; border-radius: 9px; flex: none; }
.ht-auth-brand-name { font-weight: 700; color: var(--ht-ink); }
.ht-auth-brand .pill { margin-left: auto; }
.ht-page .ht-auth { margin-top: 22px; }
.ht-auth-done { margin-top: 22px; }
.ht-auth-done[hidden], .ht-auth-google[hidden] { display: none; }
.ht-google { gap: 10px; }

/* ── Status pages (checkout success / cancel, unavailable) ── */
.ht-status { text-align: center; padding-top: 36px; padding-bottom: 32px; }
.ht-status-icon { position: relative; width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%; background: var(--ht-ok-bg); }
.ht-status-icon::before {
  content: ""; position: absolute; inset: 18px; background: var(--ht-ok-ink);
  -webkit-mask: var(--ht-icon, var(--ht-i-check)) center / contain no-repeat; mask: var(--ht-icon, var(--ht-i-check)) center / contain no-repeat;
}
.ht-status-icon.is-neutral { background: var(--ht-hover); --ht-icon: var(--ht-i-back); }
.ht-status-icon.is-neutral::before { background: var(--ht-muted); }
.ht-status-icon.is-wait { background: var(--ht-warn-bg); --ht-icon: var(--ht-i-clock); }
.ht-status-icon.is-wait::before { background: var(--ht-warn-ink); }
.ht-status .ht-card-sub { max-width: 420px; margin-left: auto; margin-right: auto; }
.ht-status-line { margin-top: 12px; font-size: 15px; line-height: 1.5; color: var(--ht-ink); font-weight: 500; }
.ht-status-note { margin-top: 16px; font-size: 13px; color: var(--ht-faint); }
.ht-status .ht-actions { justify-content: center; }

/* ── Account page ── */
.ht-account-head { display: flex; align-items: center; gap: 14px; }
.ht-account-avatar {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%;
  background: var(--ht-c-fill); background: linear-gradient(135deg, var(--ht-c-fill-hover), var(--ht-c-fill));
  color: #fff; font: 700 17px/1 var(--ht-font); letter-spacing: .5px; -webkit-user-select: none; user-select: none;
}
.ht-account-who { min-width: 0; flex: 1 1 auto; }
.ht-account-email { display: block; margin-top: 2px; font-size: 14px; color: var(--ht-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ht-account-head .pill { flex: none; align-self: flex-start; margin-top: 4px; }
.ht-account-notices { margin-top: 18px; }
.ht-account-notices:empty { display: none; }
.ht-account-notices .ht-notice:last-child { margin-bottom: 0; }
.ht-rows { margin-top: 18px; border-top: 1px solid var(--ht-line); }
.ht-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--ht-line); font-size: 14.5px; }
.ht-row dt { color: var(--ht-muted); flex: none; }
.ht-row dd { color: var(--ht-ink); font-weight: 600; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.ht-row-note { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 500; color: var(--ht-muted); }
.ht-usage-h { margin-top: 24px; font: 700 13px/1.3 var(--ht-font); letter-spacing: .6px; text-transform: uppercase; color: var(--ht-muted); }
.ht-meter { padding: 14px 0 16px; border-bottom: 1px solid var(--ht-line); }
.ht-meter-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 2px 12px; }
.ht-meter-name { font-weight: 700; color: var(--ht-ink); }
.ht-meter-count { font-size: 14px; font-weight: 600; color: var(--ht-ink); font-variant-numeric: tabular-nums; }
.ht-meter-bar { height: 8px; margin: 10px 0 8px; border-radius: 999px; background: var(--ht-track); overflow: hidden; }
.ht-meter-bar > i { display: block; height: 100%; min-width: 4px; border-radius: inherit; background: var(--ht-brand); }
.ht-meter.is-warn .ht-meter-bar > i { background: var(--ht-warn); }
.ht-meter.is-empty .ht-meter-bar > i { background: var(--ht-err); }
.ht-meter-meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 2px 12px; font-size: 13px; color: var(--ht-muted); }
.ht-meter-note { margin-top: 8px; font-size: 13px; line-height: 1.5; color: var(--ht-warn-ink); }
.ht-meter-none { margin-top: 6px; font-size: 13.5px; color: var(--ht-muted); }
.ht-account-also { margin-top: 14px; font-size: 13.5px; color: var(--ht-muted); }
.ht-account-also + .ht-account-also { margin-top: 4px; }
.ht-card.is-danger-zone .ht-card-sub { font-size: 14px; }
.ht-card.is-danger-zone .ht-actions { margin-top: 16px; }

/* ── Pricing page ── */
.ht-hero { max-width: 720px; margin: 0 auto; text-align: center; }
.ht-eyebrow { display: inline-block; margin-bottom: 12px; font-size: 13px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ht-c-text); }
.ht-title { font: 700 32px/1.12 var(--ht-font); letter-spacing: -.8px; color: var(--ht-ink); }
.ht-lead { margin-top: 14px; font-size: 16px; line-height: 1.6; color: var(--ht-muted); }
.ht-from-ext { max-width: 720px; margin: 0 auto 20px; text-align: center; }

.ht-toggle {
  display: inline-flex; gap: 4px; margin-top: 24px; padding: 4px; border: 1px solid var(--ht-border); border-radius: 999px; background: var(--ht-hover);
}
.ht-toggle-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; margin: 0; padding: 8px 18px; border: 0; border-radius: 999px;
  background: transparent; font: 600 14px/1.2 var(--ht-font); color: var(--ht-muted); cursor: pointer; transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.ht-toggle-btn:hover { color: var(--ht-ink); }
.ht-toggle-btn[aria-pressed="true"] { background: #fff; color: var(--ht-ink); box-shadow: 0 1px 3px rgba(15, 28, 51, .14); }
.ht-toggle-save { display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--ht-c-fill); color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .2px; }

.ht-plans { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 20px; margin: 36px auto 0; }
.ht-plan-card {
  position: relative; display: flex; flex-direction: column; flex: 1 1 260px; max-width: 344px; min-width: 0;
  padding: 26px 22px 22px; background: #fff; border: 1px solid var(--ht-card-line); border-radius: var(--ht-radius); box-shadow: var(--ht-shadow-card);
  scroll-margin-top: 24px; transition: box-shadow .25s ease, border-color .25s ease;
}
.ht-plans.n-4 .ht-plan-card { flex-basis: 230px; }
.ht-plan-card.is-popular { border-color: var(--ht-brand); box-shadow: 0 10px 32px rgba(15, 28, 51, .1); }
.ht-plan-card.is-target { border-color: var(--ht-brand); box-shadow: 0 0 0 3px var(--ht-brand-soft), 0 10px 32px rgba(15, 28, 51, .1); }
.ht-plan-badge {
  position: absolute; top: -12px; left: 22px; padding: 4px 11px; border-radius: 999px; background: var(--ht-c-fill);
  color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; white-space: nowrap;
}
.ht-plan-badge.is-current { background: var(--ht-ink); }
.ht-plan-name { font: 700 20px/1.25 var(--ht-font); letter-spacing: -.2px; }
.ht-plan-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 6px; margin-top: 14px; }
.ht-plan-amount { font: 700 40px/1 var(--ht-font); letter-spacing: -1px; color: var(--ht-ink); font-variant-numeric: tabular-nums; }
.ht-plan-per { font-size: 15px; font-weight: 500; color: var(--ht-muted); }
.ht-plan-per[hidden] { display: none; }
.ht-plan-billed { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 22px; margin-top: 8px; font-size: 13.5px; color: var(--ht-muted); }
.ht-plan-save { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--ht-brand-soft); color: var(--ht-c-fill-hover); font-size: 12px; font-weight: 700; }
.ht-plan-save[hidden] { display: none; }
.ht-plan-anon { margin-top: 4px; font-size: 13px; color: var(--ht-faint); }
.ht-feats { display: flex; flex-direction: column; gap: 12px; margin: 20px 0 24px; padding-top: 20px; border-top: 1px solid var(--ht-line); }
.ht-feat { position: relative; padding-left: 28px; font-size: 14px; line-height: 1.4; }
.ht-feat::before {
  content: ""; position: absolute; left: 0; top: 0; width: 19px; height: 19px; border-radius: 50%; background: var(--ht-brand-soft);
}
.ht-feat::after {
  content: ""; position: absolute; left: 4px; top: 4px; width: 11px; height: 11px; background: var(--ht-brand);
  -webkit-mask: var(--ht-i-check) center / contain no-repeat; mask: var(--ht-i-check) center / contain no-repeat;
}
.ht-feat.is-no::before { background: var(--ht-hover); }
.ht-feat.is-no::after { background: #b5bccb; -webkit-mask-image: var(--ht-i-dash); mask-image: var(--ht-i-dash); }
.ht-feat-label { display: block; font-size: 13px; color: var(--ht-muted); }
.ht-feat-val { display: block; margin-top: 1px; color: var(--ht-ink); font-weight: 600; }
.ht-feat.is-flag .ht-feat-label { font-size: 14px; color: var(--ht-ink); font-weight: 600; }
.ht-feat.is-no .ht-feat-label { color: var(--ht-faint); font-weight: 500; }
.ht-plan-cta { margin-top: auto; }
.ht-trust { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 22px; font-size: 13px; color: var(--ht-muted); text-align: center; }
.ht-trust::before {
  content: ""; width: 15px; height: 15px; flex: none; background: currentColor;
  -webkit-mask: var(--ht-i-shield) center / contain no-repeat; mask: var(--ht-i-shield) center / contain no-repeat;
}

/* Comparison table: a real table from 641 px; below that each row becomes a small card. */
.ht-cmp { max-width: 960px; margin: 64px auto 0; }
.ht-cmp-title { font: 700 24px/1.25 var(--ht-font); letter-spacing: -.4px; text-align: center; margin-bottom: 20px; }
.ht-cmp-table {
  width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid var(--ht-card-line);
  border-radius: var(--ht-radius); overflow: hidden; font-size: 14px; line-height: 1.45; box-shadow: var(--ht-shadow-card);
}
.ht-cmp-table th, .ht-cmp-table td { padding: 14px 16px; border-bottom: 1px solid var(--ht-line); text-align: center; vertical-align: top; }
.ht-cmp-table tbody tr:last-child > * { border-bottom: 0; }
.ht-cmp-table thead th { background: var(--ht-surface); font-size: 12.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--ht-muted); vertical-align: middle; }
.ht-cmp-table thead th.is-popular { color: var(--ht-c-fill-hover); }
.ht-cmp-table tbody th { text-align: left; font-weight: 600; color: var(--ht-ink); width: 30%; }
.ht-cmp-table td { color: var(--ht-ink); }
.ht-cmp-table td.is-popular { background: var(--ht-surface); }
.ht-cell-note { display: block; margin-top: 3px; font-size: 12px; color: var(--ht-muted); }
.ht-yes, .ht-no { display: inline-block; width: 18px; height: 18px; vertical-align: -3px; -webkit-mask: var(--ht-i-check) center / contain no-repeat; mask: var(--ht-i-check) center / contain no-repeat; background: var(--ht-ok-ink); }
.ht-no { background: #b5bccb; -webkit-mask-image: var(--ht-i-dash); mask-image: var(--ht-i-dash); }
.ht-cmp-foot { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 22px; font-size: 14.5px; text-align: center; }

@media (max-width: 640px) {
  .ht-cmp-table, .ht-cmp-table tbody, .ht-cmp-table tr, .ht-cmp-table th, .ht-cmp-table td { display: block; }
  .ht-cmp-table { background: transparent; border: 0; border-radius: 0; overflow: visible; box-shadow: none; }
  .ht-cmp-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ht-cmp-table tbody tr { margin-bottom: 12px; background: #fff; border: 1px solid var(--ht-card-line); border-radius: 12px; overflow: hidden; }
  .ht-cmp-table tbody th { width: auto; padding: 11px 14px; background: var(--ht-surface); border-bottom: 1px solid var(--ht-line) !important; }
  .ht-cmp-table td { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 10px 14px; text-align: right; }
  .ht-cmp-table tbody tr > td:last-child { border-bottom: 0; }
  .ht-cmp-table td::before { content: attr(data-plan); flex: none; max-width: 45%; text-align: left; font-weight: 600; color: var(--ht-muted); }
  .ht-cmp-table td.is-popular { background: #fff; }
  .ht-cmp-table td.is-popular::before { color: var(--ht-c-text); }
  .ht-cell { min-width: 0; }
}

/* Brand tints where the browser can mix colours (the declarations above are the fallback). */
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .ht-btn.is-primary { box-shadow: 0 4px 12px color-mix(in srgb, var(--ht-brand) 28%, transparent); }
  .ht-btn.is-primary:not(:disabled):hover { box-shadow: 0 6px 16px color-mix(in srgb, var(--ht-brand) 36%, transparent); }
  :is(.ht-modal, .ht-page) .btn-ext { box-shadow: 0 4px 12px color-mix(in srgb, var(--ht-brand) 28%, transparent); }
  :is(.ht-modal, .ht-page) .btn-ext.is-secondary, :is(.ht-modal, .ht-page) .btn-ext.is-ghost, :is(.ht-modal, .ht-page) .btn-ext:disabled { box-shadow: none; }
  :is(.ht-modal, .ht-page) .ext-input:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ht-brand) 14%, transparent); }
  :is(.ht-modal, .ht-page) .ext-status.info, .ht-notice:not(.is-ok):not(.is-warn):not(.is-err) { border-color: color-mix(in srgb, var(--ht-brand) 18%, #fff); }
  .ht-plan-card.is-popular { box-shadow: 0 10px 32px color-mix(in srgb, var(--ht-brand) 18%, transparent); }
  .ht-cmp-table td.is-popular { background: color-mix(in srgb, var(--ht-brand-soft) 45%, #fff); }
  .ht-cmp-table thead th.is-popular { background: color-mix(in srgb, var(--ht-brand-soft) 80%, #fff); }
}

@keyframes ht-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ht-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes ht-drop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

@media (min-width: 560px) {
  .ht-modal { align-items: center; padding: 24px; }
  .ht-modal-card { padding: 32px 30px 24px; }
  .ht-modal-title { font-size: 22px; }
  .ht-modal-actions { flex-direction: row-reverse; flex-wrap: wrap; justify-content: flex-start; }
  .ht-modal-actions .ht-btn { width: auto; }
  .ht-modal-actions .ht-btn.is-ghost { margin-right: auto; }
  /* The too-long window leads with one offer: its actions stay stacked, full width, in order (as on a phone). */
  .ht-long .ht-modal-actions { flex-direction: column; flex-wrap: nowrap; }
  .ht-long .ht-modal-actions .ht-btn { width: 100%; }
  .ht-long .ht-modal-actions .ht-btn.is-ghost { margin-right: 0; }
  .ht-card { padding: 28px; }
  .ht-status { padding-top: 44px; padding-bottom: 40px; }
}
@media (min-width: 900px) {
  .ht-page { padding-top: 56px; }
  .ht-title { font-size: 42px; letter-spacing: -1px; }
  .ht-lead { font-size: 17px; }
}
@media (max-width: 480px) {
  .ht-actions .ht-btn { flex: 1 1 100%; }
  .ht-account-avatar { width: 42px; height: 42px; font-size: 15px; }
  .ht-card-title { font-size: 22px; }
  .ht-toggle-btn { padding: 8px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .ht-modal, .ht-modal-card, .ht-menu { animation: none; }
  .ht-toast, .ht-btn, .ht-toggle-btn, .ht-plan-card, .ht-link.has-arrow::after, .ht-link.ht-back::before,
  :is(.ht-modal, .ht-page) .ext-input, :is(.ht-modal, .ht-page) .btn-ext { transition: none; }
  .ht-btn.is-primary:not(:disabled):hover { transform: none; }
}

/* ===== models on pages ===== */
/* Pricing and account pages grouped BY MODEL (MODELS.md "Naming and presentation"). Cards: one block per
   model (.ht-mblock: crown + model name, its one line, one line per product with the per-text limit, or the
   plan that includes it), then the plan-wide features. Compare table: a section per model (tbody.ht-cmp-group
   with a spanning tr.ht-cmp-sec header). Account: a group per model (.ht-mgroup) with one bar per product.
   The crown is the shared .ht-crown (colour --ht-crown, block above); nothing else marks a model. */
.ht-mblocks { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--ht-line); }
.ht-mblock { padding: 14px 14px 13px; border: 1px solid var(--ht-card-line); border-radius: 12px; background: var(--ht-surface); }
.ht-mblock-title { display: flex; align-items: center; gap: 6px; margin: 0; font: 700 15px/1.3 var(--ht-font); letter-spacing: -.1px; color: var(--ht-ink); }
.ht-mblock-title .ht-crown { font-size: 17px; }
.ht-mblock-about { margin-top: 2px; font-size: 13px; line-height: 1.4; color: var(--ht-muted); }
.ht-mlines { display: grid; grid-template-columns: fit-content(48%) minmax(0, 1fr); gap: 9px 14px; margin: 12px 0 0; }
.ht-mline { display: contents; }
.ht-mline dt { min-width: 0; font-size: 13px; line-height: 1.4; color: var(--ht-muted); overflow-wrap: anywhere; }
.ht-mline dd { margin: 0; min-width: 0; text-align: right; overflow-wrap: anywhere; }
.ht-mline-val { display: block; font-size: 13.5px; line-height: 1.4; font-weight: 600; color: var(--ht-ink); }
.ht-mline-sub { display: block; margin-top: 1px; font-size: 12.5px; line-height: 1.4; color: var(--ht-muted); }
.ht-mline-note { display: block; margin-top: 1px; font-size: 12.5px; line-height: 1.4; color: var(--ht-warn-ink); }
.ht-mline.is-no dt { color: var(--ht-faint); }
.ht-mblock-lock, .ht-mblock-note { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 13px; line-height: 1.4; font-weight: 600; }
.ht-mblock-lock { color: var(--ht-c-text); }
.ht-mblock-note { color: var(--ht-warn-ink); }
.ht-mblock-lock::before, .ht-mblock-note::before {
  content: ""; width: 14px; height: 14px; flex: none; background: currentColor;
  -webkit-mask: var(--ht-i-lock) center / contain no-repeat; mask: var(--ht-i-lock) center / contain no-repeat;
}
.ht-mblock.is-closed { background: #fff; border-style: dashed; }
.ht-mblock.is-closed .ht-mblock-title { color: var(--ht-muted); }

.ht-cmp-table tr.ht-cmp-sec > th { width: auto; padding: 20px 16px 12px; background: #fff; text-align: left; }
.ht-cmp-group + .ht-cmp-group tr.ht-cmp-sec > th { border-top: 1px solid var(--ht-card-line); }
.ht-cmp-sec-in { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; }
.ht-cmp-sec-name { display: inline-flex; align-items: center; gap: 7px; font: 700 16px/1.3 var(--ht-font); letter-spacing: -.1px; color: var(--ht-ink); }
.ht-cmp-sec-name .ht-crown { font-size: 18px; }
.ht-cmp-sec-about { font-size: 13.5px; font-weight: 400; line-height: 1.4; color: var(--ht-muted); }
.ht-cmp-group.is-model tr:not(.ht-cmp-sec) > th { font-weight: 500; color: var(--ht-text); }
.ht-cell-sub { display: block; margin-top: 3px; font-size: 12px; color: var(--ht-muted); }
.ht-cell-note.is-signup { color: var(--ht-warn-ink); }
.ht-cell-none { margin-left: 6px; font-size: 13px; color: var(--ht-muted); }

.ht-mgroup { padding: 16px 0 6px; border-bottom: 1px solid var(--ht-line); }
.ht-mgroup-title { display: flex; align-items: center; gap: 7px; margin: 0; font: 700 16px/1.3 var(--ht-font); letter-spacing: -.1px; color: var(--ht-ink); }
.ht-mgroup-title .ht-crown { font-size: 18px; }
.ht-mgroup .ht-meter { padding: 12px 0 10px; border-bottom: 0; }
.ht-mgroup .ht-meter-name { font-size: 14px; font-weight: 500; color: var(--ht-text); }
.ht-mgroup .ht-meter-count { font-weight: 500; }
.ht-meter.is-locked .ht-meter-name { color: var(--ht-muted); }
.ht-meter.is-locked .ht-meter-none .ht-link { margin-left: 2px; white-space: nowrap; }

@media (max-width: 640px) {
  .ht-cmp-table tbody tr.ht-cmp-sec { margin: 26px 0 10px; background: transparent; border: 0; border-radius: 0; overflow: visible; }
  .ht-cmp-group:first-of-type tr.ht-cmp-sec { margin-top: 4px; }
  .ht-cmp-table tbody tr.ht-cmp-sec > th { padding: 0 2px; background: transparent; border: 0 !important; }
  .ht-cmp-sec-in { display: block; }
  .ht-cmp-sec-name { display: flex; }
  .ht-cmp-sec-about { display: block; margin-top: 2px; }
  .ht-cmp-table td .ht-cell-none { margin-left: 4px; }
}
/* ===== /models on pages ===== */