/* V29: balanced horizontal brand, roomy navigation, mobile menu and page layout. */
html{scroll-padding-top:100px}body{overflow-x:clip}img{max-width:100%}main{min-width:0}
.site-header,.site-header.scrolled{padding:12px 0;background:rgba(250,252,250,.96);border-bottom:1px solid #dfe8e0;backdrop-filter:blur(20px);overflow:visible;z-index:100}
.site-header .nav-wrap{width:min(1320px,calc(100% - 40px));min-height:68px;height:auto;display:flex;align-items:center;gap:22px;padding:0 16px;background:#fff;border:1px solid #e3eae5;border-radius:18px;box-shadow:0 5px 20px #0b474506;flex-wrap:nowrap}
.site-header .brand{display:flex;align-items:center;gap:10px;flex:0 0 auto;margin:0;padding:6px 20px 6px 0;border-right:1px solid #e3eae5;min-width:0}
/* Two viewports onto the supplied logo, keeping the original artwork. */
.brand-symbol{display:block;width:46px;height:50px;background-image:url('assets/doneo-logo.png');background-repeat:no-repeat;background-size:106px auto;background-position:-30px -1px;flex:0 0 auto;mix-blend-mode:multiply}
.brand-wordmark{display:block;width:140px;height:23px;background-image:url('assets/doneo-logo.png');background-repeat:no-repeat;background-size:140px auto;background-position:0 -78px;flex:0 0 auto;mix-blend-mode:multiply}
.site-header .main-nav{display:flex;position:static;align-items:center;justify-content:center;gap:4px;margin:0 auto;width:auto;flex:1;min-width:0;padding:0;opacity:1;visibility:visible;transform:none;max-height:none;overflow:visible;background:none;border:0;box-shadow:none}
.site-header .main-nav a{padding:11px 12px;border-radius:10px;font-size:.875rem;font-weight:650;white-space:nowrap;color:#52685c;transform:none;opacity:1;line-height:1.4}
.site-header .main-nav a::after{display:none}.site-header .main-nav a:hover{background:#f0f5f1;color:#0b4745}.site-header .main-nav a.active{background:#0b4745;color:#fff;box-shadow:none}
.site-header .nav-cta{display:inline-flex;min-height:44px;padding:10px 16px;font-size:.8125rem;margin:0;flex-shrink:0;border-radius:12px}
.site-header .main-nav .mobile-nav-cta,.mobile-menu-heading,.menu-label,.menu-backdrop{display:none}.site-header .menu-toggle{display:none}
@media(min-width:1101px) and (max-width:1260px){.site-header .nav-wrap{gap:10px;padding:0 12px}.site-header .brand{padding-right:12px;gap:6px}.brand-wordmark{width:119px;height:20px;background-size:119px auto;background-position:0 -66px}.brand-symbol{width:39px;height:43px;background-size:91px auto;background-position:-26px -1px}.site-header .main-nav a{padding:11px 9px;font-size:.8125rem}.site-header .nav-cta{padding:10px 12px}}
@media(max-width:1100px){
 html{scroll-padding-top:90px}.site-header,.site-header.scrolled{padding:9px 0}.site-header .nav-wrap{position:relative;width:calc(100% - 28px);height:64px;min-height:64px;padding:0 13px;border-radius:16px;gap:12px}
 .site-header .brand{padding:0;border:0;gap:8px;flex:0 0 auto}.brand-symbol{width:36px;height:40px;background-size:86px auto;background-position:-24px -1px}.brand-wordmark{width:119px;height:20px;background-size:119px auto;background-position:0 -66px}
 .site-header .nav-cta{display:none}.site-header .menu-toggle{display:flex;position:relative;align-items:center;justify-content:flex-start;width:88px;height:42px;flex:0 0 auto;margin-left:auto;padding:0;border-radius:12px;background:#edf4ef;border:1px solid #d9e5dd;box-shadow:none;z-index:102;cursor:pointer}
 .site-header .menu-toggle>span{position:absolute;left:13px;width:18px;height:2px;margin:0;background:#0b4745;transition:transform .4s var(--ease),opacity .2s}
 .menu-toggle>span:nth-child(1){transform:translateY(-5px)}.menu-toggle>span:nth-child(2){transform:none}.menu-toggle>span:nth-child(3){transform:translateY(5px)}
 .site-header .menu-label{display:block;margin-left:39px;font-size:.75rem;color:#0b4745;font-weight:700;line-height:1}
 .site-header .nav-wrap.open .menu-toggle{background:#0b4745;border-color:#0b4745}.site-header .nav-wrap.open .menu-toggle>span{background:#fff}.site-header .nav-wrap.open .menu-label{color:#fff}
 .site-header .nav-wrap.open .menu-toggle>span:nth-child(1){transform:rotate(45deg)}.site-header .nav-wrap.open .menu-toggle>span:nth-child(2){opacity:0}.site-header .nav-wrap.open .menu-toggle>span:nth-child(3){transform:rotate(-45deg)}
 .site-header .main-nav{position:absolute;top:calc(100% + 10px);left:-1px;right:-1px;width:auto;display:grid;grid-template-columns:1fr;gap:6px;padding:18px;margin:0;border:1px solid #dce7df;border-radius:20px;background:#fff;box-shadow:0 28px 70px #001f3040;max-height:calc(100dvh - 110px);overflow-y:auto;overscroll-behavior:contain;transform-origin:top right;z-index:101}
 .navigation-ready .site-header .main-nav{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-12px) scale(.96);transition:opacity .22s ease,transform .4s var(--ease),visibility 0s .4s}
 .navigation-ready .site-header .nav-wrap.open .main-nav{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:opacity .25s ease,transform .4s var(--ease),visibility 0s}
 .site-header .mobile-menu-heading{display:block;font-size:.6875rem;letter-spacing:.12em;color:#687d70;padding:4px 8px 14px;border-bottom:1px solid #e4ebe6;margin-bottom:4px}.mobile-menu-heading span{display:block;font-size:1rem;letter-spacing:-.02em;color:#143f32;font-weight:700;margin-top:7px}
 .site-header .main-nav a{display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:12px 15px;border-radius:12px;font-size:1rem;white-space:normal;border:0;background:#f5f8f5;color:#365344;transition:transform .4s var(--ease),opacity .3s,background .2s,color .2s}
 .site-header .main-nav a:not(.mobile-nav-cta)::after{content:'↗';display:block;position:static;background:none;transform:none;width:auto;height:auto;color:inherit;font-size:1rem;opacity:.55}
 .navigation-ready .site-header .main-nav a{opacity:0;transform:translateY(8px);transition-delay:0s}
 .navigation-ready .site-header .nav-wrap.open .main-nav a{opacity:1;transform:none;transition-delay:calc(var(--menu-order,0) * 35ms)}
 .site-header .main-nav a.active{background:#0b4745;color:#fff}.site-header .main-nav a:hover{background:#e4eee7;color:#0b4745}
 .site-header .main-nav .mobile-nav-cta{display:flex;justify-content:center;min-height:50px;margin-top:8px;background:#ffab6c;color:#123e30;font-weight:750}
 .menu-backdrop{display:block;position:fixed;inset:0;z-index:90;background:#03262480;backdrop-filter:blur(5px);opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
 .menu-is-open .menu-backdrop{opacity:1;visibility:visible;transition:opacity .3s,visibility 0s}
 body.menu-is-open{overflow:hidden;position:fixed;width:100%;left:0;right:0}
}
/* Mobile sizing across all pages, including tutorial and legal pages. */
@media(max-width:900px){
 .container{width:calc(100% - 36px)}.page-hero .narrow{width:calc(100% - 36px)}
 .hero-grid,.story-layout,.pricing-grid,.services-grid,.contact-grid,.highlight-panel,.footer-grid{min-width:0}.hero-grid>*,.story-layout>*,.pricing-grid>*,.services-grid>*,.contact-grid>*{min-width:0}
 .pricing-grid,.services-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.price{overflow-wrap:anywhere}.price-label{overflow-wrap:anywhere}.price-card .badge{max-width:100%}
 .comparison-scroll{max-width:100%}.legal-box{width:100%;overflow-wrap:anywhere}.legal-box p{font-size:1rem}.process-row>div{min-width:0}
 .journey-nav{gap:8px}.journey-nav a{min-height:44px;display:inline-flex;align-items:center}.journey-chapter{scroll-margin-top:90px}
 .app-window-top{gap:10px}.app-logo{min-width:0}.tax-year{white-space:nowrap}.home-product-badge{max-width:calc(100% - 24px)}
}
@media(max-width:620px){
 html,body{overflow-x:clip}.site-header .nav-wrap{width:calc(100% - 20px);padding:0 11px;height:60px;min-height:60px}.site-header,.site-header.scrolled{padding:7px 0}
 .brand-wordmark{width:108px;height:18px;background-size:108px auto;background-position:0 -60px}.brand-symbol{width:33px;height:37px;background-size:79px auto;background-position:-22px -1px}.site-header .brand{gap:6px}
 .site-header .main-nav{padding:14px;top:calc(100% + 8px);border-radius:17px;max-height:calc(100dvh - 94px)}
 .site-header .main-nav a{min-height:46px;padding:11px 14px}.site-header .menu-toggle{width:82px;height:40px}.site-header .menu-label{margin-left:36px}.site-header .menu-toggle>span{left:11px}
 .pricing-grid,.services-grid,.contact-grid{grid-template-columns:1fr}.section,.comparison-section{padding:48px 0}.page-hero{padding:38px 0 24px}.page-hero h1{font-size:clamp(2.15rem,9vw,3rem);line-height:1.12}
 .page-hero p,.section-heading p,.highlight-panel p{font-size:1rem;line-height:1.6}
 .price-card,.price-card:not(.featured){padding:25px}.price-card p{min-height:0;margin-bottom:24px}.price-card .price{font-size:clamp(2rem,9vw,2.5rem)}
 .contact-card h2{font-size:1.6rem}.contact-card>a:not(.button){font-size:1.125rem}.contact-card .button{font-size:1rem}
 .faq details{padding:18px}.faq summary{font-size:1rem;line-height:1.5}.faq p{font-size:1rem;line-height:1.6}
 body[data-page="index"] .hero-grid{padding:30px 0 56px;gap:32px}body[data-page="index"] .hero h1{font-size:clamp(3.6rem,16vw,5.8rem)}
 body[data-page="index"] .hero-copy>.eyebrow{font-size:.75rem;letter-spacing:.035em}body[data-page="index"] .trust-grid{gap:9px}.trust-card small{font-size:.75rem;overflow-wrap:anywhere}
 .home-product .app-window{padding:17px}.home-product .app-intro h2{font-size:1.55rem}.home-product .preview-caption{font-size:.75rem;letter-spacing:.025em}
 .home-product .app-logo img{width:96px;height:45px}.home-product .tax-year{font-size:.75rem;padding:6px 8px}
 .app-nav{grid-template-columns:repeat(3,minmax(0,1fr))}.app-nav span{font-size:.75rem}.home-product-badge{position:relative;left:auto;bottom:auto;order:3;margin:-2px auto 0;animation:none;max-width:100%;font-size:.8125rem}
 .home-product{display:flex;flex-direction:column;gap:12px;padding:0}.home-product .preview-caption{order:1}.home-product .app-window{order:2}.home-product .app-window:hover{transform:none}
 .journey-heading{padding:38px 0 24px}.journey-heading h1{font-size:clamp(2.1rem,10vw,2.8rem)}.journey-heading>p{font-size:1rem}.journey-nav a{font-size:.8125rem;padding:10px 11px}
 .journey-chapter{padding:36px 0 40px;scroll-margin-top:84px}.journey-chapter .story-layout{gap:24px}.journey-chapter .story-copy h2{font-size:1.9rem}.journey-chapter .story-app{padding:16px}.journey-chapter .story-screen h3{font-size:1.3rem}
 .demo-advisor{align-items:flex-start}.demo-advisor>span{flex-shrink:0}.demo-advisor small{display:block;line-height:1.5}.demo-file{gap:9px}.demo-file strong{overflow-wrap:anywhere}.demo-row{gap:10px;flex-wrap:wrap}.demo-meter>div:first-child{flex-wrap:wrap}.demo-bubble.reply{margin-left:14px}.story-app-nav{gap:5px}.story-app-nav span{font-size:.75rem}
 .cta{padding:28px 22px}.cta h2,.highlight-panel h2{font-size:1.9rem}.cta .button{min-width:0}.cta-section{padding-bottom:48px}
 .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 18px}.footer-grid a{font-size:.875rem;min-height:32px;display:inline-flex;align-items:center;overflow-wrap:anywhere}.footer-brand{grid-column:1/-1}.footer-grid>div{min-width:0}
}
@media(max-width:360px){.brand-wordmark{width:96px;height:16px;background-size:96px auto;background-position:0 -53px}.site-header .menu-toggle{width:78px}.container{width:calc(100% - 28px)}.hero-actions .button{padding:12px 14px;font-size:.9375rem}.trust-grid{grid-template-columns:1fr}.story-app-header{gap:6px}.story-app-header>span{font-size:.75rem;padding:5px}.story-app-header img{width:94px}.app-avatar{width:36px;height:36px}.hero h1{overflow-wrap:normal}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* V30 — matching, resolution-independent icons. */
.doneo-icon{display:block;width:24px;height:24px;flex-shrink:0}
.trust-card .trust-icon{display:grid;place-items:center;flex:0 0 auto;width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.065);color:#ffaf75}
.service-card>.service-icon{background:#edf4ef;color:#0b4745;border:1px solid #dce8df;border-radius:14px}
.service-icon .doneo-icon{width:26px;height:26px}
@media(max-width:620px){.trust-card .trust-icon{display:grid;width:32px;height:32px;margin-bottom:9px;border-radius:9px}.trust-icon .doneo-icon{width:22px;height:22px}}

/* V31 — contact icons match the services. */
.contact-card>.contact-icon{background:#edf4ef;color:#0b4745;border:1px solid #dce8df;border-radius:14px}
.contact-icon .doneo-icon{width:26px;height:26px}

/* V32 — unfilled mobile menu control in both states. */
@media(max-width:1100px){
 .site-header .menu-toggle,
 .site-header .menu-toggle:hover,
 .site-header .nav-wrap.open .menu-toggle{
  background:transparent;
  border-color:transparent;
  box-shadow:none;
 }
 .site-header .menu-toggle>span,
 .site-header .nav-wrap.open .menu-toggle>span{background:#0b4745}
 .site-header .menu-label,
 .site-header .nav-wrap.open .menu-label{color:#0b4745}
}

/* V33 — vertically centred menu label; icon-only close state. */
@media(max-width:1100px){
 .site-header .menu-label{
  position:absolute;
  top:50%;
  right:8px;
  margin:0;
  padding:0;
  transform:translateY(-50%);
  line-height:1.2;
 }
 .site-header .nav-wrap.open .menu-label{display:none}
 .site-header .nav-wrap.open .menu-toggle>span{left:calc(50% - 9px)}
}

/* V35 — explicit vertical anchor for all three bars and the close icon. */
@media(max-width:1100px){
 .site-header .menu-toggle>span{
  top:50%;
  margin:0;
  height:2px;
  transform-origin:50% 50%;
 }
 .site-header .menu-toggle>span:nth-child(1){transform:translateY(-6px)}
 .site-header .menu-toggle>span:nth-child(2){transform:translateY(-1px)}
 .site-header .menu-toggle>span:nth-child(3){transform:translateY(4px)}
 .site-header .nav-wrap.open .menu-toggle>span:nth-child(1){transform:translateY(-1px) rotate(45deg)}
 .site-header .nav-wrap.open .menu-toggle>span:nth-child(2){transform:translateY(-1px);opacity:0}
 .site-header .nav-wrap.open .menu-toggle>span:nth-child(3){transform:translateY(-1px) rotate(-45deg)}
}

/* V37: Centre the homepage trust points on mobile. */
@media (max-width: 620px) {
  body[data-page="index"] .trust-grid {
    width: 100%;
    margin-inline: auto;
    justify-items: center;
  }
  body[data-page="index"] .trust-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    text-align: center;
    gap: 9px;
  }
  body[data-page="index"] .trust-card .trust-icon {
    margin: 0;
  }
  body[data-page="index"] .trust-card > div {
    width: 100%;
    text-align: center;
  }
}