:root{
  --ink:#171a1d;
  --ink-2:#252a2e;
  --muted:#697178;
  --soft:#f7f5f1;
  --soft-2:#fbfaf8;
  --line:#e7e3dc;
  --white:#fff;
  --orange:#f47721;
  --orange-dark:#c84f08;
  --orange-soft:#fff1e6;
  --green:#178a54;
  --container:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--soft-2);color:var(--ink);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
.container{width:min(calc(100% - 48px),var(--container));margin:auto}

/* Light website header — intentionally not dark */
.site-header{position:sticky;top:0;z-index:60;background:rgba(255,253,249,.94);border-bottom:1px solid rgba(224,219,210,.95);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.header-inner{height:72px;display:flex;align-items:center;gap:34px}
.brand{display:flex;align-items:center;gap:10px;min-width:max-content}.brand-mark{width:38px;height:38px;border-radius:11px;background:var(--orange);color:#171a1d;display:grid;place-items:center;font-weight:900;font-size:17px}.brand-copy{display:grid;line-height:1}.brand-copy strong{font-size:14px;letter-spacing:-.02em;color:var(--ink)}.brand-copy small{margin-top:5px;font-size:8px;letter-spacing:.14em;color:#8a8f93}
.nav{display:flex;align-items:center;gap:26px;margin-left:auto}.nav a{font-size:12px;color:#525a60;transition:.2s}.nav a:hover{color:var(--orange-dark)}
.header-actions{display:flex;align-items:center;gap:10px}.header-login{padding:10px 12px;font-size:11px;font-weight:650;color:var(--ink)}.header-price{display:flex;align-items:baseline;gap:4px;background:var(--ink);color:#fff;padding:10px 14px;border-radius:10px}.header-price strong{font-size:14px}.header-price span{font-size:9px;color:#d7d9da}

/* All page headings remain dark/readable */
h1,h2,h3,h4,h5,h6{margin:0;color:var(--ink);-webkit-text-fill-color:var(--ink);text-shadow:none}
.hero{padding:88px 0 70px;background:linear-gradient(180deg,#fffdf9 0%,#fbfaf8 100%);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:.92fr 1.08fr;align-items:center;gap:66px}.eyebrow{display:flex;align-items:center;gap:8px;margin-bottom:22px}.eyebrow span,.eyebrow b{font-size:9px;letter-spacing:.14em}.eyebrow span{color:var(--orange-dark);font-weight:800}.eyebrow b{padding:6px 8px;background:#f2f0eb;border-radius:999px;color:#737b80}
.hero h1{font-size:clamp(48px,5.3vw,76px);line-height:.98;letter-spacing:-.055em;max-width:760px}.hero h1 em{font-style:normal;color:var(--orange-dark);-webkit-text-fill-color:var(--orange-dark)}.hero-lead{max-width:650px;font-size:16px;line-height:1.75;color:#5d666c;margin:24px 0 0}.hero-actions{display:flex;gap:11px;margin-top:28px;flex-wrap:wrap}.btn{min-height:46px;padding:0 18px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;gap:12px;font-size:12px;font-weight:750}.btn.primary{background:var(--ink);color:#fff}.btn.primary:hover{background:#000}.btn.secondary{border:1px solid #ded9d0;background:#fff;color:var(--ink)}.hero-proof{display:flex;gap:18px;flex-wrap:wrap;margin-top:24px;color:#697177;font-size:10px}.hero-proof i{font-style:normal;color:var(--green);font-weight:900;margin-right:4px}

.hero-product{position:relative;background:#fff;border:1px solid #ddd9d1;border-radius:18px;box-shadow:0 35px 80px rgba(54,45,36,.12);overflow:visible}.browser-bar{height:38px;padding:0 13px;display:flex;align-items:center;border-bottom:1px solid #e8e4dc;color:#8b9093;font-size:8px}.dots{display:flex;gap:4px;margin-right:12px}.dots i{width:7px;height:7px;border-radius:50%;background:#d8d3cb}.browser-bar span{margin:auto}.browser-bar b{font-size:7px;color:var(--green);background:#edf8f2;padding:4px 6px;border-radius:999px}.app-shell{display:grid;grid-template-columns:52px 1fr;min-height:410px}.app-side{background:#202427;padding:12px 8px;border-radius:0 0 0 17px;display:flex;align-items:center;flex-direction:column;gap:14px}.app-logo{width:28px;height:28px;border-radius:8px;background:var(--orange);display:grid;place-items:center;font-size:11px;font-weight:900;color:#171a1d;margin-bottom:12px}.line{display:block;width:24px;height:5px;border-radius:4px;background:#555b5f}.line.active{background:#f49a5f}.app-main{background:#f5f4f1;padding:15px;border-radius:0 0 17px 0}.app-top{display:flex;justify-content:space-between;align-items:center}.app-top div{display:grid}.app-top small{font-size:6px;letter-spacing:.12em;color:#919699}.app-top strong{font-size:12px;margin-top:3px}.app-top button{border:0;background:#1f2326;color:#fff;padding:7px 9px;border-radius:6px;font-size:7px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:13px 0}.stats article{background:#fff;border:1px solid #e4e1da;border-radius:8px;padding:9px}.stats small{font-size:6px;color:#989da0}.stats strong{display:block;font-size:18px;margin-top:4px}.app-grid{display:grid;grid-template-columns:1.6fr .8fr;gap:9px}.mini-form,.side-activity{background:#fff;border:1px solid #e4e1da;border-radius:9px;padding:10px}.mini-head{display:flex;align-items:center;justify-content:space-between}.mini-head strong{font-size:9px}.mini-head span{font-size:6px;color:var(--green);background:#edf8f2;padding:4px 5px;border-radius:999px}.mini-fields{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:11px}.mini-fields label{font-size:6px;color:#7f8589}.mini-fields label i{display:block;height:17px;border:1px solid #dedbd4;border-radius:4px;margin-top:4px;background:#fbfbfa}.mini-fields .wide{grid-column:1/-1}.mini-fields i.upload{height:25px;background:repeating-linear-gradient(135deg,#faf9f7,#faf9f7 6px,#f3f1ee 6px,#f3f1ee 12px)}.mini-submit{height:22px;display:grid;place-items:center;background:var(--orange);border-radius:5px;margin-top:9px;font-size:7px;font-weight:800}.side-activity>small{font-size:6px;letter-spacing:.1em;color:#90969a}.side-activity article{display:grid;grid-template-columns:7px 1fr auto;gap:6px;align-items:start;padding:9px 0;border-bottom:1px solid #efede8}.side-activity article:last-child{border:0}.side-activity article>i{width:6px;height:6px;border-radius:50%;margin-top:3px}.side-activity .ok{background:var(--green)}.side-activity .warn{background:var(--orange)}.side-activity .excel{background:#3c8c63}.side-activity article div{display:grid}.side-activity article b{font-size:7px}.side-activity article span,.side-activity time{font-size:6px;color:#989da0}.floating-price{position:absolute;right:-18px;bottom:-22px;min-width:124px;background:#fff;border:1px solid #e2ddd5;border-radius:13px;padding:12px 15px;box-shadow:0 15px 35px rgba(50,42,35,.11)}.floating-price span{font-size:7px;color:#8a9093;letter-spacing:.1em}.floating-price strong{display:block;font-size:27px;letter-spacing:-.05em;margin-top:2px;color:var(--orange-dark)}

.value-bar{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.value-grid{display:grid;grid-template-columns:repeat(4,1fr)}.value-grid>div{display:flex;align-items:center;gap:12px;min-height:82px;padding:16px 22px;border-right:1px solid var(--line)}.value-grid>div:last-child{border-right:0}.value-grid b{font-size:10px;color:var(--orange-dark)}.value-grid span{font-size:11px;color:#767d82}.value-grid strong{color:var(--ink);font-weight:750}

.section{padding:90px 0}.section-heading{max-width:710px;margin-bottom:38px}.section-heading.centered{text-align:center;margin-left:auto;margin-right:auto}.section-heading.compact{margin-bottom:48px}.section-heading>span,.section-kicker,.use-intro>span,.pricing-copy>span,.faq-title>span,.login-wrap>div>span{font-size:9px;letter-spacing:.15em;color:var(--orange-dark);font-weight:850}.section-heading h2,.why-copy h2,.use-intro h2,.pricing-copy h2,.faq-title h2,.login-wrap h2{font-size:clamp(36px,4vw,56px);line-height:1.06;letter-spacing:-.045em;margin-top:11px}.section-heading p,.why-copy p,.pricing-copy p,.faq-title p{font-size:14px;line-height:1.72;color:var(--muted);margin:16px 0 0}

.compare-section{background:#f5f3ef}.compare-shell{background:#fff;border:1px solid #dedad2;border-radius:16px;overflow:hidden;box-shadow:0 18px 50px rgba(55,46,36,.06)}.compare-brand-row,.compare-row{display:grid;grid-template-columns:1.2fr .9fr .9fr}.compare-brand-row{background:#fbfaf8;border-bottom:1px solid #e4e0d9}.compare-brand-row>div,.compare-row>div{padding:16px 18px;border-right:1px solid #e9e5de}.compare-brand-row>div:last-child,.compare-row>div:last-child{border-right:0}.compare-label{display:flex;align-items:center;font-size:10px;font-weight:800;color:#8d9397}.compare-brand{display:flex;align-items:center;gap:10px}.compare-brand>span{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;font-size:11px;font-weight:900}.compare-brand.google>span{background:#f1f2f3;color:#30353a}.compare-brand.hyper>span{background:var(--orange);color:#171a1d}.compare-brand div{display:grid}.compare-brand b{font-size:12px}.compare-brand small{font-size:7px;color:#8e9498;margin-top:2px}.compare-row{border-bottom:1px solid #ebe7e0}.compare-row:last-child{border-bottom:0}.compare-row>div{display:flex;align-items:center;gap:7px;font-size:10px;line-height:1.45;color:#596167;min-height:68px}.compare-row>div:first-child{display:grid;gap:2px}.compare-row>div:first-child b{font-size:11px;color:var(--ink)}.compare-row>div:first-child small{font-size:8px;color:#94999c}.compare-row.featured>div:first-child{border-left:3px solid var(--orange);padding-left:15px}.compare-row.featured>div:last-child{background:#fffaf6;color:#343a3e}.yes{color:var(--green);font-size:13px}.neutral{color:#9aa0a4}.compare-note{margin:16px auto 0;max-width:900px;text-align:center;font-size:9px;line-height:1.6;color:#8a9094}

.why-section{background:#fff}.why-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:80px;align-items:start}.why-copy{position:sticky;top:105px}.why-copy>a{display:inline-flex;gap:9px;align-items:center;margin-top:22px;color:var(--orange-dark);font-size:11px;font-weight:800}.why-list{border-top:1px solid var(--line)}.why-list article{display:grid;grid-template-columns:52px 1fr;gap:16px;padding:26px 0;border-bottom:1px solid var(--line)}.why-list article>span{width:34px;height:34px;border-radius:9px;background:var(--orange-soft);color:var(--orange-dark);display:grid;place-items:center;font-size:9px;font-weight:850}.why-list b{font-size:16px}.why-list p{margin:7px 0 0;font-size:12px;line-height:1.65;color:var(--muted)}

.features-section{background:#fbfaf8;border-top:1px solid var(--line)}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.feature-card{position:relative;min-height:290px;background:#fff;border:1px solid #e4e0d9;border-radius:15px;padding:24px;overflow:hidden}.feature-card.accent{background:#fff7f0;border-color:#efcfb8}.feature-card.wide-card{grid-column:span 2}.feature-card>span{font-size:8px;letter-spacing:.13em;color:var(--orange-dark);font-weight:850}.feature-card h3{font-size:22px;letter-spacing:-.03em;margin-top:12px}.feature-card p{max-width:420px;margin:10px 0 0;font-size:11px;line-height:1.65;color:var(--muted)}.field-demo{position:absolute;left:24px;right:24px;bottom:22px;display:grid;grid-template-columns:1fr 1fr;gap:7px}.field-demo i{height:24px;border:1px solid #ded9d1;border-radius:5px;background:#fff}.field-demo .wide,.field-demo button{grid-column:1/-1}.field-demo button{height:25px;border:0;border-radius:5px;background:var(--ink);color:#fff;font-size:7px}.access-demo,.file-demo{position:absolute;left:24px;bottom:24px;display:flex;gap:8px}.access-demo b,.file-demo b{width:39px;height:39px;border-radius:9px;border:1px solid #dedad3;display:grid;place-items:center;font-size:9px;background:#fbfaf8;color:#555e63}.match-demo{position:absolute;left:24px;right:24px;bottom:22px;display:flex;gap:7px;flex-wrap:wrap}.match-demo em,.match-demo strong{font-style:normal;font-size:8px;padding:7px 9px;border-radius:999px}.match-demo em{background:#f1f2f2;color:#6a7277}.match-demo strong{background:#edf8f2;color:var(--green)}.id-demo{position:absolute;right:25px;bottom:21px;width:230px;height:125px;border-radius:12px;background:linear-gradient(135deg,#fff3e8,#f7eee7);border:1px solid #ecd8c9;display:grid;grid-template-columns:64px 1fr 36px;align-items:center;padding:15px;gap:12px}.id-photo{width:58px;height:78px;border-radius:8px;background:linear-gradient(#dedbd5,#cfcac2)}.id-lines{display:grid;gap:8px}.id-lines i{height:6px;border-radius:5px;background:#d6cfc7}.id-lines i:nth-child(2){width:80%}.id-lines i:nth-child(3){width:60%}.id-demo strong{align-self:start;color:var(--orange-dark)}.phone-demo{position:absolute;left:50%;bottom:17px;transform:translateX(-50%);width:104px;height:126px;border:4px solid #2b3033;border-radius:15px;background:#fff;padding:13px 8px}.phone-demo div{display:grid;gap:6px}.phone-demo i{height:13px;border:1px solid #dfdbd4;border-radius:4px}.phone-demo button{height:15px;border:0;border-radius:4px;background:var(--orange)}

.workflow-section{background:#fff;border-top:1px solid var(--line)}.workflow-line{display:grid;grid-template-columns:1fr 30px 1fr 30px 1fr 30px 1fr 30px 1fr;align-items:start}.workflow-line>i{height:1px;background:#ddd9d2;margin-top:20px}.workflow-line article{text-align:center;padding:0 6px}.workflow-line article>b{width:40px;height:40px;border-radius:12px;background:var(--orange-soft);color:var(--orange-dark);display:grid;place-items:center;margin:0 auto;font-size:11px}.workflow-line h3{font-size:14px;margin-top:12px}.workflow-line p{font-size:9px;line-height:1.55;color:#7e858a;margin:6px auto 0;max-width:145px}

.use-section{background:#f5f3ef;border-top:1px solid var(--line)}.use-grid{display:grid;grid-template-columns:1.2fr repeat(2,1fr);gap:12px}.use-intro{grid-row:span 2;padding:18px 34px 18px 0;display:flex;flex-direction:column;justify-content:center}.use-intro h2{font-size:42px}.use-grid article{min-height:160px;background:#fff;border:1px solid #e2ded7;border-radius:13px;padding:20px}.use-grid article>b{font-size:8px;color:var(--orange-dark)}.use-grid article h3{font-size:16px;margin-top:22px}.use-grid article p{font-size:10px;line-height:1.55;color:var(--muted);margin:7px 0 0}

.pricing-section{background:#fff;border-top:1px solid var(--line)}.pricing-layout{display:grid;grid-template-columns:1fr 430px;gap:85px;align-items:center}.included{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}.included span{font-size:9px;padding:7px 9px;border:1px solid #e2ddd5;border-radius:999px;color:#626a6f;background:#fbfaf8}.price-card{border:1px solid #dcd7cf;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 24px 55px rgba(50,42,35,.08)}.price-top{display:flex;justify-content:space-between;align-items:center;background:#fff3e8;border-bottom:1px solid #efdbc9;padding:13px 16px}.price-top small{font-size:7px;letter-spacing:.12em;color:#8c6b54}.price-top b{font-size:8px;color:var(--orange-dark)}.price-number{padding:25px 24px 8px;display:flex;align-items:flex-end}.price-number sup{font-size:20px;margin-bottom:32px}.price-number strong{font-size:88px;line-height:.9;letter-spacing:-.07em}.price-number span{font-size:10px;color:#80878b;margin:0 0 10px 7px}.price-card>p{font-size:10px;line-height:1.6;color:var(--muted);padding:0 24px;margin:12px 0 20px}.price-card>a{margin:0 14px 14px;background:var(--ink);color:#fff;border-radius:10px;padding:13px 14px;display:flex;justify-content:space-between;align-items:center}.price-card>a span{display:grid}.price-card>a small{font-size:7px;color:#bfc3c5}.price-card>a strong{font-size:17px;margin-top:2px}.price-card>a>b{font-size:20px}

.faq-section{background:#fbfaf8;border-top:1px solid var(--line)}.faq-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:80px}.faq-list{border-top:1px solid var(--line)}.faq-list details{border-bottom:1px solid var(--line)}.faq-list summary{list-style:none;cursor:pointer;min-height:66px;display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:13px;font-weight:750}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary i{font-style:normal;color:var(--orange-dark);font-size:18px}.faq-list details[open] summary i{transform:rotate(45deg)}.faq-list details p{margin:-4px 40px 20px 0;font-size:11px;line-height:1.7;color:var(--muted)}

.login-section{padding:62px 0;background:#fff;border-top:1px solid var(--line)}.login-wrap{display:grid;grid-template-columns:.65fr 1.35fr;gap:55px;align-items:center}.login-wrap h2{font-size:34px}.login-options{display:grid;grid-template-columns:1fr 1fr;border:1px solid #dfdbd3;border-radius:14px;overflow:hidden}.login-options a{display:grid;grid-template-columns:38px 1fr 16px;align-items:center;gap:12px;min-height:84px;padding:14px 16px;border-right:1px solid #e4e0d9;background:#fff}.login-options a:last-child{border-right:0}.login-options a:hover{background:#fff8f2}.login-options a>b{width:34px;height:34px;border-radius:9px;background:var(--orange-soft);color:var(--orange-dark);display:grid;place-items:center}.login-options a span{display:grid}.login-options a strong{font-size:12px}.login-options a small{font-size:8px;color:#8b9195;margin-top:4px}.login-options a i{font-style:normal;color:var(--orange-dark)}

.footer{background:#202426;color:#d8dbdd;padding:30px 0}.footer-inner{display:grid;grid-template-columns:auto 1fr auto;gap:35px;align-items:center}.footer-brand{display:flex;align-items:center;gap:9px}.footer-brand>span{width:30px;height:30px;border-radius:8px;background:var(--orange);color:#171a1d;display:grid;place-items:center;font-size:11px;font-weight:900}.footer-brand div{display:grid}.footer-brand b{font-size:11px}.footer-brand small{font-size:7px;color:#8e969a}.footer p{margin:0;text-align:center;font-size:8px;color:#8f979b}.footer a{font-size:10px;font-weight:800}

@media(max-width:1050px){
  .nav{display:none}.hero-grid{grid-template-columns:1fr;gap:52px}.hero-copy{text-align:center}.eyebrow,.hero-actions,.hero-proof{justify-content:center}.hero-lead{margin-left:auto;margin-right:auto}.hero-product{max-width:760px;width:100%;margin:auto}.why-grid{grid-template-columns:1fr;gap:45px}.why-copy{position:static;text-align:center}.why-copy p{max-width:680px;margin-left:auto;margin-right:auto}.feature-grid{grid-template-columns:1fr 1fr}.pricing-layout{grid-template-columns:1fr;gap:48px}.pricing-copy{text-align:center}.pricing-copy p{max-width:680px;margin-left:auto;margin-right:auto}.included{justify-content:center}.price-card{max-width:520px;width:100%;margin:auto}.faq-grid{grid-template-columns:1fr;gap:40px}.faq-title{text-align:center}.login-wrap{grid-template-columns:1fr;text-align:center;gap:28px}.use-grid{grid-template-columns:1fr 1fr}.use-intro{grid-column:1/-1;grid-row:auto;text-align:center;padding:0 0 20px}.use-intro h2{max-width:650px;margin-left:auto;margin-right:auto}
}
@media(max-width:760px){
  .container{width:min(calc(100% - 28px),var(--container))}.site-header{position:sticky}.header-inner{height:62px;gap:8px}.brand-mark{width:34px;height:34px}.brand-copy strong{font-size:12px}.brand-copy small{font-size:7px}.header-login{display:none}.header-price{margin-left:auto;padding:9px 11px}.hero{padding:52px 0 46px}.eyebrow{flex-wrap:wrap}.hero h1{font-size:clamp(40px,11.8vw,56px)}.hero-lead{font-size:14px}.hero-actions{display:grid;grid-template-columns:1fr;width:100%}.btn{width:100%}.hero-proof{display:grid;grid-template-columns:1fr 1fr;text-align:left;gap:9px}.hero-product{border-radius:14px}.app-shell{grid-template-columns:42px 1fr;min-height:345px}.app-side{padding:10px 5px}.app-logo{width:26px;height:26px}.line{width:21px}.app-main{padding:9px}.app-top strong{font-size:10px}.app-top button{font-size:6px}.stats{gap:4px;margin:9px 0}.stats article{padding:7px}.stats strong{font-size:14px}.app-grid{grid-template-columns:1fr}.side-activity{display:none}.mini-form{padding:9px}.floating-price{position:static;margin:8px;border:0;box-shadow:none;background:#fff4eb;display:flex;align-items:center;justify-content:center;gap:8px}.floating-price strong{font-size:21px}.value-grid{grid-template-columns:1fr 1fr}.value-grid>div{min-height:70px;padding:13px;border-bottom:1px solid var(--line)}.value-grid>div:nth-child(2){border-right:0}.section{padding:64px 0}.section-heading h2,.why-copy h2,.pricing-copy h2,.faq-title h2{font-size:36px}.compare-shell{border-radius:12px}.compare-brand-row{display:none}.compare-row{grid-template-columns:1fr;border-top:9px solid #f5f3ef}.compare-row:first-of-type{border-top:0}.compare-row>div{border-right:0;border-bottom:1px solid #ebe7e0;min-height:auto;padding:13px 14px}.compare-row>div:nth-child(2):before{content:"GOOGLE FORMS";display:block;font-size:7px;letter-spacing:.11em;color:#959b9e;margin-bottom:3px}.compare-row>div:nth-child(3):before{content:"HYPER ERA";display:block;font-size:7px;letter-spacing:.11em;color:var(--orange-dark);margin-bottom:3px}.compare-row>div:nth-child(2),.compare-row>div:nth-child(3){display:block}.feature-grid{grid-template-columns:1fr}.feature-card.wide-card{grid-column:auto}.feature-card{min-height:260px}.id-demo{position:relative;right:auto;bottom:auto;width:100%;margin-top:22px}.workflow-line{grid-template-columns:1fr}.workflow-line>i{width:1px;height:24px;margin:0 auto;background:#ddd9d2}.workflow-line article{padding:8px 0}.use-grid{grid-template-columns:1fr}.use-intro{grid-column:auto}.pricing-section{padding:64px 0}.price-number strong{font-size:76px}.faq-list summary{font-size:12px}.login-options{grid-template-columns:1fr}.login-options a{border-right:0;border-bottom:1px solid #e4e0d9;text-align:left}.login-options a:last-child{border-bottom:0}.footer-inner{grid-template-columns:1fr;text-align:center}.footer-brand{justify-content:center}.footer p{text-align:center}
}
@media(max-width:480px){
  .hero h1{font-size:39px}.hero-proof{font-size:9px}.mini-fields{grid-template-columns:1fr}.mini-fields .wide{grid-column:auto}.section-heading h2,.why-copy h2,.pricing-copy h2,.faq-title h2{font-size:32px}.feature-card h3{font-size:20px}.use-intro h2{font-size:34px}.value-grid{grid-template-columns:1fr}.value-grid>div{border-right:0}.price-card>a strong{font-size:15px}.login-wrap h2{font-size:30px}
}


/* ========================================================================
   V6.32 — Premium readability, visual polish & bottom-left page reveal
   ======================================================================== */
:root{
  --ink:#101316;
  --ink-2:#20252a;
  --muted:#58626a;
  --soft:#f4f2ed;
  --soft-2:#faf9f6;
  --line:#dedad2;
  --orange:#ff7a1a;
  --orange-dark:#c64d00;
  --orange-soft:#fff0e4;
  --green:#0f8550;
  --container:1240px;
}
html{background:#000}
body{font-size:16px;line-height:1.55;background:#faf9f6;color:var(--ink);overflow-x:hidden}
body,button,input,select,textarea{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
::selection{background:#ffd8bc;color:#101316}

/* V6.33 homepage-only cinematic Hyper Era loader — 10 second sequence. */
body.he-loading{overflow:hidden}
.he-brand-loader{
  position:fixed;
  inset:0;
  z-index:999999;
  display:grid;
  place-items:center;
  background:#050505;
  overflow:hidden;
  color:#fff;
  animation:heLoaderExit 10s linear both;
  isolation:isolate;
}
.he-brand-loader::before{
  content:"";
  position:absolute;
  inset:-25%;
  background:
    radial-gradient(circle at 50% 48%,rgba(255,122,26,.10),transparent 24%),
    radial-gradient(circle at 52% 54%,rgba(255,255,255,.035),transparent 34%);
  opacity:0;
  animation:heLoaderGlow 10s ease both;
}
.he-brand-loader__lockup{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(16px,2.2vw,32px);
  width:min(900px,90vw);
  min-height:190px;
}
.he-brand-loader__h{
  position:relative;
  width:clamp(94px,10vw,142px);
  height:clamp(112px,12vw,164px);
  flex:0 0 auto;
}
.he-h-stroke{
  position:absolute;
  display:block;
  border-radius:5px;
  background:linear-gradient(180deg,#ff9a52 0%,#ff7a1a 48%,#e85b00 100%);
  box-shadow:0 0 34px rgba(255,122,26,.25);
  opacity:0;
  will-change:transform,opacity;
}
.he-h-stroke--left{
  left:8%;
  top:0;
  width:clamp(14px,1.55vw,22px);
  height:100%;
  animation:heHFromTopLeft 3.1s cubic-bezier(.16,.84,.22,1) .65s forwards;
}
.he-h-stroke--right{
  right:8%;
  top:0;
  width:clamp(14px,1.55vw,22px);
  height:100%;
  animation:heHFromTopRight 3.1s cubic-bezier(.16,.84,.22,1) 1.15s forwards;
}
.he-h-stroke--cross{
  left:8%;
  top:50%;
  width:84%;
  height:clamp(14px,1.55vw,22px);
  margin-top:clamp(-11px,-.77vw,-7px);
  animation:heHFromBottomLeft 3.05s cubic-bezier(.16,.84,.22,1) 1.75s forwards;
}
.he-brand-loader__word{
  display:flex;
  align-items:baseline;
  gap:.28em;
  white-space:nowrap;
  font-size:clamp(38px,6.1vw,82px);
  line-height:1;
  letter-spacing:-.055em;
  font-weight:850;
  opacity:0;
  transform:translate(62vw,46vh) scale(.78);
  filter:blur(8px);
  animation:heWordFromBottomRight 2.6s cubic-bezier(.12,.78,.18,1) 4.85s forwards;
  will-change:transform,opacity,filter;
}
.he-brand-loader__word span{color:#f7f7f5}
.he-brand-loader__word strong{color:#ff7a1a;font-weight:900}

@keyframes heHFromTopLeft{
  0%{opacity:0;transform:translate(-54vw,-56vh) rotate(-28deg) scaleY(.55)}
  24%{opacity:1}
  82%{transform:translate(10px,7px) rotate(1.8deg) scaleY(1.02)}
  100%{opacity:1;transform:translate(0,0) rotate(0) scaleY(1)}
}
@keyframes heHFromTopRight{
  0%{opacity:0;transform:translate(54vw,-56vh) rotate(28deg) scaleY(.55)}
  24%{opacity:1}
  82%{transform:translate(-10px,7px) rotate(-1.8deg) scaleY(1.02)}
  100%{opacity:1;transform:translate(0,0) rotate(0) scaleY(1)}
}
@keyframes heHFromBottomLeft{
  0%{opacity:0;transform:translate(-58vw,48vh) rotate(-24deg) scaleX(.5)}
  24%{opacity:1}
  82%{transform:translate(9px,-4px) rotate(.8deg) scaleX(1.03)}
  100%{opacity:1;transform:translate(0,0) rotate(0) scaleX(1)}
}
@keyframes heWordFromBottomRight{
  0%{opacity:0;transform:translate(62vw,46vh) scale(.78);filter:blur(8px)}
  28%{opacity:1;filter:blur(2px)}
  84%{transform:translate(-6px,3px) scale(1.01);filter:blur(0)}
  100%{opacity:1;transform:translate(0,0) scale(1);filter:blur(0)}
}
@keyframes heLoaderGlow{
  0%,34%{opacity:0}
  48%,83%{opacity:1}
  100%{opacity:0}
}
@keyframes heLoaderExit{
  0%,88%{opacity:1;visibility:visible}
  92%{opacity:1;visibility:visible}
  100%{opacity:0;visibility:hidden}
}

/* Keep the actual homepage still until the brand sequence completes. */
.he-home.he-loading .site-header,
.he-home.he-loading main,
.he-home.he-loading .footer{opacity:0}
.he-home.he-loaded .site-header,
.he-home.he-loaded main,
.he-home.he-loaded .footer{animation:heHomeArrive .72s cubic-bezier(.2,.75,.2,1) both}
@keyframes heHomeArrive{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

@media(prefers-reduced-motion:reduce){
  .he-brand-loader{display:none!important}
  body.he-loading{overflow:auto!important}
  .he-home.he-loading .site-header,.he-home.he-loading main,.he-home.he-loading .footer{opacity:1!important}
  .he-home.he-loaded .site-header,.he-home.he-loaded main,.he-home.he-loaded .footer{animation:none!important}
}

/* Premium top navigation */
.site-header{
  background:rgba(255,255,255,.94);
  border-bottom:1px solid rgba(16,19,22,.08);
  box-shadow:0 8px 32px rgba(16,19,22,.035);
}
.header-inner{height:78px;gap:38px}
.brand{gap:12px}
.brand-mark{width:42px;height:42px;border-radius:12px;font-size:19px;box-shadow:0 9px 22px rgba(255,122,26,.22)}
.brand-copy strong{font-size:16px;letter-spacing:-.025em}
.brand-copy small{font-size:10px;margin-top:5px;letter-spacing:.13em;color:#687078}
.nav{gap:30px}
.nav a{font-size:14px;font-weight:560;color:#3e474e}
.header-login{font-size:13px;font-weight:700;padding:11px 13px}
.header-price{padding:11px 16px;border-radius:11px;box-shadow:0 8px 20px rgba(16,19,22,.10)}
.header-price strong{font-size:16px}.header-price span{font-size:11px}

/* Hero — more editorial, less template-like */
.hero{padding:104px 0 86px;background:
  radial-gradient(circle at 84% 16%,rgba(255,122,26,.10),transparent 30%),
  linear-gradient(180deg,#fff 0%,#fbfaf7 100%)}
.hero-grid{grid-template-columns:.9fr 1.1fr;gap:74px}
.eyebrow{margin-bottom:24px;gap:10px}
.eyebrow span,.eyebrow b{font-size:11px;letter-spacing:.12em}
.eyebrow b{padding:7px 10px;background:#f1f0ec;color:#626a70}
.hero h1{font-size:clamp(52px,5.15vw,78px);line-height:.99;letter-spacing:-.058em}
.hero-lead{font-size:18px;line-height:1.72;color:#515d65;margin-top:27px;max-width:680px}
.hero-actions{margin-top:32px;gap:12px}
.btn{min-height:50px;padding:0 20px;border-radius:11px;font-size:14px;font-weight:760;transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.btn:hover{transform:translateY(-2px)}
.btn.primary{box-shadow:0 12px 30px rgba(16,19,22,.12)}
.btn.secondary{border-color:#d8d4cc;box-shadow:0 8px 24px rgba(16,19,22,.035)}
.hero-proof{margin-top:26px;gap:18px;font-size:13px;color:#59636a}

.hero-product{border-color:#d8d4cc;border-radius:22px;box-shadow:0 38px 100px rgba(38,31,24,.15),0 2px 0 rgba(255,255,255,.9) inset}
.browser-bar{height:44px;font-size:10px;padding:0 15px}.browser-bar b{font-size:9px;padding:5px 8px}
.app-shell{grid-template-columns:58px 1fr;min-height:438px}.app-side{border-radius:0 0 0 21px}
.app-main{padding:18px;border-radius:0 0 21px 0}.app-top small{font-size:8px}.app-top strong{font-size:14px}.app-top button{font-size:9px;padding:8px 11px}
.stats{gap:9px;margin:15px 0}.stats article{padding:11px}.stats small{font-size:8px}.stats strong{font-size:21px}
.mini-form,.side-activity{padding:12px}.mini-head strong{font-size:11px}.mini-head span{font-size:8px}.mini-fields label{font-size:8px}.mini-submit{font-size:9px;height:26px}
.side-activity>small{font-size:8px}.side-activity article b{font-size:9px}.side-activity article span,.side-activity time{font-size:8px}
.floating-price{right:-12px;bottom:-24px;padding:13px 17px;min-width:138px;border-radius:14px}.floating-price span{font-size:9px}.floating-price strong{font-size:31px}

/* Useful content should never look tiny */
.value-grid>div{min-height:92px;padding:18px 23px}.value-grid b{font-size:12px}.value-grid span{font-size:14px}
.section{padding:104px 0}
.section-heading{max-width:800px;margin-bottom:44px}
.section-heading.compact{margin-bottom:52px}
.section-heading>span,.section-kicker,.use-intro>span,.pricing-copy>span,.faq-title>span,.login-wrap>div>span{font-size:11px;letter-spacing:.14em}
.section-heading h2,.why-copy h2,.use-intro h2,.pricing-copy h2,.faq-title h2,.login-wrap h2{font-size:clamp(40px,4vw,58px);line-height:1.04;letter-spacing:-.047em;margin-top:12px}
.section-heading p,.why-copy p,.pricing-copy p,.faq-title p{font-size:16px;line-height:1.75;color:#5a646b;margin-top:18px}

/* Comparison — reads like a premium product comparison, not a spreadsheet */
.compare-section{background:linear-gradient(180deg,#f4f2ed 0%,#f8f7f4 100%)}
.compare-shell{border-color:#d9d4cb;border-radius:18px;box-shadow:0 24px 70px rgba(29,24,19,.07)}
.compare-brand-row>div,.compare-row>div{padding:19px 21px}
.compare-label{font-size:12px}.compare-brand b{font-size:14px}.compare-brand small{font-size:10px;margin-top:3px}
.compare-brand>span{width:34px;height:34px;font-size:13px}
.compare-row>div{font-size:13px;line-height:1.55;min-height:80px;color:#4e5961}
.compare-row>div:first-child b{font-size:14px}.compare-row>div:first-child small{font-size:11px;line-height:1.45;color:#7a8389}
.yes{font-size:16px}.compare-note{font-size:12px;line-height:1.65;margin-top:18px;color:#687179}

/* Why / feature area */
.why-grid{gap:92px}.why-copy>a{font-size:14px}
.why-list article{padding:24px 0}.why-list article>span{font-size:12px}.why-list article b{font-size:17px}.why-list article p{font-size:14px;line-height:1.65;margin-top:7px}
.feature-grid{gap:15px}
.feature-card{border-color:#dedad2;border-radius:17px;padding:27px;box-shadow:0 12px 35px rgba(23,19,16,.035);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.feature-card:hover{transform:translateY(-4px);border-color:#d2c9bf;box-shadow:0 22px 50px rgba(23,19,16,.075)}
.feature-card>span{font-size:10px}.feature-card h3{font-size:23px;line-height:1.12;margin-top:17px}.feature-card>p{font-size:14px;line-height:1.7;color:#5d676e;margin-top:10px}
.access-demo b,.file-demo b{font-size:11px}.match-demo em,.match-demo strong{font-size:11px}

/* Workflow / use-cases */
.workflow-line article>b{width:44px;height:44px;font-size:13px}.workflow-line h3{font-size:17px;margin-top:14px}.workflow-line p{font-size:13px;line-height:1.6;max-width:180px;margin-top:7px;color:#626c73}
.use-grid{gap:15px}.use-intro h2{font-size:48px}.use-grid article{min-height:185px;padding:25px;border-radius:16px;box-shadow:0 10px 30px rgba(20,17,14,.025)}
.use-grid article>b{font-size:10px}.use-grid article h3{font-size:20px;margin-top:28px}.use-grid article p{font-size:14px;line-height:1.65;margin-top:9px}

/* Pricing */
.pricing-layout{grid-template-columns:1fr 455px;gap:96px}
.included{gap:9px;margin-top:25px}.included span{font-size:12px;padding:8px 11px}
.price-card{border-radius:19px;box-shadow:0 30px 75px rgba(28,23,18,.11)}
.price-top{padding:15px 18px}.price-top small{font-size:9px}.price-top b{font-size:10px}
.price-number{padding:29px 27px 9px}.price-number sup{font-size:24px}.price-number strong{font-size:94px}.price-number span{font-size:13px}
.price-card>p{font-size:14px;line-height:1.65;padding:0 27px;margin:16px 0 23px}
.price-card>a{margin:0 16px 16px;padding:15px 16px;border-radius:12px}.price-card>a small{font-size:9px}.price-card>a strong{font-size:20px}

/* FAQ and login */
.faq-list summary{min-height:74px;font-size:15px}.faq-list details p{font-size:14px;line-height:1.72;margin-bottom:23px}
.login-section{padding:76px 0}.login-wrap h2{font-size:40px}.login-options{border-radius:16px}.login-options a{min-height:98px;padding:17px 19px;grid-template-columns:44px 1fr 18px}.login-options a>b{width:40px;height:40px;border-radius:11px}.login-options a strong{font-size:15px}.login-options a small{font-size:11px;line-height:1.35;margin-top:5px}

/* Footer — requested trademark line removed entirely */
.footer{padding:30px 0;background:#171a1d}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:28px}
.footer-brand>span{width:34px;height:34px;font-size:13px}.footer-brand b{font-size:13px}.footer-brand small{font-size:9px}
.footer-contact{display:grid;text-align:right}.footer-contact small{font-size:9px;letter-spacing:.12em;color:#8f979d}.footer-contact strong{font-size:17px;color:#fff;margin-top:2px}

@media(max-width:1050px){
  .hero{padding-top:78px}.hero-grid{gap:58px}.hero-copy{text-align:center}.hero h1{margin-inline:auto}.pricing-layout{gap:52px}
}
@media(max-width:760px){
  .container{width:min(calc(100% - 30px),var(--container))}.header-inner{height:66px}.brand-mark{width:36px;height:36px;font-size:16px}.brand-copy strong{font-size:14px}.brand-copy small{font-size:8px}.header-price strong{font-size:14px}.header-price span{font-size:10px}
  .hero{padding:58px 0 52px}.hero h1{font-size:clamp(41px,11.3vw,57px)}.hero-lead{font-size:16px;line-height:1.68}.eyebrow span,.eyebrow b{font-size:9px}.btn{font-size:14px;min-height:50px}.hero-proof{font-size:12px;gap:11px}
  .browser-bar{font-size:9px}.app-main{padding:10px}.app-top strong{font-size:11px}.app-top button{font-size:8px}.stats small{font-size:7px}.mini-head strong{font-size:10px}.mini-fields label{font-size:8px}
  .value-grid>div{min-height:78px}.value-grid span{font-size:13px}.section{padding:72px 0}.section-heading h2,.why-copy h2,.pricing-copy h2,.faq-title h2{font-size:38px}.section-heading p,.why-copy p,.pricing-copy p,.faq-title p{font-size:15px}
  .compare-row>div{font-size:13px;padding:15px}.compare-row>div:first-child b{font-size:14px}.compare-row>div:first-child small{font-size:11px}.compare-row>div:nth-child(2):before,.compare-row>div:nth-child(3):before{font-size:9px}
  .feature-card{padding:24px;min-height:275px}.feature-card h3{font-size:22px}.feature-card>p{font-size:14px}.workflow-line p{font-size:13px}.use-grid article p{font-size:14px}
  .price-number strong{font-size:78px}.price-card>p{font-size:14px}.faq-list summary{font-size:14px}.faq-list details p{font-size:14px}.login-options a strong{font-size:14px}.login-options a small{font-size:11px}
  .footer-inner{flex-direction:column;text-align:center}.footer-contact{text-align:center}
}
@media(max-width:480px){
  .hero h1{font-size:42px}.hero-lead{font-size:15px}.hero-proof{grid-template-columns:1fr 1fr;font-size:11px}
  .section-heading h2,.why-copy h2,.pricing-copy h2,.faq-title h2{font-size:34px}.use-intro h2{font-size:36px}.login-wrap h2{font-size:32px}
}


/* ========================================================================
   V6.33 — tighter header-to-hero spacing + centered homepage heading
   ======================================================================== */
.hero{
  padding-top:38px !important;
  padding-bottom:72px;
}
.hero-copy{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.hero-copy .eyebrow,
.hero-copy .hero-actions,
.hero-copy .hero-proof{justify-content:center}
.hero-copy h1{margin-left:auto;margin-right:auto;max-width:760px;text-align:center}
.hero-copy .hero-lead{margin-left:auto;margin-right:auto;text-align:center;max-width:700px}
.hero-grid{align-items:center}

@media(max-width:1050px){
  .hero{padding-top:32px !important}
}
@media(max-width:760px){
  .hero{padding-top:24px !important;padding-bottom:48px}
  .hero-copy h1{max-width:100%}
  .he-brand-loader__lockup{gap:13px;width:94vw}
  .he-brand-loader__word{font-size:clamp(32px,10vw,48px)}
  .he-brand-loader__h{width:72px;height:88px}
  .he-h-stroke--left,.he-h-stroke--right{width:12px}
  .he-h-stroke--cross{height:12px;margin-top:-6px}
}

/* ========================================================================
   V6.34 — Date/Time Mathematical Hyper Era Loader Engine
   Every homepage load derives a deterministic style from local date + time.
   ======================================================================== */
.he-loader-stage{
  position:relative;
  width:min(1040px,94vw);
  min-height:280px;
  display:grid;
  place-items:center;
  perspective:1200px;
  z-index:3;
}
.he-mode-h,.he-mode-word{grid-area:1/1;position:relative;z-index:2}
.he-mode-word{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(3px,.38vw,8px);
  min-height:180px;
  white-space:nowrap;
  font-size:clamp(48px,8vw,112px);
  line-height:.88;
  font-weight:900;
  letter-spacing:-.065em;
  color:#f7f7f5;
  transform-style:preserve-3d;
}
.he-mode-word .he-gap{width:clamp(13px,2vw,31px)}
.he-letter{
  position:relative;
  display:inline-block;
  color:#f5f5f2;
  opacity:0;
  transform-origin:50% 55%;
  will-change:transform,opacity,filter;
  text-shadow:0 0 var(--he-glow,20px) rgba(255,255,255,.08);
}
.he-letter.he-era{color:#ff7a1a}
.he-loader-math{
  position:absolute;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  z-index:4;
  color:rgba(255,255,255,.34);
  font-size:9px;
  font-weight:650;
  letter-spacing:.15em;
  white-space:nowrap;
  opacity:0;
  animation:heMathIn 1.1s ease 7.4s forwards;
}
@keyframes heMathIn{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}

/* Default/current 3-direction H builder is style 0. */
.he-brand-loader:not(.he-style-0) .he-mode-h{display:none}
.he-brand-loader.he-style-0 .he-mode-word{display:none}
.he-brand-loader.he-style-0 .he-loader-math{bottom:12vh}

/* Dynamic background geometry also comes from the same seed. */
.he-brand-loader::after{
  content:"";
  position:absolute;
  width:155vmax;
  height:1px;
  left:50%;
  top:50%;
  background:linear-gradient(90deg,transparent,rgba(255,122,26,.18),rgba(255,255,255,.10),transparent);
  transform:translate(-50%,-50%) rotate(var(--he-angle,18deg));
  transform-origin:center;
  z-index:1;
  opacity:.5;
  box-shadow:0 0 28px rgba(255,122,26,.08);
}

/* STYLE 1 — coordinates assemble from mathematically generated positions. */
.he-style-1 .he-letter{
  animation:heSeedScatter 3.1s cubic-bezier(.13,.82,.18,1) var(--delay) forwards;
}
@keyframes heSeedScatter{
  0%{opacity:0;filter:blur(13px);transform:translate(var(--sx),var(--sy)) rotate(var(--rot)) scale(.35)}
  72%{opacity:1;filter:blur(0);transform:translate(0,0) rotate(0) scale(1.08)}
  100%{opacity:1;filter:none;transform:none}
}

/* STYLE 2 — alternating vertical vectors. */
.he-style-2 .he-letter:nth-of-type(odd){animation:heVectorTop 2.8s cubic-bezier(.12,.82,.2,1) var(--delay) forwards}
.he-style-2 .he-letter:nth-of-type(even){animation:heVectorBottom 2.8s cubic-bezier(.12,.82,.2,1) var(--delay) forwards}
@keyframes heVectorTop{0%{opacity:0;transform:translateY(-72vh) scaleY(1.9);filter:blur(9px)}75%{opacity:1;transform:translateY(8px) scaleY(.96);filter:none}100%{opacity:1;transform:none}}
@keyframes heVectorBottom{0%{opacity:0;transform:translateY(72vh) scaleY(1.9);filter:blur(9px)}75%{opacity:1;transform:translateY(-8px) scaleY(.96);filter:none}100%{opacity:1;transform:none}}

/* STYLE 3 — orbital / trigonometric-feel assembly. */
.he-style-3 .he-mode-word{animation:heOrbitStage 5.8s ease-in-out .25s both}
.he-style-3 .he-letter{animation:heOrbitLetter 3.5s cubic-bezier(.18,.75,.15,1) var(--delay) forwards}
@keyframes heOrbitStage{0%,58%{transform:rotateZ(var(--he-skew,0deg)) scale(.86)}80%,100%{transform:none}}
@keyframes heOrbitLetter{0%{opacity:0;transform:rotateY(720deg) rotateZ(var(--rot)) translateX(var(--he-spread)) scale(.15);filter:blur(12px)}72%{opacity:1;transform:rotateY(-18deg) rotateZ(2deg) translateX(0) scale(1.08);filter:none}100%{opacity:1;transform:none}}

/* STYLE 4 — scanner equation: letters are drawn across one moving line. */
.he-style-4 .he-mode-word::before{
  content:"";position:absolute;left:-8%;right:-8%;top:52%;height:2px;
  background:linear-gradient(90deg,transparent,#ff7a1a,#fff,#ff7a1a,transparent);
  box-shadow:0 0 24px rgba(255,122,26,.5);
  transform:scaleX(0);transform-origin:left;
  animation:heScanLine 5.2s cubic-bezier(.15,.75,.2,1) .5s forwards;
}
.he-style-4 .he-letter{animation:heScanLetter 1.65s ease var(--delay) forwards}
@keyframes heScanLine{0%{transform:scaleX(0);opacity:0}18%{opacity:1}70%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
@keyframes heScanLetter{0%{opacity:0;clip-path:inset(50% 0 50% 0);filter:blur(3px);transform:scaleX(.4)}100%{opacity:1;clip-path:inset(0);filter:none;transform:none}}

/* STYLE 5 — mathematical 3-D flip sequence. */
.he-style-5 .he-letter{animation:heMathFlip 3.2s cubic-bezier(.12,.78,.2,1) var(--delay) forwards}
@keyframes heMathFlip{0%{opacity:0;transform:rotateX(96deg) rotateY(var(--rot)) translateZ(-420px) scale(.4);filter:blur(11px)}65%{opacity:1;transform:rotateX(-12deg) rotateY(8deg) translateZ(38px) scale(1.05);filter:none}100%{opacity:1;transform:none}}

/* STYLE 6 — sine-wave-like arrival. */
.he-style-6 .he-mode-word{gap:clamp(5px,.52vw,10px)}
.he-style-6 .he-letter{animation:heWaveIn 3.4s cubic-bezier(.15,.8,.18,1) var(--delay) forwards}
.he-style-6 .he-letter:nth-of-type(2n){--wave:68px}
.he-style-6 .he-letter:nth-of-type(2n+1){--wave:-68px}
@keyframes heWaveIn{0%{opacity:0;transform:translateY(var(--wave,-68px)) translateX(calc(var(--sx) * .18)) rotate(var(--rot)) scale(.35);filter:blur(10px)}55%{opacity:1;transform:translateY(calc(var(--wave,-68px) * -.2)) scale(1.12);filter:none}78%{transform:translateY(8px) scale(.98)}100%{opacity:1;transform:none}}

/* STYLE 7 — converging left/right matrices. */
.he-style-7 .he-letter:nth-of-type(-n+4){animation:heFromLeftMatrix 3.1s cubic-bezier(.12,.8,.18,1) var(--delay) forwards}
.he-style-7 .he-letter:nth-of-type(n+5){animation:heFromRightMatrix 3.1s cubic-bezier(.12,.8,.18,1) var(--delay) forwards}
@keyframes heFromLeftMatrix{0%{opacity:0;letter-spacing:.5em;transform:translateX(-86vw) skewX(var(--he-skew));filter:blur(10px)}80%{opacity:1;transform:translateX(6px) skewX(-2deg);filter:none}100%{opacity:1;transform:none}}
@keyframes heFromRightMatrix{0%{opacity:0;letter-spacing:.5em;transform:translateX(86vw) skewX(calc(var(--he-skew) * -1));filter:blur(10px)}80%{opacity:1;transform:translateX(-6px) skewX(2deg);filter:none}100%{opacity:1;transform:none}}

/* STYLE 8 — focus/scale equation, from points to a finished wordmark. */
.he-style-8 .he-mode-word{animation:heFocusStage 7s cubic-bezier(.15,.75,.18,1) .2s both}
.he-style-8 .he-letter{animation:heFocusLetter 3s cubic-bezier(.12,.8,.2,1) var(--delay) forwards}
@keyframes heFocusStage{0%{transform:scale(2.3);letter-spacing:.15em}58%{transform:scale(.9);letter-spacing:-.02em}75%,100%{transform:none;letter-spacing:-.065em}}
@keyframes heFocusLetter{0%{opacity:0;transform:scale(.02) rotate(var(--rot));filter:blur(14px)}45%{opacity:1;transform:scale(1.35) rotate(-4deg);filter:blur(1px)}75%{transform:scale(.92)}100%{opacity:1;transform:none;filter:none}}

/* All non-H styles receive a subtle final brand lock after assembly. */
.he-brand-loader:not(.he-style-0) .he-mode-word{animation-fill-mode:both}
.he-brand-loader:not(.he-style-0) .he-mode-word::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-25px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,122,26,.75),transparent);
  transform:scaleX(0);
  animation:heFinalUnderline 1.5s ease 6.6s forwards;
}
@keyframes heFinalUnderline{0%{opacity:0;transform:scaleX(0)}55%{opacity:1;transform:scaleX(1)}100%{opacity:.5;transform:scaleX(.6)}}

@media(max-width:760px){
  .he-loader-stage{width:96vw;min-height:240px}
  .he-mode-word{font-size:clamp(42px,12.5vw,68px);gap:2px;letter-spacing:-.07em}
  .he-mode-word .he-gap{width:12px}
  .he-loader-math{font-size:7px;letter-spacing:.08em;bottom:14px;max-width:92vw;overflow:hidden;text-overflow:ellipsis}
}
@media(max-width:430px){
  .he-mode-word{font-size:clamp(36px,11.8vw,52px)}
  .he-mode-word .he-gap{width:9px}
}

/* ========================================================================
   V6.35 — PROCEDURAL MATHEMATICAL ART LOADER
   Every homepage load generates new trig/algebra/polar/matrix geometry from
   the exact date/time seed. Canvas particles resolve that data into HYPER ERA.
   ======================================================================== */
.he-math-loader{
  position:fixed;
  inset:0;
  z-index:999999;
  overflow:hidden;
  background:#030405;
  opacity:1;
  transition:opacity .72s cubic-bezier(.4,0,.2,1),visibility .72s;
  visibility:visible;
}
.he-math-loader.is-exiting{opacity:0;visibility:hidden;pointer-events:none}
.he-math-loader__canvas{position:absolute;inset:0;width:100%;height:100%;display:block;background:#030405}
.he-math-loader__final{
  position:absolute;
  left:50%;
  top:50%;
  z-index:3;
  display:flex;
  align-items:baseline;
  gap:clamp(12px,1.4vw,26px);
  transform:translate(-50%,-50%) scale(.94);
  transform-origin:center;
  opacity:0;
  white-space:nowrap;
  pointer-events:none;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  font-size:clamp(68px,11vw,190px);
  line-height:.82;
  letter-spacing:-.075em;
  font-weight:900;
  text-transform:uppercase;
  text-shadow:0 0 42px rgba(255,255,255,.04);
}
.he-math-loader__final span{color:#f4f6f7}
.he-math-loader__final strong{color:#ff7a1a;font:inherit}
.he-math-loader__meta{
  position:absolute;
  left:50%;
  bottom:clamp(22px,4vh,52px);
  z-index:4;
  transform:translateX(-50%);
  max-width:min(90vw,920px);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#c5cbd0;
  opacity:0;
  font:600 clamp(9px,.82vw,12px)/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.15em;
  text-align:center;
}
body.he-loading{overflow:hidden}
body.he-loaded{overflow:auto}

/* Make the homepage start close to the header and keep its primary heading centered. */
.he-home .hero{padding-top:30px!important}
.he-home .hero-copy{text-align:center!important}
.he-home .hero-copy h1,
.he-home .hero-copy .hero-lead{margin-left:auto!important;margin-right:auto!important;text-align:center!important}
.he-home .hero-copy .eyebrow,
.he-home .hero-copy .hero-actions,
.he-home .hero-copy .hero-proof{justify-content:center!important}

@media(max-width:760px){
  .he-math-loader__final{font-size:clamp(46px,13.8vw,82px);gap:9px;letter-spacing:-.08em}
  .he-math-loader__meta{bottom:18px;font-size:8px;letter-spacing:.10em;max-width:92vw}
  .he-home .hero{padding-top:20px!important}
}
@media(max-width:430px){
  .he-math-loader__final{font-size:clamp(40px,13.2vw,62px);gap:7px}
}
@media(prefers-reduced-motion:reduce){
  .he-math-loader{display:none!important}
  body.he-loading{overflow:auto!important}
}


/* ========================================================================
   V6.36 — FORMULA-CONSTRUCTED HYPER ERA WORDMARK
   Final brand is drawn on Canvas from parametric line + Bezier equations.
   No font glyph is used for the final mathematical HYPER ERA formation.
   ======================================================================== */
.he-math-loader__final{display:none!important}
.he-math-loader__meta{bottom:clamp(16px,2.8vh,34px)}
@media(max-width:760px){.he-math-loader__meta{bottom:10px}}


/* ========================================================================
   V6.37 — PROFESSIONAL SQUARE WEBSITE SYSTEM
   Corporate flat geometry, readable typography, minimal footer.
   ======================================================================== */
:root{
  --container:1240px;
  --ink:#111417;
  --ink-2:#252a2e;
  --muted:#596168;
  --line:#d9d6d0;
  --soft:#f4f3f0;
  --soft-2:#faf9f7;
  --orange:#ff7a1a;
  --orange-dark:#c94f00;
}
body.he-home{background:#faf9f7;color:var(--ink);font-size:16px;line-height:1.6}
.he-home .container{width:min(calc(100% - 48px),var(--container))}

/* Square geometry: preserve only true status/browser dots as circles. */
.he-home .brand-mark,
.he-home .header-price,
.he-home .eyebrow b,
.he-home .btn,
.he-home .hero-product,
.he-home .browser-bar b,
.he-home .app-side,
.he-home .app-logo,
.he-home .app-main,
.he-home .app-top button,
.he-home .stats article,
.he-home .mini-form,
.he-home .side-activity,
.he-home .mini-head span,
.he-home .mini-fields label i,
.he-home .mini-submit,
.he-home .floating-price,
.he-home .compare-shell,
.he-home .compare-brand>span,
.he-home .why-list article>span,
.he-home .feature-card,
.he-home .field-demo i,
.he-home .field-demo button,
.he-home .permissions span,
.he-home .id-demo,
.he-home .id-photo,
.he-home .id-lines i,
.he-home .phone-demo,
.he-home .phone-demo i,
.he-home .phone-demo button,
.he-home .workflow-line article>b,
.he-home .use-grid article,
.he-home .included span,
.he-home .price-card,
.he-home .price-card>a,
.he-home .login-options,
.he-home .login-options a>b,
.he-home .footer-brand>span{
  border-radius:0!important;
}

/* Header — compact premium product website. */
.he-home .site-header{
  background:rgba(255,255,255,.96);
  border-bottom:1px solid #d8d5cf;
  box-shadow:none;
  backdrop-filter:blur(14px);
}
.he-home .header-inner{height:68px;gap:30px}
.he-home .brand-mark{width:38px;height:38px;font-size:17px;box-shadow:none}
.he-home .brand-copy strong{font-size:15px;letter-spacing:-.02em}
.he-home .brand-copy small{font-size:9px;letter-spacing:.13em;margin-top:4px;color:#737a80}
.he-home .nav{gap:30px}
.he-home .nav a{font-size:13px;font-weight:600;color:#4e565c}
.he-home .header-login{font-size:13px;padding:10px 12px}
.he-home .header-price{padding:10px 15px;box-shadow:none}
.he-home .header-price strong{font-size:15px}.he-home .header-price span{font-size:10px}

/* Hero — tighter top spacing, centered message, restrained visual treatment. */
.he-home .hero{padding:34px 0 72px!important;background:#fff;overflow:hidden}
.he-home .hero-grid{grid-template-columns:.92fr 1.08fr;gap:58px}
.he-home .hero-copy{text-align:center}
.he-home .eyebrow{justify-content:center;margin-bottom:17px}
.he-home .eyebrow span,.he-home .eyebrow b{font-size:10px}
.he-home .eyebrow b{padding:5px 8px;border:1px solid #e2dfda;background:#faf9f7}
.he-home .hero h1{font-size:clamp(46px,5.1vw,72px);line-height:1.01;letter-spacing:-.052em;margin-inline:auto}
.he-home .hero-lead{font-size:17px;line-height:1.72;color:#515b62;margin-top:21px}
.he-home .hero-actions{justify-content:center;margin-top:26px}
.he-home .btn{min-height:49px;padding:0 20px;font-size:14px;box-shadow:none}
.he-home .btn.secondary{border-color:#d7d3cd}
.he-home .hero-proof{justify-content:center;font-size:12px;gap:20px;margin-top:22px}
.he-home .hero-product{border:1px solid #d3d0ca;box-shadow:0 24px 55px rgba(25,22,18,.09);overflow:hidden}
.he-home .floating-price{right:0;bottom:0;border-width:1px 0 0 1px;box-shadow:none}

/* Sections — less card-heavy, more editorial / enterprise. */
.he-home .section{padding:82px 0}
.he-home .section-heading{margin-bottom:34px}
.he-home .section-heading h2,
.he-home .why-copy h2,
.he-home .use-intro h2,
.he-home .pricing-copy h2,
.he-home .faq-title h2,
.he-home .login-wrap h2{font-size:clamp(34px,3.6vw,52px);line-height:1.08;letter-spacing:-.04em}
.he-home .section-heading>span,
.he-home .section-kicker,
.he-home .use-intro>span,
.he-home .pricing-copy>span,
.he-home .faq-title>span,
.he-home .login-wrap>div>span{font-size:10px;letter-spacing:.14em}
.he-home .section-heading p,
.he-home .why-copy p,
.he-home .pricing-copy p,
.he-home .faq-title p{font-size:15px;line-height:1.72;color:#596168}

.he-home .value-grid>div{min-height:86px;padding:18px 22px}
.he-home .value-grid b{font-size:11px}.he-home .value-grid span{font-size:13px}

.he-home .compare-section{background:#f4f3f0}
.he-home .compare-shell{border-color:#d5d1ca;box-shadow:none}
.he-home .compare-label{font-size:11px}
.he-home .compare-brand b{font-size:14px}.he-home .compare-brand small{font-size:9px}
.he-home .compare-row>div{font-size:13px;line-height:1.55;min-height:72px}
.he-home .compare-row>div:first-child b{font-size:14px}.he-home .compare-row>div:first-child small{font-size:11px}
.he-home .compare-note{font-size:11px;line-height:1.65}

.he-home .why-grid{gap:68px}
.he-home .why-copy{top:92px}
.he-home .why-list article{grid-template-columns:48px 1fr;padding:24px 0}
.he-home .why-list article>span{width:36px;height:36px;font-size:10px;border:1px solid #ead2bf;background:#fff8f2}
.he-home .why-list b{font-size:17px}.he-home .why-list p{font-size:14px;line-height:1.65}

.he-home .features-section{background:#faf9f7}
.he-home .feature-grid{gap:12px}
.he-home .feature-card{border-color:#d8d4cd;box-shadow:none;padding:26px;min-height:286px}
.he-home .feature-card:hover{transform:none;box-shadow:none;border-color:#bfb9b0}
.he-home .feature-card>span{font-size:10px}
.he-home .feature-card h3{font-size:23px;margin-top:11px}
.he-home .feature-card p{font-size:13px;line-height:1.67;color:#596168}

.he-home .workflow-line article>b{border:1px solid #ecd3c0;background:#fff7f0}
.he-home .workflow-line h3{font-size:15px}.he-home .workflow-line p{font-size:11.5px;line-height:1.6}

.he-home .use-section{background:#f4f3f0}
.he-home .use-grid{gap:10px}
.he-home .use-grid article{border-color:#d7d3cc;box-shadow:none;padding:24px}
.he-home .use-grid article>b{font-size:10px}.he-home .use-grid article h3{font-size:18px;margin-top:18px}.he-home .use-grid article p{font-size:13px;line-height:1.62}

.he-home .included span{font-size:11px;padding:7px 10px;background:#fff;border-color:#d7d3cd}
.he-home .price-card{border-color:#cbc6bd;box-shadow:0 20px 45px rgba(25,22,18,.07)}
.he-home .price-top small{font-size:9px}.he-home .price-top b{font-size:10px}
.he-home .price-card>p{font-size:13px;line-height:1.65}
.he-home .price-card>a{box-shadow:none}
.he-home .price-card>a small{font-size:9px}.he-home .price-card>a strong{font-size:20px}

.he-home .faq-list summary{font-size:14px;min-height:70px}.he-home .faq-list details p{font-size:13px;line-height:1.72}
.he-home .login-section{padding:68px 0}
.he-home .login-options{border-color:#d5d1ca}
.he-home .login-options a{min-height:92px;padding:16px 18px}
.he-home .login-options a strong{font-size:14px}.he-home .login-options a small{font-size:11px;line-height:1.45}

/* Minimal professional footer — intentionally no phone number. */
.he-home .footer{background:#171a1d;color:#e9ebec;padding:30px 0 18px;border-top:3px solid var(--orange)}
.he-home .footer-inner{display:grid;grid-template-columns:auto 1fr auto;gap:34px;align-items:center}
.he-home .footer-brand>span{width:34px;height:34px;font-size:13px}
.he-home .footer-brand b{font-size:13px;color:#fff}.he-home .footer-brand small{font-size:9px;letter-spacing:.12em;color:#9ba1a5}
.he-home .footer-copy{margin:0;text-align:center;font-size:12px;line-height:1.55;color:#aeb4b8}
.he-home .footer-links{display:flex;gap:18px;align-items:center;justify-content:flex-end}
.he-home .footer-links a{font-size:12px;font-weight:650;color:#e7e9ea}
.he-home .footer-links a:hover{color:#ff9a55}
.he-home .footer-bottom{margin-top:22px;padding-top:15px;border-top:1px solid #303438;display:flex;justify-content:space-between;gap:20px;font-size:10px;color:#7f888e}

@media(max-width:1050px){
  .he-home .hero-grid{grid-template-columns:1fr;gap:42px}
  .he-home .hero-product{max-width:780px;margin-inline:auto}
  .he-home .footer-inner{grid-template-columns:1fr;text-align:center;gap:16px}
  .he-home .footer-brand,.he-home .footer-links{justify-content:center}
  .he-home .footer-copy{max-width:620px;margin-inline:auto}
}
@media(max-width:760px){
  .he-home .container{width:min(calc(100% - 28px),var(--container))}
  .he-home .header-inner{height:62px}
  .he-home .hero{padding:24px 0 52px!important}
  .he-home .hero h1{font-size:clamp(38px,11vw,52px)}
  .he-home .hero-lead{font-size:15px;line-height:1.68}
  .he-home .hero-proof{font-size:11px}
  .he-home .section{padding:62px 0}
  .he-home .compare-row>div{font-size:12px}
  .he-home .compare-row>div:first-child b{font-size:13px}
  .he-home .feature-card{padding:21px}
  .he-home .footer-bottom{flex-direction:column;align-items:center;text-align:center;gap:5px}
}
@media(max-width:480px){
  .he-home .brand-copy small{display:none}
  .he-home .header-price{padding:9px 10px}
  .he-home .hero h1{font-size:37px}
  .he-home .hero-proof{grid-template-columns:1fr 1fr;gap:8px}
  .he-home .section-heading h2,
  .he-home .why-copy h2,
  .he-home .pricing-copy h2,
  .he-home .faq-title h2{font-size:31px}
  .he-home .footer-links{flex-direction:column;gap:8px}
}

/* V6.38: practical-mathematics loader uses the existing full-screen square visual system. */

/* ==========================================================
   V6.39 — DATE/TIME → FORMULA → GEOMETRY loader refinement
   ========================================================== */
.he-math-loader__meta{
  font-size:clamp(9px,.78vw,12px)!important;
  letter-spacing:.105em!important;
  max-width:min(94vw,980px)!important;
  text-align:center!important;
}
@media(max-width:760px){
  .he-math-loader__meta{
    font-size:8.5px!important;
    line-height:1.45!important;
    max-width:94vw!important;
  }
}

/* ==========================================================
   V6.40 — 20 SECOND VISIBLE INPUT → FORMULA → RESULT PROOF
   Canvas stage labels are intentionally larger/readable while the
   mathematical systems continue to drive the actual animation.
   ========================================================== */
.he-math-loader__meta{
  bottom:clamp(14px,2.4vh,30px)!important;
  font-size:clamp(10px,.84vw,13px)!important;
  letter-spacing:.08em!important;
  color:#d2d8dc!important;
}
@media(max-width:760px){
  .he-math-loader__meta{
    bottom:8px!important;
    font-size:9px!important;
    line-height:1.42!important;
    letter-spacing:.055em!important;
  }
}


/* ==========================================================
   V6.41 — 30 SECOND LOADER + STEP 5 SAFE-ZONE FIX
   Keeps the persistent status line at the very bottom while the
   final proof/result remains well above it on phone/desktop.
   ========================================================== */
.he-math-loader__meta{
  bottom:max(12px,env(safe-area-inset-bottom))!important;
  padding:0 14px!important;
  line-height:1.45!important;
}
@media(max-width:760px){
  .he-math-loader__meta{
    bottom:max(10px,env(safe-area-inset-bottom))!important;
    font-size:8.5px!important;
    max-width:96vw!important;
  }
}
@media(max-height:560px){
  .he-math-loader__meta{
    bottom:max(6px,env(safe-area-inset-bottom))!important;
    font-size:7.5px!important;
    opacity:.72!important;
  }
}


/* ==========================================================
   V6.42 — MOBILE TOP NAV: overflow-x + auto-centered menu
   ========================================================== */
@media(max-width:760px){
  .he-home .site-header{overflow:visible}
  .he-home .header-inner{
    height:auto!important;
    min-height:62px;
    flex-wrap:wrap;
    gap:0 8px;
    padding-top:7px;
  }
  .he-home .brand{order:1;min-width:0}
  .he-home .header-actions{order:2;margin-left:auto}
  .he-home .nav{
    order:3;
    display:flex!important;
    width:100vw;
    max-width:none;
    margin:7px calc(50% - 50vw) 0!important;
    padding:8px calc(50vw - 48px) 9px;
    gap:8px!important;
    overflow-x:auto;
    overflow-y:hidden;
    white-space:nowrap;
    flex-wrap:nowrap;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    border-top:1px solid #ece9e4;
    background:#fff;
    scrollbar-width:none;
  }
  .he-home .nav::-webkit-scrollbar{display:none}
  .he-home .nav a{
    flex:0 0 auto;
    min-width:96px;
    height:36px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 13px;
    border:1px solid #dedad3;
    border-radius:0!important;
    background:#fff;
    color:#40484e;
    font-size:12px!important;
    font-weight:650!important;
    scroll-snap-align:center;
    scroll-snap-stop:always;
    transition:background .22s ease,border-color .22s ease,color .22s ease;
  }
  .he-home .nav a.is-auto-centered{
    background:#171a1d;
    border-color:#171a1d;
    color:#fff;
  }
  .he-home .hero{padding-top:22px!important}
}

@media(prefers-reduced-motion:reduce){
  .he-home .nav{scroll-behavior:auto!important}
  .he-home .nav a{transition:none!important}
}


/* ==========================================================
   V6.44 — USER HOME PAGE MOBILE NAV ONLY
   Horizontal swipe + one-by-one automatic centering.
   Scoped to body.he-home so /ac, portal and public forms are unaffected.
   ========================================================== */
@media(max-width:760px){
  body.he-home .site-header{overflow:visible!important}
  body.he-home .header-inner{
    overflow:visible!important;
  }
  body.he-home #homeTopNav{
    display:flex!important;
    flex:0 0 100%!important;
    width:100vw!important;
    min-width:100vw!important;
    max-width:none!important;
    flex-wrap:nowrap!important;
    white-space:nowrap!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:calc(50vw - 48px);
    scroll-behavior:smooth;
    scrollbar-width:none;
    -ms-overflow-style:none;
    touch-action:pan-x;
  }
  body.he-home #homeTopNav::-webkit-scrollbar{display:none!important}
  body.he-home #homeTopNav>a{
    flex:0 0 auto!important;
    scroll-snap-align:center;
    scroll-snap-stop:always;
  }
}


/* ==========================================================
   V6.45 — DEFINITIVE HOME PAGE MOBILE HEADER CAROUSEL FIX
   Only form.hyperera.org/ (body.he-home / #homeTopNav)
   ========================================================== */
@media (max-width:760px){
  body.he-home .site-header{
    overflow:visible!important;
  }
  body.he-home .header-inner{
    height:auto!important;
    min-height:62px!important;
    display:flex!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    gap:0 8px!important;
    padding-top:7px!important;
    padding-bottom:0!important;
    overflow:visible!important;
  }
  body.he-home .brand{order:1!important;min-width:0!important}
  body.he-home .header-actions{order:2!important;margin-left:auto!important}
  body.he-home #homeTopNav{
    order:3!important;
    display:flex!important;
    flex:0 0 100vw!important;
    width:100vw!important;
    min-width:100vw!important;
    max-width:100vw!important;
    margin:7px calc(50% - 50vw) 0!important;
    padding:9px calc(50vw - 68px) 10px!important;
    box-sizing:border-box!important;
    gap:10px!important;
    align-items:center!important;
    flex-wrap:nowrap!important;
    white-space:nowrap!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior-x:contain!important;
    scroll-snap-type:x mandatory!important;
    scroll-padding-inline:calc(50vw - 68px)!important;
    scroll-behavior:smooth!important;
    scrollbar-width:none!important;
    -ms-overflow-style:none!important;
    touch-action:pan-x!important;
    border-top:1px solid #e9e5de!important;
    border-bottom:1px solid #ece8e1!important;
    background:#fff!important;
  }
  body.he-home #homeTopNav::-webkit-scrollbar{display:none!important}
  body.he-home #homeTopNav>a{
    flex:0 0 136px!important;
    width:136px!important;
    min-width:136px!important;
    max-width:136px!important;
    height:38px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:0 12px!important;
    margin:0!important;
    border:1px solid #dcd8d1!important;
    border-radius:0!important;
    background:#fff!important;
    color:#343b40!important;
    font-size:12px!important;
    font-weight:650!important;
    line-height:1!important;
    text-align:center!important;
    scroll-snap-align:center!important;
    scroll-snap-stop:always!important;
    transition:background .24s ease,color .24s ease,border-color .24s ease,transform .24s ease!important;
  }
  body.he-home #homeTopNav>a.is-auto-centered{
    background:#171a1d!important;
    border-color:#171a1d!important;
    color:#fff!important;
    transform:scale(1.03)!important;
  }
  body.he-home .hero{padding-top:22px!important}
}

@media (max-width:420px){
  body.he-home #homeTopNav{
    padding-left:calc(50vw - 62px)!important;
    padding-right:calc(50vw - 62px)!important;
    scroll-padding-inline:calc(50vw - 62px)!important;
  }
  body.he-home #homeTopNav>a{
    flex-basis:124px!important;
    width:124px!important;
    min-width:124px!important;
    max-width:124px!important;
  }
}

/* ==========================================================
   V6.46 — MAIN HOME PAGE MOBILE HEADER CAROUSEL
   Same desktop menu; mobile-only horizontal overflow + auto centering.
   Critical copy also exists inline in index.php so cached CSS cannot hide it.
   ========================================================== */
@media (max-width:760px){
  body.he-home .site-header #homeTopNav{
    display:flex!important;
    flex-wrap:nowrap!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    white-space:nowrap!important;
    scrollbar-width:none!important;
    -webkit-overflow-scrolling:touch!important;
    scroll-snap-type:x mandatory!important;
    scroll-behavior:smooth!important;
  }
  body.he-home .site-header #homeTopNav::-webkit-scrollbar{display:none!important}
  body.he-home .site-header #homeTopNav>a{
    flex:0 0 60vw!important;
    min-width:150px!important;
    max-width:220px!important;
    scroll-snap-align:center!important;
    scroll-snap-stop:always!important;
  }
}