/* Benefit and use-case pages, built by
   ops/build-benefit-pages.py from content/benefits/pages/<name>.html (approved designs v2, 15 Oct 2026:
   docs/page-drafts/benefit-pages/). Shared parts only: crumbs, section rhythm, FAQ, closing CTA, related
   links and the paper browser frame. Each page carries its own layout and story in its own <style>.
   Mockups inside a frame keep a light "paper" palette in both themes, like a screenshot of a customer's
   site. Brand tokens come from site.css (Fresh Stand). */

.v2 { --v2-gap: clamp(72px, 9vw, 132px); }
.v2 section { margin-block: 0; }
.v2 .v2-sec { padding-block: var(--v2-gap) 0; }
.v2 h1, .v2 h2, .v2 h3 { text-wrap: balance; }
.v2 p { text-wrap: pretty; }
.v2 a.ul { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--pulp) 60%, transparent); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.v2 a.ul:hover { text-decoration-color: var(--pulp); }
.v2 :focus-visible { outline: 2px solid var(--pulp); outline-offset: 3px; border-radius: 6px; }

.v2-crumbs { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 22px; padding: 0; list-style: none; font-size: 13.5px; font-weight: 650; color: inherit; opacity: .78; }
.v2-crumbs li + li::before { content: "/"; margin-right: 8px; opacity: .55; }
.v2-crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }

.v2-h2 { font-size: clamp(28px, 4vw, 48px); font-weight: 800; letter-spacing: -.035em; line-height: 1.04; margin: 0 0 16px; }
.v2-kick { display: inline-block; margin: 0 0 14px; font-size: 14px; font-weight: 750; letter-spacing: -.005em; color: var(--pulp); }
.v2-lede { font-size: clamp(16px, 1.8vw, 18.5px); color: var(--ink-soft); max-width: 58ch; margin: 0; line-height: 1.55; }

.v2-start { display: inline-flex; align-items: center; gap: 10px; border-radius: 999px; padding: 16px 30px; background: var(--squeeze); color: #123529;
  font-weight: 800; font-size: 16.5px; letter-spacing: -.01em; white-space: nowrap; box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 10px 24px -12px rgba(201,130,27,.7);
  transition: transform .18s ease, box-shadow .18s ease; }
.v2-start:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 16px 30px -12px rgba(201,130,27,.8); }
.v2-start:active { transform: translateY(0); }
.v2-start svg { flex: none; }
.v2-side { font-weight: 700; font-size: 15.5px; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); }
.v2-side:hover { text-decoration-color: currentColor; }

/* Paper browser frame for drawn site mockups */
.v2-frame { --p: #FFFDF7; --p2: #F3EFE4; --p3: #E9E3D4; --pi: #1D2B26; --ps: #5E6F68; --pl: #E4DED0; --pa: #F0662F;
  background: var(--p); color: var(--pi); border-radius: 14px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.14), 0 34px 80px -34px rgba(0,0,0,.55); }
.v2-bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: #EDE8DC; border-bottom: 1px solid #E0D9C8; }
.v2-bar i { width: 9px; height: 9px; border-radius: 50%; background: #D6CFBF; }
.v2-bar i:nth-child(1) { background: #F0662F; } .v2-bar i:nth-child(2) { background: #FFC93C; } .v2-bar i:nth-child(3) { background: #7FBF9A; }
.v2-url { flex: 1; min-width: 0; margin-left: 8px; display: inline-flex; align-items: center; gap: 6px; background: #FFFDF7; border-radius: 999px; padding: 4px 12px;
  font-size: 12px; font-weight: 650; color: #3B4A44; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.v2-url svg { color: #2E8B57; flex: none; }

/* FAQ: heading column + answers column */
.v2-faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.v2-faq-h { position: sticky; top: calc(var(--nav-h) + 28px); }
.v2-faq-h p { margin: 0; color: var(--ink-soft); font-size: 15.5px; max-width: 34ch; }
.v2-faq .faq { max-width: none; margin: 0; border-top: 1px solid var(--line); }
.v2-faq details.q p a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--pulp) 60%, transparent); }
.v2-faq details.q[open] summary { color: var(--ink); }
.v2-faq details.q summary::after { content: "+"; }
.v2-faq details.q[open] summary::after { content: "-"; }

/* Related pages and next reads */
.v2-more { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 10px; margin-top: 22px; }
.v2-more a { display: grid; gap: 3px; padding: 16px 18px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); transition: border-color .15s, transform .15s; }
.v2-more a:hover { border-color: var(--ink-soft); transform: translateY(-2px); }
.v2-more strong { font-size: 15.5px; letter-spacing: -.012em; }
.v2-more span { font-size: 13.5px; color: var(--ink-faint); line-height: 1.4; }

.v2-end { padding-block: var(--v2-gap); }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 860px) {
  .v2-faq { grid-template-columns: 1fr; }
  .v2-faq-h { position: static; }
}
@media (max-width: 480px) {
  .v2-start { padding: 15px 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .v2 *, .v2 *::before, .v2 *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}