/* ==========================================================================
   HostRyze — Portfolio Freedom page (/portfolio-freedom)
   Page-only additions on top of css/styles.css + css/pages.css.
   Two surfaces only (.green / .beige); everything here inherits --fg/--bg.
   ========================================================================== */

/* ---------- Hero: label, fine print, 4-item trust list, 5-field Leak Check form ---------- */
.hero .label { margin-bottom: 14px; }
.hero__fine { margin-top: 14px; font-size: 0.92rem; color: rgba(var(--fgc), 0.72); }
/* trust list: four short statements with a check mark instead of the 3 big numbers */
.facts--trust { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.facts--trust li { align-items: center; gap: 12px; }
.facts--trust li::before { content: ""; flex: none; width: 9px; height: 15px; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); opacity: 0.85; }
.facts--trust span { font-size: clamp(0.98rem, 1.15vw, 1.1rem); font-weight: 600; color: var(--fg); }
/* the Leak Check kicker sits above the form title */
.audit .label { margin-bottom: 8px; }
/* 5 fields in the hero: pair them so the card stays inside the fold */
.hero .audit .frow { gap: 0 12px; }
/* "How many rentals do you run?" is a <select> (source: Choose one / 1 to 4 … More than 40); styled by .f select in styles.css */

/* ---------- Trusted-by wall: own section, so no top rule/stack from .clients ---------- */
.clients--solo { margin-top: 0; padding-top: 0; border-top: 0; }
.clients--solo li { display: grid; place-items: center; }
/* Beckon is a 76×41 source; keep it legible but not blown up */
.clients img.clients__small { max-width: 92px; }

/* ---------- Client stories: "second clip" tag on a repeated speaker ---------- */
.vcard__tag { display: inline-block; margin-top: 8px; padding: 3px 9px; border: 1px solid rgba(var(--fgc), 0.3); border-radius: 999px; font-size: 0.78rem; font-weight: 600; color: rgba(var(--fgc), 0.72); }

/* ---------- Why owners choose HostRyze: three equal versus cards (no core card) ---------- */
.system--even .sys__lead { margin-bottom: 0; }

/* ---------- You set the rules / Start free: list + closing line + button ---------- */
.rules__intro { font-weight: 700; margin-bottom: 8px; }
.rules .list { margin-bottom: 18px; }
.rules__out { font-size: 1rem; color: rgba(var(--fgc), 0.82); }
.fine { margin-top: 10px; font-size: 0.92rem; color: rgba(var(--fgc), 0.72); }
.fine + .fine { margin-top: 4px; }
.after--tight { margin-top: clamp(20px, 3vh, 28px); }

/* ---------- Live in 7 days: "All you do is" ticks under the lede ---------- */
.timeline-head .ticks { margin-top: 18px; }
.timeline-head .lede--tight { margin-top: 18px; font-weight: 600; color: var(--fg); }

/* ---------- Daily check: the four cards carry the source's step numbers 01–04 ---------- */
.benefit__n { display: block; margin-bottom: 14px; font-size: 0.9rem; font-weight: 700; letter-spacing: 0.04em; color: rgba(var(--fgc), 0.62); font-variant-numeric: tabular-nums; }
/* the report below uses the same 4 checks as rows */
.report__rows li div b { font-weight: 700; }

/* ---------- Pricing on the green surface: featured card is beige ---------- */
/* "MOST POPULAR" pill at the top of the featured plan (source badge) */
.plan__badge { align-self: flex-start; margin-bottom: 14px; padding: 5px 10px; border: 1px solid rgba(var(--fgc), 0.35); border-radius: 999px; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1; }
.plan .plan__k { margin-top: 10px; font-size: 1.05rem; font-weight: 700; }
.note .btn--line { margin-top: 16px; }

/* ---------- Three promises: list under the guarantee copy ---------- */
.promises { margin-top: clamp(20px, 3.4vh, 32px); border-top: 1px solid rgba(var(--fgc), 0.2); }
.promises li { padding: clamp(14px, 2.4vh, 20px) 0; border-bottom: 1px solid rgba(var(--fgc), 0.2); }
.promises h3 { margin-bottom: 6px; }
.promises p { font-size: 1rem; color: rgba(var(--fgc), 0.82); max-width: 60ch; }

/* ---------- Final CTA: a button that jumps to the form, phones only ---------- */
.cta__btn { display: none; }
/* the green CTA runs straight into the green footer (source order puts the FAQ before the CTA),
   so this page opts the footer into a visible 1px seam, same tone as .footer__base / .parent */
.footer--joined { border-top: 1px solid rgba(var(--fgc), 0.28); }
/* the form title must not inherit the giant .cta h2 size */
.cta .audit h2.audit__title { font-size: clamp(1.4rem, 2vw, 1.85rem); letter-spacing: -0.03em; line-height: 1.06; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .facts--trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts--trust li { display: flex; }
  .facts--trust li:nth-child(odd) { padding-left: 0; border-left: 0; }
  .facts--trust li:nth-child(n + 3) { border-top: 1px solid rgba(var(--fgc), 0.2); }
}
@media (max-width: 900px) {
  .cta__btn { display: inline-flex; margin-top: clamp(20px, 3vh, 28px); }
  .cta .audit { scroll-margin-top: calc(var(--nav-h) + 16px); }
}
@media (max-width: 640px) {
  .hero__fine { display: none; }
  .benefit__n { margin-bottom: 8px; }
  .rows li { align-items: start; }
  .promises li { padding: 14px 0; }
  .cta__btn { width: 100%; }
  .after--tight .btn { width: 100%; }
}