/* Extends hoplyy's existing mint palette, Fredoka display type and rabbit identity. */
:root { --btn-ink:#102d23; --cta-ink:#102d23; --cta-muted:#174d39; }
html { scroll-padding-top:100px; }
.reveal { opacity:1; transform:none; }
.nav-inner { max-width:1280px; }
.nav-links { gap:22px; }
.nav-links a { white-space:nowrap; }
.nav .btn-primary { color:#102d23; }
.hero.split-hero { max-width:1280px; padding-top:155px; padding-bottom:58px; display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; text-align:left; }
.split-hero h1 { font-size:clamp(44px,5.1vw,70px); line-height:1.07; letter-spacing:-1.4px; }
.split-hero h1 .hl { white-space:normal; }
.split-hero .sub { margin:26px 0 0; max-width:510px; font-size:18px; }
.split-hero .hero-ctas { justify-content:flex-start; gap:12px; margin-top:28px; }
.hero-kicker,.eyebrow { font-size:13px; letter-spacing:1.5px; font-weight:700; text-transform:uppercase; color:var(--hop-deep); }
.hero-kicker { margin-bottom:24px; display:flex; align-items:center; gap:9px; }
.hero-kicker::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--hop); box-shadow:0 0 0 5px var(--hop-soft); }
.hero-reassurance { margin-top:22px; font-size:14px; color:var(--ink-2); }
.hero-showcase { min-width:0; position:relative; padding:20px 0 0; }
.showcase-note { font-family:var(--font-display); font-size:19px; margin:0 0 17px 24px; color:var(--ink-2); transform:rotate(-3deg); }
.showcase-note span { font-size:32px; margin-left:16px; color:var(--hop-deep); }
.showcase-window { position:relative; background:var(--card); border:1px solid var(--hairline); border-radius:18px; box-shadow:var(--shadow-lg); transform:rotate(2deg); }
.browser-bar { display:flex; justify-content:space-between; gap:12px; align-items:center; padding:12px 16px; color:var(--ink-2); font-size:12px; border-bottom:1px solid var(--hairline); }
.browser-bar>span:first-child { letter-spacing:3px; color:var(--hop-deep); }
.showcase-window>a { display:block; height:340px; overflow:hidden; border-radius:0 0 17px 17px; }
.showcase-window img { display:block; width:100%; height:auto; min-height:100%; object-fit:cover; object-position:top; }
.showcase-sticker { position:absolute; right:-18px; bottom:28px; background:#f7df72; color:#293028; padding:14px 21px; border-radius:8px; transform:rotate(-7deg); font-size:14px; box-shadow:0 6px 20px #0001; line-height:1.45; }
.showcase-sticker strong { font-family:var(--font-display); font-size:20px; font-weight:500; }
.showcase-picker { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:7px; margin-top:26px; }
.showcase-picker>span { width:100%; text-align:center; margin-bottom:3px; font-size:12px; color:var(--ink-2); }
.showcase-picker button,.theme-filter button { font:inherit; font-size:14px; cursor:pointer; background:var(--card); color:var(--ink); border:1px solid var(--hairline); border-radius:99px; padding:8px 14px; transition:transform .2s,background .2s; }
.showcase-picker button[aria-pressed=true],.theme-filter button[aria-pressed=true] { background:var(--ink); color:var(--paper); }
.showcase-picker button:hover { transform:translateY(-2px); }
.showcase-caption { margin-top:12px; font-size:13px; text-align:center; color:var(--ink-2); }
.trust-strip { border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); padding:22px 0; }
.trust-strip .wrap { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; font-size:14px; color:var(--ink-2); }
.trust-strip strong { font-family:var(--font-display); color:var(--ink); font-size:20px; font-weight:500; }
.section { margin-top:100px; padding-top:0; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:30px; margin-bottom:34px; }
.section-heading h2,.case-copy h2,.faq-intro h2 { font-size:clamp(32px,4vw,48px); line-height:1.12; margin-top:12px; }
.section-heading p:not(.eyebrow) { max-width:430px; color:var(--ink-2); margin-top:17px; }
.text-link { font-weight:600; text-underline-offset:5px; text-decoration-thickness:1px; }
.theme-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.theme-card { min-width:0; border:1px solid var(--hairline); background:var(--card); border-radius:18px; overflow:hidden; transition:transform .25s,box-shadow .25s; }
.theme-card:hover { transform:translateY(-6px); box-shadow:var(--shadow); }
.theme-image { display:block; height:270px; overflow:hidden; padding:22px 18px 0; background:#e5eadb; }
.theme-card[data-theme-name=happy] .theme-image { background:#e6def7; }
.theme-card[data-theme-name=journeyman] .theme-image { background:#f4e7d6; }
.theme-image img { display:block; width:100%; height:auto; border-radius:8px 8px 0 0; box-shadow:0 8px 24px #0002; transition:transform .7s ease; }
.theme-card:hover .theme-image img { transform:translateY(-12px); }
.theme-content { padding:25px; }
.theme-content h3 { font-size:30px; line-height:1.1; margin:12px 0; }
.theme-audience { color:var(--hop-deep); font-size:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase; }
.theme-content p { font-size:16px; color:var(--ink-2); }
.theme-content ul { padding-left:18px; font-size:14px; color:var(--ink-2); margin:18px 0 23px; }
.theme-actions { display:flex; flex-wrap:wrap; gap:12px 20px; font-size:14px; }
.section-note { color:var(--ink-2); font-size:14px; margin-top:22px; }
.case-feature { background:var(--inset); border:1px solid var(--hairline); border-radius:24px; padding:45px; display:grid; grid-template-columns:.85fr 1.15fr; gap:40px; align-items:center; }
.case-copy p:not(.eyebrow) { margin-top:22px; color:var(--ink-2); }
.case-copy .text-link { display:inline-block; margin-top:24px; }
.case-facts { display:flex; gap:28px; border-top:1px solid var(--hairline); margin-top:26px; padding-top:22px; }
.case-facts strong { display:block; font-family:var(--font-display); font-size:34px; line-height:1.2; }
.case-facts span { font-size:13px; color:var(--ink-2); }
.comparison { margin:0; min-width:0; }
.comparison-viewport { position:relative; border-radius:12px; overflow:hidden; aspect-ratio:1.6; background:#092039; box-shadow:var(--shadow); touch-action:pan-y; cursor:ew-resize; user-select:none; }
.comparison-viewport img { display:block; position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.comparison-before { clip-path:inset(0 calc(100% - var(--compare,50%)) 0 0); }
.comparison-divider { position:absolute; top:0; bottom:0; left:var(--compare,50%); width:3px; background:white; transform:translateX(-50%); pointer-events:none; }
.comparison-divider::after { content:"↔"; display:grid; place-items:center; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:42px; height:42px; background:white; color:#163428; border-radius:50%; box-shadow:0 2px 14px #0003; }
.compare-label { position:absolute; top:12px; background:#102c25; color:white; border-radius:6px; padding:4px 9px; font-size:12px; }
.compare-label.before { left:12px; }.compare-label.after { right:12px; }
.comparison label { display:block; font-size:14px; margin-top:16px; color:var(--ink-2); }
.comparison input { width:100%; accent-color:var(--hop-deep); margin:6px 0 0; min-height:40px; cursor:ew-resize; }
.comparison figcaption { font-size:12px; margin-top:7px; color:var(--ink-2); }
.market-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 40px; }
.market-item { text-decoration:none; display:grid; grid-template-columns:46px 1fr 24px; gap:12px; padding:27px 0; border-top:1px solid var(--hairline); }
.market-item>span:first-child { font-family:var(--font-display); font-size:22px; color:var(--hop-deep); }
.market-item h3 { font-size:23px; margin-bottom:8px; }
.market-item p { font-size:16px; color:var(--ink-2); }
.market-item>span:last-child { font-size:24px; transition:transform .2s; }.market-item:hover>span:last-child { transform:translate(3px,-3px); }
.faq-grid { display:grid; grid-template-columns:.7fr 1.3fr; gap:65px; }
.faq-intro p:not(.eyebrow) { color:var(--ink-2); margin-top:20px; }
.faq-list details { border-bottom:1px solid var(--hairline); padding:22px 0; }.faq-list details:first-child { border-top:1px solid var(--hairline); }
.faq-list summary { cursor:pointer; font-weight:600; padding-right:20px; }.faq-list details p { color:var(--ink-2); padding-top:15px; font-size:16px; }
.cta-card .lede,.cta-card .cta-fine { color:var(--cta-muted); }.cta-card { color:var(--cta-ink); }
.cta-card .btn-primary { background:#143e2e; color:white; }
.cta-card .eyebrow,.cta-card .btn-ghost { color:#143e2e; }
.cta-card input { color:#23282c; }.audit-form label:not(.hp) { color:#143e2e; text-align:left; font-size:14px; font-weight:600; }.audit-form label input { display:block; width:100%; margin-top:6px; }.audit-form .hp { position:absolute; }
.cta-alternate { margin-top:20px; font-size:15px; }
.footer .tagline { color:var(--ink-2); }.footer-links { flex-wrap:wrap; }
.mobile-menu { display:none; }.menu-toggle { font:inherit; background:var(--card); color:var(--ink); border:1px solid var(--hairline); border-radius:99px; padding:9px 16px; cursor:pointer; }
.page-hero { padding-top:145px; max-width:920px; }.page-hero h1 { font-size:clamp(40px,5.5vw,66px); line-height:1.08; margin:18px 0 24px; }.page-hero .lede { font-size:20px; color:var(--ink-2); max-width:730px; }.page-hero .hero-ctas { justify-content:flex-start; }
.breadcrumbs { font-size:14px; color:var(--ink-2); margin-bottom:24px; }.breadcrumbs a { text-underline-offset:4px; }
.content-prose { max-width:820px; }.content-prose h2 { font-size:34px; line-height:1.2; margin-bottom:22px; }.content-prose p { margin-bottom:20px; color:var(--ink-2); }.content-prose li { margin-bottom:12px; color:var(--ink-2); }
.case-wide { margin-top:50px; }.case-wide .comparison { max-width:1040px; margin:auto; }
.outcome-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:30px; }.outcome { border-top:3px solid var(--hop); padding-top:22px; }.outcome strong { display:block; font-size:40px; font-family:var(--font-display); }.outcome p { font-size:16px; color:var(--ink-2); margin-top:8px; }
.process-list { counter-reset:steps; list-style:none; padding:0; }.process-list li { padding:22px 0; border-top:1px solid var(--hairline); }.process-list h3 { font-size:23px; color:var(--ink); margin-bottom:10px; }
@media(max-width:1050px) { .hero.split-hero { gap:30px; }.nav-links { gap:15px; }.case-feature { padding:30px; gap:28px; }.theme-content { padding:22px; }.showcase-window>a { height:285px; } }
@media(max-width:800px) { .hero.split-hero { grid-template-columns:1fr; padding-top:120px; gap:35px; }.split-hero h1 { max-width:650px; }.split-hero .sub { max-width:650px; }.hero-showcase { width:min(100%,580px); margin:auto; }.showcase-window>a { height:345px; }.theme-grid { grid-template-columns:1fr; }.theme-card { display:grid; grid-template-columns:.9fr 1.1fr; }.theme-image { height:100%; min-height:300px; }.case-feature,.faq-grid { grid-template-columns:1fr; }.case-copy { max-width:560px; }.section-heading { align-items:start; flex-direction:column; gap:16px; }.section { margin-top:72px; }.market-grid { gap:0 24px; }.nav-links>a:not(.btn) { display:none; }.mobile-menu { display:block; margin-left:auto; }.nav-links { margin-left:0; }.mobile-menu nav { position:absolute; left:16px; right:16px; top:76px; display:flex; flex-direction:column; padding:18px; border:1px solid var(--hairline); border-radius:14px; background:var(--card); box-shadow:var(--shadow); }.mobile-menu a { padding:10px; text-decoration:none; }.mobile-menu summary { list-style:none; }.mobile-menu summary::-webkit-details-marker { display:none; } }
@media(max-width:540px) { .hero.split-hero { padding-top:112px; }.split-hero h1 { font-size:44px; letter-spacing:-.5px; }.showcase-window { transform:rotate(1deg); }.showcase-window>a { height:260px; }.showcase-sticker { right:-4px; bottom:14px; padding:10px 14px; }.showcase-sticker strong { font-size:17px; }.showcase-note { font-size:17px; margin-left:4px; }.browser-bar { font-size:10px; }.trust-strip .wrap { justify-content:center; gap:12px 24px; }.trust-strip strong { width:100%; text-align:center; }.theme-card { display:block; }.theme-image { height:290px; min-height:0; }.case-feature { padding:24px 18px; border-radius:18px; }.case-facts { gap:24px; }.market-grid,.outcome-grid { grid-template-columns:1fr; }.faq-grid { gap:30px; }.nav-inner { gap:12px; padding:0 18px; }.nav .btn-sm { font-size:13px; padding:10px 13px; }.nav .mark { font-size:26px; }.menu-toggle { padding:8px 11px; font-size:14px; }.footer-inner { padding-bottom:35px; }.footer-links { margin-left:0; gap:15px; }.page-hero { padding-top:120px; }.showcase-picker button { padding:8px 12px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none !important; transition:none !important; }.rise,.reveal { opacity:1; transform:none; } }