/* Guest homepage, Concept A. Kept separate from the preserved guest-home.css. */
.ht {
  --ht-ink: #19241f;
  --ht-muted: #59645e;
  --ht-red: #bd393d;
  --ht-line: #dce1da;
  --ht-paper: #fff;
  --ht-sage: #edf2e8;
  --ht-blue: #edf5f8;
  --ht-blush: #faf0ee;
  --ht-cream: #f7f5ee;
  color: var(--ht-ink);
  background: var(--ht-paper);
  font-family: 'Inter var', ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.ht *, .ht *::before, .ht *::after { box-sizing: border-box; }
@media (max-width: 640px) {
  .ht { padding-bottom: calc(63px + env(safe-area-inset-bottom, 0px)); }
}
.ht h1, .ht h2, .ht h3, .ht h4, .ht p, .ht figure { margin: 0; }
.ht a { color: inherit; text-decoration: none; }
.ht button { font: inherit; cursor: pointer; }
.ht [hidden] { display: none !important; }
.ht .icon { width: 21px; height: 21px; flex-shrink: 0; }
.ht a:focus-visible, .ht button:focus-visible, .ht summary:focus-visible { outline: 3px solid var(--ht-red); outline-offset: 5px; border-radius: 3px; }
.ht-wrap { width: min(1200px, calc(100% - 96px)); margin-inline: auto; }
.ht-header { background: var(--ht-paper); }
.ht-header-inner { display: flex; align-items: center; gap: 48px; min-height: 88px; }
.ht-brand { display: inline-flex; flex-shrink: 0; }
.ht-brand img { display: block; object-fit: contain; }
.ht-platform-link { display: flex; align-items: center; gap: 14px; font-size: 13px; font-weight: 550; min-height: 44px; white-space: nowrap; }
.ht-header-nav { display: flex; align-items: center; gap: 28px; margin-left: -12px; padding-left: 36px; border-left: 1px solid var(--ht-line); font-size: 13px; font-weight: 550; }
.ht-header-nav > a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ht-muted); }
.ht-header-nav > a:hover { color: var(--ht-ink); text-decoration: underline; text-underline-offset: 5px; }
.ht-account { display: flex; align-items: center; gap: 30px; margin-left: auto; font-size: 13px; }
.ht-account > a { min-height: 44px; display: inline-flex; align-items: center; white-space: nowrap; }
.ht .ht-button { display: inline-flex; align-items: center; justify-content: center; gap: 28px; min-height: 52px; padding: 15px 23px; border-radius: 6px; background: var(--ht-red); color: #fff; font-size: 13px; line-height: 1.5; font-weight: 600; transition: background .18s, transform .18s; }
.ht .ht-button:hover { background: #a22e34; transform: translateY(-2px); }
.ht .ht-button-small { min-height: 44px; padding: 11px 19px; }
.ht-button > span { font-size: 18px; line-height: 1; }
.ht-eyebrow { font-size: 10px; font-weight: 650; letter-spacing: .13em; line-height: 1.6; }
.ht-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 8px; background: var(--ht-red); }
.ht-hero { position: relative; isolation: isolate; overflow: clip; background: #f4f5f6; }
/* India is the origin of the network; keep its hub above the feature card. */
.ht-hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url('../img/home-tour/india-connected-world.jpg') center top / 100% auto no-repeat;
  mask-image: linear-gradient(90deg, transparent 32%, #000 53%);
}
.ht-hero::after { content: ''; position: absolute; left: 77.55%; top: 18.02vw; width: 30px; height: 30px; border: 1px solid #cf2b3e80; border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%); animation: ht-india-pulse 4s ease-out infinite; }
@keyframes ht-india-pulse { from { box-shadow: 0 0 0 0 #cf2b3e50; } to { box-shadow: 0 0 0 20px #cf2b3e00; } }
.ht-hero-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; min-height: min(740px, calc(100svh - 150px)); padding-block: 42px; }
.ht-hero .ht-glimpse { width: min(100%, 380px); justify-self: end; align-self: end; border: 6px solid rgb(255 255 255 / .9); box-shadow: 0 16px 44px #25302718; }
.ht-hero .ht-glimpse-slide { height: 220px; }
.ht-hero-copy { min-width: 0; }
.ht-hero h1 { margin-top: 24px; font-size: clamp(40px, 4.3vw, 62px); line-height: 1.06; letter-spacing: -.065em; font-weight: 740; }
.ht-hero h1 em { font-style: normal; color: var(--ht-red); }
.ht .ht-lede { margin-top: 21px; color: var(--ht-muted); font-size: 16px; line-height: 1.85; max-width: 470px; }
.ht-hero .ht-button { margin-top: 29px; }
.ht .ht-scroll-link { display: flex; align-items: center; gap: 17px; width: fit-content; min-height: 44px; margin-top: 12px; font-size: 11px; font-weight: 550; }
/* The active image and the headline beside it tell one story. */
.ht-hero-copy h1 { min-height: 2.12em; }
.ht-hero-benefits { list-style: none; padding: 0; margin: 23px 0 0; display: grid; gap: 14px; min-height: 112px; }
.ht-hero-benefits li { position: relative; padding-left: 22px; font-size: 13px; line-height: 1.65; color: var(--ht-muted); }
.ht-hero-benefits li::before { content: '↗'; position: absolute; left: 0; top: 0; color: var(--ht-red); font-weight: 600; }
.ht-hero-benefits strong { color: var(--ht-ink); font-weight: 650; margin-right: 5px; }
.ht-hero-benefits span { display: inline; }
.ht-hero-copy .ht-eyebrow { text-transform: uppercase; }
.ht-hero-copy .ht-button [data-hero-link-label] { font-size: inherit; line-height: inherit; }
.ht-glimpse { min-width: 0; border-radius: 18px; overflow: hidden; background: var(--ht-sage); }
.ht-glimpse-slide { height: 490px; }
.ht-glimpse-slide > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ht-glimpse-city { object-position: 65% center; }
.ht-slider-controls { display: flex; align-items: center; justify-content: space-between; max-width: 300px; margin-top: 24px; gap: 8px; }
.ht-slider-arrow { flex-shrink: 0; min-width: 40px; width: 40px; height: 40px; border: 1px solid var(--ht-line); border-radius: 50%; background: transparent; color: var(--ht-ink); }
.ht-slider-arrow:hover { background: var(--ht-paper); }
.ht-slider-dots { display: flex; }
.ht-slider-dots button { min-width: 24px; padding: 0; display: grid; place-items: center; width: 25px; height: 40px; border: 0; background: transparent; }
.ht-slider-dots span { width: 6px; height: 6px; border-radius: 6px; background: var(--ht-line); }
.ht-slider-dots [aria-current] span { width: 18px; background: var(--ht-red); }
.ht-chapters { position: sticky; top: 0; z-index: 20; background: var(--ht-paper); border-block: 1px solid var(--ht-line); }
.ht-chapter-bar { display: flex; align-items: center; gap: 22px; }
.ht-chapter-links { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.ht-chapter-links a { display: flex; align-items: center; justify-content: center; gap: 9px; position: relative; min-height: 66px; font-size: 12px; font-weight: 550; white-space: nowrap; }
.ht-chapter-links a > span { font-size: 9px; font-weight: 450; color: var(--ht-muted); }
.ht-chapter-links a::after { content: ''; position: absolute; bottom: -1px; height: 3px; inset-inline: 0; background: var(--ht-red); transform: scaleX(0); transition: transform .2s; }
.ht-chapter-links a[aria-current] { color: var(--ht-red); }
.ht-chapter-links a[aria-current]::after { transform: scaleX(1); }
.ht-chapter-links a:hover { color: var(--ht-red); }
.ht-section { padding-block: 115px; }
.ht [data-chapter], .ht-business-tools { scroll-margin-top: 65px; }
.ht-sage { background: var(--ht-sage); }
.ht-blue { background: var(--ht-blue); }
.ht-blush { background: var(--ht-blush); }
.ht-cream { background: var(--ht-cream); }
/* The washes live on a ::before layer so they can drift (see Motion & color). */
.ht .ht-section { position: relative; isolation: isolate; overflow: clip; background: color-mix(in srgb, var(--ht-paper) 94%, var(--ht-wash)); }
.ht .ht-section::before {
  content: ''; position: absolute; inset: -8%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 80% 85% at 100% 8%, color-mix(in srgb, var(--ht-wash) var(--ht-wash-strength, 88%), transparent), transparent 75%),
    radial-gradient(ellipse 65% 70% at 8% 100%, color-mix(in srgb, var(--ht-wash-soft) var(--ht-wash-strength, 88%), transparent), transparent 80%),
    radial-gradient(ellipse 38% 42% at 58% 40%, color-mix(in srgb, var(--ht-sun) var(--ht-sun-strength, 13%), transparent), transparent 72%);
}
.ht #social { --ht-wash: #bcdaca; --ht-wash-soft: #e6ebd4; }
.ht #business { --ht-wash: #b8dcf7; --ht-wash-soft: #dce4f3; }
.ht #business > .ht-section:last-child { --ht-wash: #c9e4f4; --ht-wash-soft: #e0edf1; }
.ht #communities { --ht-wash: #f7c0b1; --ht-wash-soft: #fbe5bf; }
.ht #questions { --ht-wash: #cbc5f6; --ht-wash-soft: #e6dcf6; }
.ht #bounties { --ht-wash: #f6d394; --ht-wash-soft: #f7e9c9; }
.ht #premium { --ht-wash: #deb4cc; --ht-wash-soft: #e6def5; }
.ht #news { --ht-wash: #b6d7f3; --ht-wash-soft: #e0e8f3; }
.ht-split { display: grid; grid-template-columns: .92fr 1.08fr; gap: 80px; align-items: center; min-height: 490px; }
.ht-copy, .ht-demo { min-width: 0; }
.ht h2 { margin-top: 20px; font-size: clamp(35px, 3.5vw, 49px); line-height: 1.13; letter-spacing: -.052em; font-weight: 700; text-wrap: balance; }
.ht-benefits { display: grid; gap: 23px; margin-block: 29px 32px; }
.ht-benefit { display: flex; align-items: flex-start; gap: 15px; }
.ht-benefit-icon { display: grid; place-items: center; flex-shrink: 0; width: 38px; height: 38px; margin-top: -6px; border-radius: 50%; color: color-mix(in srgb, var(--ht-accent) 72%, var(--ht-ink)); background: color-mix(in srgb, var(--ht-accent) 17%, var(--ht-paper)); }
.ht-benefit-icon .icon { width: 19px; height: 19px; }
.ht-benefit h3 { font-size: 13px; line-height: 1.5; font-weight: 650; letter-spacing: -.01em; }
.ht-benefit p { color: var(--ht-muted); font-size: 12px; line-height: 1.75; margin-top: 4px; max-width: 365px; }
.ht-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; }
.ht .ht-text-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 12px; font-weight: 600; }
.ht .ht-text-link:hover, .ht-scroll-link:hover, .ht-platform-link:hover { text-decoration: underline; text-underline-offset: 5px; }
.ht-demo figcaption { text-align: right; font-size: 9px; color: var(--ht-muted); margin-top: 15px; line-height: 1.7; }
.ht-window { overflow: hidden; background: var(--ht-paper); border: 1px solid #25302714; border-radius: 12px; box-shadow: 0 13px 35px #22372909; }
.ht-app-bar { padding: 20px 24px; display: flex; justify-content: space-between; align-items: center; gap: 16px; border-bottom: 1px solid var(--ht-line); }
.ht-app-bar > strong { color: var(--ht-red); font-size: 24px; letter-spacing: -.055em; }
.ht-app-bar > strong > span { display: none; }
.ht-app-bar small { font-size: 10px; color: var(--ht-ink); font-weight: 550; letter-spacing: normal; }
.ht-app-bar > span { display: flex; gap: 7px; align-items: center; color: var(--ht-muted); font-size: 10px; }
.ht-app-bar .icon { width: 15px; height: 15px; }
.ht-tabs{ display: flex; align-items: stretch; border-bottom: 1px solid var(--ht-line); padding-inline: 24px; gap: 20px; }
.ht-tabs button{ position: relative; flex: 1; background: transparent; border: 0; border-bottom: 2px solid transparent; padding: 15px 0; font-size: 11px; font-weight: 500; text-align: center; color: var(--ht-muted); }
.ht-tabs button[aria-selected='true']{ border-bottom-color: var(--ht-red); color: var(--ht-ink); font-weight: 650; }
.ht-tabs button:hover { color: var(--ht-red); }
.ht-post { padding: 24px 26px 10px; }
.ht-author { display: flex; align-items: center; gap: 10px; }
.ht-avatar { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex-shrink: 0; background: #ebe4d8; color: #514638; border-radius: 50%; font-size: 11px; font-weight: 600; }
.ht-author strong { display: block; font-size: 12px; font-weight: 650; }
.ht-author small { display: block; font-size: 10px; color: var(--ht-muted); margin-top: 3px; }
.ht-author-more { margin-left: auto; align-self: flex-start; letter-spacing: 2px; }
.ht-post > p { margin-block: 18px; font-size: 12px; line-height: 1.85; }
.ht-photo { overflow: hidden; position: relative; background: #e7e4d9; }
.ht-photo img { display: block; width: 300%; max-width: none; height: 100%; object-fit: cover; }
.ht-photo-trail img { transform: translateX(-66.666667%); }
.ht-post .ht-photo, .ht-post-city { display: block; width: 100%; height: 232px; border-radius: 6px; object-fit: cover; }
.ht-post-actions { display: flex; justify-content: space-between; gap: 8px; padding-block: 17px; color: var(--ht-muted); }
.ht-post-actions > span, .ht-post-actions > .ht-like { display: flex; align-items: center; gap: 6px; font-size: 10px; }
.ht-post-actions .icon { width: 15px; height: 15px; }
.ht-mini-label { font-size: 8px; letter-spacing: .11em; font-weight: 600; color: var(--ht-muted); }
.ht-business-tools { border-top: 1px solid #2435270b; }
.ht-features { margin-block: 24px 28px; }
.ht-features details { border-bottom: 1px solid var(--ht-line); }
.ht-features summary, .ht-more-features summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; list-style: none; min-height: 49px; font-size: 13px; font-weight: 600; }
.ht summary::-webkit-details-marker { display: none; }
.ht summary > span { font-size: 19px; font-weight: 400; color: var(--ht-muted); transition: transform .2s; }
.ht details[open] > summary > span { transform: rotate(45deg); }
.ht-features details[open] { background: var(--ht-paper); padding-inline: 15px; margin-inline: -15px; border: 1px solid var(--ht-line); border-radius: 6px; }
.ht-features details p { padding-bottom: 17px; color: var(--ht-muted); font-size: 12px; line-height: 1.8; }
.ht-access-note { font-size: 11px; color: var(--ht-muted); margin-bottom: 23px !important; }
.ht-more-features { margin-top: 22px; }
.ht-more-features summary { font-size: 11px; font-weight: 550; border-bottom: 1px solid var(--ht-line); }
.ht-more-features ul { list-style: disc; padding-left: 18px; margin-block: 14px 0; color: var(--ht-muted); font-size: 11px; line-height: 2.2; }
.ht-community-cover { height: 126px; }
.ht-community-heading { display: flex; align-items: center; gap: 13px; padding: 23px 24px; }
.ht-community-heading > .ht-avatar { width: 43px; height: 43px; background: #e7d8df; color: #684855; font-family: Georgia, serif; font-size: 23px; }
.ht-community-heading h3 { font-size: 19px; letter-spacing: -.035em; font-weight: 650; }
.ht-community-heading p { font-size: 10px; color: var(--ht-muted); margin-top: 5px; }
 .ht-community-panel h4 { font-size: 23px; line-height: 1.18; letter-spacing: -.045em; font-weight: 600; margin-top: 12px; }
 .ht-community-panel > p:not(.ht-mini-label) { color: var(--ht-muted); font-size: 10px; line-height: 1.8; margin-top: 13px; }
.ht-community-panel { min-height: 255px; padding: 25px; }
.ht-member-examples { display: flex; gap: 8px; align-items: center; margin-top: 28px; }
.ht-member-examples > span:last-child { font-size: 10px; color: var(--ht-muted); padding-left: 6px; }
 .ht-premium-card > h3{ font-size: 30px; line-height: 1.2; letter-spacing: -.045em; font-weight: 650; margin-top: 25px; }
.ht-steps { list-style: none; padding: 0; margin-block: 30px; display: grid; gap: 22px; }
.ht-steps li { display: flex; align-items: flex-start; gap: 13px; }
.ht-steps li > span { display: grid; place-items: center; width: 25px; height: 25px; background: #e8ded5; color: #554439; border-radius: 50%; font-size: 11px; }
.ht-steps strong { font-size: 13px; font-weight: 650; }
.ht-steps p { font-size: 11px; color: var(--ht-muted); margin-top: 4px; }
.ht-detail-note { font-size: 10px; color: var(--ht-muted); margin-bottom: 22px !important; line-height: 1.8; }
.ht-premium-card { padding: 29px; }
.ht-premium-card > p { font-size: 12px; line-height: 1.8; color: var(--ht-muted); margin-top: 15px; max-width: 350px; }
.ht-premium-media { position: relative; border-radius: 6px; overflow: hidden; margin-top: 25px; }
.ht-premium-media .ht-photo { height: 215px; }
.ht-premium-lock { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 10px; background: #1129209c; color: #fff; }
.ht-premium-lock .icon { width: 28px; height: 28px; margin-bottom: 4px; }
.ht-premium-lock strong { font-size: 17px; font-weight: 550; }
.ht-premium-lock > span { font-size: 10px; color: #e0e8e3; }
.ht-premium-foot { display: flex; justify-content: space-between; gap: 12px; font-size: 9px; color: var(--ht-muted); margin-top: 19px; }
.ht-premium-foot > span { display: flex; align-items: center; gap: 5px; }
.ht-premium-foot .icon { width: 12px; height: 12px; }
.ht-footer { padding-block: 44px 25px; }
.ht-footer-top, .ht-footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.ht-footer nav { display: flex; align-items: center; flex-wrap: wrap; gap: 22px; }
.ht-footer nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 11px; }
.ht-footer nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.ht-footer-bottom { border-top: 1px solid var(--ht-line); margin-top: 28px; padding-top: 21px; }
.ht-footer-bottom p { font-size: 10px; color: var(--ht-muted); }
.ht-footer-bottom nav { margin-left: auto; gap: 20px; }
.ht-footer-bottom nav a { font-size: 10px; color: var(--ht-muted); }
.ht-footer .theme-toggle { font-size: 10px; flex-shrink: 0; width: auto; }
[data-theme='dark'] .ht { --ht-ink: #e8eee8; --ht-muted: #b3beb7; --ht-red: #ad343d; --ht-line: #3b4841; --ht-paper: #1c2721; --ht-sage: #243229; --ht-blue: #233139; --ht-blush: #32282a; --ht-cream: #2d3026; }
[data-theme='dark'] .ht { --ht-wash-strength: 20%; --ht-sun-strength: 5%; }
[data-theme='dark'] .ht-hero { --ht-ink: #19241f; --ht-muted: #59645e; --ht-red: #bd393d; --ht-line: #cdd3cf; }
[data-theme='dark'] .ht-hero h1 em { color: var(--ht-red); }
[data-theme='dark'] .ht-chapter-links a[aria-current], [data-theme='dark'] .ht-app-bar > strong { color: #fa9398; }
[data-theme='dark'] .ht-benefit-icon { color: color-mix(in srgb, var(--ht-accent) 78%, #fff); background: color-mix(in srgb, var(--ht-accent) 24%, var(--ht-paper)); }
[data-theme='dark'] .ht-window { border-color: #81978830; }
[data-theme='dark'] .ht-brand img { filter: brightness(1.65) saturate(.65); }
@media (min-width: 1500px) { .ht-wrap { width: min(1320px, calc(100% - 120px)); } .ht-split { gap: 100px; } }
@media (max-width: 1100px) {
  .ht-wrap { width: calc(100% - 64px); }
  .ht-hero-inner { gap: 32px; }
  .ht-split { gap: 42px; grid-template-columns: .9fr 1.1fr; }
  .ht-section { padding-block: 90px; }
  .ht h2 { font-size: 37px; }
  .ht-chapter-links { gap: 16px; }
  .ht-chapter-links a { font-size: 11px; gap: 6px; }
  .ht-footer-top { align-items: flex-start; }
  .ht-footer-top nav { gap: 15px; }
}
@media (max-width: 1100px) {
  .ht-header-nav { gap: 20px; padding-left: 24px; }
}
/* Below 960px the three links would push the header labels onto two lines. */
@media (max-width: 960px) {
  .ht-header-nav { display: none; }
}
@media (max-width: 800px) {
  .ht-header-inner { gap: 25px; min-height: 78px; }
  .ht-brand img { width: 112px; height: auto; }
  .ht-account { gap: 18px; }
  .ht-hero-inner { grid-template-columns: 1fr; gap: 280px; min-height: auto; padding-block: 40px; max-width: 600px; }
  .ht-hero::before { inset: auto 0 280px; height: 270px; background-size: auto 100%; background-position: right center; mask-image: none; }
  .ht-hero::after { display: none; }
  .ht-hero .ht-glimpse { width: 100%; justify-self: center; }
  .ht-hero h1 { font-size: 56px; }
  .ht-glimpse-slide { height: 360px; }
  .ht-chapter-links { overflow-x: auto; width: 100%; padding-inline: 32px; justify-content: flex-start; gap: 27px; scrollbar-width: thin; }
  .ht-chapter-links a { min-height: 59px; flex-shrink: 0; }
  .ht [data-chapter], .ht-business-tools { scroll-margin-top: 59px; }
  .ht-split { grid-template-columns: 1fr; gap: 45px; max-width: 600px; }
  .ht-section { padding-block: 72px; }
  .ht h2 { font-size: 44px; }
  .ht .ht-lede { max-width: 540px; }
  .ht-benefits { gap: 21px; }
  .ht-benefit p { max-width: 470px; }
  .ht-demo { width: 100%; }
  .ht-workspace-demo { align-self: start; }
  .ht-footer-top { flex-direction: column; gap: 20px; }
  .ht-footer-bottom { flex-wrap: wrap; gap: 12px 25px; }
  .ht-footer-bottom nav { margin-left: 0; }
  .ht-footer .theme-toggle { margin-left: auto; }
}
@media (max-width: 540px) {
  .ht-wrap { width: calc(100% - 40px); }
  .ht-header-inner { gap: 12px; min-height: 72px; }
  .ht-header .ht-brand img { width: 103px; }
  .ht-platform-link { display: none; }
  .ht-account { gap: 15px; font-size: 12px; }
  .ht .ht-button-small { padding: 10px 14px; min-height: 42px; font-size: 11px; gap: 12px; }
  .ht-hero-inner { padding-block: 28px; width: calc(100% - 40px); gap: 240px; }
  .ht-hero::before { bottom: 260px; height: 220px; }
  .ht-hero .ht-eyebrow { font-size: 8px; letter-spacing: .1em; }
  .ht-hero h1 { font-size: clamp(31px, 8.1vw, 44px); margin-top: 15px; }
  .ht-hero .ht-scroll-link { display: none; }
  .ht-hero-benefits { margin-top: 15px; gap: 10px; min-height: 136px; }
  .ht-hero-benefits li { font-size: 12px; padding-left: 19px; }
  .ht-hero-benefits strong { display: block; }
  .ht-glimpse-slide { height: 270px; }
  .ht-slider-controls { margin-top: 20px; gap: 3px; }
  .ht-slider-arrow { width: 32px; min-width: 32px; }
  .ht-slider-dots button { width: 24px; }
  .ht-hero .ht-button { margin-top: 25px; }
  .ht-chapter-links { padding-inline: 20px; gap: 25px; }
  .ht-chapter-links a { min-height: 56px; font-size: 11px; }
  .ht-chapter-links a > span { font-size: 8px; }
  .ht-section { padding-block: 61px; }
  .ht-split { gap: 34px; }
  .ht [data-chapter], .ht-business-tools { scroll-margin-top: 56px; }
  .ht h2 { font-size: 36px; margin-top: 17px; }
  .ht .ht-lede { font-size: 14px; line-height: 1.85; margin-top: 18px; }
  .ht-benefits { margin-block: 25px 29px; gap: 19px; }
  .ht-benefit h3 { font-size: 12px; }
  .ht-benefit p { font-size: 11px; }
  .ht-benefit-icon { width: 34px; height: 34px; }
  .ht-benefit-icon .icon { width: 17px; height: 17px; }
  .ht .ht-button { font-size: 12px; padding-inline: 19px; gap: 22px; min-height: 49px; }
  .ht-app-bar { padding: 16px 18px; }
  .ht-app-bar > span { font-size: 8px; }
  .ht-app-bar > strong { font-size: 21px; }
  .ht-app-bar small { font-size: 8px; }
  .ht-tabs{ gap: 14px; padding-inline: 17px; }
  .ht-tabs button{ font-size: 10px; }
  .ht-post { padding: 20px 18px 5px; }
  .ht-post .ht-photo, .ht-post-city { height: 188px; }
  .ht-post > p { font-size: 11px; }
  .ht-post-actions > span, .ht-post-actions > .ht-like { font-size: 9px; gap: 4px; }
  .ht-post-actions .icon { width: 13px; height: 13px; }
  .ht-features summary { font-size: 12px; }
  .ht-community-cover { height: 100px; }
  .ht-community-heading { padding: 18px; gap: 10px; }
  .ht-community-heading h3 { font-size: 17px; }
  .ht-community-heading p { font-size: 9px; }
  .ht-community-heading > .ht-avatar { width: 34px; height: 34px; font-size: 19px; }
  .ht-community-panel { padding: 22px; min-height: 235px; }
 .ht-premium-card { padding: 23px; }
 .ht-premium-card > h3{ font-size: 27px; }
 .ht-premium-card > p { font-size: 11px; }
  .ht-premium-media .ht-photo { height: 195px; }
  .ht-premium-foot { font-size: 8px; }
  .ht-footer { padding-top: 33px; }
  .ht-footer-top nav { gap: 4px 19px; }
  .ht-footer-bottom { margin-top: 20px; }
  .ht-footer-bottom > p { flex-basis: 100%; }
  .ht-footer-bottom nav { gap: 13px; }
  .ht-footer .theme-toggle { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  html:has(.ht) { scroll-behavior: auto !important; }
  .ht *, .ht *::before, .ht *::after { animation: none !important; transition: none !important; }
}

/* Product walkthroughs: readable content, progressive detail, varied chapter rhythm. */
.ht .ht-section { padding-block: clamp(60px, 6vw, 92px); }
.ht .ht-split { gap: clamp(32px, 4vw, 64px); min-height: 0; }
.ht .ht-benefit h3, .ht .ht-steps strong { font-size: 16px; }
.ht .ht-benefit p, .ht .ht-steps p, .ht .ht-features p, .ht .ht-more-features ul, .ht .ht-community-panel > p:not(.ht-mini-label), .ht .ht-post > p, .ht .ht-premium-card > p { font-size: 15px; line-height: 1.7; }
.ht .ht-lede { font-size: 16px; line-height: 1.75; }
.ht .ht-features summary, .ht .ht-more-features summary { font-size: 15px; min-height: 48px; }
.ht .ht-access-note, .ht .ht-detail-note, .ht .ht-community-heading p { font-size: 13px; line-height: 1.65; }
.ht .ht-author strong { font-size: 14px; }
.ht .ht-author small, .ht .ht-premium-foot, .ht .ht-demo figcaption { font-size: 12px; line-height: 1.6; }
.ht .ht-demo figcaption { text-align: left; }
.ht .ht-tabs { gap: 14px; }
.ht .ht-tabs button { font-size: 13px; min-height: 48px; }
.ht .ht-slider-controls { max-width: 370px; }
.ht-slider-pause { border: 0; background: transparent; color: var(--ht-muted); min-height: 44px; min-width: 44px; padding: 0 5px; font-size: 12px !important; }
.ht-slider-pause:hover { color: var(--ht-ink); text-decoration: underline; }
.ht select { width: 100%; padding: 10px 30px 10px 12px; border: 1px solid var(--ht-line); border-radius: 7px; background: var(--ht-paper); color: var(--ht-ink); font: inherit; min-height: 44px; }
.ht select:focus-visible { outline: 3px solid var(--ht-red); outline-offset: 3px; }
.ht-demo-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px; border-bottom: 1px solid var(--ht-line); }
.ht-demo-toolbar strong { display: block; font-size: 17px; line-height: 1.5; margin-top: 8px; letter-spacing: -.02em; }
.ht-demo-toolbar label, .ht-booking-fields label { display: grid; gap: 7px; font-size: 12px; color: var(--ht-muted); }
.ht-demo-toolbar label { min-width: 180px; }
.ht .ht-mini-label { font-size: 10px; line-height: 1.7; letter-spacing: .08em; color: var(--ht-muted); font-weight: 650; }
.ht .ht-sample-note { padding: 10px 24px; background: var(--ht-blue); color: var(--ht-muted); font-size: 12px; line-height: 1.5; }
.ht-business-tools .ht-split { grid-template-columns: minmax(270px, .75fr) minmax(0, 1.4fr); align-items: start; }
.ht-workspace-demo { position: sticky; top: 90px; }
.ht-business-canvas { min-height: 390px; }
.ht-sample-site-nav { padding: 20px 24px; display: flex; gap: 16px; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--ht-line); }
.ht-sample-site-nav strong { font: 24px Georgia, serif; }
.ht-sample-site-nav span { color: var(--ht-muted); font-size: 12px; }
.ht-sample-site-hero { display: grid; grid-template-columns: 1.15fr 1fr; background: var(--ht-cream); }
.ht-sample-site-hero > div { padding: 30px 24px; }
.ht-sample-site-hero h3 { font: 34px/1.08 Georgia, serif; letter-spacing: -.04em; margin-top: 16px; }
.ht-sample-site-hero p:not(.ht-mini-label) { font-size: 14px; line-height: 1.6; color: var(--ht-muted); margin-top: 16px; }
.ht-sample-site-hero img { width: 100%; height: 100%; object-fit: cover; }
.ht-sample-site-links { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 14px 24px; }
.ht-sample-site-links button { border: 0; background: none; color: var(--ht-ink); min-height: 44px; font-size: 13px; text-align: left; }
.ht .ht-demo-button { display: inline-flex; align-items: center; justify-content: center; text-align: left; padding: 10px 14px; border: 1px solid var(--ht-line); border-radius: 7px; background: var(--ht-paper); color: var(--ht-ink); font-size: 14px; font-weight: 550; line-height: 1.5; min-height: 44px; margin-top: 18px; }
.ht .ht-demo-button:hover { border-color: var(--ht-muted); background: var(--ht-sage); }
.ht-sample-panel { padding: 28px; }
.ht-sample-panel h3 { font-size: clamp(24px, 2.3vw, 32px); line-height: 1.2; letter-spacing: -.04em; margin-top: 14px; }
.ht-sample-panel h4, .ht-result h4 { font-size: 20px; line-height: 1.35; margin-top: 12px; letter-spacing: -.025em; }
.ht-sample-panel > p:not(.ht-mini-label), .ht-example-detail p, .ht-result p, .ht-result small { font-size: 15px; line-height: 1.7; color: var(--ht-muted); margin-top: 12px; }
.ht-product-grid { display: grid; gap: 12px; margin-top: 24px; }
.ht-product-grid details { border: 1px solid var(--ht-line); border-radius: 8px; padding: 16px; }
.ht-product-grid summary { cursor: pointer; font-size: 15px; }
.ht-product-grid summary span { display: block; color: var(--ht-muted); font-size: 10px; letter-spacing: .06em; margin-bottom: 8px; }
.ht-product-grid p { font-size: 14px; color: var(--ht-muted); line-height: 1.7; margin-top: 12px; }
.ht-booking-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-block: 24px; }
.ht-result { background: var(--ht-sage); border: 1px solid var(--ht-line); border-radius: 8px; padding: 20px; margin-top: 22px; }
.ht-result strong { font-size: 15px; }
.ht-result small { display: block; font-size: 12px; }
.ht-example-detail { padding-block: 17px; border-bottom: 1px solid var(--ht-line); }
.ht-example-detail summary, .ht-workbook summary { cursor: pointer; font-size: 15px; font-weight: 600; line-height: 1.6; }
.ht-example-detail small { display: block; color: var(--ht-muted); font-size: 12px; line-height: 1.7; margin-top: 12px; }
.ht-workbook { margin-top: 16px; padding: 14px; background: var(--ht-blue); border-radius: 6px; }
.ht-business { background: var(--ht-blue); padding-bottom: 36px; }
.ht-business-discover { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 28px; border: 1px solid var(--ht-line); border-radius: 12px; background: var(--ht-paper); }
.ht-business-discover h3 { font-size: 25px; letter-spacing: -.035em; margin-top: 9px; }
.ht-business-discover p:not(.ht-eyebrow) { font-size: 15px; line-height: 1.7; color: var(--ht-muted); max-width: 680px; margin-top: 10px; }
.ht-business-discover .ht-button { flex-shrink: 0; }
.ht-journey { padding-block: 65px; background: #202f2a; color: #f0f3ec; }
.ht-journey > .ht-wrap { display: grid; grid-template-columns: 1fr 2fr; gap: 48px; align-items: center; }
.ht-journey h2 { font-size: 34px; margin-top: 15px; }
.ht-journey-intro > p:last-child { font-size: 15px; color: #c1d0c7; line-height: 1.75; margin-top: 18px; }
.ht-journey-steps { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); margin: 0; padding: 0; gap: 12px; }
.ht-journey-steps a { display: block; padding: 24px; border: 1px solid #60776a; border-radius: 10px; height: 100%; transition: background .2s; }
.ht-journey-steps a:hover { background: #314b3f; }
.ht-journey-steps span { font-size: 12px; color: #b0c6b4; }
.ht-journey-steps strong { display: block; font-size: 17px; margin-top: 14px; }
.ht-journey-steps p { color: #c1d0c7; font-size: 14px; line-height: 1.6; margin-top: 8px; }
.ht-journey-steps small { display: block; font-size: 12px; margin-top: 20px; }
.ht-answer-sample { min-height: 320px; }
.ht-access-pill { display: inline-block; padding: 8px 12px; border-radius: 30px; background: var(--ht-sage); font-size: 12px; line-height: 1.5; margin-top: 18px; }
.ht-readable-list { padding-left: 21px; font-size: 15px; color: var(--ht-muted); line-height: 1.75; margin-block: 18px 0; }
.ht-readable-list li + li { margin-top: 10px; }
.ht-readable-list strong { color: var(--ht-ink); }
.ht .ht-premium-foot { flex-wrap: wrap; }
.ht .ht-premium-lock > span { font-size: 13px; }
.ht-live { border-top: 1px solid var(--ht-line); padding-block: 20px; margin-top: 5px; }
.ht [data-public-status] { font-size: 13px; color: var(--ht-muted); line-height: 1.7; margin-top: 9px; }
.ht [data-public-items] article { padding-block: 22px; border-bottom: 1px solid var(--ht-line); }
.ht [data-public-items] article:last-child { border: 0; padding-bottom: 0; }
.ht [data-public-items] h4 { font-size: 19px; line-height: 1.4; margin-top: 8px; letter-spacing: -.025em; }
.ht-public-excerpt { font-size: 15px; line-height: 1.75; margin-top: 12px !important; white-space: pre-line; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; overflow-wrap: anywhere; }
.ht .ht-live .ht-mini-label { font-size: 10px; }
.ht-news-illustration { height: 200px; overflow: hidden; }
.ht-news-illustration img { width: 100%; height: 100%; object-fit: cover; object-position: center 46%; }
.ht-live-news [data-public-retry] { margin-right: 12px; }
.ht .ht-live-news { border-top: 3px solid var(--ht-ink); }
.ht-faq { padding-block: 75px; background: var(--ht-paper); }
.ht-faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; }
.ht-faq h2 { font-size: 37px; }
.ht-faq p { margin-top: 18px; color: var(--ht-muted); font-size: 15px; line-height: 1.8; }
.ht-faq details { padding-block: 21px; border-bottom: 1px solid var(--ht-line); }
.ht-faq summary { cursor: pointer; font-size: 16px; font-weight: 600; line-height: 1.6; }
@media (min-width: 1101px) {
  .ht #communities .ht-copy { order: 2; }
  .ht #communities .ht-split { grid-template-columns: 1.1fr .9fr; }
}
@media (max-width: 1100px) {
  .ht-business-tools .ht-split { grid-template-columns: 1fr; max-width: 800px; }
  .ht-business-tools .ht-copy { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
  .ht-business-tools .ht-copy .ht-eyebrow, .ht-business-tools .ht-copy h2, .ht-business-tools .ht-copy .ht-lede, .ht-business-tools .ht-copy > a { grid-column: 1; }
  .ht-business-tools .ht-features { grid-column: 2; grid-row: 1 / 6; margin: 0; }
  .ht-business-tools .ht-copy > a { justify-self: start; align-self: start; margin-top: 24px; }
  .ht-workspace-demo { position: static; }
  .ht-journey > .ht-wrap { grid-template-columns: 1fr; gap: 30px; }
  .ht-journey-steps { grid-template-columns: repeat(4, 1fr); }
  .ht-journey-steps a { padding: 18px; }
  .ht-business-discover { align-items: flex-start; flex-direction: column; }
  .ht-faq-grid { gap: 35px; }
}
@media (max-width: 800px) {
  .ht-business-tools .ht-split { max-width: 600px; }
  .ht-business-tools .ht-copy { display: block; }
  .ht-business-tools .ht-features { margin-block: 24px; }
  .ht-journey-steps { grid-template-columns: repeat(2, 1fr); }
  .ht-faq-grid { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
  .ht .ht-tabs { gap: 12px; padding-inline: 16px; }
  .ht .ht-tabs button { font-size: 12px; }
  .ht-demo-toolbar { padding: 20px; flex-wrap: wrap; gap: 16px; }
  .ht-demo-toolbar label { width: 100%; }
  .ht .ht-sample-note { padding-inline: 20px; }
  .ht-sample-site-hero { grid-template-columns: 1fr; }
  .ht-sample-site-hero img { height: 170px; object-position: center 45%; }
  .ht-sample-site-hero > div { padding: 24px 20px; }
  .ht-sample-site-hero h3 { font-size: 34px; }
  .ht-sample-site-nav { padding: 20px; flex-wrap: wrap; }
  .ht-sample-site-links { padding-inline: 20px; }
  .ht-sample-panel { padding: 23px 20px; }
  .ht-booking-fields { grid-template-columns: 1fr; }
  .ht-journey { padding-block: 48px; }
  .ht-journey-steps { gap: 10px; }
  .ht-journey-steps a { padding: 18px 15px; }
  .ht-journey-steps strong { font-size: 16px; }
  .ht-journey-steps p { font-size: 13px; }
  .ht-journey h2 { font-size: 32px; }
  .ht-faq { padding-block: 55px; }
  .ht-faq h2 { font-size: 34px; }
}

/* Motion & color. Anything that hides before it reveals is scoped to .ht-motion,
   which home-tour.js adds only when motion is allowed, so content is never lost
   without JS or with reduced motion. Only transform and opacity animate; ambient
   loops pause off-screen (.is-onscreen). */
.ht {
  --ht-sun: #f4b63f; --ht-mint: #2fae80; --ht-sky: #3b93db; --ht-coral: #ec6a52; --ht-grape: #8467ec;
  --ht-accent: var(--ht-coral);
  --ht-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ht-glide: cubic-bezier(.2, .8, .2, 1);
}
[data-theme='dark'] .ht { --ht-sun: #f1c46a; --ht-mint: #5fcba3; --ht-sky: #72b5ea; --ht-coral: #f08c77; --ht-grape: #a690f6; }
.ht #social { --ht-accent: var(--ht-mint); }
.ht #business, .ht #news { --ht-accent: var(--ht-sky); }
.ht #communities, .ht #premium { --ht-accent: var(--ht-coral); }
.ht #questions { --ht-accent: var(--ht-grape); }
.ht #bounties { --ht-accent: var(--ht-sun); }

@keyframes ht-wash-drift { from { transform: translate3d(-2.5%, 1.5%, 0) scale(1); } to { transform: translate3d(2.5%, -2%, 0) scale(1.06); } }
@keyframes ht-rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes ht-rise-demo { from { opacity: 0; transform: translateY(34px) scale(.97); } }
@keyframes ht-fade-up { from { opacity: 0; transform: translateY(10px); } }
@keyframes ht-fade-in { from { opacity: 0; } }
@keyframes ht-pop { from { opacity: 0; transform: scale(.2) rotate(-25deg); } }
@keyframes ht-wiggle { 25% { transform: rotate(-12deg); } 75% { transform: rotate(10deg); } }
@keyframes ht-word { from { opacity: 0; transform: translateY(.42em) rotate(2deg); } }
@keyframes ht-kenburns { from { transform: scale(1); } to { transform: scale(1.07); } }
@keyframes ht-dot-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ht-bob { from { transform: translateY(-4px) rotate(-2deg); } to { transform: translateY(6px) rotate(2deg); } }
@keyframes ht-meridians { to { transform: translateX(24px); } }
@keyframes ht-ring { from { opacity: .9; transform: scale(.6); } to { opacity: 0; transform: scale(2.6); } }
@keyframes ht-caret { 50% { opacity: 0; } }
@keyframes ht-press { 40% { transform: scale(.88); } }
@keyframes ht-like-pop { 35% { transform: scale(1.35); } }

/* Drifting section color. */
.ht-motion .ht-section::before { animation: ht-wash-drift 34s ease-in-out infinite alternate; }
.ht-motion #business .ht-section::before, .ht-motion #questions::before, .ht-motion #premium::before { animation-duration: 40s; animation-direction: alternate-reverse; }

/* Reveal choreography: backwards fill so hover transforms work once it ends. */
.ht-motion .ht-rise { opacity: 0; }
.ht-motion .is-in > .ht-rise { opacity: 1; animation: ht-rise .7s var(--ht-glide) backwards; animation-delay: calc(var(--i, 0) * 70ms); }
.ht-motion .ht-rise-self { opacity: 0; }
.ht-motion .ht-rise-self.is-in { opacity: 1; animation: ht-rise-demo .9s var(--ht-glide) .12s backwards; }
.ht-section .ht-copy > .ht-eyebrow::before { content: ''; display: inline-block; width: 22px; height: 3px; margin-right: 10px; border-radius: 3px; vertical-align: middle; background: var(--ht-accent); transform-origin: left; }
.ht-motion .ht-copy > .ht-eyebrow::before { transition: transform .6s var(--ht-glide) .3s; }
.ht-motion .ht-copy:not(.is-in) > .ht-eyebrow::before { transform: scaleX(0); }
.ht-motion .is-in > .ht-benefits .ht-benefit-icon,
.ht-motion .is-in > .ht-steps li > span { animation: ht-pop .7s var(--ht-spring) backwards; animation-delay: calc(var(--i, 0) * 70ms + 200ms); }
.ht-motion .is-in > .ht-benefits .ht-benefit:nth-child(2) .ht-benefit-icon, .ht-motion .is-in > .ht-steps li:nth-child(2) > span { animation-delay: calc(var(--i, 0) * 70ms + 320ms); }
.ht-motion .is-in > .ht-benefits .ht-benefit:nth-child(3) .ht-benefit-icon, .ht-motion .is-in > .ht-steps li:nth-child(3) > span { animation-delay: calc(var(--i, 0) * 70ms + 440ms); }
.ht-motion .ht-panel-in, .ht-motion .ht-item-in { animation: ht-fade-up .5s var(--ht-glide) backwards; animation-delay: calc(var(--i, 0) * 90ms); }
.ht-steps li > span { background: color-mix(in srgb, var(--ht-accent) 26%, var(--ht-paper)); color: color-mix(in srgb, var(--ht-accent) 55%, var(--ht-ink)); font-weight: 700; }
@media (hover: hover) {
  .ht-motion .ht-benefit:hover .ht-benefit-icon .icon, .ht-motion .ht-premium-media:hover .ht-premium-lock .icon { animation: ht-wiggle .55s ease; }
}

/* Buttons: arrow nudge, a soft shine and a press. */
.ht .ht-button { position: relative; overflow: hidden; isolation: isolate; }
.ht .ht-button > span[aria-hidden='true'] { display: inline-block; transition: transform .3s var(--ht-spring); }
.ht .ht-button:hover > span[aria-hidden='true'] { transform: translate(3px, -3px); }
.ht .ht-button:active { transform: translateY(0) scale(.98); }
.ht-motion .ht-button::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; z-index: -1; pointer-events: none; background: linear-gradient(100deg, transparent, rgb(255 255 255 / .3), transparent); transform: translateX(-130%) skewX(-18deg); }
@media (hover: hover) { .ht-motion .ht-button:hover::after { transform: translateX(330%) skewX(-18deg); transition: transform .8s var(--ht-glide); } }
.ht .ht-tabs button { transition: color .2s, border-color .2s; }
.ht-journey-steps a { transition: background .2s, transform .3s var(--ht-spring); }
.ht-journey-steps a:hover { transform: translateY(-4px); }

/* Hero: crossfade with a slow zoom, rising words, and a progress bar that drives the advance. */
.ht-glimpse--fx { display: grid; }
.ht-glimpse--fx > .ht-glimpse-slide { grid-area: 1 / 1; min-width: 0; }
.ht-glimpse--fx > .is-active { z-index: 1; }
.ht-motion .ht-glimpse--fx > .is-active:not(.is-initial) { animation: ht-fade-in .9s ease both; }
.ht-motion .ht-glimpse--fx > :is(.is-active, .is-leaving) > img { animation: ht-kenburns 9s ease-out both; transform-origin: 60% 40%; }
.ht-motion .ht-word { display: inline-block; animation: ht-word .6s var(--ht-glide) backwards; animation-delay: calc(var(--i, 0) * 55ms); }
.ht-motion .ht-eyebrow.ht-swap { animation: ht-fade-up .5s var(--ht-glide) backwards; }
.ht-motion .ht-hero-benefits.ht-swap li { animation: ht-fade-up .5s var(--ht-glide) backwards; animation-delay: .18s; }
.ht-motion .ht-hero-benefits.ht-swap li:nth-child(2) { animation-delay: .26s; }
.ht-motion .ht-hero-benefits.ht-swap li:nth-child(3) { animation-delay: .34s; }
.ht-slider-dots span { position: relative; overflow: hidden; transition: width .3s var(--ht-glide), background .3s; }
.ht-motion .is-playing .ht-slider-dots [aria-current] span { width: 24px; background: color-mix(in srgb, var(--ht-red) 25%, var(--ht-line)); }
.ht-motion .is-playing .ht-slider-dots [aria-current] span::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--ht-red); transform-origin: left; animation: ht-dot-fill 5.5s linear both; }


/* Chapter bar: one sliding underline and the page-wide Pause motion control. */
.ht-chapter-indicator { display: none; position: absolute; left: 0; bottom: 0; width: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--ht-red); pointer-events: none; }
.ht-motion .ht-chapter-indicator { display: block; }
.ht-motion .ht-chapter-indicator.is-ready { transition: transform .5s var(--ht-glide), width .5s var(--ht-glide); }
.ht-motion .ht-chapter-links a::after { display: none; }
.ht-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Social: globe badge, sample composer and the sample Like. */
.ht #social .ht-copy { position: relative; }
.ht-scope { position: absolute; top: -18px; right: 0; z-index: 1; display: grid; justify-items: center; gap: 8px; width: clamp(104px, 9vw, 132px); pointer-events: none; }
.ht-motion .ht-copy > .ht-scope { transition: opacity .6s ease .35s; }
.ht-motion .ht-copy:not(.is-in) > .ht-scope { opacity: 0; }
.ht-scope svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 12px 18px rgb(31 75 58 / .16)); }
.ht-motion .ht-scope svg { animation: ht-bob 6s ease-in-out infinite alternate; }
.ht-scope-label { padding: 4px 12px; border: 1px solid var(--ht-line); border-radius: 999px; background: var(--ht-paper); box-shadow: 0 4px 12px rgb(31 75 58 / .08); font-size: 11px; font-weight: 650; letter-spacing: .02em; white-space: nowrap; }
.ht-scope-halo { fill: var(--ht-paper); stroke: color-mix(in srgb, var(--ht-mint) 35%, var(--ht-line)); stroke-width: 1; }
.ht-scope-rim { fill: none; stroke: rgb(255 255 255 / .45); stroke-width: 1; }
.ht-scope-land { fill: #8ad8ad; }
.ht-scope-zoom { transform-box: view-box; transform-origin: 66px 58px; transition: transform 1.1s var(--ht-glide); }
.ht-scope[data-scope='country'] .ht-scope-zoom { transform: scale(2.1); }
.ht-scope[data-scope='state'] .ht-scope-zoom { transform: scale(3.6); }
.ht-scope-grid { opacity: 0; transition: opacity .5s ease; }
.ht-scope[data-scope='state'] .ht-scope-grid { opacity: 1; transition-delay: .45s; }
.ht-scope-streets { fill: none; stroke: #fff; stroke-width: .45; stroke-linecap: round; opacity: .9; }
.ht-scope-park { fill: #5cbf8a; }
.ht-scope-river { fill: none; stroke: #4fa6e6; stroke-width: 1.5; stroke-linecap: round; }
.ht-scope-meridians, .ht-scope-parallels { fill: none; stroke: #fff; stroke-width: .8; opacity: .35; transition: opacity .5s; }
.ht-motion .ht-scope-meridians { animation: ht-meridians 9s linear infinite; }
.ht-scope:not([data-scope='world']) :is(.ht-scope-meridians, .ht-scope-parallels) { opacity: 0; }
.ht-scope-pins { opacity: 0; transform: scale(.6); transform-box: view-box; transform-origin: 60px 60px; transition: opacity .35s ease, transform .5s var(--ht-spring); }
.ht-scope[data-scope='world'] .ht-pins-world, .ht-scope[data-scope='country'] .ht-pins-country, .ht-scope[data-scope='state'] .ht-pins-state { opacity: 1; transform: none; transition-delay: .5s; }
.ht-scope-dot > circle:last-child { fill: var(--ht-coral); stroke: #fff; stroke-width: 1.3; }
.ht-scope-ring { fill: none; stroke: var(--ht-coral); stroke-width: 1.2; transform-box: fill-box; transform-origin: center; opacity: 0; }
.ht-motion .ht-scope-ring { animation: ht-ring 2.4s ease-out infinite; }
.ht-scope-dot:nth-child(2) .ht-scope-ring { animation-delay: .6s; }
.ht-scope-dot:nth-child(3) .ht-scope-ring { animation-delay: 1.2s; }
.ht-scope-dot:nth-child(4) .ht-scope-ring { animation-delay: 1.8s; }
.ht-scope-dot:nth-child(5) .ht-scope-ring { animation-delay: .9s; }
.ht-scope-pin { fill: var(--ht-coral); stroke: #fff; stroke-width: 1.4; }
.ht-scope-pin-eye { fill: #fff; }
.ht-composer { display: flex; align-items: center; gap: 12px; padding: 12px 24px; border-bottom: 1px solid var(--ht-line); }
.ht-composer .ht-avatar { width: 32px; height: 32px; font-size: 10px; background: color-mix(in srgb, var(--ht-mint) 24%, var(--ht-paper)); color: color-mix(in srgb, var(--ht-mint) 60%, var(--ht-ink)); }
.ht-composer-field { flex: 1; min-width: 0; display: flex; align-items: center; overflow: hidden; padding: 9px 14px; border-radius: 999px; background: color-mix(in srgb, var(--ht-ink) 5%, var(--ht-paper)); color: var(--ht-muted); font-size: 13px; line-height: 1.4; white-space: pre; transition: box-shadow .2s; }
.ht-composer-field > span:first-child { flex-shrink: 0; }
.ht-composer.is-typing .ht-composer-field { color: var(--ht-ink); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ht-mint) 55%, transparent); }
.ht-caret { display: none; flex-shrink: 0; width: 2px; height: 1.15em; margin-left: 1px; border-radius: 1px; background: var(--ht-red); }
.ht-motion .ht-composer.is-typing .ht-caret { display: block; animation: ht-caret 1s steps(1) infinite; }
.ht-composer-post { flex-shrink: 0; padding: 7px 14px; border-radius: 999px; background: var(--ht-red); color: #fff; font-size: 12px; font-weight: 650; opacity: .4; transition: opacity .2s; }
.ht-composer.is-typing .ht-composer-post { opacity: 1; }
.ht-motion .ht-composer.is-sent .ht-composer-post { animation: ht-press .45s var(--ht-spring); }
.ht-motion .ht-post > :not(.ht-live) { transition: opacity .45s ease, transform .55s var(--ht-spring), filter .45s ease; }
.ht-motion .ht-post > :nth-child(2) { transition-delay: .06s; }
.ht-motion .ht-post > :nth-child(3) { transition-delay: .12s; }
.ht-motion .ht-post > :nth-child(4) { transition-delay: .18s; }
.ht-motion .ht-post.is-pending > :not(.ht-live) { opacity: .12; transform: translateY(-12px) scale(.98); filter: grayscale(1); transition: none; }
.ht .ht-like { min-height: 32px; padding: 0; border: 0; background: none; color: inherit; }
.ht-like-heart { display: grid; }
.ht-like-heart > .icon { grid-area: 1 / 1; }
.ht-like-fill { color: var(--ht-red); opacity: 0; transform: scale(.3); transition: opacity .2s, transform .35s var(--ht-spring); }
.ht-like[aria-pressed='true'] { color: var(--ht-red); }
.ht-like[aria-pressed='true'] .ht-like-fill { opacity: 1; transform: none; }
.ht-motion .ht-like[aria-pressed='true'] .ht-like-heart { animation: ht-like-pop .45s var(--ht-spring); }
[data-theme='dark'] .ht-like[aria-pressed='true'], [data-theme='dark'] .ht-like-fill { color: #fa9398; }

/* Premium sample media sharpens once revealed. */
.ht-premium-media .ht-photo img { transition: filter .9s ease; }
.ht-premium-media:has(.ht-premium-lock:not([hidden])) .ht-photo img { filter: blur(3px) saturate(.85); }

/* Ambient loops rest off-screen and under Pause motion. */
.ht-motion .ht-hero:not(.is-onscreen)::before,
.ht-motion .ht-hero:not(.is-onscreen)::after,
.ht-motion .ht-hero:not(.is-onscreen) .ht-glimpse-slide > img,
.ht-motion .ht-hero:not(.is-onscreen) .ht-slider-dots span::after,
.ht-motion .ht-section:not(.is-onscreen)::before,
.ht-motion .ht-section:not(.is-onscreen) .ht-scope *,
.ht-motion .ht-section:not(.is-onscreen) .ht-caret { animation-play-state: paused; }

@media (max-width: 1100px) {
  .ht-scope { position: static; display: flex; align-items: center; gap: 12px; width: auto; margin-bottom: 18px; }
  .ht-scope svg { width: 66px; }
}
@media (max-width: 800px) {
  .ht-chapter-bar { width: 100%; gap: 0; }
  .ht-chapter-links { width: auto; padding-inline: 32px 18px; mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
}
@media (max-width: 540px) {
  .ht-chapter-links { padding-inline: 20px 14px; }
  .ht-composer { padding: 10px 16px; gap: 9px; }
  .ht-composer-field { font-size: 12px; padding: 8px 12px; }
  .ht-composer-post { padding: 6px 11px; font-size: 11px; }
}

/* Latest news spotlight above the hero: real headlines, newest first. One
   slide at a time beside a clickable queue; the progress bar's animationend
   advances it (home-tour.js), so pausing the bar pauses the rotation. */
@keyframes ht-latest-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ht-red) 45%, transparent); } 70%, 100% { box-shadow: 0 0 0 7px transparent; } }
@keyframes ht-latest-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ht-latest-in { from { opacity: 0; transform: translateY(6px); } }
.ht-latest { --ht-latest-text: var(--ht-red); padding-block: 16px 18px; background: var(--ht-paper); border-top: 1px solid var(--ht-line); }
/* Dark red text is too faint on the dark paper; same light red the chapter bar uses. */
[data-theme='dark'] .ht-latest { --ht-latest-text: #fa9398; }
.ht-motion .ht-latest { animation: ht-fade-in .5s ease both; }
.ht-latest.is-loading .ht-latest-body { opacity: .45; transition: opacity .2s ease; }

.ht-latest-head { display: flex; align-items: center; gap: 14px; min-width: 0; margin-bottom: 12px; }
.ht .ht-latest-label { display: inline-flex; flex-shrink: 0; align-items: center; gap: 8px; margin: 0; color: var(--ht-latest-text); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.ht-latest-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ht-red); }
.ht-motion .ht-latest-dot { animation: ht-latest-pulse 2s ease-out infinite; }
.ht-latest-editions { display: flex; flex: 0 1 auto; gap: 6px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.ht-latest-editions::-webkit-scrollbar { display: none; }
/* Compact controls: 32-34px stays above the 24px WCAG 2.5.8 target floor;
   the app-wide 44px button minimum would make these pills read as blobs. */
.ht .ht-latest-chip { flex-shrink: 0; min-width: 0; min-height: 32px; padding: 4px 12px; border: 1px solid var(--ht-line); border-radius: 999px; background: none; color: var(--ht-muted); font-size: 12px; font-weight: 600; white-space: nowrap; }
.ht .ht-latest-chip:hover { color: var(--ht-ink); border-color: color-mix(in srgb, var(--ht-ink) 30%, var(--ht-line)); }
.ht .ht-latest-chip[aria-pressed='true'] { border-color: transparent; background: color-mix(in srgb, var(--ht-red) 12%, var(--ht-paper)); color: var(--ht-latest-text); }
.ht-latest-more { position: relative; flex-shrink: 0; }
.ht-latest-more > summary { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; list-style: none; }
.ht-latest-more > summary::-webkit-details-marker { display: none; }
.ht .ht-latest-more-caret { width: 13px; height: 13px; transform: rotate(90deg); transition: transform .16s ease; }
.ht .ht-latest-more[open] .ht-latest-more-caret { transform: rotate(-90deg); }
.ht-latest-more[open] > summary { color: var(--ht-ink); border-color: color-mix(in srgb, var(--ht-ink) 30%, var(--ht-line)); }
.ht .ht-latest-more-pop { left: 0; right: auto; min-width: 190px; max-height: 60vh; overflow-y: auto; }
.ht .ht-latest-more-item { padding-block: 9px; font-size: 14px; font-weight: 600; }
.ht .ht-latest-fresh { display: inline-flex; flex-shrink: 0; align-items: center; gap: 6px; min-height: 32px; padding: 4px 12px; border: 0; border-radius: 999px; background: var(--ht-red); color: #fff; font-size: 12px; font-weight: 650; white-space: nowrap; }
.ht .ht-latest-fresh::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.ht-motion .ht-latest-fresh { animation: ht-latest-in .3s ease both; }
.ht-latest-all { flex-shrink: 0; margin-left: auto; color: var(--ht-latest-text); font-size: 13px; font-weight: 650; white-space: nowrap; }
.ht-latest-all:hover { text-decoration: underline; text-underline-offset: 4px; }

.ht-latest-body { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.ht-latest-stage { position: relative; display: flex; min-width: 0; flex-direction: column; padding: 14px; border: 1px solid var(--ht-line); border-radius: 16px; touch-action: pan-y; }
.ht-latest-slides { display: grid; flex: 1; }
.ht-latest-slide { display: grid; grid-area: 1 / 1; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 20px; align-items: stretch; visibility: hidden; opacity: 0; transition: opacity .35s ease, visibility 0s .35s; }
.ht-latest-slide.is-active { visibility: visible; opacity: 1; transition: opacity .35s ease; }
.ht-latest-slide.is-text { grid-template-columns: minmax(0, 1fr); }
.ht .ht-latest-media { display: block; width: 100%; height: 100%; min-height: 220px; padding: 0; overflow: hidden; border: 0; border-radius: 11px; background: var(--ht-sage); }
.ht-latest-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.ht-latest-media:hover img { transform: scale(1.04); }
.ht-latest-copy { display: flex; min-width: 0; flex-direction: column; gap: 8px; padding-top: 4px; }
.ht-latest-meta { display: flex; align-items: center; gap: 6px; min-width: 0; margin: 0; color: var(--ht-muted); font-size: 12px; white-space: nowrap; }
.ht-latest-source { overflow: hidden; font-weight: 650; text-overflow: ellipsis; }
.ht-latest-meta time, .ht-latest-q-text time { flex-shrink: 0; }
.ht-latest-meta time::before { content: '·'; margin-right: 6px; }
.ht-latest time.is-fresh { color: var(--ht-latest-text); font-weight: 650; }
.ht .ht-latest-title { display: -webkit-box; overflow: hidden; padding: 0; border: 0; background: none; color: var(--ht-ink); font-size: 23px; font-weight: 700; line-height: 1.25; letter-spacing: -.015em; text-align: left; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
.ht .ht-latest-title:hover { color: var(--ht-latest-text); }
.ht-latest-desc { display: -webkit-box; overflow: hidden; margin: 0; color: var(--ht-muted); font-size: 14px; line-height: 1.55; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }

.ht-latest-controls { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.ht-latest-progress { flex: 1; height: 3px; overflow: hidden; border-radius: 3px; background: var(--ht-line); }
.ht-latest-progress > span { display: block; height: 100%; background: var(--ht-red); transform: scaleX(0); transform-origin: left; }
.ht-motion .ht-latest-stage:not(.is-static) .ht-latest-progress > .is-running { animation: ht-latest-progress 6s linear both; }
.ht-latest-stage.is-paused .ht-latest-progress > span { animation-play-state: paused !important; }
.ht-latest-stage.is-static .ht-latest-progress { visibility: hidden; }
.ht .ht-latest-arrow { display: grid; place-items: center; width: 34px; height: 34px; min-width: 0; min-height: 0; padding: 0; border: 1px solid var(--ht-line); border-radius: 50%; background: var(--ht-paper); color: var(--ht-ink); font-size: 14px; }
.ht .ht-latest-arrow:hover { border-color: var(--ht-ink); }
.ht-latest-count { min-width: 38px; color: var(--ht-muted); font-size: 12px; font-variant-numeric: tabular-nums; text-align: center; }
.ht .ht-latest-pause { min-height: 34px; padding: 4px 8px; border: 0; background: none; color: var(--ht-muted); font-size: 12px; font-weight: 600; }
.ht .ht-latest-pause:hover { color: var(--ht-ink); }
.ht-latest-dots { display: none; }

.ht-latest-queue { display: flex; min-width: 0; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.ht-latest-queue > li + li { border-top: 1px solid var(--ht-line); }
.ht .ht-latest-q { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 0; padding: 7px 8px; border: 0; border-radius: 10px; background: none; color: var(--ht-ink); text-align: left; }
.ht .ht-latest-q:hover { background: color-mix(in srgb, var(--ht-ink) 4%, transparent); }
.ht .ht-latest-q[aria-current='true'] { background: color-mix(in srgb, var(--ht-red) 8%, var(--ht-paper)); box-shadow: inset 3px 0 0 var(--ht-red); }
.ht-latest-q-thumb { flex-shrink: 0; width: 46px; height: 46px; overflow: hidden; border-radius: 8px; background: var(--ht-sage); }
.ht-latest-q-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ht-latest-q-text { display: flex; min-width: 0; flex-direction: column; gap: 2px; color: var(--ht-muted); font-size: 11px; }
.ht-latest-q-title { display: -webkit-box; overflow: hidden; color: var(--ht-ink); font-size: 13px; font-weight: 600; line-height: 1.35; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ht .ht-latest-q[aria-current='true'] .ht-latest-q-title { color: var(--ht-latest-text); }
.ht-latest-note { margin: 8px 0 0; color: var(--ht-muted); font-size: 12px; }
.ht-latest-note:empty { display: none; }
.ht .ht-latest-slide :focus-visible, .ht .ht-latest-q:focus-visible { outline-offset: 2px; }

@media (max-width: 1100px) {
  .ht-latest-body { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
  .ht-latest-slide { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
  .ht .ht-latest-title { font-size: 18px; -webkit-line-clamp: 4; }
  .ht-latest-desc { font-size: 13px; -webkit-line-clamp: 3; }
}
/* Phones and small tablets: one full-width card, image on top, swipe or dots;
   the queue steps aside and the edition chips take their own row. */
@media (max-width: 800px) {
  .ht-latest { padding-block: 12px 14px; }
  .ht-latest-head { flex-wrap: wrap; gap: 8px 10px; }
  /* Chips and "More" share a second row; the zero-height item forces the break. */
  .ht-latest-head::before { content: ''; order: 2; flex-basis: 100%; height: 0; margin-top: -8px; }
  .ht-latest-editions { order: 3; flex: 1 1 0; }
  .ht-latest-more { order: 4; }
  .ht .ht-latest-more-pop { left: auto; right: 0; }
  .ht-latest-body { grid-template-columns: minmax(0, 1fr); }
  .ht-latest-queue { display: none; }
  .ht-latest-stage { padding: 10px; }
  .ht-latest-slide { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .ht .ht-latest-media { height: auto; min-height: 0; aspect-ratio: 16 / 9; }
  .ht .ht-latest-title { font-size: 17px; -webkit-line-clamp: 3; }
  .ht-latest-desc { font-size: 13px; -webkit-line-clamp: 2; }
  .ht-latest-controls { margin-top: 10px; }
  .ht-latest-arrow, .ht-latest-count { display: none !important; }
  .ht-latest-dots { display: flex; justify-content: center; gap: 2px; margin-top: 6px; }
  .ht .ht-latest-dots > button { display: grid; place-items: center; width: 24px; min-width: 0; height: 28px; min-height: 0; padding: 0; border: 0; background: none; }
  .ht-latest-dots > button > span { width: 6px; height: 6px; border-radius: 50%; background: var(--ht-line); transition: width .2s ease; }
  .ht-latest-dots > button[aria-current='true'] > span { width: 16px; border-radius: 3px; background: var(--ht-red); }
}