/* rentbloque.com — /features only (look D). Loaded after site.css; no home.css, no motion.
   Page head, the 30-second demo video, the jump list, nine feature areas (cards + plain lists),
   the Q&A blocks and the closing panel with the two prices. Mango only on the buttons. */
.fhead { padding: var(--s8) 0 var(--s6); }
@media (min-width: 768px) { .fhead { padding: var(--s9) 0 var(--s7); } }
.fhead .head { max-width: 820px; }
.fhead h1 { font-size: clamp(36px, 5.4vw, 64px); line-height: 1; letter-spacing: -.035em; font-weight: 300; max-width: 18ch; }
.fhead .lede { margin-top: var(--s5); max-width: 52ch; }
.hl { font-weight: 500; }

/* the demo: the recording sits in a rounded frame, phone-sized */
.demo { padding: var(--s7) 0 var(--s8); border-top: 1px solid var(--hair); text-align: center; }
.demo .eyebrow { justify-content: center; }
.demo h2 { margin: var(--s4) auto 0; max-width: 22ch; }
.demo p.say { color: var(--ink2); margin: var(--s4) auto 0; max-width: 46ch; }
.demo video { width: 100%; max-width: 330px; height: auto; display: block; margin: var(--s6) auto 0; border-radius: var(--r3); border: 1px solid var(--hair); background: var(--palm-deep); box-shadow: 0 24px 60px -30px rgba(14,43,37,.3); }
.demo .under { color: var(--ink2); font-size: 14px; margin: var(--s4) 0 0; }

/* the jump strip: ONE row of the same quiet pills as the phone sub-nav. It scrolls sideways instead of
   wrapping (ten pills wrapped into a blob at 390px), sticks just under the pinned top bar (64px), and
   features.js marks the section on screen (aria-current) and keeps that pill in view. Edge fades only
   when the row really scrolls (.can-scroll, set by JS) and only on the side with more pills; with JS
   off it is a plain scrolling row. The 6px inner padding (and the matching negative margin) keeps the
   focus ring from being clipped by the overflow box. */
.jumpbar { position: sticky; top: 64px; z-index: 20; background: rgba(247,241,230,.9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.jump { --fl: 0px; --fr: 0px; position: relative; display: flex; gap: var(--s2); padding: 6px; margin: 0 -6px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent); mask-image: linear-gradient(to right, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent); }
.jump::-webkit-scrollbar { display: none; }
.jump.can-scroll { --fl: 28px; --fr: 28px; }
.jump.can-scroll.at-start { --fl: 0px; }
.jump.can-scroll.at-end { --fr: 0px; }
.jump a { flex: none; color: var(--ink2); text-decoration: none; font-size: 14px; font-weight: 600; padding: 0 14px; min-height: 44px; display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid var(--hair2); transition: color .2s ease, background-color .2s ease, border-color .2s ease; }
.jump a:hover { color: var(--ink); border-color: var(--ink); background: rgba(14,43,37,.05); }
.jump a[aria-current] { color: var(--on-dark); background: var(--palm); border-color: var(--palm); }
@media (min-width: 1024px) { .jump a { padding: 0 12px; } }
/* the strip covers the top of a section it jumps to, so every section it links to clears bar + strip (64 + 58) */
section.area[id], section.pricing[id] { scroll-margin-top: 136px; }
/* the trial/demo pair between areas: the home page's own pair, copied */
section.area .pair { margin-top: var(--s7); }

/* feature areas */
section.area { padding: var(--s8) 0; border-top: 1px solid var(--hair); }
@media (min-width: 768px) { section.area { padding: var(--s9) 0; } }
section.area h2, .qsec h2 { font-size: clamp(30px, 4vw, 46px); max-width: 24ch; }
section.area .say { color: var(--ink2); margin: var(--s5) 0 0; max-width: 62ch; font-size: 18px; }
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s4); margin-top: var(--s6); }
@media (max-width: 820px) { .grid { grid-template-columns: 1fr; } }
.item { background: var(--card); border: 1px solid rgba(14,43,37,.06); border-radius: var(--r3); box-shadow: 0 24px 60px -34px rgba(14,43,37,.3); padding: var(--s5); }
.item h3 { font-size: 19px; line-height: 1.25; }
.item p { margin: var(--s2) 0 0; font-size: 15px; color: var(--ink2); }
.item b, .plain b, .qa b { color: var(--ink); font-weight: 600; }
.plain { margin: var(--s6) 0 0; padding: 0; list-style: none; max-width: 74ch; }
.plain li { padding: var(--s3) 0 var(--s3) 28px; border-top: 1px solid var(--hair); font-size: 16px; color: var(--ink2); position: relative; }
.plain li::before { content: ""; position: absolute; left: 0; top: 21px; width: 10px; height: 10px; background: var(--mint); }

/* pricing: the home page's Pricing section, same classes; these rules are home.css's, copied (this page does not load home.css) */
.pricing { padding: var(--pad) 0; }
.prices { display: grid; gap: var(--s6); margin-top: var(--s6); }
@media (min-width: 640px) { .prices { grid-template-columns: 1fr 1fr; max-width: 760px; } }
.price { border-top: 1px solid var(--hair2); padding-top: var(--s4); }
.fig--price { font-size: clamp(64px, 9vw, 112px); font-weight: 200; letter-spacing: -.05em; margin-top: var(--s3); }
.fig--price small { font-size: .24em; font-weight: 400; letter-spacing: -.01em; margin-left: 6px; }
.price .body { margin-top: var(--s3); }
.pricing .pair { margin-top: var(--s7); }
.pricing .cap { margin-top: var(--s4); }

/* Q&A blocks */
.qsec { padding: var(--s8) 0; border-top: 1px solid var(--hair); }
@media (min-width: 768px) { .qsec { padding: var(--s9) 0; } }
.qsec h2 { margin-bottom: var(--s6); }
.qa { border-top: 1px solid var(--hair); padding: var(--s5) 0; max-width: 74ch; }
.qa:last-child { border-bottom: 1px solid var(--hair); }
.qa h3 { margin: 0 0 var(--s2); font-size: 19px; }
.qa p { margin: 0; color: var(--ink2); }

/* the closing panel: dark palm, the two prices, the button pair */
.fclose { margin: var(--s6) 0 var(--s9); }
.fclose h2 { max-width: 22ch; }
.fclose > p { color: var(--soft-dark); max-width: 56ch; margin-top: var(--s5); position: relative; z-index: 1; }
.p-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); margin-top: var(--s6); max-width: 620px; position: relative; z-index: 1; }
@media (max-width: 620px) { .p-cards { grid-template-columns: 1fr; } }
.p-card { border: 1px solid var(--hair-dark); background: rgba(4,36,28,.45); border-radius: var(--r2); padding: var(--s5); }
.p-card .p-cap { font-size: 13px; font-weight: 600; color: var(--soft-dark); }
.p-card .p-fig { font-size: 52px; font-weight: 300; letter-spacing: -.04em; line-height: 1; margin-top: var(--s3); color: var(--mint); font-variant-numeric: tabular-nums; }
.p-card .p-per { font-size: 18px; letter-spacing: 0; color: var(--soft-dark); margin-left: 2px; }
.p-card .p-sub { color: var(--soft-dark); font-size: 15px; margin-top: var(--s2); }
.fclose .pair { margin-top: var(--s6); position: relative; z-index: 1; }
.p-trial { color: var(--soft-dark); font-size: 15px; margin-top: var(--s4); position: relative; z-index: 1; }