/* Homepage body: shared editorial rhythm, with space between patterned bands.
   The basecamp hero and its motion remain in home-basecamp.css. */
.page--home { --hf-space: clamp(4rem, 7vw, 7rem); }
.hf-section { padding-block: var(--hf-space); position: relative; }
.hf-section h2, .page--home .home-supplies h2 {
  font-size: clamp(2.15rem, 3.65vw, 3.5rem);
  line-height: 1.08; letter-spacing: -.045em; margin: 14px 0 0;
}
.hf-section h2 > span { color: var(--brand-700); }
.hf-section .lead { font-size: 17px; line-height: 1.7; max-width: 46ch; margin-top: 22px; }
.hf-section-head { display: grid; grid-template-columns: 1.1fr 1fr; align-items: end; gap: 24px 6vw; margin-bottom: 44px; }
.hf-section-head > .eyebrow { grid-column: 1 / -1; margin-bottom: -25px; }
.hf-section-head .lead { margin: 0; }
.hf-text-link { display: inline-flex; align-items: center; gap: 16px; min-height: 44px; color: var(--brand-700); font-size: 14px; font-weight: 650; }
.hf-text-link:hover { text-decoration: underline; text-underline-offset: 5px; }
.page--home main :focus-visible { outline: 2px solid var(--brand-600); outline-offset: 5px; }
.page--home .home-basecamp :focus-visible { outline-color: #a1f2d1; }
.page--home .home-basecamp__form input:focus-visible { outline: none; }

/* Keep one mint/blue geometric introduction; the catalog that follows is plain. */
.page--home .home-supplies { padding-block: var(--hf-space); border-top: 1px solid rgba(132,224,188,.2); }
.page--home .home-supplies__inner { grid-template-columns: 1fr 1fr; gap: clamp(2rem,6vw,6rem); }
.page--home .home-supplies__copy h2 { margin-top: 18px; }
.page--home .home-supplies__copy .lead { max-width: 44ch; }
.hf-intro-note { margin-block: 24px 28px; padding-left: 17px; border-left: 2px solid var(--brand-600); color: var(--slate-600); font-size: 14px; line-height: 1.7; max-width: 34ch; }
.page--home .home-supplies .visual-card { border-radius: 20px; }

/* Ruled product entries make browsing lighter than a second card catalogue. */
.page--home #products { background: #fff; padding-block: var(--hf-space); overflow: visible; }
.page--home #products::before, .page--home #products::after { content: none; }
.hf-product-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: clamp(2rem,6vw,6rem); }
.hf-product { position: relative; display: grid; grid-template-columns: 44px minmax(0,1fr) 24px; column-gap: 18px; padding: 28px 0; border-top: 1px solid #dce5e6; transition: border-color .2s; min-width: 0; }
.hf-product:hover, .hf-product:focus-within { border-color: var(--brand-600); }
.hf-product__icon { grid-column: 1; grid-row: 1 / 4; color: var(--brand-600); padding-top: 4px; }
.hf-product__icon svg { width: 28px; height: 28px; }
.hf-product h3 { grid-column: 2; margin: 0; font-size: 20px; letter-spacing: -.025em; }
.hf-product > p { grid-column: 2; font-size: 14px; line-height: 1.7; color: var(--slate-600); margin-top: 10px; max-width: 43ch; }
.hf-product__price { grid-column: 2; display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 16px; font-size: 12px; color: var(--slate-600); }
.hf-product__price b { font-size: 15px; color: var(--ink-900); }
.hf-product__arrow { grid-column: 3; grid-row: 1; color: var(--brand-600); font-size: 23px; transition: transform .2s; }
.hf-product:hover .hf-product__arrow { transform: translate(2px,-2px); }
.hf-product .card__link { border-radius: 0; }
.hf-caveat { border-top: 1px solid #dce5e6; padding-top: 22px; margin-top: 14px; font-size: 12px; color: var(--slate-600); line-height: 1.7; }

/* A continuous geometric stage carries the builder showcase and hosting signpost. */
.hf-build { background: linear-gradient(110deg,#dff7ec99,#e5effb66),url('../img/hero/products-geo-blue.svg') center / cover; }
.hf-build .split { gap: clamp(2rem,5vw,5rem); align-items: center; }
.hf-build .split__media { min-width: 0; }
.hf-build .split__media img { filter: drop-shadow(0 30px 26px #123e5430); }
.hf-build .feature-list { margin-top: 26px; gap: 16px; }
.hf-build .feature-list li { margin-top: 0; }
.hf-build .feature-list strong { font-size: 14px; }
.hf-build .feature-list li span { font-size: 13px; }

/* Open FAQ rows and a single closing support panel; no overlapping caps. */
.hf-closing { background: linear-gradient(115deg,#e7f7ef99,#e6f0fb66),url('../img/hero/products-geo-blue.svg') center / cover; }
.hf-faq .faq-card { border: 0; padding: 0; background: transparent; box-shadow: none; border-radius: 0; margin: 0; }
.hf-faq .grid { gap: clamp(2rem,6vw,6rem); }
.hf-faq .acc-item { border: 0; border-bottom: 1px solid #b9d3d7; border-radius: 0; background: transparent; box-shadow: none; }
.hf-faq .acc-item:first-child { border-top: 1px solid #b9d3d7; }
.hf-faq .acc-item + .acc-item { margin-top: 0; }
.hf-faq .acc-item summary { padding: 23px 36px 23px 0; font-size: 15px; }
.hf-faq .acc-body__inner { padding-inline: 0; }
.hf-support { padding: 0 0 var(--hf-space); }
.page--home #products, .page--home #website-builder { scroll-margin-top: calc(var(--header-h) + 24px); }

/* More product depth: useful choices rather than a second full plan catalogue. */
.hf-build-next { border-top: 1px solid #b6d4d6; padding-top: 28px; margin-top: 44px; color: var(--slate-600); font-size: 14px; line-height: 1.8; }
.hf-build-next a { color: var(--brand-700); font-weight: 650; text-decoration: underline; text-underline-offset: 4px; }
.hf-hosting { background: radial-gradient(ellipse at 100% 0,#123b48,transparent 65%),var(--ink-900); color: #c4d8e1; }
.hf-hosting h2 { color: #fff; }
.hf-hosting h2 > span { color: #84e0bc; }
.hf-hosting .lead { color: #c4d8e1; }
.hf-host-choices { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(24px,4vw,54px); margin-top: 46px; }
.hf-host-choice { border-top: 1px solid #8bcdc44d; padding-top: 28px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.hf-host-mark { display: flex; align-items: center; justify-content: center; gap: 8px; background: #f6fbfa; color: #17343e; border-radius: 8px; padding: 8px 14px; height: 56px; min-width: 160px; font-size: 17px; font-weight: 700; }
.hf-host-mark img { object-fit: contain; flex: none; }
.hf-host-mark--type { font-family: var(--font-mono); font-size: 24px; gap: 12px; }
.hf-host-mark--type span { font-family: var(--font-sans); font-size: 10px; line-height: 1.5; font-weight: 600; max-width: 60px; }
.hf-host-choice h3 { color: #fff; font-size: 24px; line-height: 1.2; letter-spacing: -.035em; margin: 28px 0 0; min-height: 2.4em; }
.hf-host-choice > p:not([class]) { font-size: 15px; line-height: 1.75; margin-top: 16px; max-width: 35ch; }
.hf-host-fit { margin-block: 20px 0; color: #9fc8c5; font-size: 13px; line-height: 1.7; max-width: 34ch; }
.hf-host-price { padding-top: 28px; margin-top: auto; }
.hf-host-price > span { display: block; font-size: 12px; color: #a9c8d3; }
.hf-host-price strong { display: block; font-size: clamp(28px,3.4vw,40px); line-height: 1.2; font-weight: 750; letter-spacing: -.05em; color: #fff; margin-top: 8px; }
.hf-host-price small { display: block; font-size: 12px; color: #a9c8d3; margin-top: 5px; }
.hf-host-choice .hf-text-link { margin-top: 22px; color: #9ae9cd; }
.hf-hosting__foot { margin-top: 36px; border-top: 1px solid #8bcdc433; padding-top: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.hf-hosting__foot p { font-size: 12px; color: #b6cfd8; line-height: 1.7; margin: 0; }
.hf-hosting__foot a { color: #9ae9cd; text-decoration: underline; text-underline-offset: 4px; }
.hf-email { padding: 0; }
.hf-email-billboard { position: relative; isolation: isolate; overflow: hidden; border-radius: 0; background: #060b14; color: #fff; min-height: 900px; display: flex; flex-direction: column; }
.hf-email-billboard__scene { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; z-index: -1; pointer-events: none; }
.hf-email-billboard__copy { text-align: center; padding: clamp(32px,4vw,56px) 24px 0; }
.hf-email-billboard__label { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px; margin: 0; }
.hf-email-billboard__label img { width: 85px; height: 28px; object-fit: contain; filter: brightness(0) invert(1); }
.hf-email-billboard__label > span { color: #a8d8d0; font-size: 11px; font-weight: 650; letter-spacing: .09em; text-transform: uppercase; border-left: 1px solid #8ac9b955; padding-left: 18px; }
.hf-email-billboard h2 { color: #fff; font-size: clamp(3rem,5.6vw,5.5rem); line-height: .98; letter-spacing: -.055em; margin-top: 22px; }
.hf-email-billboard h2 > span { color: #84e0bc; }
.hf-email-billboard__copy > p:last-child { margin-top: 20px; color: #d0e3e8; font-size: 16px; line-height: 1.7; }
.hf-email-billboard__footer { margin-top: auto; position: relative; padding: 24px clamp(24px,4vw,48px); background: #06121bea; border-top: 1px solid #83cab72e; }
.hf-email-billboard__offer { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.hf-email-billboard__offer p { margin: 0; font-size: 13px; color: #c8dee5; }
.hf-email-billboard__offer strong { display: inline-block; color: #fff; font-size: 30px; letter-spacing: -.04em; font-weight: 750; margin-inline: 6px; }
.hf-email-billboard__offer p > span { font-size: 12px; }
.hf-email-billboard__footer ul { display: flex; flex-wrap: wrap; gap: 10px 30px; list-style: none; padding: 0; margin: 18px 0 0; color: #c1dfd4; font-size: 12px; }
.hf-email-billboard__footer li { margin: 0; }
.hf-email-billboard__footer li::before { content: '✓'; color: #91e4c4; margin-right: 8px; }
.hf-detail-note { color: var(--slate-600); font-size: 12px; line-height: 1.7; max-width: 65ch; margin-top: 20px; }
.hf-email-billboard .hf-detail-note { color: #a8c2ca; font-size: 11px; max-width: none; margin-top: 14px; }
.hf-email-billboard :focus-visible { outline-color: #a1f2d1; }
.page--home #home-hosting, .page--home #home-email, .page--home #home-security, .page--home #why-famous { scroll-margin-top: calc(var(--header-h) + 24px); }

@media (max-width: 1000px) {
  .hf-host-choices { gap: 24px; }
  .hf-host-choice h3 { font-size: 21px; }
}
@media (max-width: 700px) {
  .hf-host-choices, .hf-hosting__foot { grid-template-columns: minmax(0,1fr); }
  .hf-host-choices { gap: 36px; }
  .hf-host-choice h3 { min-height: 0; margin-top: 22px; font-size: 23px; }
  .hf-host-choice > p:not([class]), .hf-host-fit { max-width: 48ch; }
  .hf-hosting__foot { gap: 16px; }
}

@media (max-width: 900px) {
  .page--home .home-supplies__inner, .hf-section-head { grid-template-columns: minmax(0,1fr); }
  .hf-section-head { gap: 22px; }
  .hf-section-head > .eyebrow { grid-column: auto; margin: 0 0 -22px; }
  .hf-section-head .lead { max-width: 50ch; }
  .hf-steps h3 { font-size: 20px; }
}
@media (max-width: 700px) {
  .hf-product-list { grid-template-columns: minmax(0,1fr); }
  .hf-product { column-gap: 12px; grid-template-columns: 32px minmax(0,1fr) 20px; }
  .hf-product h3 { font-size: 19px; }
  .hf-steps { margin-top: 32px; gap: 30px; }
  .hf-steps > li { position: relative; padding-left: 46px; }
  .hf-step-number { position: absolute; left: 0; top: 27px; }
  .hf-steps p { max-width: 46ch; }
  .hf-steps a { margin-top: 10px; }
  .hf-journey__close { flex-direction: column; align-items: flex-start; }
  .hf-section .lead { font-size: 16px; }
  .hf-faq .acc-item summary { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .hf-product, .hf-product__arrow { transition: none; }
}

@media (max-width: 1000px) {
  .hf-email-billboard { min-height: 850px; }
}
@media (max-width: 700px) {
  .hf-email-billboard { min-height: 0; border-radius: 0; }
  .hf-email-billboard__copy { order: 0; padding: 32px 20px 0; }
  .hf-email-billboard__scene { position: relative; inset: auto; order: 1; z-index: 0; height: 290px; object-fit: cover; object-position: 50% 80%; margin-top: 8px; }
  .hf-email-billboard__footer { order: 2; margin-top: 0; padding: 24px 20px; }
  .hf-email-billboard h2 { font-size: clamp(2.8rem,11vw,4rem); }
  .hf-email-billboard__copy > p:last-child { font-size: 14px; }
  .hf-email-billboard__offer { flex-direction: column; align-items: flex-start; gap: 20px; }
  .hf-email-billboard__offer p > span { display: block; margin-top: 5px; }
  .hf-email-billboard__footer ul { display: grid; gap: 10px; margin-top: 24px; }
}

/* Flagship revision: fewer pitches, full-bleed campaigns and useful interaction. */
.page--home #products { padding-block: clamp(3rem,4.5vw,4.5rem); }
.hf-product { padding-block: 20px; }
.hf-product > p { margin-top: 6px; }
.hf-product__price { margin-top: 10px; }
.page--home .home-supplies .visual-card__foot { line-height: 1.7; }
.page--home .home-supplies .visual-card__foot a { text-decoration: underline; text-underline-offset: 3px; color: var(--brand-700); }
#why-famous, #hf-value-title { scroll-margin-top: calc(var(--header-h) + 24px); }

/* A clipped window reveals a viewport-fixed scene while product content scrolls. */
.hf-hosting { isolation: isolate; overflow: hidden; background: #0a1220; }
.hf-hosting__backdrop { position: absolute; inset: 0; z-index: -2; pointer-events: none; clip-path: inset(0); }
.hf-hosting__scene { position: absolute; inset: 0; }
.hf-hosting__scene img, .hf-server-lights { position: absolute; inset: 0; width: 100%; height: 100%; }
.hf-hosting__scene img { object-fit: cover; object-position: 50% 50%; filter: brightness(1.35) saturate(1.08); }
.hf-hosting::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg,#060b14dc 0%,#060b1499 48%,#060b1466),linear-gradient(0deg,#060b14d9,#060b1440 65%); pointer-events: none; }
.hf-server-led { opacity: .55; animation: hf-server-activity var(--led-cycle,7s) linear var(--led-phase,0s) infinite; animation-play-state: paused; }
.hf-hosting.is-in-view .hf-server-led { animation-play-state: running; }
@keyframes hf-server-activity {
  0%, 18%, 42%, 100% { opacity: .24; }
  24%, 31% { opacity: 1; }
  60%, 83% { opacity: .7; }
}
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .hf-hosting__scene { position: fixed; height: 100vh; }
}
.hf-host-mark { background: none; color: #fff; border-radius: 0; padding: 0; min-width: 0; justify-content: flex-start; }
.hf-host-mark--wordpress img { width: 200px; height: auto; max-height: none; margin-left: -17px; }
.hf-host-mark--type { font-size: 32px; }
.hf-host-mark--type span { font-size: 11px; max-width: 78px; }
.page--home .hf-hosting :focus-visible { outline-color: #a1f2d1; }

/* Security reads as one illustrated editorial feature, with manual selection. */
.hf-security { background: #f8fcfa; padding-block: clamp(48px,4.5vw,68px); }
.hf-security__intro { text-align: center; margin-inline: auto; }
.hf-security__intro .eyebrow { justify-content: center; }
.hf-security__intro h2 { font-size: clamp(34px,3.1vw,44px); }
.hf-security-break { display: none; }
.hf-security__intro .lead { margin: 16px auto 0; }
.hf-security-selector { margin-top: 32px; }
.hf-security-tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; padding-bottom: 16px; border-bottom: 1px solid #c8ded6; }
.hf-security-tabs a { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 18px; border-radius: 6px; color: #435e58; font-size: 14px; font-weight: 650; text-decoration: none; }
.hf-security-tabs a:hover { background: #e6f3eb; color: #065c3e; }
.hf-security-tabs a[aria-selected="true"] { background: #0a8158; color: #fff; }
.hf-security-panel { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(24px,5vw,64px); align-items: center; padding: 32px 0 8px; max-width: 1100px; margin-inline: auto; scroll-margin-top: calc(var(--header-h) + 24px); }
.hf-security-panel[hidden] { display: none; }
.hf-security-panel + .hf-security-panel:not([hidden]) { border-top: 1px solid #c8ded6; }
.hf-security-panel__copy h3 { color: #123e37; font-size: clamp(26px,3vw,38px); letter-spacing: -.04em; line-height: 1.1; margin: 12px 0 0; }
.hf-security-panel__copy > p:not([class]) { font-size: 15px; line-height: 1.8; color: #49615b; max-width: 44ch; margin: 18px 0; }
.hf-security-diagram { margin: 0 auto; color: #0a8158; min-width: 0; max-width: 440px; width: 100%; }
.hf-security-diagram svg { display: block; width: 100%; height: auto; }
.hf-security-diagram svg > g:last-child { color: #fff; }
.hf-diagram-labels { display: flex; justify-content: space-between; margin: -32px 9% 0; color: #41695c; font-family: var(--font-mono); font-size: 10px; font-weight: 650; letter-spacing: .07em; position: relative; }
.hf-security-diagram figcaption { text-align: center; color: #145943; font-size: 13px; margin-top: 24px; font-weight: 650; }
.hf-security-diagram figcaption span { display: block; color: #687e76; font-size: 10px; font-weight: 400; margin-top: 5px; }
.hf-security__more { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px 28px; border-top: 1px solid #d6e6dd; padding-top: 22px; margin-top: 26px; font-size: 12px; color: #5c7068; }
.hf-security__more a { color: var(--brand-700); font-weight: 650; display: inline-flex; align-items: center; min-height: 44px; }

/* Full-width atmosphere with the same centered campaign and readable offer. */
.hf-email-billboard__scene { width: min(100%,1200px); top: 100px; height: calc(100% - 100px); left: 50%; right: auto; object-fit: contain; object-position: 50% 0; transform: translateX(-50%); mask-image: linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent),linear-gradient(180deg,transparent,#000 20%,#000 92%,transparent); mask-composite: intersect; }
.hf-email-billboard__copy { width: 100%; max-width: 1360px; margin-inline: auto; padding-top: clamp(48px,5vw,72px); }
.hf-email-billboard__footer { width: 100%; padding-inline: max(24px,calc((100% - 1280px)/2)); }

/* A light route gives the three steps a visual story and separates dark bands. */
.hf-journey { color: #49615b; background: #fff; }
.hf-journey h2 { color: var(--ink-900); }
.hf-journey h2 > span { color: var(--brand-700); }
.hf-journey .lead { color: #49615b; }
.hf-journey .hf-section-head { margin-bottom: 24px; }
.hf-route { margin: 0 -1%; }
.hf-route svg { display: block; width: 100%; height: auto; color: #08734f; }
.hf-route__track, .hf-route__progress { fill: none; stroke-width: 3; }
.hf-route__track { stroke: #d8e8e1; stroke-dasharray: 5 8; }
.hf-route__progress { stroke: #159b71; }
.hf-route__point > circle { fill: #eaf7ef; stroke: #b4d9c8; stroke-width: 1.5; }
.hf-route.is-visible .hf-route__progress { animation: hf-route-draw 2.6s ease-out both; }
@keyframes hf-route-draw { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }
.hf-steps { list-style: none; padding: 0; margin: 10px 0 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 36px; }
.hf-steps > li { margin: 0; min-width: 0; padding-top: 18px; border-top: 1px solid #cee1d6; }
.hf-step-number { display: block; font-family: var(--font-mono); color: #16815d; font-size: 12px; margin-bottom: 18px; }
.hf-steps h3 { font-size: 23px; line-height: 1.2; letter-spacing: -.035em; color: #123e37; margin: 0; }
.hf-steps p { font-size: 15px; line-height: 1.75; margin-top: 14px; max-width: 35ch; }
.hf-steps a { display: inline-flex; align-items: center; min-height: 44px; gap: 12px; font-size: 13px; font-weight: 650; color: var(--brand-700); margin-top: 16px; }
.hf-steps a:hover { text-decoration: underline; text-underline-offset: 4px; }
.hf-journey__close { border-top: 1px solid #cee1d6; padding-top: 26px; margin-top: 32px; display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.hf-journey__close p { color: #3b6054; font-size: 16px; }

@media (max-width: 900px) {
  .hf-email-billboard__scene { object-fit: cover; }
  .hf-security-tabs a { font-size: 13px; padding-inline: 12px; }
  .hf-security-panel { gap: 24px; }
  .hf-security-break { display: initial; }
}
@media (max-width: 700px) {
  .hf-hosting::before { background: linear-gradient(90deg,#060b14e8,#060b1499),linear-gradient(0deg,#060b14d9,#060b1440); }
  .hf-server-led { animation: none; opacity: .55; }
  .hf-security { padding-block: 48px; }
  .hf-security-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .hf-security-tabs a { justify-content: center; text-align: center; }
  .hf-security-panel { grid-template-columns: minmax(0,1fr); padding-top: 16px; gap: 24px; }
  .hf-security-panel__copy > p:not([class]) { max-width: none; }
  .hf-security-diagram { max-width: 460px; width: 100%; margin-inline: auto; }
  .hf-diagram-labels { margin-top: -22px; font-size: 9px; }
  .hf-security-diagram figcaption { margin-top: 20px; }
  .hf-security__more { align-items: flex-start; justify-content: flex-start; gap: 2px; }
  .hf-security__more span { display: block; line-height: 1.7; }
  .hf-email-billboard__copy { padding-top: 48px; }
  .hf-email-billboard__scene { inset: auto; left: auto; transform: none; width: 100%; height: 320px; object-fit: cover; object-position: 50% 80%; mask-image: linear-gradient(180deg,transparent,#000 12%,#000 90%,transparent); }
  .hf-email-billboard__footer { padding-inline: 24px; }
  .hf-steps { grid-template-columns: minmax(0,1fr); margin-top: 16px; gap: 24px; }
  .hf-steps > li { padding-left: 0; }
  .hf-step-number { position: static; margin-bottom: 12px; }
  .hf-steps p { max-width: 46ch; }
  .hf-route { margin-inline: -12px; }
  .hf-journey__close { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .hf-route.is-visible .hf-route__progress { animation: none; }
  .hf-server-led { animation: none; opacity: .55; }
}