/* Zyon: the customer's experience and the merchant's control, in one composition. */
:root { --tour-paper:oklch(96.8% .012 153); --tour-ink:oklch(25% .037 155); --tour-muted:oklch(44% .028 154); }
.hero { padding-top:76px; padding-bottom:30px; overflow:hidden; }
.hero::before { background-position:center top; opacity:.55; }
#wave-field { opacity:.35; }
.hero-grid { display:flex; flex-direction:column; gap:58px; }
.hero-copy { padding:0; max-width:none; width:100%; text-align:center; align-items:center; display:flex; flex-direction:column; }
.hero-copy .eyebrow { text-transform:uppercase; letter-spacing:.16em; font-size:11px; color:#b6d7c4; }
.hero h1 { text-wrap:balance; width:100%; max-width:100%; margin:26px 0 22px; font-size:clamp(56px,6.4vw,94px); font-weight:500; line-height:1.03; letter-spacing:-.065em; }
.hero h1 em { font-style:normal; color:oklch(80% .12 157); }
.hero-lead { max-width:58ch; margin:0; font-size:17px; line-height:1.75; color:#b9cec1; }
.hero-cta { margin-top:28px; justify-content:center; }
.hero-assurance { color:#a6bfaf; font-size:11px; margin:18px 0 0; letter-spacing:.02em; }
.hero-product-stage { position:relative; display:grid; grid-template-columns:minmax(0,1fr) 360px; align-items:start; width:100%; gap:0; padding:20px 0 0; perspective:1800px; }
.hero-dashboard { display:block; position:relative; color:#d5e7db; background:#17251e; border:1px solid #5f826a; border-radius:12px; padding:7px; margin-top:38px; margin-right:-50px; transform:rotateY(5deg) rotateX(2deg) rotateZ(-2deg); transform-origin:right center; box-shadow:0 35px 70px #01090688; transition:transform .65s cubic-bezier(.16,1,.3,1); }
.hero-dashboard:hover,.hero-dashboard:focus-visible { transform:rotateY(0) rotateX(0) rotateZ(-.5deg); }
.hero-dashboard picture { display:block; overflow:hidden; border-radius:4px; max-height:565px; }
.hero-dashboard img { width:100%; height:auto; display:block; }
.product-window-bar { min-height:33px; padding:0 10px 6px; display:flex; align-items:center; justify-content:space-between; font-size:10px; letter-spacing:.03em; }
.product-window-bar > span:first-child { display:flex; gap:5px; }
.product-window-bar i { width:5px; height:5px; background:#7d9f8a; border-radius:50%; }
.hero-dashboard-caption { display:flex; justify-content:space-between; align-items:center; padding:16px 13px 9px; font-size:11px; }
.hero-dashboard-caption strong { font-weight:500; font-size:14px; }
.hero-product-stage .demo-column { position:relative; z-index:2; transform:translateY(-8px); padding:0 0 0 8px; }
.demo-heading { font-size:12px; color:#c4ddcd; }
.demo-heading > span:last-child { font-size:20px; }
.demo-frame { box-shadow:0 24px 64px #010a0877; border:1px solid #7a9e85; border-radius:16px; }
.demo-frame iframe { height:515px; border-radius:0 0 15px 15px; }
.demo-bar { padding-inline:12px; min-height:46px; }
.demo-open,.demo-state { font-size:10px; }
.demo-overlay { inset-block-start:46px; }
.demo-note { font-size:10px; line-height:1.6; padding-inline:3px; }
.hero-stage-footer { display:flex; justify-content:space-between; align-items:center; gap:24px; padding-top:42px; padding-bottom:10px; font-size:11px; color:#adc7b6; }
.hero-stage-footer a { color:#ddede3; min-height:44px; display:inline-flex; align-items:center; gap:12px; }
.signal-strip { border-top:1px solid #466852; background:#183427; }
.signal-strip .shell { padding-block:22px; }
.signal-intro { color:#bdd3c6; }
.signal-list { color:#e3eee6; }
.product-tour { background:var(--tour-paper); color:var(--tour-ink); padding:112px 0 70px; overflow:hidden; }
.tour-heading { display:grid; grid-template-columns:1.4fr 1fr; gap:90px; align-items:end; margin-bottom:52px; }
.tour-heading h2 { font-size:clamp(40px,4.5vw,66px); font-weight:500; line-height:1.08; letter-spacing:-.055em; margin:22px 0 0; }
.tour-heading h2 em { color:oklch(48% .076 158); font-style:normal; }
.tour-heading > p { max-width:36ch; line-height:1.8; font-size:15px; color:var(--tour-muted); margin:0 0 5px; }
.product-tour .section-tag { color:oklch(40% .063 158); font-size:11px; letter-spacing:.12em; text-transform:uppercase; }
.tour-layout { display:grid; grid-template-columns:270px minmax(0,1fr); gap:46px; align-items:center; }
.tour-nav { display:flex; flex-direction:column; border-top:1px solid #c5d4c9; }
.tour-tab { position:relative; display:grid; grid-template-columns:24px 1fr 16px; gap:10px; text-align:left; padding:25px 0; color:var(--tour-muted); font:inherit; border:0; border-bottom:1px solid #c5d4c9; background:transparent; cursor:pointer; min-height:126px; }
.tour-tab strong { display:block; font-size:17px; letter-spacing:-.035em; font-weight:600; color:var(--tour-ink); }
.tour-tab > span:nth-child(2) > span { display:block; font-size:12px; line-height:1.8; margin-top:10px; }
.tour-number { font:10px var(--mono); padding-top:5px; }
.tour-arrow { opacity:0; transform:translate(-4px,4px); transition:opacity .2s,transform .3s; }
.tour-tab[aria-selected="true"] .tour-number { color:oklch(40% .09 155); font-weight:700; }
.tour-tab[aria-selected="true"] .tour-arrow { opacity:1; transform:translate(0,0); }
.tour-tab[aria-selected="true"] strong { color:oklch(40% .09 155); }
.tour-tab[aria-selected="false"] > span:nth-child(2) > span { color:#596e60; }
.tour-stage { min-width:0; padding:22px; background:oklch(88.4% .028 153); border-radius:16px; }
.tour-panel { margin:0; }
.tour-panel[hidden] { display:none; }
.tour-window { padding:0 0 13px; display:flex; gap:12px; justify-content:space-between; align-items:center; font-size:10px; color:#3c5c49; }
.tour-window-label { display:flex; align-items:center; gap:7px; }
.tour-window-label i { width:6px; height:6px; border-radius:50%; background:#346e4d; }
.tour-panel picture { display:block; border-radius:7px; overflow:hidden; box-shadow:0 12px 26px #10291a16; background:#f8faf8; }
.tour-panel img { display:block; width:100%; height:auto; }
.tour-panel figcaption { display:flex; align-items:center; gap:12px; justify-content:space-between; font-size:10px; color:#42604d; padding-top:14px; }
.tour-panel figcaption a { min-height:44px; display:inline-flex; align-items:center; gap:5px; text-decoration:underline; text-underline-offset:4px; }
.tour-bottom { display:flex; justify-content:space-between; align-items:center; margin-top:48px; padding-top:30px; border-top:1px solid #c5d4c9; }
.tour-bottom p { color:var(--tour-muted); font-size:14px; line-height:1.8; margin:0; }
.tour-bottom strong { color:var(--tour-ink); font-weight:600; }
.tour-cta { background:var(--tour-ink); color:#e9f1ec; border:1px solid var(--tour-ink); }
.tour-cta:hover { background:#2d4b38; }
.engine { padding-block:110px; }
.engine-grid { gap:80px; }
.engine-art { transform:perspective(1100px) rotateY(-4deg); }
.pricing { background:oklch(96.8% .012 153); color:var(--tour-ink); }
.pricing .eyebrow,.pricing-head > p,.pricing-note { color:var(--tour-muted); }
.pricing .plan:not(.plan--featured) { background:transparent; color:var(--tour-ink); border-color:#b7cabc; }
.pricing .plan:not(.plan--featured) :is(.plan-label,.plan-description,.plan-fee,.plan-includes,.plan-list,.plan-price small) { color:var(--tour-muted); }
.pricing .plan:not(.plan--featured) .plan-label span { color:#2d5d40; }
.pricing .plan:not(.plan--featured) .plan--plain-button { color:var(--tour-ink); border-color:#8fa998; }
.pricing .plan:not(.plan--featured) .plan-list li::before { color:#2d6945; }
.pricing .plan:not(.plan--featured) .plan-list li { color:var(--tour-muted); }
.pricing .plan--featured .plan-list li { color:#c0d9c9; }
.pricing-head h2 { font-weight:500; letter-spacing:-.045em; }
.signup-path { display:flex; list-style:none; padding:22px 0; margin:8px 0 35px; border-block:1px solid #c4d6ca; color:#375342; font-size:12px; justify-content:space-between; gap:24px; }
.signup-path li { display:flex; align-items:center; gap:12px; }
.signup-path span { color:#46634e; font:10px var(--mono); }
.plan { border-radius:12px; box-shadow:none; }
.plan--featured { background:#143b2b; border-color:#143b2b; box-shadow:0 16px 40px #173b2917; transform:translateY(-8px); }
.plan--featured .plan-label,.plan--featured .plan-description,.plan--featured .plan-fee,.plan--featured .plan-includes,.plan--featured .plan-list,.plan--featured .plan-price small { color:#c0d9c9; }
.plan--featured h3,.plan--featured .plan-price { color:#eaf3ed; }
.plan--featured .plan-label span { background:#71c89c; color:#143b2b; }
.plan--featured .plan-list li::before { color:#7ed5a8; }
.pricing .plan--featured .button--primary { background:#81d6a5; color:#143b2b; }
.pricing :focus-visible { outline-color:#245d3c; }
.plan-description { min-height:0; }
.plan .button { min-height:50px; }
.closing::before { opacity:.4; }
.closing h2 { font-size:clamp(46px,6.5vw,92px); letter-spacing:-.055em; }
@media(min-width:1600px) { .hero-product-stage { grid-template-columns:minmax(0,1fr) 380px; } .demo-frame iframe { height:550px; } }
@media(max-width:1050px) { .hero { padding-top:60px; } .hero-product-stage { grid-template-columns:minmax(0,1fr) 330px; } .hero-dashboard { margin-top:85px; margin-right:-40px; } .hero-dashboard picture { height:440px; } .hero-dashboard img { height:100%; object-fit:cover; object-position:left top; width:auto; max-width:none; } .tour-layout { grid-template-columns:230px minmax(0,1fr); gap:25px; } .tour-heading { gap:40px; } .tour-stage { padding:15px; } }
@media(max-width:700px) { .hero { padding-top:42px; } .hero-grid { gap:35px; } .hero h1 { font-size:clamp(44px,10.5vw,66px); letter-spacing:-.065em; margin-block:22px; } .hero-copy .eyebrow { font-size:9px; letter-spacing:.12em; } .hero-lead { font-size:14px; max-width:37ch; line-height:1.8; } .hero-cta { gap:10px; flex-wrap:wrap; margin-top:25px; } .hero-cta .button { font-size:12px; min-height:48px; padding-inline:17px; } .hero-assurance { font-size:10px; } .hero-product-stage { display:flex; flex-direction:column; gap:26px; padding-top:0; } .hero-dashboard { width:100%; box-sizing:border-box; margin:0; transform:perspective(900px) rotateX(3deg); border-radius:9px; padding:5px; } .hero-dashboard picture { height:auto; max-height:250px; } .hero-dashboard img { width:100%; height:auto; } .hero-dashboard-caption { font-size:10px; padding:11px 8px 7px; } .hero-dashboard-caption strong { font-size:12px; } .product-window-bar { font-size:9px; min-height:25px; } .hero-product-stage .demo-column { transform:none; padding:0; width:100%; max-width:450px; align-self:center; } .demo-frame iframe { height:540px; min-height:0; } .demo-heading { font-size:11px; } .demo-note { font-size:10px; } .hero-stage-footer { padding-top:22px; font-size:10px; flex-wrap:wrap; gap:8px 12px; } .hero-stage-footer > span { display:none; } .hero-stage-footer a { margin:auto; } .signal-strip .shell { padding-block:20px; } .signal-list { font-size:11px; } .product-tour { padding:68px 0 48px; } .tour-heading { grid-template-columns:1fr; gap:20px; margin-bottom:28px; } .tour-heading h2 { font-size:clamp(37px,9vw,54px); margin-top:17px; } .tour-heading > p { font-size:13px; max-width:42ch; } .tour-layout { display:flex; flex-direction:column; gap:24px; align-items:stretch; } .tour-nav { flex-direction:row; gap:14px; border:0; } .tour-tab { display:block; flex:1; min-width:0; padding:12px 0; min-height:75px; border-top:1px solid #c5d4c9; border-bottom:0; } .tour-number { display:block; padding:0 0 10px; font-size:9px; } .tour-tab strong { font-size:12px; letter-spacing:-.02em; } .tour-tab > span:nth-child(2) > span,.tour-arrow { display:none; } .tour-tab[aria-selected="true"] { border-top-color:#2a6442; } .tour-stage { margin-inline:-8px; padding:12px; border-radius:10px; } .tour-panel img { aspect-ratio:1.15; object-fit:cover; object-position:top left; } .tour-window { font-size:9px; padding-bottom:10px; } .tour-panel figcaption { font-size:9px; gap:5px; padding-top:5px; } .tour-bottom { display:block; margin-top:28px; padding-top:24px; } .tour-bottom p { font-size:12px; } .tour-bottom .button { margin-top:20px; font-size:12px; } .engine { padding-block:68px; } .engine-grid { gap:25px; } .engine-art { transform:none; } .signup-path { flex-direction:column; gap:16px; margin-bottom:30px; padding-block:20px; font-size:11px; } .plan--featured { transform:none; } }
@media(prefers-reduced-motion:reduce) { .hero-dashboard,.engine-art { transform:none; transition:none; } .tour-arrow { transition:none; } }