.htb-hero{background:linear-gradient(180deg, var(--color-cream) 0%, var(--color-off-white) 100%);padding:3rem 0 2rem}.htb-hero__grid{grid-template-columns:1fr;align-items:center;gap:1.5rem;display:grid}@media (width>=768px){.htb-hero__grid{grid-template-columns:1.4fr 1fr;gap:2.5rem}}.htb-eyebrow{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--color-primary);background:var(--color-primary-bg);border-radius:var(--radius-full);padding:6px 12px;font-weight:700;display:inline-block}.htb-hero__title{letter-spacing:-.025em;color:var(--color-charcoal);margin:1rem 0;font-size:clamp(2rem,4.5vw,3rem);font-weight:700;line-height:1.05}.htb-hero__lede{font-size:var(--text-lg);color:var(--color-text-muted);max-width:560px}.htb-hero__art{justify-content:center;display:flex;position:relative}.htb-hero__art img{filter:drop-shadow(0 12px 28px #1c1c1c1f);width:auto;max-width:100%;height:auto}.htb-hero__badge{background:var(--color-white);border:1px solid var(--color-border);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);font-size:var(--text-sm);align-items:center;gap:10px;padding:12px 16px;font-weight:600;display:inline-flex;position:absolute;bottom:8%;right:6%}.htb-hero__badge-dot{background:var(--color-success);width:10px;height:10px;box-shadow:0 0 0 4px var(--color-success-bg);border-radius:50%}.mockup-frame{background:radial-gradient(circle at 50% 0%, #2563eb1a, transparent 50%), var(--color-light-cream);border:1px solid var(--color-border);border-radius:var(--radius-2xl);padding:var(--space-4) var(--space-3);margin-top:var(--space-4);position:relative;overflow:hidden}.mockup-frame:before{content:"";background-image:radial-gradient(circle at 1px 1px, var(--color-border) 1px, transparent 0);opacity:.4;pointer-events:none;background-size:24px 24px;position:absolute;inset:0}.mockup-frame__body{z-index:1;justify-content:center;display:flex;position:relative}.htb-section{padding:3rem 0}.htb-section--alt{background:var(--color-light-cream)}.htb-section--surface{background:var(--color-off-white);padding:var(--space-8) 0}.htb-section__head{text-align:center;max-width:720px;margin:0 auto 2rem}.htb-section__head h2{letter-spacing:-.02em;color:var(--color-charcoal);margin-top:.5rem;font-size:clamp(1.5rem,3vw,2rem);font-weight:700;line-height:1.15}.htb-section__head p{color:var(--color-text-muted);font-size:var(--text-lg);margin-top:.5rem}.htb-overview{counter-reset:htb-step;grid-template-columns:1fr;gap:1.25rem;max-width:980px;margin:0 auto;padding:0;list-style:none;display:grid}@media (width>=768px){.htb-overview{grid-template-columns:repeat(3,1fr)}}.htb-overview__item{background:var(--color-white);border:1px solid var(--color-border);border-radius:var(--radius-2xl);text-align:center;flex-direction:column;align-items:center;gap:.5rem;padding:1.5rem;display:flex}.htb-overview__num{background:var(--color-charcoal);width:40px;height:40px;color:var(--color-off-white);font-size:var(--text-base);border-radius:50%;justify-content:center;align-items:center;margin-bottom:.25rem;font-weight:700;line-height:1;display:inline-flex}.htb-overview__item h3{font-size:var(--text-lg);color:var(--color-charcoal);margin:0;font-weight:700;line-height:1.25}.htb-overview__item p{font-size:var(--text-sm);color:var(--color-text-muted);flex-grow:1;margin:0;line-height:1.5}.htb-overview__cta{background:var(--color-charcoal);color:var(--color-white);border-radius:var(--radius-xl);font-family:var(--font-sans);font-size:var(--text-base);cursor:pointer;transition:background var(--transition-fast);border:none;justify-content:center;align-items:center;gap:.5rem;margin-top:.5rem;padding:12px 24px;font-weight:600;text-decoration:none;display:inline-flex}.htb-overview__cta:hover{background:var(--color-text-muted)}.htb-note{background:var(--color-amber-bg);border-left:3px solid var(--color-amber);border-radius:var(--radius-md);font-size:var(--text-sm);color:var(--color-charcoal);max-width:760px;margin:0 auto;padding:12px 16px}.htb-note--centered{text-align:center;margin-top:2rem}.htb-methods{grid-template-columns:1fr;gap:1.5rem;max-width:60rem;margin:0 auto;display:grid}@media (width>=768px){.htb-methods{grid-template-columns:1fr 1fr}}.htb-method{background:var(--color-white);border:1px solid var(--color-border);border-radius:var(--radius-2xl);flex-direction:column;gap:1rem;padding:1.5rem;display:flex;box-shadow:0 4px 12px #0000000f}.htb-method__head{align-items:center;gap:1rem;display:flex}.htb-method__icon{background:var(--color-primary-bg);width:44px;height:44px;color:var(--color-primary);border-radius:var(--radius-lg);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.htb-method__icon--link{background:var(--color-primary-bg);color:var(--color-primary)}.htb-method__icon svg{width:22px;height:22px}.htb-method__title{font-size:var(--text-xl);color:var(--color-charcoal);margin:0;font-weight:700}.htb-badge{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.04em;border-radius:var(--radius-full);background:var(--color-success-bg);color:var(--color-success);margin-top:4px;padding:2px 8px;font-weight:700;display:inline-block}.htb-badge--neutral{background:var(--color-light-cream);color:var(--color-muted-gray)}.htb-method__body{font-size:var(--text-sm);color:var(--color-text-muted);margin:0;line-height:1.55}.htb-method__note{font-size:var(--text-xs);color:var(--color-muted-gray);border-top:1px dashed var(--color-border);margin:0;padding-top:.75rem;font-style:italic;line-height:1.4}.install-platforms{grid-template-columns:1fr;gap:2rem;display:grid}@media (width>=1024px){.install-platforms{grid-template-columns:1fr 1fr;gap:1.5rem}}.install-platform__head{border-bottom:1px solid var(--color-border);align-items:center;gap:.75rem;margin-bottom:1rem;padding-bottom:.75rem;display:flex}.install-platform__head svg{width:28px;height:28px;color:var(--color-charcoal)}.install-platform__title{font-size:var(--text-xl);margin:0;font-weight:700}.install-platform__sub{font-size:var(--text-xs);color:var(--color-muted-gray);margin-left:auto}.install-steps{counter-reset:istep;gap:var(--space-3);margin:0;padding:0;list-style:none;display:grid}.install-step{gap:var(--space-3);background:var(--color-white);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-3);grid-template-columns:110px 1fr;display:grid}.install-step__phone{background:var(--color-charcoal);border-radius:18px;padding:4px;box-shadow:0 4px 12px #00000026}.install-step__screen{background:var(--color-off-white);aspect-ratio:9/19;border-radius:14px;flex-direction:column;padding:10px 6px;display:flex;overflow:hidden}.install-step__notch{background:var(--color-charcoal-40);border-radius:var(--radius-full);width:36px;height:4px;margin:0 auto 8px}.install-step__heading{color:var(--color-charcoal);text-align:center;margin:4px 0 6px;font-size:10px;font-weight:700}.install-step__row{background:var(--color-white);border:1px solid var(--color-border);border-radius:6px;justify-content:space-between;align-items:center;margin-bottom:3px;padding:5px 6px;font-size:8px;display:flex}.install-step__row--highlight{background:var(--color-primary-bg);border-color:var(--color-primary)}.install-step__row-name{color:var(--color-charcoal);font-weight:600}.install-step__row-icon{background:var(--color-light-cream);border-radius:3px;flex-shrink:0;justify-content:center;align-items:center;width:12px;height:12px;margin-right:4px;display:inline-flex}.install-step__qr-area{background:var(--color-white);border:2px dashed var(--color-border);aspect-ratio:1;background-image:linear-gradient(45deg,#0000000a 25%,#0000 25%),linear-gradient(-45deg,#0000000a 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#0000000a 75%),linear-gradient(-45deg,#0000 75%,#0000000a 75%);background-position:0 0,0 4px,4px -4px,-4px 0;background-size:8px 8px;border-radius:6px;margin:6px 4px}.install-step__camera-frame{border:2px solid var(--color-primary);aspect-ratio:1;background:#2563eb0a;border-radius:8px;margin:6px 4px;position:relative}.install-step__camera-frame:before{content:"";border:2px solid var(--color-primary);border-radius:4px;animation:1.5s ease-in-out infinite htb-pulse;position:absolute;inset:25%}@keyframes htb-pulse{0%,to{opacity:1}50%{opacity:.4}}.install-step__btn{background:var(--color-success);color:var(--color-white);text-align:center;border-radius:4px;margin:4px;padding:4px;font-size:7px;font-weight:700}.install-step__body{min-width:0}.install-step__num{background:var(--color-charcoal);width:22px;height:22px;color:var(--color-off-white);border-radius:50%;justify-content:center;align-items:center;margin-bottom:6px;font-size:11px;font-weight:700;line-height:1;display:inline-flex}.install-step__num:before{counter-increment:istep;content:counter(istep);justify-content:center;align-items:center;width:100%;height:100%;line-height:1;display:flex}.install-step__title{font-size:var(--text-base);color:var(--color-charcoal);margin:0 0 6px;font-weight:700;line-height:1.2}.install-step__text{font-size:var(--text-sm);color:var(--color-text-muted);margin:0;line-height:1.5}.install-step__text strong{color:var(--color-charcoal);background:var(--color-light-cream);border-radius:3px;padding:1px 4px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px}.phone-frame{background:var(--color-charcoal);width:280px;height:560px;box-shadow:var(--shadow-lg), inset 0 0 0 2px #ffffff0a;border-radius:36px;padding:12px;position:relative}.phone-frame__notch{background:var(--color-charcoal);z-index:2;border-radius:0 0 14px 14px;width:90px;height:22px;position:absolute;top:12px;left:50%;transform:translate(-50%)}.phone-frame__screen{background:var(--color-off-white);border-radius:26px;width:100%;height:100%;position:relative;overflow:hidden}.phone-frame__statusbar{color:var(--color-charcoal);justify-content:space-between;align-items:center;padding:14px 18px 0;font-size:11px;font-weight:700;display:flex}.phone-frame__app{padding:18px 16px}.phone-frame__title{color:var(--color-muted-gray);text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px;font-size:13px}.phone-frame__big{color:var(--color-charcoal);letter-spacing:-.02em;margin-bottom:16px;font-size:28px;font-weight:700}.phone-frame__row{background:var(--color-white);border:1px solid var(--color-border);border-radius:12px;justify-content:space-between;align-items:center;margin-bottom:8px;padding:12px 14px;font-size:13px;display:flex}.phone-frame__row-head{align-items:center;gap:10px;display:flex}.phone-frame__row-icon{background:var(--color-primary-bg);width:28px;height:28px;color:var(--color-primary);border-radius:8px;justify-content:center;align-items:center;display:inline-flex}.phone-frame__row-icon svg{width:16px;height:16px}.phone-frame__row-name{color:var(--color-charcoal);font-weight:600}.phone-frame__row-sub{color:var(--color-muted-gray);font-size:11px}.phone-frame__toggle{background:var(--color-success);border-radius:var(--radius-full);flex-shrink:0;width:38px;height:22px;position:relative}.phone-frame__toggle:after{content:"";background:var(--color-white);border-radius:50%;width:18px;height:18px;transition:left .2s;position:absolute;top:2px;right:2px;box-shadow:0 1px 2px #0003}.phone-frame__toggle--off{background:var(--color-border)}.phone-frame__toggle--off:after{left:2px;right:auto}.phone-frame__note{background:var(--color-white);border:1px solid var(--color-border);color:var(--color-charcoal);border-radius:10px;align-items:center;gap:8px;margin-top:12px;padding:10px 12px;font-size:11px;display:flex;box-shadow:0 2px 8px #0000000f}.phone-frame__note svg{width:14px;height:14px;color:var(--color-success);flex-shrink:0}.mockup-frame__caption{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--color-muted-gray);margin-top:var(--space-3);z-index:1;align-items:center;gap:8px;font-weight:700;display:flex;position:relative}.htb-faq{max-width:760px;margin:0 auto}.htb-faq details{background:var(--color-white);border:1px solid var(--color-border);border-radius:var(--radius-lg);margin-bottom:.5rem;padding:1rem 1.25rem}.htb-faq summary{cursor:pointer;color:var(--color-charcoal);justify-content:space-between;align-items:center;gap:1rem;font-weight:600;list-style:none;display:flex}.htb-faq summary::-webkit-details-marker{display:none}.htb-faq summary:after{content:"+";color:var(--color-muted-gray);font-size:1.4rem;line-height:1}.htb-faq details[open] summary:after{content:"−"}.htb-faq details p{color:var(--color-text-muted);font-size:var(--text-sm);margin-top:.75rem}
