/*
 * home-bottom.css: fee, testimonials, FAQ, form and footer of the home page.
 * Every selector sits under the root class .h-bottom.
 * The FAQ, form and footer roots also carry .s-bottom, so the Pricing rules in bottom.css apply.
 * Override them here under .h-bottom (for example .h-bottom[data-section="faq"] .bottom-title).
 * Own class names, custom properties and keyframes start with hbo- (--hbo-*, @keyframes hbo-*).
 * Shared pieces come from base.css (tokens, breakpoints, data-appear presets) and home-base.css (.hb-*).
 * Breakpoints: desktop as the base rule, then @media (min-width: 810px) and (max-width: 1199.98px),
 * then @media (max-width: 809.98px).
 *
 *   1. Fee and testimonial heads (shared)
 *   2. Fee
 *   3. Testimonials: section, cards
 *   4. Testimonials: carousel and arrows
 *   5. Form: focus shadow
 *   6. Tablet  (810 to 1199.98)
 *   7. Mobile  (809.98 and below)
 *   8. Reduced motion
 *
 * Values are computed values of the original home page (1440, 1024 and 390, checked at nine
 * more widths). The FAQ, form and footer only differ from Pricing in sections 5, 6 and 7.
 */

/* 1. Fee and testimonial heads ------------------------------------------------------------
 * .hbo-head  the head box (.hb-fhead): 1000px on desktop, full width below.
 * .hbo-kbox  the kicker box next to the icon: takes the rest of the row (the appear target).
 * .hbo-tbox  the title box (the appear target). The texts inside use .hb-kicker / .hb-title
 *            with .hb-start (start aligned, wrapping) as in the original.
 */
.h-bottom .hbo-head { width: 1000px; }
.h-bottom .hbo-kbox,
.h-bottom .hbo-tbox,
.h-bottom .hbo-note {
  display: flex; flex-direction: column; justify-content: flex-start;
  position: relative; padding: 0; margin: 0;
  white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word;
}
.h-bottom .hbo-kbox { flex: 1 0 0px; width: 1px; }
.h-bottom .hbo-tbox { flex: none; width: 100%; }
/* The icon drawing comes from home-base.css (.hb-kicon > svg). */
.h-bottom .hbo-icon-fee { color: var(--c-brand); }
.h-bottom .hbo-icon-tst { color: rgb(255, 128, 151); }

/* 2. Fee ------------------------------------------------------------------------------------
 * Column, gap 49px, padding 100px (tablet 80px 40px, mobile 40px 20px). The footnote box is at
 * most 500px wide. Its text is Regular 17px / 1.4em (tablet 16px, mobile 15px), gray 171.
 */
.h-bottom[data-section="fee"] {
  display: flex; flex-direction: column; flex-wrap: nowrap;
  justify-content: center; align-items: center; gap: 49px;
  width: 100%; padding: 100px; margin: 0; flex: none; position: relative; overflow: hidden;
}
.h-bottom .hbo-note { flex: none; width: 100%; max-width: 500px; }
.h-bottom .hbo-note-text {
  margin: 0; padding: 0; font-style: normal; font-weight: 400;
  font-family: var(--font-regular); font-size: 17px; line-height: 1.4em; letter-spacing: normal;
  color: rgb(171, 171, 171); text-align: start; text-transform: none; text-decoration: none;
  white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word;
}

/* 3. Testimonials ------------------------------------------------------------------------------
 * Background #fcfcfc, gap 60px, padding 100px (tablet 40px, mobile 40px 16px with gap 32px).
 * The kicker row and the title box stay 1000px wide on tablet too (wider than the 100% head, so
 * the head clips them on the right), as in the original.
 * Card: 358px, radius 10px, gap 20px (card 2: 30px). Card 4 is 526px high, the others fit.
 * Card title SemiBold 19px / 1.4em (tablet 15px, mobile 14px). Card 1 keeps one line at its own
 * width (.hbo-fit), the others wrap at 100%. Place Medium 13px / 1.6em, -0.02em, gray 138: at its
 * own width on one line, card 5 wraps at 100% (.hbo-wide). Body Regular 18px / 1.5em (16px, 14px).
 */
.h-bottom[data-section="testimonials"] {
  --hbo-fade-ms: 600ms; /* arrow fade: spring stiffness 500, damping 60, mass 1 (60 points) */
  --hbo-fade-ease: linear(0, 0.021222, 0.070474, 0.133056, 0.200468, 0.267905, 0.332756, 0.393704, 0.450182, 0.502055, 0.549427, 0.592528, 0.631647, 0.667096, 0.699184, 0.728211, 0.754455, 0.778175, 0.799611, 0.81898, 0.836479, 0.852288, 0.866569, 0.87947, 0.891124, 0.901651, 0.911161, 0.919751, 0.927511, 0.93452, 0.940852, 0.946571, 0.951737, 0.956404, 0.960619, 0.964427, 0.967867, 0.970974, 0.973781, 0.976316, 0.978606, 0.980675, 0.982543, 0.984231, 0.985756, 0.987133, 0.988378, 0.989501, 0.990517, 0.991434, 0.992262, 0.99301, 0.993686, 0.994297, 0.994848, 1, 1, 1, 1, 1);
  display: flex; flex-direction: column; flex-wrap: nowrap;
  justify-content: center; align-items: center; gap: 60px;
  width: 100%; padding: 100px; margin: 0; flex: none; position: relative; overflow: hidden;
  background-color: #fcfcfc;
}
.h-bottom .hbo-tst-krow,
.h-bottom .hbo-tst-tbox { width: 1000px; }

.h-bottom .hbo-card {
  display: flex; flex-direction: column; flex-wrap: nowrap;
  justify-content: flex-start; align-items: center; gap: 20px;
  width: 358px; height: min-content; padding: 0; margin: 0; position: relative; border-radius: 10px;
}
.h-bottom .hbo-card-2 { gap: 30px; }
.h-bottom .hbo-card-4 { height: 526px; }
.h-bottom .hbo-card-img {
  flex: none; width: 100%; height: auto; aspect-ratio: 2.0526315789473686 / 1;
  position: relative; overflow: hidden; border-radius: 20px; z-index: 1;
}
/* The picture and its filling image use .hb-pic and .hb-fill from home-base.css. */
.h-bottom .hbo-card-meta {
  display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center;
  gap: 15px; width: 100%; height: min-content; padding: 0; flex: none; position: relative; overflow: hidden;
}
.h-bottom .hbo-card-names {
  display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: flex-start;
  gap: 0; flex: 1 0 0px; width: 1px; height: min-content; padding: 0; position: relative; overflow: hidden;
}
.h-bottom .hbo-card-title,
.h-bottom .hbo-card-place,
.h-bottom .hbo-card-body {
  flex: none; position: relative; margin: 0; padding: 0;
  font-style: normal; font-weight: 400; text-align: start; text-transform: none; text-decoration: none;
  white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word;
}
.h-bottom .hbo-card-title {
  width: 100%; font-family: var(--font-semibold); font-size: 19px; line-height: 1.4em;
  letter-spacing: 0; color: var(--c-text);
}
.h-bottom .hbo-card-place {
  width: auto; white-space: pre; font-family: var(--font-medium);
  font-size: var(--text-body-size); line-height: var(--text-body-line);
  letter-spacing: var(--text-body-spacing); color: rgb(138, 138, 138);
}
.h-bottom .hbo-card-title.hbo-fit { width: auto; white-space: pre; }
.h-bottom .hbo-card-place.hbo-wide { width: 100%; white-space: pre-wrap; }
.h-bottom .hbo-card-body {
  width: 100%; font-family: var(--font-regular); font-size: 18px; line-height: 1.5em;
  letter-spacing: 0; color: var(--c-text);
}

/* 4. Carousel and arrows ---------------------------------------------------------------------
 * The box is 1000px wide (100% below desktop) and as high as the tallest card (526px).
 * The list scrolls sideways with mandatory snapping, each card snaps to the center and stops.
 * On a fine pointer the scrollbar is hidden, as in the original.
 * Arrows: 40px (mobile 32px) round buttons, black at 20%, white chevron image of the same size.
 * home-bottom.js adds .hbo-on to the arrow that can move and sets disabled on the other one.
 * The opacity follows the original spring. A pressed arrow scales to 0.9 in 0.05s.
 */
.h-bottom .hbo-car { flex: none; width: 1000px; height: auto; position: relative; }
.h-bottom .hbo-car-frame {
  display: flex; width: 100%; height: 100%; padding: 0; margin: 0; position: relative; overflow: hidden;
}
.h-bottom .hbo-car-list {
  display: flex; flex-direction: row; flex: 1 1 100%; gap: 24px; align-items: flex-start;
  width: 100%; height: 100%; padding: 0; margin: 0; list-style: none; position: relative;
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; border-radius: 0;
}
.h-bottom .hbo-car-item { flex-shrink: 0; scroll-snap-align: center; scroll-snap-stop: always; }
@media (pointer: fine) {
  .h-bottom .hbo-car-list::-webkit-scrollbar { display: none; -webkit-appearance: none; width: 0; height: 0; }
  .h-bottom .hbo-car-list::-webkit-scrollbar-thumb { display: none; }
  .h-bottom .hbo-car-list { scrollbar-width: none; }
}
.h-bottom .hbo-car-controls {
  display: flex; flex-direction: row; justify-content: space-between; align-items: center;
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  margin: 0; padding: 0; border: 0; pointer-events: none;
}
.h-bottom .hbo-car-btn {
  display: block; flex: none; width: 40px; height: 40px; margin: 0; padding: 0; border: none;
  border-radius: 40px; overflow: hidden; background-color: rgba(0, 0, 0, 0.2);
  opacity: 0; pointer-events: none; cursor: default; transform: none;
  transition: opacity var(--hbo-fade-ms) var(--hbo-fade-ease), transform 50ms cubic-bezier(0.42, 0, 0.58, 1);
}
.h-bottom .hbo-car-btn.hbo-on { opacity: 1; pointer-events: auto; cursor: pointer; }
.h-bottom .hbo-car-btn.hbo-on:active { transform: scale(0.9); }
.h-bottom .hbo-car-btn > img { width: 40px; height: 40px; }

/* 5. Form: focus shadow ------------------------------------------------------------------------
 * The home form draws a smaller focus shadow than Pricing (1px 2px 6px against 2px 1px 8px) on
 * every input box, the plan select and the message box, at every width. Border, white background,
 * radius and the 0.3s transition are the Pricing values.
 */
.h-bottom .bottom-input-wrap:focus-within { box-shadow: 1px 2px 6px 0px rgba(98, 211, 119, 0.1); }

/* 6. Tablet ---------------------------------------------------------------------------------- */
@media (min-width: 810px) and (max-width: 1199.98px) {
  .h-bottom .hbo-head { width: 100%; }
  .h-bottom[data-section="fee"] { padding: 80px 40px; }
  .h-bottom .hbo-note-text { font-size: 16px; }
  .h-bottom[data-section="testimonials"] { padding: 40px; }
  .h-bottom .hbo-car { width: 100%; }
  .h-bottom .hbo-card-title { font-size: 15px; }
  .h-bottom .hbo-card-body { font-size: 16px; }
  /* Home form: 80px 40px here (Pricing keeps 100px). */
  .h-bottom[data-section="form"] { padding: 80px 40px; }
  /* Home footer: the two link columns keep their 10px gap here (Pricing: 0). */
  .h-bottom .bottom-foot-mid { gap: 10px; }
}

/* 7. Mobile ---------------------------------------------------------------------------------- */
@media (max-width: 809.98px) {
  .h-bottom .hbo-head { width: 100%; }
  .h-bottom[data-section="fee"] { padding: 40px 20px; }
  .h-bottom .hbo-note-text { font-size: 15px; }
  .h-bottom[data-section="testimonials"] { gap: 32px; padding: 40px 16px; }
  .h-bottom .hbo-tst-krow,
  .h-bottom .hbo-tst-tbox,
  .h-bottom .hbo-car { width: 100%; }
  .h-bottom .hbo-card-title,
  .h-bottom .hbo-card-body { font-size: 14px; }
  .h-bottom .hbo-car-btn,
  .h-bottom .hbo-car-btn > img { width: 32px; height: 32px; }
  /* Home FAQ head: 1000px wide with gap 10px, centered over the 100% column (Pricing: 100%, 4px). */
  .h-bottom .bottom-faq-head { width: 1000px; gap: 10px; }
  /* Home form gap 40px (Pricing 16px). Home footer padding 40px 16px (Pricing 30px). */
  .h-bottom[data-section="form"] { gap: 40px; }
  .h-bottom[data-section="footer"] { padding: 40px 16px; }
}

/* 8. Reduced motion (policy i) --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .h-bottom .hbo-car-btn { transition: none; }
  .h-bottom .hbo-car-btn.hbo-on:active { transform: none; }
}