/* Login retains the shared Ask silhouette. */
.button.header-login.ask-login{position:relative;isolation:isolate;overflow:visible;border:0!important;border-radius:999px!important;background:transparent!important;box-shadow:none!important;backdrop-filter:none!important;color:var(--ink)!important;min-height:46px!important;padding:0 21px!important;font-size:12px;gap:9px;transition:transform .2s!important}
.ask-login-surface{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(115deg,#e9fff6c4,#91c9b08c 40%,#eee2a5d9);mask:url('media/ask-button-shape.svg') center/100% 100% no-repeat;-webkit-mask:url('media/ask-button-shape.svg') center/100% 100% no-repeat}
.ask-login-surface:after{content:'';position:absolute;inset:1px;background:radial-gradient(ellipse at 14% 50%,#88d6a511,transparent 65%),radial-gradient(ellipse at 86% 50%,#ffce3221,transparent 70%),#0b1d16f0;mask:url('media/ask-button-shape.svg') center/100% 100% no-repeat;-webkit-mask:url('media/ask-button-shape.svg') center/100% 100% no-repeat}
.button.header-login.ask-login:hover{transform:translateY(-1px) scale(1.025)}.button.header-login.ask-login:active{transform:scale(.99)}html[data-theme=light] .ask-login-surface{background:linear-gradient(115deg,#7fa790b8,#dcead580,#c5ab64ad)}html[data-theme=light] .ask-login-surface:after{background:radial-gradient(ellipse at 85% 50%,#ffce322b,transparent 65%),#f3f9eeed}
#markam-planner .mp-action{border-radius:13px;background:var(--studio-crystal-fill),#ffce3214!important;border-color:#f1de815c!important;color:#fff2ba!important;box-shadow:var(--studio-crystal-shadow)!important;backdrop-filter:blur(14px);transition:transform .2s!important}#markam-planner .mp-action:hover{transform:translateY(-1px) scale(1.02)}html[data-theme=light] #markam-planner .mp-action{color:#51400a!important}
@media(max-width:680px){.hero .button-row{display:flex;flex-direction:column;align-items:stretch;gap:14px;width:100%;max-width:370px}.hero-copy .button-row .button{width:100%;min-height:57px;font-size:13px;padding:0 21px;gap:13px;justify-content:center}.hero-copy .button-row .button svg{width:18px;height:18px}.hero-copy .button-row .button.secondary{border-radius:13px}.hero-foot{font-size:9px;gap:15px;margin-top:24px}.button.header-login.ask-login{font-size:11px;min-height:45px!important;width:89px;padding:0 16px!important;flex-shrink:0;line-height:1.2}.site-header .header-actions{gap:3px}.site-header .brand span{font-size:14px}.site-header .brand img{width:25px}.site-header .brand{gap:4px}.site-header .display-controls .icon-button{width:34px;min-width:34px}.site-header .header-inner{gap:3px}.hero-description{margin-bottom:28px}}
@media(max-width:370px){.site-header .brand span{font-size:12px}.site-header .brand img{width:24px}.button.header-login.ask-login{width:82px;font-size:11px;padding:0 12px!important}.site-header .display-controls .icon-button{width:31px;min-width:31px}.hero-copy .button-row .button{font-size:12px;min-height:55px}.hero-foot{font-size:8px;gap:12px}}
@media(prefers-reduced-motion:reduce){.button.header-login.ask-login:hover{transform:none}.button.header-login.ask-login{transition:none!important}}
/* Values measured from Markam's rendered ModuleNavigation, 3 Oct 2026. */
html[data-theme=dark],html[data-theme=light] .daylight-dark,html[data-theme] .mk-opening-notice,html[data-theme=light] .on-dark-section{--studio-crystal-fill:linear-gradient(155deg,rgba(255,255,255,.043),rgba(16,31,41,.08) 56%,rgba(216,243,255,.094));--studio-crystal-edge:rgba(235,255,255,.145);--studio-crystal-shadow:inset 0 2px 1px rgba(239,255,255,.667),inset 0 -2px 1px rgba(229,253,255,.7),inset 1px 0 2px rgba(25,47,57,.5),inset -1px 0 2px rgba(23,37,44,.5),0 3px 5px rgba(20,40,48,.467),0 0 1px 1px rgba(183,239,255,.14)}
.mobile-site-dock,html[data-theme=light] .mobile-site-dock,.mobile-nav,html[data-theme=light] .mobile-nav{background:var(--studio-crystal-fill)!important;border:1px solid var(--studio-crystal-edge)!important;box-shadow:var(--studio-crystal-shadow)!important;backdrop-filter:blur(14px)!important;-webkit-backdrop-filter:blur(14px)!important}.mobile-site-dock{height:62px;padding:7px;border-radius:999px;gap:4px}.mobile-site-dock>a{min-height:44px;height:46px;border-radius:18px;font-weight:500;gap:2px}.mobile-site-dock>a:first-child{border-radius:23px 18px 18px 23px}.mobile-site-dock>a:last-child{border-radius:18px 23px 23px 18px}.mobile-site-dock>a[aria-current]{background:transparent;border:1px solid var(--studio-crystal-edge);box-shadow:var(--studio-crystal-shadow);backdrop-filter:blur(14px)}.mobile-site-dock svg{width:24px;height:24px}.mobile-site-dock span{font-size:9px;line-height:1.2}.mobile-nav{border-inline:0!important;border-radius:0 0 18px 18px}
@media(max-width:680px){.hero-showcase .feature-tabs,html[data-theme=light] .hero-showcase .feature-tabs{background:var(--studio-crystal-fill)!important;border:1px solid var(--studio-crystal-edge)!important;box-shadow:var(--studio-crystal-shadow)!important;backdrop-filter:blur(14px)!important;-webkit-backdrop-filter:blur(14px)!important}.hero-showcase .feature-tabs [aria-selected=true]{background:transparent}}
@media(max-width:370px){.mobile-site-dock span{font-size:8px}.mobile-site-dock svg{width:22px;height:22px}}
/* Both hero actions share the exact same geometry; signup adds only amber light. */
.hero-copy .button-row .button.primary,.hero-copy .button-row .button.secondary{border-radius:13px!important;min-height:52px;padding-inline:19px;color:var(--ink)!important;border:1px solid var(--studio-crystal-edge)!important;background:var(--studio-crystal-fill)!important;box-shadow:var(--studio-crystal-shadow)!important;font-weight:500}.hero-copy .button.primary:after{display:none}
/* Original Studio video and responsive AskButtonSurface mask, used without hover flicker. */
.button.header-login.ask-login{height:42px;min-height:42px!important;font-size:11px;gap:10px;--ask-panel-fill:rgba(0,0,0,.9)}.ask-login-surface{background:#fff;mask:var(--basic-ask-mask,url('media/ask-button-shape.svg')) center/100% 100% no-repeat;-webkit-mask:var(--basic-ask-mask,url('media/ask-button-shape.svg')) center/100% 100% no-repeat}.ask-login-surface:after{inset:2px;background:var(--ask-panel-fill);mask:var(--basic-ask-mask,url('media/ask-button-shape.svg')) center/100% 100% no-repeat;-webkit-mask:var(--basic-ask-mask,url('media/ask-button-shape.svg')) center/100% 100% no-repeat}.ask-brand-video{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}.ask-video-arrow{position:relative;display:block;width:19px;height:19px;flex-shrink:0;background:#fff;mask:url('media/arrow-video-mask.svg') center/contain no-repeat;-webkit-mask:url('media/arrow-video-mask.svg') center/contain no-repeat}.ask-video-arrow video{transform:scale(2);transform-origin:center}.ask-brand-video:not([data-video-ready=true]){opacity:0}.ask-brand-video[data-video-ready=true]{opacity:1}.site-header .header-inner{min-height:78px}.site-header{min-height:0}.button.header-login.ask-login:hover{color:var(--ink)!important}html[data-theme=light] .ask-login-surface{background:#fff}html[data-theme=light] .button.header-login.ask-login{--ask-panel-fill:rgba(243,249,237,.95)}html[data-theme=light] .ask-login-surface:after{background:var(--ask-panel-fill)}
/* Yellow time remaining indicator around the autoplay button. */
.feature-autoplay{width:38px;height:38px;right:11px;top:11px}.feature-autoplay>svg:not(.feature-timer-ring){width:11px;height:11px}.feature-autoplay .feature-timer-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);overflow:visible;fill:none;stroke-width:1.6}.feature-timer-ring .timer-track{stroke:var(--edge)}.feature-timer-ring .timer-progress{stroke:var(--yellow);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--feature-progress,0)*100);filter:drop-shadow(0 0 2px #ffce3244)}
@media(max-width:680px){.hero-copy .button-row .button.primary,.hero-copy .button-row .button.secondary{border-radius:13px!important;min-height:57px;padding:0 21px;font-size:13px}.button.header-login.ask-login{height:44px;min-height:44px!important;width:100px;padding:0 15px!important;gap:7px;font-size:11px}.ask-video-arrow{width:17px;height:17px}.site-header .header-inner{height:68px;min-height:68px;padding-block:10px}.site-header .brand span{font-size:13px}.site-header .brand img{width:24px}.site-header .display-controls .icon-button{width:32px;min-width:32px}.site-header .brand{gap:4px}.feature-autoplay{right:10px;top:10px;width:35px;height:35px}}
@media(max-width:370px){.site-header .brand span{font-size:11px}.site-header .brand img{width:22px}.button.header-login.ask-login{width:89px;padding-inline:11px!important;font-size:10px;gap:6px}.ask-video-arrow{width:16px;height:16px}.hero-copy .button-row .button.primary,.hero-copy .button-row .button.secondary{font-size:12px;min-height:55px}}
.lead-chip>.lead-avatar{width:36px;height:36px;border-radius:50%;border:1px solid #e9fff366;overflow:hidden;flex-shrink:0;background:#254131}.lead-avatar img{width:100%;height:100%;object-fit:cover}.lead-three>span{width:34px;height:34px;border-radius:9px}
#platform{padding-block:74px}#platform>.section-heading{margin-bottom:27px;align-items:center}#platform>.section-heading h2{font-size:clamp(29px,3.15vw,43px);letter-spacing:-1.8px;line-height:1.25}#platform .platform-grid{align-items:stretch;gap:23px}#platform .product-feature{padding:24px}#platform .product-feature .card-top{margin-bottom:18px}#platform .product-feature .panel-caption{padding:0 2px 7px;min-height:83px;align-items:flex-start}#platform .product-feature .panel-caption strong{font-size:18px;line-height:1.4;letter-spacing:-.4px}#platform .product-feature .panel-caption p{font-size:12px;line-height:1.7;margin-top:7px}#platform .product-feature .platform-window{margin-top:8px}#platform .platform-window .hero-screen-viewport{aspect-ratio:16/9;height:auto}#platform .feature-stack{gap:23px}#platform .compact-feature{padding:27px}#platform .compact-feature h3{font-size:22px;margin-top:18px}#platform .compact-feature p{font-size:12px;line-height:1.8}
@media(min-width:951px) and (max-height:800px){#platform{padding-block:42px}#platform>.section-heading{margin-bottom:21px}#platform .platform-window .hero-screen-viewport{aspect-ratio:16/9;height:auto}#platform .product-feature{padding:21px}#platform .compact-feature{padding:22px}#platform .compact-feature h3{font-size:20px}}
@media(max-width:950px){#platform .platform-window .hero-screen-viewport{aspect-ratio:16/9;height:auto}#platform .feature-stack{gap:20px}}
@media(max-width:680px){#platform{padding-block:53px}#platform>.section-heading h2{font-size:30px;letter-spacing:-1.3px;max-width:100%}#platform .product-feature{padding:20px}#platform .product-feature .panel-caption{min-height:113px;padding-bottom:6px}#platform .product-feature .panel-caption strong{font-size:16px;line-height:1.5}#platform .product-feature .panel-caption p{font-size:11px}#platform .product-feature .card-top{margin-bottom:20px;gap:10px}#platform .card-top .tiny-label{font-size:6px}#platform .card-top .text-button{font-size:9px}#platform .card-top .icon-tile{width:34px;height:34px}#platform .card-top .icon-tile svg{width:17px}#platform .platform-window .hero-screen-viewport{aspect-ratio:16/9;height:auto}#platform .compact-feature h3{font-size:22px}.lead-chip>.lead-avatar{width:34px;height:34px}}
#platform>.section-heading h2 .soft{font-weight:400;color:var(--muted);opacity:.78}
.site-header{height:auto}.site-header .header-inner{height:78px;min-height:78px;padding-block:0}
@media(max-width:680px){.site-header .header-inner{height:68px;min-height:68px;padding-block:0}}
@media(min-width:951px){#platform .platform-window .hero-screen-viewport{aspect-ratio:16/9;height:auto}#platform .product-feature .panel-caption{height:94px;min-height:94px}#platform .compact-feature{padding:25px}}
@media(min-width:951px) and (max-height:800px){#platform .platform-window .hero-screen-viewport{aspect-ratio:16/9;height:auto}#platform .product-feature .panel-caption{height:89px;min-height:89px}#platform .compact-feature{padding:21px}#platform>.section-heading h2{font-size:36px}}
/* Simpler turnkey story: the result appears above a larger basket. */
.hero-showcase #feature-turnkey{grid-template-rows:auto minmax(0,1fr) auto}.brand-basket-scene{container-type:size;margin-top:0}.brand-basket{top:calc(56% - 28px);transform:translateX(-50%) scale(1.06);transform-origin:center}.basket-part{top:30px}.basket-orbit{top:41%;height:44%}.basket-glow{bottom:8%}.basket-finish{top:8%;bottom:auto;left:6%;right:6%}.basket-finish>span{font-size:8px;letter-spacing:1.7px;margin-bottom:12px}.basket-finish strong{display:block;font-family:var(--display);max-width:355px;margin-inline:auto;font-size:31px;line-height:1.2;font-weight:500;letter-spacing:-1.1px}.hero-login-stage{padding:20px 0;gap:0}.hero-login-window{max-height:100%;}.hero-login-window>img{max-height:100%;object-fit:contain}
@keyframes packDrop{0%{opacity:0;transform:translate(calc(-50% + var(--x)),4px) rotate(var(--angle)) scale(.85)}18%,45%{opacity:1;transform:translate(calc(-50% + var(--x)),0) rotate(var(--angle)) scale(1)}72%{opacity:1;transform:translate(-50%,calc(56cqh - 28px)) rotate(0) scale(.8)}100%{opacity:0;transform:translate(-50%,calc(56cqh + 55px)) rotate(0) scale(.52)}}
@media(max-width:1200px){.brand-basket{transform:translateX(-50%) scale(.96)}.basket-finish strong{font-size:29px;max-width:300px}.basket-finish>span{font-size:7px}}
@media(max-width:680px){.brand-basket{top:calc(56% - 22px);transform:translateX(-50%) scale(1.02)}.basket-part{top:35px}.basket-finish{top:8%;left:4%;right:4%}.basket-finish strong{font-size:28px;max-width:275px}.basket-finish>span{font-size:7px;letter-spacing:1.3px;margin-bottom:10px}.basket-orbit{width:96%;left:2%}.hero-login-stage{padding-block:22px}}
@media(max-width:370px){.brand-basket{transform:translateX(-50%) scale(.93)}.basket-finish strong{font-size:26px;max-width:255px}.basket-finish>span{font-size:6px}}

/* Shared action material across signup, packages and the needs planner. */
html[data-theme] .button.primary,html[data-theme] .button.primary:hover,
html[data-theme] .button.secondary,html[data-theme] .button.secondary:hover,
html[data-theme] #markam-planner .mp-action {
 border-radius:13px!important;
 background:var(--studio-crystal-fill)!important;
 border:1px solid var(--studio-crystal-edge)!important;
 box-shadow:var(--studio-crystal-shadow)!important;
 color:var(--ink)!important;
 font-weight:500;
 filter:none!important;
 backdrop-filter:blur(14px);
 -webkit-backdrop-filter:blur(14px);
}
.button.primary:after{display:none}
#markam-planner .mp-action{min-height:52px;font-size:12px;padding:13px 14px;line-height:1.4;gap:9px;transition:transform .2s ease!important}
#markam-planner .mp-action:hover:not(:disabled){transform:translateY(-1px) scale(1.025)}
#markam-planner .mp-action:disabled{transform:none}
#markam-planner .mp-action.primary:disabled:before{animation-play-state:paused}
/* AppTopbar uses rounded lower corners, with its height kept compact. */
.site-header{border-radius:0 0 18px 18px;border:1px solid var(--edge);border-top:0;box-shadow:0 6px 24px #0002}
.desktop-nav{gap:22px}
.desktop-nav a{font-size:14px;font-weight:500;line-height:1.4;padding-block:12px}
.mobile-nav a{font-size:15px}
html[data-theme] .site-header :is(.desktop-nav,.mobile-nav) a[aria-current],
html[data-theme] .mobile-site-dock>a[aria-current]{color:var(--yellow)}
html[data-theme=light] .site-header :is(.desktop-nav,.mobile-nav) a[aria-current],
html[data-theme=light] .mobile-site-dock>a[aria-current]{color:var(--accent-text)}
/* Only the vertical feature rail changes its icon color. */
@media(min-width:681px){.hero-showcase .feature-tabs button svg,.hero-showcase .feature-tabs [aria-selected=true] svg{color:var(--yellow)}.hero-showcase .feature-tabs [aria-selected=true] svg{filter:drop-shadow(0 0 5px #ffce3244)}}
@media(min-width:951px) and (max-width:1200px){.desktop-nav{gap:16px}.desktop-nav a{font-size:13px}.site-header .header-inner{gap:12px}}
@media(max-width:680px){.site-header .brand img{width:32px}.site-header .header-inner>.menu-toggle{margin-right:7px}.site-header .brand{gap:5px}}
@media(max-width:370px){.site-header .brand img{width:29px}.site-header .header-inner>.menu-toggle{margin-right:5px}}
/* A modest speed increase; motion preferences still take precedence. */
.light-green{animation-duration:16s}.light-yellow{animation-duration:19s}
@media(prefers-reduced-motion:reduce){.light-green,.light-yellow{animation:none}#markam-planner .mp-action:hover{transform:none}}
/* The support icon uses the same crystal tile as solution page headers. */
.whatsapp-support .support-icon{width:43px;height:43px;flex-shrink:0;border-radius:12px;border:1px solid var(--studio-crystal-edge);background:var(--studio-crystal-fill),#88d6a508;box-shadow:var(--studio-crystal-shadow),0 0 20px #88d6a508;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:var(--green)}
.whatsapp-support .support-icon svg{width:23px;height:23px;filter:drop-shadow(0 0 4px #88d6a540)}
/* Keep the original concentrated amber glow; soften only its travel. */
.button.primary:before{width:80%;height:210%;left:10%;top:-55%;background:radial-gradient(ellipse at 48% 50%,#ffce3285 0,#f4c33640 25%,#ffd65206 56%,transparent 72%);filter:blur(11px);animation:amberFlow 7.5s cubic-bezier(.45,0,.55,1) infinite;transform-origin:center;opacity:1}
@keyframes amberFlow{0%,100%{transform:translateX(0) scale(1,1)}25%{transform:translateX(-29%) scale(1.12,.9)}50%{transform:translateX(0) scale(.95,1.08)}75%{transform:translateX(29%) scale(1.12,.9)}}
@media(prefers-reduced-motion:reduce){.button.primary:before{animation:none}}
/* Markam primary: backlit amber glass, with deep green lettering. */
:root{
 --markam-primary-fill:linear-gradient(145deg,#ffd743,var(--yellow) 52%,#f8c52b);
 --markam-primary-edge:#ffe36b;
 --markam-primary-shadow:inset 0 1px 1px rgba(255,233,123,.7),inset 0 -2px 2px rgba(165,113,21,.24),inset 1px 0 1px rgba(255,229,115,.35),0 3px 8px rgba(2,17,11,.2),0 0 19px rgba(246,201,75,.09);
}
html[data-theme] .button.primary:not(.header-login),html[data-theme] .button.primary:not(.header-login):hover,
html[data-theme] #markam-planner .mp-action.primary,html[data-theme] #markam-planner .mp-action.primary:hover{
 background:var(--markam-primary-fill)!important;
 border-color:var(--markam-primary-edge)!important;
 box-shadow:var(--markam-primary-shadow)!important;
 color:#163426!important;font-weight:600;
}
.button.primary:before{background:radial-gradient(ellipse at 48% 50%,#ffe952ad 0,#ffe23450 25%,#ffd9330a 56%,transparent 72%);filter:blur(12px)}
.button.primary svg{color:inherit}
/* Package surfaces use the login panel's measured thick crystal material. */
html[data-theme] .package-card,html[data-theme] #markam-planner .mp-plan{
 background:var(--studio-crystal-fill);border:1px solid var(--studio-crystal-edge);border-radius:20px;
 box-shadow:var(--studio-crystal-shadow),0 20px 38px -29px #0007;
 backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
html[data-theme] .package-card.featured{background:var(--studio-crystal-fill),#ffce3205;border-color:#ffe09059}
html[data-theme] #markam-planner .mp-plan[aria-pressed=true]{background:var(--studio-crystal-fill),#88d6a508;border-color:var(--green);box-shadow:var(--studio-crystal-shadow),inset 0 0 0 1px var(--green)}
html[data-theme=light] .site-header .desktop-nav a:not([aria-current]){color:var(--muted)}
@media(min-width:681px){html[data-theme=light] .hero-showcase .feature-tabs button svg{color:var(--accent-text)}}

/* Only the current feature carries the yellow accent. */
@media(min-width:681px){html[data-theme] .hero-showcase .feature-tabs button:not([aria-selected=true]) svg{color:var(--muted);filter:none}html[data-theme] .hero-showcase .feature-tabs button[aria-selected=true] svg{color:var(--accent-text)}}
.package-topline .package-recommendation{display:inline-flex;align-items:center;gap:6px;padding:7px 10px!important;font-size:10px!important;font-weight:500;line-height:1.2;letter-spacing:0!important;text-transform:none;background:var(--studio-crystal-fill),#ffce320b;border:1px solid #ffce324d!important;border-radius:11px!important;box-shadow:inset 0 1px 0 #ffe88733,0 4px 12px #0002;color:var(--accent-text)!important}
.package-recommendation svg{width:13px;height:13px}

/* A live, non-interactive login scene and a separate, accessible panel tour. */
.hero-showcase .hero-login-stage{gap:14px;align-items:center}
.hero-login-window{display:grid;min-height:0;flex:0 1 auto}
.hero-login-viewport{position:relative;width:100%;min-height:0;aspect-ratio:1440/1000;overflow:hidden;border-radius:10px;background:#080c0a}
.hero-login-viewport>img{display:block;width:100%;height:100%;object-fit:contain}
.hero-login-viewport>iframe{position:absolute;left:50%;top:50%;width:1440px;height:1000px;max-width:none;border:0;transform-origin:center;pointer-events:none;opacity:0}
.hero-login-viewport.is-live>iframe{opacity:1}
.hero-login-viewport.is-live>img{visibility:hidden}
.hero-login-stage .panel-tour-button{flex:none;min-height:44px;gap:9px;padding-inline:17px}
.hero-login-stage .panel-tour-button svg{width:15px;height:15px}