/*
 * Landing styles (T1, 3), front page only. Generated from the style block of
 * landing/wp-snippet-v3.html by tools/landing-split.py. Header and footer
 * rules moved to assets/site.css.
 */
/* ---- Fonts: "HT Inter" and "HT Newsreader" come from the child theme
   (assets/fonts.css, enqueued on every page by functions.php). ---- */

/* ---- Tokens (design/tokens.css, scoped to #landing) ---- */
#landing {
  --ht-bg: #FAF8F5;
  --ht-surface: #FFFFFF;
  --ht-surface-muted: #F2F6F3;
  --ht-border: #E7E5E4;
  --ht-text: #1C1917;
  --ht-text-muted: #57534E;
  --ht-action: #047857;
  --ht-action-hover: #065F46;
  --ht-on-action: #FFFFFF;
  --ht-accent: #10B981;
  --ht-accent-2: #0F766E;
  --ht-focus: #047857;
  --ht-danger: #B91C1C;
  --ht-warning: #B45309;
  --ht-gradient-brand: linear-gradient(135deg, var(--ht-accent), var(--ht-accent-2));
  --ht-track: color-mix(in srgb, var(--ht-text-muted) 65%, var(--ht-surface));
  --ht-shadow: 0 1px 2px rgba(28, 25, 23, .04), 0 8px 24px rgba(28, 25, 23, .06);
  --ht-font-sans: "HT Inter", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ht-font-serif: "HT Newsreader", "Newsreader", Georgia, "Times New Roman", serif;
  --ht-text-14: 0.875rem; --ht-text-16: 1rem; --ht-text-18: 1.125rem; --ht-text-20: 1.25rem;
  --ht-text-24: 1.5rem; --ht-text-32: 2rem; --ht-text-44: 2.75rem;
  --ht-text-hero: clamp(2.5rem, 1.6rem + 3.2vw, 3.5rem);
  --ht-leading-text: 1.6; --ht-leading-title: 1.15; --ht-tracking-title: -0.01em;
  --ht-measure: 50ch;        /* 55 to 70 characters per line; see design/tokens.css */
  --ht-space-1: 4px; --ht-space-2: 8px; --ht-space-3: 12px; --ht-space-4: 16px; --ht-space-5: 24px;
  --ht-space-6: 32px; --ht-space-7: 48px; --ht-space-8: 64px; --ht-space-9: 96px; --ht-space-10: 128px;
  --ht-section-y: 64px; --ht-container: 1120px; --ht-column: 760px; --ht-gutter: 24px;
  --ht-radius-sm: 8px; --ht-radius-md: 14px; --ht-radius-lg: 24px; --ht-radius-full: 999px;
  --ht-focus-width: 2px; --ht-focus-offset: 2px;
  --ht-duration-fast: 160ms; --ht-duration-base: 280ms; --ht-duration-slow: 600ms;
  --ht-ease: cubic-bezier(.22, .61, .36, 1);
  color-scheme: light;
}
@media (min-width: 768px) { #landing { --ht-section-y: 96px; } }
@media (prefers-color-scheme: dark) {
  #landing:not([data-theme="light"]) {
    --ht-bg: #0C1411; --ht-surface: #131D19; --ht-surface-muted: #1A2621; --ht-border: #26342E;
    --ht-text: #ECF2EE; --ht-text-muted: #A3B3AB; --ht-action: #34D399; --ht-action-hover: #6EE7B7;
    --ht-on-action: #052E22; --ht-accent: #10B981; --ht-accent-2: #2DD4BF; --ht-focus: #6EE7B7;
    --ht-danger: #F87171; --ht-warning: #FBBF24;
    --ht-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
    color-scheme: dark;
  }
}
#landing[data-theme="dark"] {
  --ht-bg: #0C1411; --ht-surface: #131D19; --ht-surface-muted: #1A2621; --ht-border: #26342E;
  --ht-text: #ECF2EE; --ht-text-muted: #A3B3AB; --ht-action: #34D399; --ht-action-hover: #6EE7B7;
  --ht-on-action: #052E22; --ht-accent: #10B981; --ht-accent-2: #2DD4BF; --ht-focus: #6EE7B7;
  --ht-danger: #F87171; --ht-warning: #FBBF24;
  --ht-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
  color-scheme: dark;
}
@media (prefers-reduced-motion: reduce) {
  #landing { --ht-duration-fast: 0ms; --ht-duration-base: 0ms; --ht-duration-slow: 0ms; }
}

/* ---- Base: explicit resets at zero specificity, no * and no body rule ---- */
#landing {
  background: var(--ht-bg);
  color: var(--ht-text);
  font-family: var(--ht-font-sans);
  font-size: var(--ht-text-18);
  line-height: var(--ht-leading-text);
  -webkit-font-smoothing: antialiased;
  text-align: left;
}
#landing :where(h1, h2, h3, p, ul, ol, li, figure) { margin: 0; padding: 0; }
/* The child theme sets font-family, colour and weight on every p (style.css,
   "Body text"); without this the snippet's paragraphs fall back to Lato and
   #272525. ID specificity beats the theme's element selector. */
#landing :where(p, li, td, th) { font-family: inherit; color: inherit; font-weight: inherit; }
#landing :where(ul, ol) { list-style: none; }
#landing :where(h1, h2, h3) {
  font-family: var(--ht-font-serif); font-weight: 400;
  line-height: var(--ht-leading-title); letter-spacing: var(--ht-tracking-title);
  color: var(--ht-text); text-transform: none; text-wrap: balance;
}
/* The Elementor kit (post-2002.css) sets font-family on every a; inherit keeps
   links in the snippet's own font (L3). */
#landing :where(a) { font-family: inherit; color: var(--ht-action); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--ht-duration-fast) var(--ht-ease); }
#landing :where(a):hover { color: var(--ht-action-hover); }
#landing :where(button) {
  font: inherit; color: inherit; background: none; border: 0; border-radius: 0;
  padding: 0; margin: 0; cursor: pointer; text-transform: none; letter-spacing: normal; box-shadow: none;
  /* Hello Elementor sets white-space: nowrap and text-align: center on every
     button, so long FAQ questions overflowed on phones (L3). */
  white-space: normal; text-align: inherit;
}
#landing :where(svg) { display: block; }
#landing :focus-visible { outline: var(--ht-focus-width) solid var(--ht-focus); outline-offset: var(--ht-focus-offset); }
#landing [hidden] { display: none !important; }

/* ---- Layout ---- */
#landing .ht-container { max-width: var(--ht-container); margin: 0 auto; padding: 0 var(--ht-gutter); box-sizing: border-box; }
#landing .ht-section { padding: var(--ht-section-y) 0; }
#landing .ht-section--muted { background: var(--ht-surface-muted); }
/* Three widths (brief 4): backgrounds full bleed, header and grids in
   --ht-container, hero, section heads, FAQ and closing CTA in the centred
   --ht-column, running text at most --ht-measure. Only titles, leads and
   CTA rows are centred; longer text stays left-aligned inside the column. */
#landing .ht-column { max-width: var(--ht-column); margin-left: auto; margin-right: auto; }
#landing .ht-section__head { max-width: var(--ht-column); margin: 0 auto; text-align: center; }
#landing .ht-section__title { font-size: clamp(var(--ht-text-32), 1.4rem + 1.6vw, var(--ht-text-44)); }
#landing .ht-section__text { margin: var(--ht-space-4) auto 0; color: var(--ht-text-muted); max-width: var(--ht-measure); }
#landing .ht-grid { display: grid; gap: var(--ht-space-5); margin-top: var(--ht-space-7); }
#landing .ht-card { background: var(--ht-surface); border: 1px solid var(--ht-border); border-radius: var(--ht-radius-lg); box-shadow: var(--ht-shadow); padding: var(--ht-space-6); box-sizing: border-box; }
#landing .ht-card__title { font-size: var(--ht-text-24); font-weight: 500; }
#landing .ht-card__text { margin-top: var(--ht-space-3); color: var(--ht-text-muted); font-size: var(--ht-text-16); }

/* ---- Buttons and links ---- */
#landing .ht-button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ht-space-2);
  min-height: 48px; padding: 0 var(--ht-space-5); box-sizing: border-box;
  border-radius: var(--ht-radius-full);
  font-family: var(--ht-font-sans); font-size: var(--ht-text-16); font-weight: 600; line-height: 1.2;
  text-decoration: none;
  transition: background-color var(--ht-duration-fast) var(--ht-ease);
}
#landing .ht-button--primary { background: var(--ht-action); color: var(--ht-on-action); text-decoration: none; }
#landing .ht-button--primary:hover { background: var(--ht-action-hover); color: var(--ht-on-action); }
#landing .ht-button--lg { min-height: 56px; padding: 0 var(--ht-space-6); font-size: var(--ht-text-18); }
/* Secondary action (brief 11.8): outline, never a second filled button in view */
#landing .ht-button--outline { background: transparent; color: var(--ht-action); border: 1px solid var(--ht-action); transition: background-color var(--ht-duration-fast) var(--ht-ease), color var(--ht-duration-fast) var(--ht-ease), border-color var(--ht-duration-fast) var(--ht-ease); }
#landing .ht-button--outline:hover { background: var(--ht-surface-muted); color: var(--ht-action-hover); border-color: var(--ht-action-hover); }
#landing .ht-button--sm { min-height: 44px; padding: 0 var(--ht-space-5); font-size: var(--ht-text-16); }
#landing .ht-trial { font-size: var(--ht-text-16); color: var(--ht-text-muted); }
#landing .ht-actions { margin-top: var(--ht-space-6); display: flex; flex-direction: column; align-items: flex-start; gap: var(--ht-space-3); }
#landing .ht-actions--center { align-items: center; text-align: center; }


/* ---- Hero: soft light in the brand gradient, fading out, no grey ---- */
#landing .ht-hero { position: relative; isolation: isolate; overflow: hidden; }
/* T1: the shared header (header.php) lies over the hero; this padding
   takes the place of the 72 px the header had inside the hero in v3. */
#landing .ht-hero { padding-top: 72px; }
#landing .ht-hero__light {
  position: absolute; inset: 0 0 -1px 0; z-index: -1; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 40%, transparent 100%);
}
#landing .ht-hero__light::before {
  content: ""; position: absolute; inset: -10% -10% 0 -10%;
  background:
    /* Centred on the column (v2c): main light just above the title, teal
       below it; fixed radii so phone and wide screens keep the same shape. */
    radial-gradient(560px 300px at 50% 30%, color-mix(in srgb, var(--ht-accent) 22%, transparent), transparent 70%),
    radial-gradient(440px 260px at 50% 58%, color-mix(in srgb, var(--ht-accent-2) 12%, transparent), transparent 72%);
  filter: blur(24px);
}
#landing .ht-hero__light::after {
  /* Grain tinted in the accent colour (never black), very faint. */
  content: ""; position: absolute; inset: 0; opacity: .045;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .063  0 0 0 0 .725  0 0 0 0 .506  1 0 0 0 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
#landing .ht-hero__inner { padding-top: var(--ht-space-8); padding-bottom: var(--ht-section-y); text-align: center; }
#landing .ht-kicker { margin: 0 auto var(--ht-space-4); font-size: var(--ht-text-14); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ht-accent-2); }
#landing .ht-hero__title { font-size: var(--ht-text-hero); max-width: 14em; margin: 0 auto; }
#landing .ht-follow { margin-top: var(--ht-space-5); font-size: var(--ht-text-14); }
#landing .ht-follow__link { display: inline-flex; align-items: center; gap: var(--ht-space-2); min-height: 44px; color: var(--ht-text-muted); }
#landing .ht-follow__link:hover { color: var(--ht-action-hover); }
#landing .ht-follow__icon { width: 16px; height: 16px; flex: none; }
#landing .ht-hero__lead { margin: var(--ht-space-5) auto 0; font-size: var(--ht-text-20); color: var(--ht-text-muted); max-width: var(--ht-measure); }

/* ---- Sample player ---- */
#landing .ht-player { margin: var(--ht-space-7) auto 0; max-width: var(--ht-column); display: grid; grid-template-columns: auto 1fr; gap: var(--ht-space-4) var(--ht-space-5); align-items: center; }
#landing .ht-player__toggle {
  width: 56px; height: 56px; border-radius: var(--ht-radius-full);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ht-action); color: var(--ht-on-action);
  transition: background-color var(--ht-duration-fast) var(--ht-ease);
}
#landing .ht-player__toggle:hover { background: var(--ht-action-hover); }
#landing .ht-player__toggle:disabled { cursor: progress; }
#landing .ht-player__title { font-size: var(--ht-text-16); font-weight: 600; }
#landing .ht-player__sub { font-size: var(--ht-text-14); color: var(--ht-text-muted); display: flex; align-items: center; gap: var(--ht-space-2); }
#landing .ht-player__track { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; gap: var(--ht-space-4); align-items: center; }
#landing .ht-player__time { font-size: var(--ht-text-14); color: var(--ht-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
#landing .ht-icon { width: 24px; height: 24px; }
#landing .ht-player__toggle .ht-icon--pause { display: none; }
#landing .ht-player[data-playing="true"] .ht-icon--play { display: none; }
#landing .ht-player[data-playing="true"] .ht-icon--pause { display: block; }
#landing .ht-range { -webkit-appearance: none; appearance: none; width: 100%; height: 24px; background: transparent; margin: 0; cursor: pointer; }
#landing .ht-range::-webkit-slider-runnable-track { height: 4px; border-radius: var(--ht-radius-full); background: linear-gradient(to right, var(--ht-action) var(--ht-progress, 0%), var(--ht-track) var(--ht-progress, 0%)); }
#landing .ht-range::-moz-range-track { height: 4px; border-radius: var(--ht-radius-full); background: var(--ht-track); }
#landing .ht-range::-moz-range-progress { height: 4px; border-radius: var(--ht-radius-full); background: var(--ht-action); }
#landing .ht-range::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6px; border-radius: 50%; background: var(--ht-action); border: 2px solid var(--ht-surface); }
#landing .ht-range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--ht-action); border: 2px solid var(--ht-surface); }
#landing .ht-range:focus-visible { outline-offset: 4px; border-radius: var(--ht-radius-sm); }
/* Playing-state indicator: runs only while playing, never with reduced motion. */
#landing .ht-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
#landing .ht-eq span { width: 2px; height: 4px; border-radius: 1px; background: var(--ht-accent-2); }
#landing .ht-player[data-playing="true"] .ht-eq span { animation: ht-eq 900ms var(--ht-ease) infinite alternate; }
#landing .ht-player[data-playing="true"] .ht-eq span:nth-child(2) { animation-delay: -300ms; }
#landing .ht-player[data-playing="true"] .ht-eq span:nth-child(3) { animation-delay: -600ms; }
@keyframes ht-eq { from { height: 3px; } to { height: 12px; } }
@media (prefers-reduced-motion: reduce) { #landing .ht-player[data-playing="true"] .ht-eq span { animation: none; height: 8px; } }

/* ---- Steps ---- */
#landing .ht-steps { counter-reset: ht-step; }
#landing .ht-step { counter-increment: ht-step; border-top: 1px solid var(--ht-border); padding-top: var(--ht-space-5); }
#landing .ht-step::before { content: counter(ht-step); display: block; font-family: var(--ht-font-serif); font-size: var(--ht-text-32); line-height: 1; color: var(--ht-accent-2); margin-bottom: var(--ht-space-4); }
#landing .ht-step__title { font-size: var(--ht-text-24); font-weight: 500; }
#landing .ht-step__text { margin-top: var(--ht-space-3); color: var(--ht-text-muted); font-size: var(--ht-text-16); }

/* ---- Hand-clasp exercise ---- */
#landing .ht-test__card { margin-top: var(--ht-space-7); }
#landing .ht-test__title { font-size: var(--ht-text-24); font-weight: 500; }
#landing .ht-test__title:focus { outline: none; }
#landing .ht-test__title:focus-visible { outline: var(--ht-focus-width) solid var(--ht-focus); outline-offset: var(--ht-focus-offset); }
#landing .ht-test__text { margin-top: var(--ht-space-3); font-size: var(--ht-text-16); color: var(--ht-text-muted); max-width: var(--ht-measure); }
#landing .ht-test__list { margin-top: var(--ht-space-4); font-size: var(--ht-text-16); display: grid; gap: var(--ht-space-2); }
#landing .ht-test__list li { position: relative; padding-left: var(--ht-space-5); }
#landing .ht-test__list li::before { content: ""; position: absolute; left: 4px; top: .65em; width: 6px; height: 6px; border-radius: 50%; background: var(--ht-accent-2); }
#landing .ht-test__list--numbered { counter-reset: ht-li; }
#landing .ht-test__list--numbered li { counter-increment: ht-li; padding-left: var(--ht-space-6); }
#landing .ht-test__list--numbered li::before { content: counter(ht-li) "."; width: auto; height: auto; border-radius: 0; background: none; top: 0; left: 0; font-weight: 600; color: var(--ht-accent-2); }
#landing .ht-test__actions { margin-top: var(--ht-space-5); display: flex; flex-wrap: wrap; gap: var(--ht-space-3); }
#landing .ht-test__timer { margin-top: var(--ht-space-5); display: flex; align-items: baseline; gap: var(--ht-space-2); }
#landing .ht-test__count { font-family: var(--ht-font-serif); font-size: var(--ht-text-44); line-height: 1; color: var(--ht-text); font-variant-numeric: tabular-nums; min-width: 2ch; }
#landing .ht-test__unit { font-size: var(--ht-text-16); color: var(--ht-text-muted); }
#landing .ht-test__choices { margin-top: var(--ht-space-4); display: grid; gap: var(--ht-space-3); }
#landing .ht-test__choice {
  display: grid; gap: var(--ht-space-1); width: 100%; min-height: 64px; box-sizing: border-box;
  padding: var(--ht-space-4) var(--ht-space-5); text-align: left;
  background: var(--ht-surface); border: 1px solid var(--ht-track); border-radius: var(--ht-radius-md);
  transition: border-color var(--ht-duration-fast) var(--ht-ease), background-color var(--ht-duration-fast) var(--ht-ease);
}
#landing .ht-test__choice:hover { border-color: var(--ht-action); background: var(--ht-surface-muted); }
#landing .ht-test__choice-title { font-size: var(--ht-text-16); font-weight: 600; color: var(--ht-text); }
#landing .ht-test__choice-text { font-size: var(--ht-text-14); color: var(--ht-text-muted); }
#landing .ht-test__cta { margin-top: var(--ht-space-5); display: flex; flex-direction: column; align-items: flex-start; gap: var(--ht-space-3); }
#landing .ht-test__again { min-height: 44px; font-size: var(--ht-text-16); color: var(--ht-action); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
#landing .ht-test__again:hover { color: var(--ht-action-hover); }

/* ---- Comparison table: three columns from 640 px, stacked rows below ---- */
#landing .ht-versus__wrap { margin-top: var(--ht-space-7); }
#landing .ht-table { width: 100%; border-collapse: collapse; font-size: var(--ht-text-16); line-height: 1.5; table-layout: fixed; background: transparent; border: 0; margin: 0; }
#landing .ht-table :where(th, td) { padding: var(--ht-space-4); text-align: left; vertical-align: top; border: 0; border-bottom: 1px solid var(--ht-border); background: transparent; color: var(--ht-text); font-weight: 400; }
#landing .ht-table thead th { font-weight: 600; font-size: var(--ht-text-14); color: var(--ht-text-muted); }
#landing .ht-table thead th:last-child { color: var(--ht-action); }
#landing .ht-table tbody th { font-weight: 600; }
#landing .ht-table tbody td:last-child { background: var(--ht-surface-muted); }
#landing .ht-versus__note { margin-top: var(--ht-space-5); font-size: var(--ht-text-16); color: var(--ht-text-muted); max-width: var(--ht-measure); }
#landing .ht-versus__source { margin-top: var(--ht-space-2); font-size: var(--ht-text-14); color: var(--ht-text-muted); }
#landing .ht-versus__source a { display: inline-flex; align-items: center; min-height: 24px; }
@media (max-width: 639px) {
  #landing .ht-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  #landing .ht-table, #landing .ht-table tbody, #landing .ht-table tr, #landing .ht-table th, #landing .ht-table td { display: block; width: auto; }
  #landing .ht-table tr { padding: var(--ht-space-4) 0; border-bottom: 1px solid var(--ht-border); }
  #landing .ht-table :where(th, td) { border: 0; padding: var(--ht-space-1) 0; }
  #landing .ht-table tbody th { font-family: var(--ht-font-serif); font-size: var(--ht-text-20); font-weight: 500; padding-bottom: var(--ht-space-2); }
  #landing .ht-table tbody td:last-child { background: transparent; }
  #landing .ht-table td::before { content: attr(data-label); display: block; font-size: var(--ht-text-14); font-weight: 600; color: var(--ht-text-muted); }
  #landing .ht-table td:last-child::before { color: var(--ht-action); }
}

/* ---- Pricing ---- */
#landing .ht-plan { display: flex; flex-direction: column; }
#landing .ht-plan__price { margin-top: var(--ht-space-4); display: flex; align-items: baseline; gap: var(--ht-space-2); }
#landing .ht-plan__amount { font-family: var(--ht-font-serif); font-size: var(--ht-text-44); line-height: 1; color: var(--ht-text); }
#landing .ht-plan__per { font-size: var(--ht-text-16); color: var(--ht-text-muted); }
#landing .ht-plan__credits { margin-top: var(--ht-space-4); padding-top: var(--ht-space-4); border-top: 1px solid var(--ht-border); font-size: var(--ht-text-16); color: var(--ht-text); }
#landing .ht-pricing__fallback { display: flex; justify-content: center; }
#landing .ht-pricing__fallback .ht-actions { margin-top: 0; align-items: center; }
#landing .ht-plan__fair { margin-top: var(--ht-space-2); font-size: var(--ht-text-14); line-height: 1.5; }
#landing .ht-plan__fair a { display: inline-flex; align-items: center; min-height: 24px; }

/* ---- FAQ accordion ---- */
#landing .ht-faq { margin: var(--ht-space-7) auto 0; max-width: var(--ht-column); border-top: 1px solid var(--ht-border); }
#landing .ht-faq__item { border-bottom: 1px solid var(--ht-border); }
#landing .ht-faq__button {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--ht-space-4);
  min-height: 64px; padding: var(--ht-space-4) 0; text-align: left;
  font-family: var(--ht-font-sans); font-size: var(--ht-text-18); font-weight: 500; line-height: 1.4; color: var(--ht-text);
}
#landing .ht-faq__button:hover { color: var(--ht-action); }
#landing .ht-faq__chevron { flex: none; width: 20px; height: 20px; color: var(--ht-text-muted); transition: transform var(--ht-duration-base) var(--ht-ease); }
#landing .ht-faq__button[aria-expanded="true"] .ht-faq__chevron { transform: rotate(180deg); }
#landing .ht-faq__panel { padding: 0 0 var(--ht-space-5); max-width: var(--ht-measure); color: var(--ht-text-muted); font-size: var(--ht-text-16); }


#landing .ht-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (min-width: 640px) {
  #landing .ht-grid--2 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
  #landing .ht-hero__inner { padding-top: var(--ht-space-9); }
  #landing .ht-actions { flex-direction: row; align-items: center; gap: var(--ht-space-5); }
  #landing .ht-actions--center { flex-direction: column; gap: var(--ht-space-3); }
  #landing .ht-grid--3 { grid-template-columns: repeat(3, 1fr); gap: var(--ht-space-6); }
}
@media (min-width: 1024px) {
  #landing .ht-grid--4 { grid-template-columns: repeat(4, 1fr); }
  #landing .ht-grid--plans { grid-template-columns: repeat(3, 1fr); }
}