/* Home page polish (body.hp-on, added by Content\HomePolish).
   Motion and feel only: scroll entrances, hover/press feedback, calmer carousels,
   a smoother FAQ and larger touch targets. Texts, links and layout are unchanged. */

body.hp-on {
  --hp-ease: cubic-bezier(.22, 1, .36, 1);
  --hp-ease-io: cubic-bezier(.65, 0, .35, 1);
  --hp-shadow: 0 1px 2px rgba(4, 34, 59, .05), 0 16px 36px -26px rgba(4, 34, 59, .45);
  --hp-shadow-hover: 0 2px 6px rgba(4, 34, 59, .06), 0 28px 54px -30px rgba(4, 34, 59, .6);
}
html:has(body.hp-on) { scroll-padding-top: 84px; }
@media (prefers-reduced-motion: no-preference) {
  html:has(body.hp-on) { scroll-behavior: smooth; }
}

/* ---------- scroll entrances (below the first screen only; set by home-polish.js) ---------- */
html body.hp-on .hp-pre.hp-pre { opacity: 0; transform: translate3d(0, 22px, 0); transition: none; }
html body.hp-on .hp-pre.hp-pre.hp-in {
  opacity: 1; transform: none;
  transition: opacity .65s var(--hp-ease) var(--hp-d, 0ms), transform .8s var(--hp-ease) var(--hp-d, 0ms);
}
html body.hp-on .hp-pre.hp-pre.hp-soft { transform: translate3d(0, 0, 0) scale(.985); }
html body.hp-on .hp-pre.hp-pre.hp-soft.hp-in { transform: none; }

/* lazy images fade in instead of popping */
body.hp-on img.hp-img { opacity: 0; transition: opacity .5s ease; }
body.hp-on img.hp-img.hp-img-in { opacity: 1; }

/* ---------- buttons ---------- */
body.hp-on main .btn {
  transition: transform .25s var(--hp-ease), box-shadow .25s ease, filter .25s ease, background-color .25s ease, color .25s ease, border-color .25s ease;
}
body.hp-on main .btn :is(svg, i) { transition: transform .25s var(--hp-ease); }
@media (hover: hover) {
  body.hp-on main .btn:hover { transform: translateY(-2px); }
  body.hp-on main .btn.btn-accent:hover { box-shadow: 0 16px 30px -16px rgba(251, 168, 48, .85); filter: brightness(1.03); }
  body.hp-on main .btn:hover :is(.lucide-arrow-left, [data-lucide="arrow-left"]) { transform: translateX(-4px); }
}
body.hp-on main .btn:active { transform: translateY(0) scale(.97); transition-duration: .1s; }

/* ---------- cards: one calm lift everywhere ---------- */
body.hp-on :is(.home-featured-course, .lift-card, .article-card, .expert) {
  transition: transform .45s var(--hp-ease), box-shadow .45s ease, border-color .35s ease, background-color .35s ease;
}
body.hp-on :is(.home-featured-course, .article-card) img { transition: transform .8s var(--hp-ease); }
@media (hover: hover) {
  body.hp-on .home-featured-course:hover { transform: translateY(-4px); box-shadow: var(--hp-shadow-hover); }
  body.hp-on :is(.lift-card, .article-card):hover { transform: translateY(-4px); box-shadow: var(--hp-shadow-hover); }
  body.hp-on .lift-card.is-dark:hover { box-shadow: 0 28px 54px -26px rgba(0, 0, 0, .55); }
  body.hp-on :is(.home-featured-course, .article-card):hover img { transform: scale(1.035); }
  body.hp-on .expert:hover { transform: translateY(-3px); background-color: rgba(255, 255, 255, .1); }
}
@media (hover: none) {
  body.hp-on :is(.home-featured-course, .lift-card, .article-card, .expert):active { transform: scale(.985); transition-duration: .12s; }
}

/* ---------- FAQ: smoother open/close, clear open state ---------- */
body.hp-on #faqList > div {
  transition: background-color .35s ease, border-color .35s ease, box-shadow .35s ease;
}
body.hp-on #faqList > div:has(.acc-trigger[aria-expanded="true"]) {
  background: #fff; border-color: rgba(1, 103, 173, .28); box-shadow: 0 14px 30px -22px rgba(4, 34, 59, .45);
}
body.hp-on #faqList .acc-trigger { transition: color .25s ease; }
body.hp-on #faqList .acc-trigger[aria-expanded="true"] { color: var(--brand, #0167ad); }
@media (hover: hover) { body.hp-on #faqList .acc-trigger:hover { color: var(--brand, #0167ad); } }
body.hp-on #faqList .acc-body { transition: max-height .5s var(--hp-ease); }
body.hp-on #faqList .acc-body > * { transition: opacity .35s ease, transform .45s var(--hp-ease); }
body.hp-on #faqList .acc-body[aria-hidden="true"] > * { opacity: 0; transform: translateY(-6px); }
body.hp-on #faqList .acc-body[aria-hidden="false"] > * { opacity: 1; transform: none; transition-delay: .08s; }
body.hp-on #faqList .acc-icon {
  display: inline-grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; background: rgba(1, 103, 173, .08);
  transition: transform .45s var(--hp-ease), background-color .3s ease !important;
}
body.hp-on #faqList .acc-trigger[aria-expanded="true"] .acc-icon { background: rgba(1, 103, 173, .14); }

/* ---------- carousels ---------- */
body.hp-on .home-carousel-dot::before { transition: width .4s var(--hp-ease), background .3s ease, transform .3s var(--hp-ease); }

/* ---------- phones ---------- */
@media (max-width: 767px) {
  /* touch targets: 44px tall hit areas, the visible dot stays small */
  body.hp-on .home-carousel-dot { height: 44px; }
  body.hp-on .home-trust-heading a { min-height: 44px; display: inline-flex; align-items: center; }

  /* the card in focus is crisp, the peeking ones step back a little (app-like) */
  body.hp-on [data-carousel].is-ready:not(.is-static) [data-carousel-slide] {
    transition: opacity .45s var(--hp-ease), transform .45s var(--hp-ease);
  }
  body.hp-on [data-carousel].is-ready:not(.is-static) [data-carousel-slide]:not(.is-active) { opacity: .55; transform: scale(.96); }

  /* frosted glass is costly while scrolling on phones: same look, solid tint */
  body.hp-on #taxtalent .expert.glass-dark { -webkit-backdrop-filter: none; backdrop-filter: none; background-color: rgba(255, 255, 255, .07); }
}

/* animations that run forever stop while they are off screen (class set by home-polish.js) */
body.hp-on .hp-paused, body.hp-on .hp-paused * { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  html body.hp-on .hp-pre.hp-pre { opacity: 1; transform: none; }
  body.hp-on img.hp-img { opacity: 1; }
  body.hp-on *, body.hp-on *::before { transition-duration: .01ms !important; }
  body.hp-on [data-carousel-slide] { opacity: 1 !important; transform: none !important; }
}

/* =====================================================================
   Phone layout like an app (body.hp-app). Header, footer and all texts stay as they are;
   the sections become compact rounded sheets on a soft app background.
   ===================================================================== */
@media (max-width: 767px) {
  body.hp-app { --hm-bg: #e8eef4; --hm-radius: 26px; }
  html body.hp-app main#top { background: var(--hm-bg); padding-bottom: 12px; }

  /* ---------- sheets ---------- */
  html body.hp-app main#top > section:not(#hero) {
    position: relative; margin-top: 10px; border-radius: var(--hm-radius); overflow: hidden;
    box-shadow: 0 1px 2px rgba(4, 34, 59, .04);
  }
  html body.hp-app main#top > section.home-section { padding-block: 20px 22px; }
  html body.hp-app main#top > section.home-section.home-roadmap-section { padding-block: 0; }
  html body.hp-app main#top > .home-trust-strip { padding-block: 12px 10px; border-bottom: 0; }

  /* hero: rounded bottom instead of the wave, less empty space */
  html body.hp-app #hero { border-radius: 0 0 30px 30px; }
  html body.hp-app #hero > .relative.z-10:last-child { display: none; }
  html body.hp-app #hero .home-hero-inner { padding-top: 16px; padding-bottom: 24px; gap: 14px; }

  /* ---------- section headers: right-aligned, compact (like app sections) ---------- */
  html body.hp-app main .home-section-heading { text-align: right; margin-bottom: 14px; }
  html body.hp-app main .home-section-heading > .flex { justify-content: flex-start; margin-bottom: 6px; gap: 8px; }
  html body.hp-app main .home-section-heading > .flex > span { font-size: 11px; line-height: 1.9; padding: 2px 10px; }
  html body.hp-app main .home-section-heading h2 { font-size: 21px; line-height: 1.6; margin: 0 0 4px; text-wrap: balance; }
  html body.hp-app main .home-section-heading > p { font-size: 12.5px; line-height: 1.95; margin: 0; max-width: none; text-wrap: pretty; }
  html body.hp-app #intro .home-intro-copy { text-align: right; }
  html body.hp-app #intro .home-intro-copy > h2 { font-size: 21px; line-height: 1.6; margin-bottom: 8px; }

  /* ---------- carousels: swipe + small dots (no big arrow bar) ---------- */
  html body.hp-app main .home-carousel-toolbar { margin-top: 8px; justify-content: center; }
  html body.hp-app main .home-carousel-controls { justify-content: center; gap: 0; width: auto; }
  html body.hp-app main .home-carousel-button { display: none; }
  html body.hp-app main .home-carousel-meter, html body.hp-app #taxtalent .home-carousel-meter { flex: 0 0 auto; min-height: 0; padding: 0; border: 0; background: none; box-shadow: none; }
  html body.hp-app main :is(.home-carousel-status, .home-carousel-progress) { display: none; }
  html body.hp-app #courses .home-course-carousel > .home-carousel-toolbar { margin-top: 6px; }
  html body.hp-app .home-expert-carousel { margin-bottom: 12px; }

  /* ---------- section buttons: one slim full-width action ---------- */
  html body.hp-app main :is(.home-section-cta, #taxtalent .reveal.text-center:not(.expert)) { margin-top: 12px; }
  html body.hp-app main :is(.home-section-cta, #taxtalent .reveal.text-center:not(.expert)) > .btn {
    display: flex; width: 100%; min-height: 48px; padding: 10px 16px; justify-content: center; align-items: center; gap: 8px;
    border-radius: 14px; font-size: 14px;
  }

  /* ---------- roadmap banner as a card ---------- */
  html body.hp-app #roadmap .home-roadmap-banner__inner { padding-top: 26px; padding-bottom: 0; gap: 10px; }
  html body.hp-app #roadmap .home-roadmap-banner__heading { margin: 8px 0 18px; }
  html body.hp-app #roadmap .home-roadmap-banner--user-image h2 { font-size: 26px; }
  html body.hp-app #roadmap .home-roadmap-banner--user-image p { font-size: 14px; line-height: 1.9; }
  /* the road picture sits in the bottom corner, slightly zoomed so it fills the card edge to edge */
  html body.hp-app #roadmap .home-roadmap-banner__visual { width: 100%; max-width: none; margin: 0; justify-self: stretch; overflow: hidden; }
  html body.hp-app #roadmap .home-roadmap-banner__visual img { transform: scale(1.12); transform-origin: 100% 100%; }

  /* ---------- services: swipeable cards instead of a long stack ---------- */
  html body.hp-app #plus .home-service-grid {
    display: flex; flex-wrap: nowrap; align-items: stretch; gap: 10px; overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    margin-inline: -16px; padding: 2px 16px 6px; scroll-padding-inline: 16px;
  }
  html body.hp-app #plus .home-service-grid::-webkit-scrollbar { display: none; }
  html body.hp-app #plus .home-service-grid > .lift-card { flex: 0 0 calc(100% - 46px); min-width: 0; scroll-snap-align: start; }
  .hp-rail-dots { display: flex; justify-content: center; gap: 6px; height: 20px; align-items: center; margin-top: 4px; }
  .hp-rail-dots i { width: 7px; height: 7px; border-radius: 99px; background: rgba(1, 103, 173, .24); transition: width .4s var(--hp-ease), background .3s ease; }
  .hp-rail-dots i.is-on { width: 18px; background: var(--brand, #0167ad); }

  /* ---------- testimonials / experts / articles ---------- */
  html body.hp-app #testimonials .home-testimonial-slide > figure { padding: 16px; }
  html body.hp-app #taxtalent .home-section-heading > p { font-size: 12px; }

  /* ---------- FAQ: tighter list ---------- */
  html body.hp-app #faqList > * + * { margin-top: 8px; }
  html body.hp-app #faqList .acc-trigger { min-height: 54px; padding: 12px 14px; font-size: 13.5px; line-height: 1.8; }
  html body.hp-app #faq .home-final-cta { margin-top: 16px; padding: 18px 16px; border-radius: 22px; }
  html body.hp-app #faq .home-final-cta h3 { font-size: 18px; }
}

/* testimonials: role line + verified-buyer mark */
#testimonials .hp-t-who{min-width:0}
#testimonials .hp-t-role{display:block;font-size:.75rem;line-height:1.5rem;color:#334155}
#testimonials .hp-t-verified{background:#e6f0fb;color:#0b5cad}
#testimonials .hp-t-verified svg{width:24px;height:24px}
#testimonials .hp-t-star{color:#64748b;font-weight:400;margin-inline-start:2px}
#testimonials .hp-t-note{margin:14px auto 0;text-align:center;font-size:.72rem;line-height:1.4rem;color:#64748b}

/* testimonials as quotes: a quote mark heads each card, the words set off by an accent rule */
#testimonials.hp-quotes{position:relative;overflow:hidden}
#testimonials.hp-quotes::before{content:"";position:absolute;top:28px;left:50%;width:220px;height:220px;margin-left:-110px;pointer-events:none;opacity:.05;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230167ad' d='M16.8 5c2.9 1.4 4.7 4 4.7 7.4V19h-6.6v-6.6h3.3c0-2.2-1.2-3.9-3.2-4.9L16.8 5Zm-11 0c2.9 1.4 4.7 4 4.7 7.4V19H3.9v-6.6h3.3c0-2.2-1.2-3.9-3.2-4.9L5.8 5Z'/%3E%3C/svg%3E") no-repeat center/contain}
#testimonials.hp-quotes > *{position:relative}
#testimonials .hp-quote-mark{display:block;flex:none;width:34px;height:34px;margin-bottom:8px;color:#fba830;opacity:.9;pointer-events:none}
#testimonials .hp-quote-mark svg{display:block;width:100%;height:100%}
#testimonials .hp-quote-text{flex:0 0 auto;margin-bottom:auto;padding-inline-start:14px;border-inline-start:3px solid rgba(1,103,173,.28);color:#1e2b3a;font-size:.92rem;line-height:2.05}
#testimonials .hp-quote figcaption{margin-top:18px;padding-top:14px;border-top:1px dashed rgba(1,103,173,.18)}
@media (max-width:767px){
  #testimonials .hp-quote-mark{width:28px;height:28px;margin-bottom:6px}
  #testimonials .hp-quote-text{font-size:.9rem;padding-inline-start:12px}
}