/* Homepage only. Builds on css/price-testing.css (same tokens and components); see README. */

/* Hero */
.home-hero h1 { font-size: clamp(2.6rem, 4.9vw, 4.4rem); line-height: .95; letter-spacing: -.065em; }
.home-h1-line { display: block; }
.home-jobs { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 10px; font-size: 1.02rem; color: var(--body); }
.home-jobs li { display: flex; align-items: center; gap: 12px; }
.home-jobs strong { color: var(--ink); }
.home-job-icon { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; color: #fff; display: inline-grid; place-items: center; font-size: .72rem; font-weight: 900; }
.home-job-up { background: var(--good); }
.home-job-free { background: var(--brand); font-size: .9rem; }
.home-job-keep { background: var(--ink); font-size: .62rem; }
.home-hero-grid { align-items: start; }
.home-hero .pt-hero-ring { display: none; }
.home-demo { padding-bottom: 0; }
.home-modes { position: relative; z-index: 5; display: inline-flex; flex-wrap: wrap; gap: 4px; background: #fff; border: 1px solid var(--line); border-radius: 100px; padding: 4px; margin: 0 0 16px; box-shadow: 0 10px 28px #2022221a; }
.home-modes .pt-tab { border-color: transparent; font-size: .84rem; padding: 9px 15px; min-height: 44px; color: var(--muted); }
.home-modes .pt-tab:hover { color: var(--ink); }
.home-modes .pt-tab[aria-selected="true"] { color: #fff; }
.home-panel { position: relative; z-index: 2; margin: 0; }
/* The receipt hangs under the walkthrough in normal flow, so it never covers the caption. */
.home-panel .pt-receipt-float { position: relative; left: auto; bottom: auto; width: 300px; max-width: 88%; margin: -8px 24px 0 auto; transform: rotate(2deg); }
.home-demo-note { position: relative; z-index: 2; font-size: .75rem; color: var(--muted); margin-top: 8px !important; text-align: right; }
.home-total-ink strong { color: var(--ink) !important; }

/* Sections */
.home-section { padding: clamp(72px,10vw,120px) 0; }
.home-section-tight { padding-top: 0; }

/* Three jobs */
.home-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.home-tool { border-radius: 22px; padding: 30px 30px 0; display: flex; flex-direction: column; gap: 12px; overflow: hidden; min-width: 0; }
.home-tool h3 { font-size: clamp(1.35rem, 2.2vw, 1.7rem); line-height: 1.12; letter-spacing: -.04em; }
.home-tool > p:not(.home-tool-job):not(.pt-quote):not(.home-tool-foot), .home-tool-copy > p:not(.home-tool-job):not(.pt-quote):not(.home-tool-foot) { font-size: .97rem; color: var(--body); max-width: 520px; }
.home-tool-job { display: flex; align-items: center; gap: 10px; font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.home-tool .pt-quote { align-self: flex-start; }
.home-tool-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; font-size: .9rem; }
.home-tool-lead { grid-column: 1 / -1; background: var(--brand); color: #fff; padding: clamp(26px,4vw,44px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 32px; align-items: center; }
.home-tool-lead .home-tool-copy { display: flex; flex-direction: column; gap: 14px; }
.home-tool-lead h3 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
.home-tool-lead .home-tool-copy > p:not(.home-tool-job):not(.pt-quote):not(.home-tool-foot) { color: #ececeb; }
.home-tool-lead .pt-quote { color: var(--ink); }
.home-tool-lead .pt-tile-link { color: #fff; }
.home-tool-lead .pt-pill { background: #ffffff26; color: #fff; }
.home-tool-shot { min-width: 0; }
.home-tool-shot img { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 24px 50px #20222255; }
.home-tool-dark { background: var(--ink); color: #fff; }
.home-tool-dark > p:not(.home-tool-job):not(.pt-quote):not(.home-tool-foot) { color: #d9d6d4; }
.home-tool-dark .pt-quote { color: var(--ink); }
.home-tool-dark .pt-tile-link { color: #fff; }
.home-tool-grey { background: var(--grey); }
.home-tool-grey .home-tool-job { color: var(--ink); }
.home-tool .pt-peek { margin-top: auto; width: 140%; }
.home-tools + .pt-loop-again { margin-top: 28px !important; }

/* Receipts */
.home-receipts { background: var(--grey); padding: clamp(72px,10vw,120px) 0; overflow: hidden; }
.home-receipts .pt-lead { margin-top: 18px; }
.home-guards { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 14px; }
.home-guards li { display: grid; grid-template-columns: 26px minmax(0,1fr); gap: 12px; color: var(--muted); font-size: .93rem; }
.home-guards strong { display: block; color: var(--ink); font-size: 1rem; }
.home-receipt-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.home-receipt { filter: drop-shadow(0 20px 28px #20222230); min-width: 0; }
.home-receipt-a { transform: rotate(-2.5deg); }
.home-receipt-b { transform: rotate(2deg) translateY(36px); }

/* Pricing ({{pricingCompact}}: one Free card and three paid rows, checked by scripts/check.mjs) */
.price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 18px; align-items: stretch; }
.price-free { background: var(--ink); color: #fff; border-radius: 22px; padding: clamp(26px,4vw,36px); display: flex; flex-direction: column; gap: 14px; }
.price-free .plan-purpose, .price-paid .plan-purpose { font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.price-free .plan-purpose { color: #d9d6d4; }
.price-free-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.price-free-head h3 { font-size: 1.6rem; letter-spacing: -.03em; }
.price-free .plan-price { font-size: clamp(3.6rem, 7vw, 4.8rem); font-weight: 900; letter-spacing: -.06em; line-height: 1; }
.price-free-limits { color: #d9d6d4; font-size: .9rem; }
.price-free .plan-features { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 9px; font-size: .95rem; }
.price-free .plan-features li { display: grid; grid-template-columns: 20px minmax(0,1fr); gap: 8px; }
.price-free .plan-features li::before { content: "✓"; font-weight: 800; }
.price-free .btn { margin-top: auto; background: #fff; color: var(--brand-dark); border-radius: 100px; padding: .95rem 1.4rem; font-weight: 700; text-align: center; box-shadow: 0 6px 0 #00000040; }
.price-free .btn:hover { background: #ececeb; color: var(--brand-dark); }
.price-paid { display: flex; flex-direction: column; gap: 12px; }
.price-paid .plan-purpose { color: var(--brand); }
.price-paid h3 { font-size: 1.35rem; letter-spacing: -.03em; line-height: 1.15; }
.price-paid-sub { color: var(--muted); font-size: .92rem; }
.paid-row { display: grid; grid-template-columns: minmax(90px, auto) minmax(0, 1fr) auto; grid-template-areas: "name cap price"; gap: 16px; align-items: center; background: #fff; border: 1.5px solid var(--line); border-radius: 18px; padding: 20px 22px; }
.paid-row strong { grid-area: name; font-size: 1.2rem; letter-spacing: -.03em; }
.paid-cap { grid-area: cap; color: var(--body); font-size: .93rem; }
.paid-price { grid-area: price; font-size: 1.75rem; font-weight: 900; letter-spacing: -.05em; white-space: nowrap; text-align: right; }
.paid-price span { font-size: .85rem; font-weight: 600; letter-spacing: 0; color: var(--muted); }
.paid-row:nth-of-type(2) { border-color: var(--ink); }
.pricing-note { font-size: .84rem; color: var(--muted); }

/* Stocky and story */
.home-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 18px; }
.home-card { border: 1px solid var(--line); border-radius: 22px; padding: clamp(26px,4vw,36px); display: flex; flex-direction: column; gap: 14px; }
.home-card-grey { background: var(--grey); border-color: var(--grey); }
.home-card .pt-eyebrow { margin: 0 !important; }
.home-card-title { font-size: clamp(1.4rem, 2.4vw, 1.75rem); font-weight: 850; letter-spacing: -.04em; line-height: 1.1; }
.home-card > p { color: var(--body); font-size: .97rem; }
.home-card .pt-tile-link { margin-top: auto; }
.home-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; color: var(--body); font-size: .95rem; }
.home-steps li { display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 12px; align-items: start; }
.home-steps li span { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--ink); background: #fff; display: grid; place-items: center; font-size: .78rem; font-weight: 800; color: var(--ink); }
.home-story-head { display: flex; align-items: center; gap: 16px; }
.home-story-head img { width: 84px; height: auto; }
.home-disclosure { font-size: .84rem !important; color: var(--muted) !important; }

@media (max-width: 960px) {
  .home-panel .pt-receipt-float { margin: -8px auto 0; transform: rotate(-2deg); }
  .home-demo-note { text-align: left; }
}
@media (max-width: 760px) {
  .home-tools { grid-template-columns: minmax(0, 1fr); }
  .home-modes { display: flex; border-radius: 16px; }
  .home-modes .pt-tab { flex: 1 1 auto; }
}
@media (max-width: 560px) {
  .home-receipt-pair { grid-template-columns: minmax(0, 1fr); }
  .home-receipt-b { transform: rotate(1.5deg); }
  .paid-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name price" "cap cap"; gap: 6px 14px; }
}