/* ===========================================================
   GozAround homepage — 2026 warm editorial design.
   Ported from docs/homepage-mockup.html. Scoped under .hp so its
   generic class names (.hero, .btn, .card, .row, .stat, .head, .item,
   .price, .cta) cannot collide with public.css (which styles the shared
   site nav/footer that sit OUTSIDE .hp). Loaded only on the homepage.
   No gradients, glassmorphism, emoji icons, or stock photography.
   =========================================================== */

.hp {
  --espresso:#2c2620; --espresso-2:#3a332b;
  --orange:#df7103; --orange-deep:#b25a00; --orange-soft:#f6e6d3;
  --cream:#fff6eb; --paper:#fbf8f3; --sand:#f3ebdc;
  --line:#e9e0d0; --line-2:#ded2bd;
  --text:#39342c; --muted:#736d61;
  --serif:'DM Serif Display', Georgia, 'Times New Roman', serif;
  --grotesk:'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --body:'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-family:var(--body); color:var(--text); line-height:1.6;
  background:var(--paper); -webkit-font-smoothing:antialiased;
}
.hp *{box-sizing:border-box;margin:0;padding:0}
.hp .wrap{max-width:1120px;margin:0 auto;padding:0 22px}
.hp h1,.hp h2,.hp h3{font-family:var(--serif);font-weight:400;line-height:1.08;letter-spacing:-0.01em;color:var(--espresso)}
.hp a{color:inherit;text-decoration:none}

.hp .eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--grotesk);font-size:12px;font-weight:600;
  letter-spacing:0.16em;text-transform:uppercase;color:var(--orange-deep)}
.hp .eyebrow::before{content:"";width:22px;height:2px;background:var(--orange);display:inline-block}
.hp .num{font-family:var(--grotesk);font-weight:600;font-size:13px;letter-spacing:0.18em;color:var(--orange-deep)}

.hp .btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--grotesk);font-weight:600;font-size:15px;
  padding:14px 24px;border-radius:10px;border:1.5px solid transparent;cursor:pointer;transition:.18s;text-decoration:none}
.hp .btn--primary{background:var(--orange-deep);color:#fff}
.hp .btn--primary:hover{background:#8f4800}
.hp .btn--out{background:transparent;border-color:var(--line-2);color:var(--espresso)}
.hp .btn--out:hover{border-color:var(--espresso);background:var(--espresso);color:#fff}
.hp .btn--cream{background:var(--cream);color:var(--espresso)}
.hp .btn--cream:hover{background:#fff}
.hp .btn--ghost-d{background:transparent;border-color:rgba(255,255,255,.3);color:#fff}
.hp .btn--ghost-d:hover{border-color:#fff}

/* ===================== HERO ===================== */
.hp .hero{background:var(--cream);position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.hp .hero__in{position:relative;z-index:1;display:grid;grid-template-columns:1fr;gap:36px;padding:52px 0 60px}
.hp .hero h1{font-size:clamp(38px,8.5vw,60px);margin:18px 0 0}
.hp .hero .mark{position:relative;white-space:nowrap}
.hp .hero .mark::after{content:"";position:absolute;left:-2px;right:-2px;bottom:5px;height:11px;background:var(--orange-soft);z-index:-1}
.hp .hero p.lede{font-size:18px;color:var(--muted);max-width:34em;margin:22px 0 0}
.hp .hero .btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hp .hero__stats{display:grid;grid-template-columns:1fr;gap:18px;margin-top:34px;padding-top:24px;border-top:1px solid var(--line-2)}
@media(min-width:560px){.hp .hero__stats{grid-template-columns:repeat(3,1fr)}}
.hp .stat .n{font-family:var(--grotesk);font-weight:700;font-size:30px;color:var(--espresso);letter-spacing:-.02em}
.hp .stat .n em{color:var(--orange-deep);font-style:normal}
.hp .stat .l{font-family:var(--grotesk);font-size:12.5px;color:var(--muted);margin-top:5px;line-height:1.35}

.hp .hero__card{position:relative}
.hp .hero__card::before{content:"";position:absolute;inset:-14px -14px -14px 14px;background:var(--sand);border-radius:20px;z-index:0}
.hp .digest{position:relative;z-index:1;background:#fff;border-radius:16px;padding:22px;border:1px solid var(--line);box-shadow:0 26px 50px -32px rgba(44,38,32,.4)}
.hp .digest__head{display:flex;align-items:center;justify-content:space-between;padding-bottom:16px;border-bottom:1px solid var(--line)}
.hp .digest__title{font-family:var(--grotesk);font-weight:700;font-size:16px;display:flex;align-items:center;gap:10px;letter-spacing:-.01em;color:var(--espresso)}
.hp .gmark{width:26px;height:26px;border-radius:7px;background:var(--orange);color:#fff;font-family:var(--grotesk);font-weight:700;display:inline-flex;align-items:center;justify-content:center;font-size:15px;flex:0 0 26px}
.hp .digest__when{font-family:var(--grotesk);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.hp .row{display:flex;gap:12px;padding:15px 0;border-bottom:1px solid var(--line)}
.hp .row:last-child{border-bottom:0;padding-bottom:2px}
.hp .tick{flex:0 0 22px;height:22px;border-radius:50%;background:var(--orange-soft);color:var(--orange-deep);display:flex;align-items:center;justify-content:center;margin-top:1px}
.hp .tick svg{width:13px;height:13px}
.hp .row .a{font-size:14.5px;font-weight:500;color:var(--espresso);display:block}
.hp .chip{display:inline-block;margin-top:7px;font-family:var(--grotesk);font-size:11.5px;font-weight:600;padding:3px 10px;border-radius:6px}
.hp .chip--auto{background:#edf1ec;color:#4a6b50}
.hp .chip--ok{background:var(--orange-soft);color:var(--orange-deep)}
.hp .chip--wait{background:#fff;border:1px dashed var(--line-2);color:var(--muted)}
.hp .digest__foot{display:flex;justify-content:space-between;align-items:center;margin-top:16px}
.hp .seeall{font-family:var(--grotesk);font-weight:600;font-size:13.5px;color:var(--orange-deep)}
.hp .samp{font-family:var(--grotesk);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#b9b3a6;border:1px solid var(--line);padding:3px 8px;border-radius:5px}
@media(min-width:880px){.hp .hero__in{grid-template-columns:1.04fr .96fr;align-items:center;gap:54px;padding:74px 0 84px}.hp .digest{padding:26px}}

/* ===================== SECTION shells ===================== */
.hp .block{padding:72px 0}
.hp .block--paper{background:var(--paper)}
.hp .block--sand{background:var(--sand)}
.hp .block--cream{background:var(--cream)}
.hp .head{max-width:660px;margin-bottom:40px}
.hp .head h2{font-size:clamp(30px,5.6vw,44px);margin:14px 0 0}
.hp .head p{color:var(--muted);font-size:17px;margin-top:14px}

/* ----- problem / contrast ----- */
.hp .contrast{font-family:var(--serif);font-size:clamp(20px,3vw,26px);color:var(--espresso);margin:6px 0 30px;max-width:30em}
.hp .contrast b{color:var(--orange-deep);font-weight:400}
.hp .prob-grid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:620px){.hp .prob-grid{grid-template-columns:1fr 1fr}}
@media(min-width:980px){.hp .prob-grid{grid-template-columns:repeat(4,1fr)}}
.hp .prob-item{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.hp .prob-item svg{flex:0 0 20px;width:20px;height:20px;stroke:var(--orange-deep);stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round;margin-top:2px}
.hp .prob-item span{font-size:14.5px;color:var(--text)}
.hp .prob-close{margin-top:30px;color:var(--muted);font-size:17px;max-width:46em}
.hp .motif{margin-top:36px;padding:24px 28px;background:var(--espresso);border-radius:16px;text-align:center;
  font-family:var(--grotesk);font-weight:600;font-size:clamp(17px,2.4vw,22px);color:#fff;letter-spacing:-.01em}
.hp .motif b{color:#f6b67a;font-weight:600}

/* ----- deliverables ----- */
.hp .deliver{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--line-2)}
.hp .item{display:grid;grid-template-columns:30px 1fr;gap:18px;padding:26px 0;border-bottom:1px solid var(--line-2);align-items:start}
.hp .item__ic svg{width:30px;height:30px;stroke:var(--orange-deep);stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.hp .item h3{font-family:var(--grotesk);font-weight:600;font-size:18px;color:var(--espresso);letter-spacing:-.01em}
.hp .item p{color:var(--muted);font-size:15px;margin-top:6px;max-width:46em}
@media(min-width:760px){.hp .deliver{grid-template-columns:1fr 1fr;column-gap:56px}.hp .item{padding:28px 0}}

/* ----- how it works ----- */
.hp .steps{border-top:1px solid var(--line-2)}
.hp .step{display:grid;grid-template-columns:auto 1fr;gap:22px;padding:24px 0;border-bottom:1px solid var(--line-2);align-items:start}
.hp .step__n{font-family:var(--serif);font-size:38px;line-height:.9;color:var(--orange-deep);min-width:46px}
.hp .step h3{font-family:var(--grotesk);font-weight:600;font-size:19px;color:var(--espresso)}
.hp .step p{color:var(--muted);font-size:15px;margin-top:5px;max-width:50em}

/* ----- keep the keys ----- */
.hp .keys{display:grid;grid-template-columns:1fr;gap:36px;align-items:center}
.hp .keys__list{list-style:none;margin-top:24px;display:grid;gap:14px}
.hp .keys__list li{display:flex;gap:12px;font-size:15.5px;color:var(--text)}
.hp .keys__list .k{flex:0 0 22px;height:22px;border-radius:50%;background:var(--espresso);display:flex;align-items:center;justify-content:center;margin-top:2px}
.hp .keys__list .k svg{width:12px;height:12px;stroke:#fff;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.hp .keys__frame{background:#fff;border:1px solid var(--line);border-radius:16px;padding:8px;box-shadow:0 22px 46px -34px rgba(44,38,32,.45)}
@media(min-width:880px){.hp .keys{grid-template-columns:.92fr 1.08fr;gap:56px}}

/* ----- trust / controls ----- */
.hp .trust-grid{display:grid;grid-template-columns:1fr;gap:16px;margin-top:8px}
@media(min-width:620px){.hp .trust-grid{grid-template-columns:1fr 1fr}}
@media(min-width:920px){.hp .trust-grid{grid-template-columns:1fr 1fr 1fr}}
.hp .trust-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px}
.hp .trust-card .tc-ic{width:34px;height:34px;border-radius:9px;background:var(--orange-soft);color:var(--orange-deep);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.hp .trust-card .tc-ic svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.hp .trust-card h3{font-family:var(--grotesk);font-weight:600;font-size:16px;color:var(--espresso)}
.hp .trust-card p{color:var(--muted);font-size:14px;margin-top:7px}

/* ----- employee experience ----- */
.hp .twocol{display:grid;grid-template-columns:1fr;gap:36px;align-items:center}
@media(min-width:880px){.hp .twocol{grid-template-columns:1fr 1fr;gap:54px}}
.hp .notify{background:#fff;border:1px solid var(--line);border-radius:16px;max-width:430px;box-shadow:0 22px 46px -34px rgba(44,38,32,.45);overflow:hidden}
.hp .notify__top{display:flex;align-items:center;gap:11px;padding:16px 20px;border-bottom:1px solid var(--line)}
.hp .notify__title{font-family:var(--grotesk);font-weight:700;font-size:15px;color:var(--espresso)}
.hp .notify__body{padding:18px 20px;font-size:15px;color:var(--text);line-height:1.65}
.hp .notify__body .amt{color:var(--orange-deep);font-weight:600}
.hp .notify__status{display:flex;align-items:center;gap:9px;padding:14px 20px;border-top:1px solid var(--line);background:var(--paper);font-family:var(--grotesk);font-size:12.5px;color:var(--muted)}
.hp .notify__status .tick{flex:0 0 18px;height:18px}
.hp .notify__status .tick svg{width:11px;height:11px}

/* ===================== PRODUCT SCREENSHOT ===================== */
.hp .shotsec{text-align:center}
.hp .shot{max-width:980px;margin:0 auto;border-radius:14px;overflow:hidden;border:1px solid var(--line);box-shadow:0 34px 64px -34px rgba(44,38,32,.55);background:#fff}
.hp .shot__bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:#f1e9da;border-bottom:1px solid var(--line)}
.hp .shot__dot{width:11px;height:11px;border-radius:50%;background:#d6c8b1}
.hp .shot__url{margin-left:12px;font-family:var(--grotesk);font-size:12px;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:6px;padding:4px 14px}
.hp .shot img{display:block;width:100%;height:auto}
.hp .shotcap{font-family:var(--grotesk);font-size:13.5px;color:var(--muted);margin-top:18px;max-width:46em;margin-left:auto;margin-right:auto}

/* ===================== PRICING ===================== */
.hp .price{display:grid;grid-template-columns:1fr;gap:34px;align-items:center}
@media(min-width:880px){.hp .price{grid-template-columns:1.05fr .95fr;gap:54px}}
.hp .price-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:30px;box-shadow:0 24px 50px -34px rgba(44,38,32,.45)}
.hp .price-card .tag{font-family:var(--grotesk);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.hp .price-card .amt{font-family:var(--serif);font-size:48px;color:var(--espresso);line-height:1;margin:6px 0 2px}
.hp .price-card .amt span{color:var(--orange-deep)}
.hp .price-card .per{font-family:var(--grotesk);color:var(--muted);font-size:14px}
.hp .price-card .meta{font-family:var(--grotesk);font-size:13px;color:var(--muted);margin-top:10px;display:grid;gap:4px}
.hp .price-card .ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.hp .price-card .note{font-family:var(--grotesk);font-size:12.5px;color:var(--muted);margin-top:14px;line-height:1.5}
.hp .price__list{list-style:none;display:grid;gap:13px;margin-top:6px}
.hp .price__list li{display:flex;gap:11px;font-size:15.5px;color:var(--text)}
.hp .price__list .k{flex:0 0 22px;height:22px;border-radius:50%;background:var(--orange-soft);color:var(--orange-deep);display:flex;align-items:center;justify-content:center;margin-top:2px}
.hp .price__list .k svg{width:12px;height:12px;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* ===================== CTA ===================== */
.hp .cta{background:var(--espresso);color:#fff;text-align:center;padding:74px 0}
.hp .cta h2{color:#fff;font-size:clamp(30px,5.6vw,46px);max-width:18em;margin:0 auto}
.hp .cta p{font-family:var(--grotesk);font-weight:500;color:#e8ddcc;margin:16px auto 0;max-width:34em}
.hp .cta .btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px}

/* ===================== REFINEMENT JUNE 2026 ===================== */
/* CTA microcopy */
.hp .micro{font-family:var(--grotesk);font-size:12.5px;color:var(--muted);margin-top:12px}
.hp .cta .micro{color:#cdbfa6;margin-top:14px}

/* example-workflow card extras (reuses .digest/.row/.chip) */
.hp .wf-label{font-family:var(--grotesk);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-deep);margin-bottom:10px}
.hp .wf-note{font-family:var(--grotesk);font-size:11.5px;color:var(--muted);margin-top:14px;line-height:1.5}
.hp .row .rt{font-family:var(--grotesk);font-weight:600;font-size:13px;color:var(--espresso);display:block;margin-bottom:2px}

/* compact trust badge row */
.hp .badges{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(min-width:760px){.hp .badges{grid-template-columns:repeat(4,1fr)}}
.hp .badge{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.hp .badge .bn{font-family:var(--grotesk);font-weight:700;font-size:18px;color:var(--espresso);letter-spacing:-.01em}
.hp .badge .bn em{color:var(--orange-deep);font-style:normal}
.hp .badge .bl{font-size:13px;color:var(--muted);margin-top:5px;line-height:1.4}

/* contrast: most platforms vs GozAround */
.hp .vs-anchor{font-family:var(--serif);font-size:clamp(26px,4.5vw,40px);color:var(--espresso);text-align:center;max-width:16em;margin:0 auto;line-height:1.12}
.hp .vs-anchor b{color:var(--orange-deep);font-weight:400}
.hp .vs-grid{display:grid;grid-template-columns:1fr;gap:18px;margin-top:38px}
@media(min-width:760px){.hp .vs-grid{grid-template-columns:1fr 1fr;gap:24px}}
.hp .vs-col{border:1px solid var(--line);border-radius:16px;padding:26px 24px;background:#fff}
.hp .vs-col--brand{background:var(--espresso);border-color:var(--espresso)}
.hp .vs-col h3{font-family:var(--grotesk);font-weight:600;font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:16px}
.hp .vs-col--muted h3{color:var(--muted)}
.hp .vs-col--brand h3{color:#f6b67a}
.hp .vs-list{list-style:none;display:grid;gap:12px}
.hp .vs-list li{display:flex;gap:11px;align-items:center;font-size:16px}
.hp .vs-col--muted li{color:var(--muted)}
.hp .vs-col--brand li{color:#fff}
.hp .vs-ic{flex:0 0 18px;width:18px;height:18px;display:inline-flex}
.hp .vs-ic svg{width:18px;height:18px;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hp .vs-col--muted .vs-ic{color:#bfae9c}
.hp .vs-col--brand .vs-ic{color:#7fcf9b}

/* problem mini graphics */
.hp .pg{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.hp .pg__h{display:flex;align-items:center;gap:9px;font-family:var(--grotesk);font-weight:600;font-size:14px;color:var(--espresso);margin-bottom:10px}
.hp .pg__h svg{width:17px;height:17px;stroke:var(--muted);stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.hp .pg__r{font-size:13.5px;color:var(--muted);padding:6px 0 0;border-top:1px solid var(--line);margin-top:4px}
.hp .pg__r b{color:#a4543f;font-weight:600}

/* settings / controls card */
.hp .setcard{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 22px 46px -34px rgba(44,38,32,.45);overflow:hidden}
.hp .setcard__h{display:flex;align-items:center;gap:10px;padding:15px 18px;border-bottom:1px solid var(--line)}
.hp .set-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 18px;border-bottom:1px solid var(--line)}
.hp .set-row:last-child{border-bottom:0}
.hp .set-k{font-size:14.5px;color:var(--text)}
.hp .set-v{font-family:var(--grotesk);font-weight:600;font-size:12.5px;color:var(--orange-deep);background:var(--orange-soft);border-radius:6px;padding:4px 11px;white-space:nowrap}
.hp .set-v--neutral{color:var(--muted);background:#f0ece4}

/* payment-batch + board-update mock cards */
.hp .mockcard{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 22px 46px -34px rgba(44,38,32,.45);overflow:hidden}
.hp .mockcard__h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 20px;border-bottom:1px solid var(--line)}
.hp .mockcard__t{font-family:var(--grotesk);font-weight:700;font-size:15px;color:var(--espresso)}
.hp .mockcard__b{padding:4px 20px 6px}
.hp .mockcard__row{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14px;color:var(--text)}
.hp .mockcard__row:last-child{border-bottom:0}
.hp .mockcard__row .v{font-family:var(--grotesk);font-weight:600;color:var(--espresso)}
.hp .mockcard__f{display:flex;align-items:center;gap:9px;padding:14px 20px;border-top:1px solid var(--line);background:var(--paper);font-family:var(--grotesk);font-size:12.5px;color:var(--muted)}
.hp .mockcard__f .tick{flex:0 0 18px;height:18px}
.hp .mockcard__f .tick svg{width:11px;height:11px}

/* role-based example cards (Before -> After) */
.hp .roles-grid{display:grid;grid-template-columns:1fr;gap:18px;margin-top:8px}
@media(min-width:620px){.hp .roles-grid{grid-template-columns:1fr 1fr}}
.hp .role-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px;box-shadow:0 1px 2px rgba(44,38,32,.04)}
.hp .role-head{display:flex;align-items:center;gap:11px;margin-bottom:18px}
.hp .role-ic{flex:0 0 34px;width:34px;height:34px;border-radius:9px;background:var(--orange-soft);color:var(--orange-deep);display:flex;align-items:center;justify-content:center}
.hp .role-ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.hp .role-head h3{font-family:var(--grotesk);font-weight:600;font-size:17px;letter-spacing:-.01em;color:var(--espresso);margin:0}
.hp .role-ba{display:grid;gap:0}
.hp .ba-item{padding:13px 15px;border-radius:11px}
.hp .ba-item--before{background:var(--paper);border:1px solid var(--line)}
.hp .ba-item--after{background:var(--orange-soft);border:1px solid #f0d9bd}
.hp .ba-tag{display:inline-block;font-family:var(--grotesk);font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:5px}
.hp .ba-item--before .ba-tag{color:var(--muted)}
.hp .ba-item--after .ba-tag{color:var(--orange-deep)}
.hp .ba-txt{font-size:14.5px;line-height:1.5}
.hp .ba-item--before .ba-txt{color:var(--muted)}
.hp .ba-item--after .ba-txt{color:var(--espresso);font-weight:500}
.hp .ba-arrow{display:flex;justify-content:center;color:#c9b9a6;padding:7px 0}
.hp .ba-arrow svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* FAQ */
.hp .faq{max-width:760px;margin:0 auto}
.hp .faq-item{border-bottom:1px solid var(--line-2)}
.hp .faq-q{width:100%;text-align:left;background:none;border:0;cursor:pointer;padding:20px 0;display:flex;justify-content:space-between;gap:16px;align-items:center;font-family:var(--grotesk);font-weight:600;font-size:17px;color:var(--espresso)}
.hp .faq-q .pm{flex:0 0 18px;color:var(--orange-deep);font-size:22px;line-height:1;transition:transform .2s}
.hp .faq-item.open .faq-q .pm{transform:rotate(45deg)}
.hp .faq-a{max-height:0;overflow:hidden;transition:max-height .28s ease}
.hp .faq-item.open .faq-a{max-height:360px}
.hp .faq-a p{color:var(--muted);font-size:15.5px;padding:0 0 20px;line-height:1.65}

/* mobile: smaller hero headline, tighter rhythm, workflow card overlaps hero bottom */
@media(max-width:879px){
  .hp .hero{overflow:visible}
  .hp .hero h1{font-size:clamp(33px,8.2vw,44px);line-height:1.05}
  .hp .hero__in{padding:38px 0 0}
  .hp .hero__card{margin:10px 0 -40px;position:relative;z-index:3}
  .hp .block{padding:54px 0}
  .hp .head{margin-bottom:30px}
}

/* ============================================================
   ELEVATION (June 2026) — light/dark cadence, scale contrast,
   dashboard centerpiece, timeline, calm motion. Layered overrides.
   ============================================================ */
/* darker body copy for legibility on warm grounds */
.hp{ --muted:#615b51; }

/* hero: bigger serif, more scale contrast, desktop overlap */
.hp .hero h1{ font-size:clamp(40px,6.2vw,76px); line-height:1.02; letter-spacing:-.02em; }
.hp .hero p.lede{ margin-top:26px; }
@media(min-width:880px){
  .hp .hero{ overflow:visible; }
  .hp .hero__card{ margin-bottom:-76px; position:relative; z-index:3; }
}

/* secondary CTA as a quiet text link */
.hp .btn-link{ display:inline-flex; align-items:center; gap:7px; font-family:var(--grotesk); font-weight:600; font-size:15px; color:var(--orange-deep); background:none; border:0; padding:14px 4px; cursor:pointer; }
.hp .btn-link:hover{ color:#8f4800; }
.hp .btn-link svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.hp .cta .btn-link{ color:#f6b67a; }
.hp .cta .btn-link:hover{ color:#fff; }

/* ---- dark section treatment ---- */
.hp .block--dark{ background:var(--espresso); color:#fff; }
.hp .block--dark h2, .hp .block--dark h3, .hp .block--dark .head h2{ color:#fff; }
.hp .block--dark .head p, .hp .block--dark > .wrap > p, .hp .block--dark p{ color:#d8cdbb; }
.hp .block--dark .eyebrow, .hp .block--dark .num{ color:#f6b67a; }
.hp .block--dark .eyebrow::before{ background:#f6b67a; }
.hp .block--dark .btn--out{ border-color:rgba(255,255,255,.4); color:#fff; }
.hp .block--dark .btn--out:hover{ background:#fff; color:var(--espresso); border-color:#fff; }

/* how it works: timeline with large hanging numerals */
.hp .step{ gap:26px; }
.hp .step__n{ font-size:clamp(42px,5vw,66px); line-height:.82; min-width:66px; color:var(--orange-deep); }
.hp .block--dark .steps{ border-top-color:rgba(255,255,255,.16); }
.hp .block--dark .step{ border-bottom-color:rgba(255,255,255,.16); }
.hp .block--dark .step__n{ color:#f6b67a; }
.hp .block--dark .step h3{ color:#fff; }
.hp .block--dark .step p{ color:#cdbfa6; }

/* dashboard centerpiece on a dark stage */
.hp .block--dark .shot{ max-width:1040px; box-shadow:0 44px 90px -40px rgba(0,0,0,.62); }
.hp .block--dark .shotcap{ color:#bdb09c; }
.hp .dash-callouts{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:20px auto 0; max-width:980px; }
.hp .dash-chip{ display:inline-flex; align-items:center; gap:8px; font-family:var(--grotesk); font-weight:600; font-size:12.5px; color:#bfe7df; background:rgba(15,125,114,.20); border:1px solid rgba(15,125,114,.45); border-radius:100px; padding:7px 14px; }
.hp .dash-chip .dot{ width:7px; height:7px; border-radius:50%; background:#3fbf9e; }

/* built for review on dark: white cards pop, intro + keys text light */
.hp .block--dark .keys__list li{ color:#e8ddcc; }
.hp .block--dark .keys__list .k{ background:#f6b67a; }
.hp .block--dark .keys__list .k svg{ stroke:var(--espresso); }
.hp .block--dark .mockcard, .hp .block--dark .trust-card{ box-shadow:0 22px 46px -30px rgba(0,0,0,.5); }
/* keep the white trust cards readable: the dark-section h2/h3/p color rules must
   not bleed into white cards (they sit on white, so text stays dark) */
.hp .block--dark .trust-card{ background:#fff; }
.hp .block--dark .trust-card h3{ color:var(--espresso); }
.hp .block--dark .trust-card p{ color:var(--muted); }

/* deliverables: let the first item read as a lead (subtle weighting) */
@media(min-width:760px){
  .hp .deliver .item:first-child{ grid-column:1 / -1; border-top:0; padding-top:6px; }
  .hp .deliver .item:first-child h3{ font-size:21px; }
  .hp .deliver .item:first-child p{ font-size:16px; max-width:60em; }
}

/* calm one-time reveal on scroll (default visible; only animates when JS adds .fx-on) */
.hp.fx-on .fx{ opacity:0; transform:translateY(14px); }
.hp.fx-on .fx.fx-in{ opacity:1; transform:none; transition:opacity .55s ease, transform .55s ease; }
@media(prefers-reduced-motion:reduce){ .hp.fx-on .fx{ opacity:1; transform:none; transition:none; } }