:root {
  --navy: #071a2f;
  --navy-2: #0b2745;
  --ink: #102033;
  --muted: #59697a;
  --paper: #f3f7f8;
  --white: #ffffff;
  --cyan: #16d2df;
  --cyan-dark: #008c9d;
  --amber: #ffb000;
  --line: #dce5e8;
  --radius: 22px;
  --shadow: 0 28px 70px rgba(7, 26, 47, .13);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
body { margin: 0; color: var(--ink); background: var(--white); font-family: "DM Sans", system-ui, sans-serif; font-size: 1rem; line-height: 1.65; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button, input { font: inherit; }
h1, h2, h3 { font-family: "Manrope", system-ui, sans-serif; line-height: 1.08; letter-spacing: -.045em; margin: 0; }
p { margin: 0; }
.shell { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 200; left: 16px; top: 12px; transform: translateY(-180%); background: var(--amber); color: var(--navy); padding: 10px 16px; font-weight: 800; border-radius: 8px; }
.skip-link:focus { transform: none; }

.site-header { position: absolute; z-index: 100; inset: 0 0 auto; color: white; }
.solid-header { position: relative; background: var(--navy); }
.header-inner { width: min(1260px, calc(100% - 40px)); height: 88px; margin: auto; display: flex; align-items: center; gap: 32px; }
.brand { background: white; padding: 8px 13px; border-radius: 10px; box-shadow: 0 8px 25px rgba(0,0,0,.14); flex: 0 0 auto; }
.brand img { width: 196px; height: auto; }
.primary-nav { display: flex; align-items: center; justify-content: center; gap: 29px; margin-left: auto; }
.primary-nav a { color: rgba(255,255,255,.79); text-decoration: none; font-size: .91rem; font-weight: 600; transition: color .2s; }
.primary-nav a:hover, .primary-nav a:focus-visible, .primary-nav a[aria-current="page"] { color: white; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 13px 22px; border: 1px solid transparent; border-radius: 10px; text-decoration: none; font-family: "Manrope", sans-serif; font-weight: 800; letter-spacing: -.02em; transition: transform .2s, box-shadow .2s, background .2s; }
.button:hover { transform: translateY(-2px); }
.button-small { min-height: 43px; padding: 9px 17px; font-size: .88rem; }
.button-amber { background: var(--amber); color: var(--navy); box-shadow: 0 12px 26px rgba(255,176,0,.22); }
.button-amber:hover { background: #ffc02e; box-shadow: 0 14px 30px rgba(255,176,0,.31); }
.button-outline-light { color: white; border-color: rgba(255,255,255,.3); }
.button-outline-light:hover { background: rgba(255,255,255,.08); }
.menu-toggle { display: none; width: 44px; height: 44px; border: 0; background: transparent; padding: 10px; }
.menu-toggle span:not(.sr-only) { display: block; height: 2px; background: white; margin: 5px 0; }

.hero { position: relative; overflow: hidden; min-height: 820px; color: white; background: radial-gradient(circle at 78% 35%, rgba(22,210,223,.15), transparent 25%), radial-gradient(circle at 15% 110%, rgba(255,176,0,.12), transparent 32%), var(--navy); padding: 182px 0 110px; }
.hero-grid-lines { position: absolute; inset: 0; opacity: .12; background-image: linear-gradient(rgba(255,255,255,.11) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.11) 1px, transparent 1px); background-size: 68px 68px; mask-image: linear-gradient(to bottom, #000, transparent 88%); }
.hero-layout { position: relative; display: grid; grid-template-columns: 1.08fr .92fr; gap: 86px; align-items: center; }
.eyebrow, .section-kicker { display: flex; align-items: center; gap: 10px; color: var(--cyan); font-size: .77rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 18px; }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 6px rgba(22,210,223,.13); }
.hero h1, .tutorial-hero h1 { font-size: clamp(3.4rem, 6.4vw, 6rem); max-width: 800px; }
h1 em, h2 em { color: var(--cyan); font-style: normal; }
.hero-lede { max-width: 670px; margin-top: 25px; color: rgba(255,255,255,.72); font-size: 1.18rem; line-height: 1.65; }
.hero-actions { display: flex; align-items: center; gap: 28px; margin-top: 34px; }
.text-link { color: white; text-decoration: none; font-weight: 800; font-family: "Manrope", sans-serif; }
.text-link span { display: inline-block; transition: transform .2s; }
.text-link:hover span { transform: translateX(5px); }
.dark-link { color: var(--ink); }
.trust-strip { list-style: none; display: flex; gap: 0; padding: 0; margin: 52px 0 0; }
.trust-strip li { display: grid; gap: 2px; min-width: 145px; padding: 0 22px; border-left: 1px solid rgba(255,255,255,.18); }
.trust-strip li:first-child { padding-left: 0; border: 0; }
.trust-strip strong { font: 700 1rem "Manrope", sans-serif; }
.trust-strip span { color: rgba(255,255,255,.48); font-size: .72rem; line-height: 1.35; }

.workflow-visual { position: relative; height: 455px; }
.visual-orbit { position: absolute; border: 1px solid rgba(22,210,223,.19); border-radius: 50%; }
.orbit-one { inset: 1% 2% 0 2%; }
.orbit-two { inset: 12% 13%; border-style: dashed; }
.statement-card { position: absolute; z-index: 2; left: 15%; top: 14%; width: 230px; min-height: 170px; padding: 22px; color: var(--ink); background: rgba(255,255,255,.97); border-radius: 18px; transform: rotate(-4deg); box-shadow: 0 30px 60px rgba(0,0,0,.27); }
.statement-head { display: flex; align-items: center; justify-content: space-between; font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; }
.statement-head b { color: #ed4c5c; }
.statement-lines { display: grid; gap: 11px; margin: 24px 0 20px; }
.statement-lines i { width: var(--w); height: 5px; background: #dce4e7; border-radius: 5px; }
.file-chip { display: inline-block; margin-right: 5px; padding: 4px 7px; color: var(--cyan-dark); background: #e5f9fa; font-size: .62rem; font-weight: 800; border-radius: 4px; }
.process-node { position: absolute; z-index: 3; display: grid; width: 143px; min-height: 99px; padding: 15px 17px; color: white; background: rgba(11,39,69,.9); border: 1px solid rgba(255,255,255,.15); border-radius: 14px; box-shadow: 0 16px 36px rgba(0,0,0,.2); backdrop-filter: blur(12px); }
.process-node > span { color: var(--cyan); font: 800 .64rem "Manrope", sans-serif; letter-spacing: .16em; }
.process-node strong { margin-top: 4px; font-family: "Manrope", sans-serif; }
.process-node small { color: rgba(255,255,255,.5); }
.node-import { right: 4%; top: 7%; }
.node-reconcile { right: 8%; bottom: 14%; }
.node-export { left: 9%; bottom: 4%; }
.success-badge { position: absolute; z-index: 4; right: 24%; top: 46%; padding: 9px 13px; color: var(--navy); background: var(--cyan); border-radius: 8px; font-weight: 800; font-size: .78rem; box-shadow: 0 13px 30px rgba(22,210,223,.23); transform: rotate(3deg); }
.success-badge span { margin-right: 6px; }
.hero-marquee { position: absolute; inset: auto 0 0; border-top: 1px solid rgba(255,255,255,.1); background: rgba(2,14,27,.5); overflow: hidden; }
.hero-marquee div { min-width: max-content; display: flex; align-items: center; justify-content: center; gap: 28px; min-height: 64px; color: rgba(255,255,255,.58); font: 700 .78rem "Manrope", sans-serif; letter-spacing: .07em; text-transform: uppercase; }
.hero-marquee i { width: 4px; height: 4px; background: var(--amber); border-radius: 50%; }

.audience-band { padding: 105px 0; background: var(--paper); }
.audience-band #built-for-title { color: #071a2f; font-size: clamp(2.8rem, 5.5vw, 5rem); font-weight: 800; line-height: 1.08; letter-spacing: -.035em; }
.audience-subheading { margin-top: 18px; color: var(--muted); font-size: clamp(1.15rem, 2vw, 1.5rem); font-weight: 600; }
.display-small { font-size: clamp(2.3rem, 4vw, 4rem); }
.audience-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 46px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.audience-grid article { padding: 38px; color: #fff; background: #1653a0; }
.audience-grid article:nth-child(2) { background: #176344; }
.audience-grid article:nth-child(3) { background: #a9420e; }
.card-index { color: var(--cyan-dark); font: 800 .73rem "Manrope", sans-serif; letter-spacing: .12em; }
.audience-grid h3 { margin: 0 0 18px; font-size: clamp(1.65rem, 2vw, 2rem); font-weight: 800; }
.audience-grid h3, .audience-grid p { color: #fff; }
.audience-grid p { font-size: 1.15rem; font-weight: 600; line-height: 1.65; }

.pdf-section { padding: 125px 0; overflow: hidden; }
.pdf-layout { display: grid; grid-template-columns: .92fr 1.08fr; gap: 100px; align-items: center; }
.pdf-art { position: relative; min-height: 470px; background: linear-gradient(145deg, #e9f9fa, #f5f8f8 65%); border-radius: 36px; border: 1px solid #d8ecee; }
.pdf-paper, .data-sheet { position: absolute; top: 50%; width: 205px; min-height: 278px; transform: translateY(-50%); border-radius: 14px; box-shadow: var(--shadow); }
.pdf-paper { left: 8%; padding: 26px; background: white; transform: translateY(-50%) rotate(-6deg); }
.pdf-paper span { display: inline-block; padding: 5px 9px; color: white; background: #e84f5f; border-radius: 5px; font-weight: 800; }
.pdf-paper b { display: block; margin: 18px 0 25px; font: 800 1.25rem "Manrope", sans-serif; }
.pdf-paper i { display: block; height: 5px; margin: 13px 0; background: #e1e8eb; border-radius: 8px; }
.conversion-arrow { position: absolute; z-index: 2; left: 48%; top: 50%; display: grid; place-items: center; width: 56px; height: 56px; transform: translate(-50%,-50%); color: var(--navy); background: var(--amber); border: 8px solid white; border-radius: 50%; font-size: 1.5rem; font-weight: 900; box-sizing: content-box; }
.data-sheet { right: 7%; padding: 26px; color: white; background: var(--navy-2); transform: translateY(-50%) rotate(5deg); }
.data-sheet > span { color: var(--cyan); font: 800 .7rem "Manrope", sans-serif; letter-spacing: .13em; }
.data-rows { display: grid; gap: 12px; margin-top: 31px; }
.data-rows i { height: 24px; background: linear-gradient(90deg, rgba(22,210,223,.2) 34%, rgba(255,255,255,.12) 34%); border-radius: 4px; }
.eyebrow-dark { color: var(--cyan-dark); }
.new-tag { padding: 5px 8px; color: var(--navy); background: var(--amber); border-radius: 5px; font-size: .67rem; }
.pdf-copy h2, .section-heading h2, .feature-intro h2, .about-copy h2, .faq-layout h2 { font-size: clamp(2.65rem, 5vw, 4.8rem); }
.pdf-copy > p:not(.eyebrow):not(.note) { margin: 24px 0 28px; color: var(--muted); font-size: 1.08rem; }
.check-list { display: grid; gap: 18px; list-style: none; padding: 0; margin: 0; }
.check-list li { display: grid; grid-template-columns: 34px 1fr; gap: 13px; }
.check-list li > span { display: grid; place-items: center; width: 28px; height: 28px; color: var(--navy); background: var(--cyan); border-radius: 50%; font-weight: 900; }
.check-list strong, .check-list small { display: block; }
.check-list strong { font-family: "Manrope", sans-serif; }
.check-list small { margin-top: 3px; color: var(--muted); font-size: .87rem; }
.note { margin-top: 25px; padding-left: 14px; color: var(--muted); border-left: 3px solid var(--amber); font-size: .81rem; }
.pdf-copy { min-width: 0; padding: clamp(26px, 3.5vw, 48px); color: #fff; background: #103b70; border-radius: var(--radius); box-shadow: var(--shadow); }
.pdf-copy h2 { color: #fff; font-size: clamp(2.3rem, 4vw, 3.8rem); font-weight: 800; }
.pdf-copy h2 em { color: #fff; }
.pdf-copy .eyebrow { color: #8be9f3; }
.pdf-copy > p:not(.eyebrow):not(.note) { color: #fff; font-size: 1.12rem; font-weight: 500; }
.pdf-copy .check-list strong { color: #fff; font-size: 1.06rem; font-weight: 800; }
.pdf-copy .check-list small { color: #e1edf9; font-size: 1rem; }
.pdf-copy .note { color: #e1edf9; font-size: .92rem; }

.steps-section { padding: 125px 0; background: var(--navy); color: white; }
.steps-section #steps-title { color: #fff; font-size: clamp(2.8rem, 5.5vw, 5rem); font-weight: 800; line-height: 1.1; }
.steps-subheading { margin-top: 20px; color: #8be9f3; font-size: clamp(1.15rem, 2vw, 1.5rem); font-weight: 600; }
.split-heading { display: grid; grid-template-columns: 1.2fr .8fr; gap: 100px; align-items: end; }
.split-heading > p { color: rgba(255,255,255,.58); font-size: 1.08rem; }
.steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; list-style: none; padding: 0; margin: 70px 0 0; }
.steps-grid li { position: relative; display: flex; flex-direction: column; min-height: 370px; padding: 27px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 18px; transition: transform .25s, background .25s; }
.steps-grid li:hover { transform: translateY(-5px); background: rgba(255,255,255,.08); }
.step-number { color: var(--cyan); font: 800 .68rem "Manrope", sans-serif; letter-spacing: .14em; }
.step-icon { display: grid; place-items: center; width: 55px; height: 55px; margin: 56px 0 27px; color: var(--navy); background: var(--amber); border-radius: 15px; font-size: 1.4rem; font-weight: 900; }
.steps-grid h3 { font-size: 1.3rem; letter-spacing: -.025em; }
.steps-grid p { margin: 13px 0 25px; color: rgba(255,255,255,.55); font-size: .91rem; }
.steps-grid a { margin-top: auto; color: var(--cyan); text-decoration: none; font-size: .79rem; font-weight: 800; }
.steps-section .split-heading > p { color: #fff; font-size: 1.2rem; font-weight: 600; line-height: 1.7; }
.steps-grid li { background: #1653a0; border: 2px solid #5795e5; box-shadow: 0 12px 28px rgba(0,0,0,.2); }
.steps-grid li:nth-child(2) { background: #176344; border-color: #55b88a; }
.steps-grid li:nth-child(3) { background: #a9420e; border-color: #ef9c65; }
.steps-grid li:nth-child(4) { background: #634098; border-color: #b293e1; }
.steps-grid li:hover { background: #1653a0; }
.steps-grid li:nth-child(2):hover { background: #176344; }
.steps-grid li:nth-child(3):hover { background: #a9420e; }
.steps-grid li:nth-child(4):hover { background: #634098; }
.steps-grid h3 { color: #fff; font-size: 1.45rem; font-weight: 800; line-height: 1.25; }
.steps-grid p { color: #fff; font-size: 1rem; font-weight: 500; }
.steps-grid .step-number, .steps-grid a { color: #fff; }
.steps-grid a { font-size: .82rem; white-space: nowrap; text-decoration: underline; text-underline-offset: 4px; }
.steps-grid .step-picture { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; background: #fff; border: 1px solid rgba(255,255,255,.65); border-radius: 10px; margin: auto 0 22px; }
@supports (grid-template-rows: subgrid) {
  .steps-grid li { display: grid; grid-template-rows: subgrid; grid-row: span 4; row-gap: 0; }
  .steps-grid h3 { margin: 0; }
  .steps-grid .step-picture { align-self: start; margin: 0 0 22px; }
  .steps-grid a { align-self: end; margin-top: 0; }
}

.feature-section { padding: 105px 0; background: #f0f6fc; }
.feature-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 36px; align-items: start; }
.feature-intro { position: sticky; top: 120px; min-width: 0; padding: clamp(28px, 3vw, 44px); background: #1653a0; color: #fff; border-radius: var(--radius); box-shadow: var(--shadow); }
.feature-intro .section-kicker { color: #fff; font-size: 1.1rem; font-weight: 800; }
.feature-intro h2 { color: #fff; font-size: clamp(2.35rem, 4vw, 3.8rem); font-weight: 800; }
.feature-intro > p:not(.section-kicker) { margin: 24px 0 28px; color: #fff; font-size: 1.1rem; font-weight: 500; }
.feature-intro .dark-link { color: #fff; }
.feature-list { display: grid; gap: 16px; min-width: 0; }
.feature-list article { display: grid; grid-template-columns: 40px 1fr; gap: 16px; padding: 25px; border: 2px solid #5795e5; border-radius: 16px; background: #1653a0; box-shadow: 0 6px 18px rgba(7,26,47,.12); }
.feature-list article:nth-child(2) { background: #176344; border-color: #55b88a; }
.feature-list article:nth-child(3) { background: #a9420e; border-color: #ef9c65; }
.feature-list article:nth-child(4) { background: #634098; border-color: #b293e1; }
.feature-list article:nth-child(5) { background: #246b3c; border-color: #6fc98b; }
.feature-list article > span { color: #fff; font: 800 1rem "Manrope", sans-serif; letter-spacing: .05em; }
.feature-list h3 { margin-bottom: 8px; color: #fff; font-size: 1.4rem; font-weight: 800; }
.feature-list p { color: #fff; font-size: 1rem; font-weight: 500; }

.integrations-section { padding: 105px 0; background: #e4f0fb; }
.integrations-section .section-kicker { color: #1653a0; font-size: 1.05rem; }
.centered-heading { max-width: 790px; margin: auto; text-align: center; }
.centered-heading .section-kicker { justify-content: center; }
.centered-heading > p:last-child { max-width: 660px; margin: 25px auto 0; color: var(--muted); }
.integrations-section .centered-heading { max-width: 960px; }
.integrations-section .centered-heading > .integration-statement { max-width: 960px; color: var(--navy); font-size: clamp(1.2rem, 2vw, 1.55rem); font-weight: 800; line-height: 1.55; }
.integration-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 48px; }
.integration-card { display: grid; grid-template-columns: 55px minmax(0, 1fr) 30px; gap: 17px; align-items: center; min-height: 148px; padding: 28px; color: #fff; background: #1653a0; border: 2px solid #5795e5; border-radius: 16px; box-shadow: 0 8px 22px rgba(7,26,47,.12); }
.integration-card.featured { color: #fff; background: #1653a0; border-color: #5795e5; }
.integration-card:nth-child(2) { background: #176344; border-color: #55b88a; }
.integration-card:nth-child(3) { background: #a9420e; border-color: #ef9c65; }
.integration-card:nth-child(4) { background: #634098; border-color: #b293e1; }
.integration-card.integration-other { grid-column: 1 / -1; background: #246b3c; border-color: #6fc98b; }
.integration-mark { display: grid; place-items: center; width: 52px; height: 52px; color: white; background: #4c579f; border-radius: 13px; font: 800 .83rem "Manrope", sans-serif; }
.integration-mark.sage { background: #00a376; }.integration-mark.xero { background: #13b5e5; }.integration-mark.os { background: #ef7155; }.integration-mark.tc { background: #295b9a; }.integration-mark.sb { color: var(--navy); background: var(--amber); }
.integration-card h3 { color: #fff; font-size: 1.3rem; font-weight: 800; letter-spacing: -.025em; }
.integration-card p, .integration-card.featured p { margin-top: 8px; color: #fff; font-size: 1rem; }
.integration-card > a { display: grid; place-items: center; color: #fff; text-decoration: none; font-size: 1.5rem; font-weight: 900; }
.integration-note { max-width: 900px; margin: 27px auto 0; color: var(--navy); text-align: center; font-size: 1.05rem; font-weight: 700; }
.integration-contact { max-width: 900px; margin: 16px auto 0; color: var(--navy); text-align: center; font-size: clamp(1.1rem, 1.7vw, 1.3rem); font-weight: 800; line-height: 1.55; }

.video-feature { padding: 115px 0; color: white; background: linear-gradient(135deg, var(--navy-2), var(--navy)); }
.video-layout { display: grid; grid-template-columns: .7fr 1.3fr; gap: 85px; align-items: center; }
.video-copy h2 { font-size: clamp(2.55rem, 4.5vw, 4.2rem); }
.video-copy > p:not(.section-kicker) { margin: 22px 0 29px; color: #fff; font-weight: 700; }
.light-kicker { color: var(--cyan); }
.video-poster, .video-thumb { position: relative; overflow: hidden; display: block; width: 100%; padding: 0; border: 0; cursor: pointer; background: #061424; }
.video-poster { aspect-ratio: 16/9; border-radius: 22px; box-shadow: 0 28px 70px rgba(0,0,0,.32); }
.video-poster img, .video-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s, opacity .35s; }
.video-poster::after, .video-thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(4,17,31,.83), rgba(4,17,31,0) 60%); }
.video-poster:hover img, .video-thumb:hover img { transform: scale(1.035); opacity: .86; }
.play-button, .video-thumb > span { position: absolute; z-index: 2; display: grid; place-items: center; color: var(--navy); background: var(--amber); border-radius: 50%; }
.play-button { left: 50%; top: 50%; width: 72px; height: 72px; transform: translate(-50%,-50%); font-size: 1.35rem; }
.video-caption { position: absolute; z-index: 2; inset: auto 27px 25px; display: grid; color: white; text-align: left; }
.video-caption small { color: var(--cyan); text-transform: uppercase; letter-spacing: .11em; font-weight: 800; }
.video-caption strong { font: 700 1.05rem "Manrope", sans-serif; }
.video-poster iframe, .video-thumb iframe { width: 100%; height: 100%; border: 0; }

.about-section { padding: 125px 0; }
.about-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 28px; align-items: stretch; }
.founders-photo { position: relative; display: flex; flex-direction: column; justify-content: flex-start; margin: 0; padding: clamp(24px, 3vw, 36px); background: #e4f0fb; border: 2px solid #bfd8f0; border-radius: 25px; }
.founders-statement { margin: 0 0 28px; color: var(--navy); text-align: center; font: 700 clamp(1.2rem, 1.8vw, 1.55rem)/1.5 "Manrope", sans-serif; }
.about-copy { min-width: 0; padding: clamp(24px, 3vw, 36px); background: #e8f4eb; border: 2px solid #c5dfce; border-radius: 25px; }
.founders-photo img { width: 100%; border-radius: 20px; filter: saturate(.84) contrast(1.03); box-shadow: var(--shadow); }
.founders-photo figcaption { position: relative; margin-top: 20px; display: grid; padding: 16px 20px; color: white; background: var(--navy); border-radius: 12px; box-shadow: var(--shadow); }
.founders-photo figcaption span { color: var(--cyan); font-size: .65rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.founders-photo figcaption strong { font: 700 .9rem "Manrope", sans-serif; }
.about-copy > .section-kicker { color: #1653a0; font-size: clamp(1.1rem, 1.8vw, 1.4rem); font-weight: 900; line-height: 1.45; }
.about-copy > p:not(.section-kicker) { margin-top: 21px; color: var(--navy); font-weight: 700; }
.ecosystem-links { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 31px; }
.ecosystem-links a { display: grid; padding: 20px; color: #fff; text-decoration: none; background: #1653a0; border: 2px solid #5795e5; border-radius: 12px; }
.ecosystem-links a:nth-child(2) { background: #176344; border-color: #55b88a; }
.ecosystem-links span { color: #fff; font-size: .9rem; font-weight: 800; }
.ecosystem-links strong { margin-top: 6px; color: #fff; font: 800 1.1rem "Manrope", sans-serif; }

.faq-section { padding: 120px 0; background: var(--paper); }
.faq-layout { display: grid; grid-template-columns: .7fr 1.3fr; gap: 110px; align-items: start; }
.faq-layout > div:first-child { min-width: 0; padding: clamp(24px, 3vw, 36px); background: #d9eafb; border: 2px solid #9fc4e9; border-radius: 20px; }
.faq-layout > div:first-child .section-kicker { color: #1653a0; font-size: 1rem; font-weight: 900; }
.faq-layout > div:first-child h2 { color: var(--navy); font-size: clamp(2.4rem, 3.8vw, 3.8rem); font-weight: 800; }
.faq-layout > div:first-child > p:last-child { margin-top: 22px; color: var(--navy); font-size: 1.15rem; font-weight: 700; line-height: 1.6; }
.faq-list { display: grid; gap: 16px; }
.faq-list details { color: #fff; background: #1653a0; border: 2px solid #5795e5; border-radius: 16px; box-shadow: 0 8px 22px rgba(7,26,47,.1); }
.faq-list details:nth-child(4n + 2) { background: #176344; border-color: #55b88a; }
.faq-list details:nth-child(4n + 3) { background: #a9420e; border-color: #ef9c65; }
.faq-list details:nth-child(4n + 4) { background: #634098; border-color: #b293e1; }
.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px; color: #fff; cursor: pointer; list-style: none; font: 800 1.1rem "Manrope", sans-serif; border-radius: 14px; }
.faq-list summary:focus-visible { outline: 3px solid var(--amber); outline-offset: 4px; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span { flex-shrink: 0; font-size: 1.5rem; font-weight: 700; transition: transform .2s; }
.faq-list details[open] > summary span { transform: rotate(45deg); }
.faq-list details p { max-width: 680px; padding: 0 24px 24px; color: #fff; font-weight: 600; }

.cta-section { padding: 35px 0 90px; background: var(--paper); }
.cta-panel { display: grid; grid-template-columns: 1.2fr .8fr; gap: 60px; align-items: center; padding: 62px 70px; color: white; background: var(--navy); border-radius: 26px; box-shadow: var(--shadow); }
.cta-panel h2 { font-size: clamp(2.3rem, 4vw, 3.9rem); }
.cta-actions { display: grid; justify-items: start; gap: 9px; }
.cta-actions > a:not(.button) { color: rgba(255,255,255,.67); text-decoration: none; font-size: .88rem; }

.site-footer { padding: 80px 0 25px; color: rgba(255,255,255,.64); background: #04111f; }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 70px; }
.footer-brand img { width: 180px; padding: 7px 10px; background: white; border-radius: 8px; }
.footer-brand p { max-width: 330px; margin-top: 19px; font-size: .85rem; }
.footer-grid > div:not(.footer-brand) { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.footer-grid h2 { margin-bottom: 8px; color: white; font-size: .83rem; letter-spacing: .03em; }
.footer-grid a, .footer-grid span { text-decoration: none; font-size: .8rem; }
.footer-grid a:hover { color: var(--cyan); }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; margin-top: 65px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1); font-size: .72rem; }
.footer-bottom a { text-decoration: none; }

/* Tutorials */
.tutorial-hero { padding: 110px 0 85px; color: white; background: radial-gradient(circle at 18% 100%, rgba(22,210,223,.15), transparent 34%), var(--navy); }
.tutorial-hero-layout { display: grid; grid-template-columns: 1.15fr .85fr; gap: 100px; align-items: end; }
.tutorial-hero h1 { font-size: clamp(3rem, 5.6vw, 5.3rem); }
.tutorial-hero p:not(.eyebrow) { max-width: 700px; margin-top: 24px; color: #fff; font-size: 1.12rem; font-weight: 600; }
.tutorial-jump { display: grid; gap: 12px; }
.tutorial-jump a { display: grid; grid-template-columns: 37px 1fr; gap: 13px; padding: 20px; color: #fff; background: #1653a0; border: 2px solid #5795e5; border-radius: 12px; text-decoration: none; font-weight: 800; }
.tutorial-jump a:nth-child(2) { background: #176344; border-color: #55b88a; }
.tutorial-jump a:nth-child(3) { background: #a9420e; border-color: #ef9c65; }
.tutorial-jump a:nth-child(4) { background: #634098; border-color: #b293e1; }
.tutorial-jump a:hover { box-shadow: 0 0 0 3px rgba(255,255,255,.25); }
.tutorial-jump span { color: #fff; font: 800 .85rem "Manrope", sans-serif; letter-spacing: .1em; }
.learning-path { padding: 85px 0 120px; background: #e8f1f8; }
.learning-note { display: flex; gap: 20px; padding: 19px 23px; color: var(--navy); background: #dff7f8; border-left: 4px solid var(--cyan-dark); border-radius: 0 10px 10px 0; }
.learning-note span { color: var(--navy); font-weight: 600; }
.tutorial-group { padding-top: 75px; --tutorial-colour: #1653a0; --tutorial-edge: #5795e5; }
.tutorial-group#allocate { --tutorial-colour: #176344; --tutorial-edge: #55b88a; }
.tutorial-group#reconcile { --tutorial-colour: #a9420e; --tutorial-edge: #ef9c65; }
.tutorial-group#integrate { --tutorial-colour: #634098; --tutorial-edge: #b293e1; }
.group-heading { display: grid; grid-template-columns: 58px 1fr .8fr; gap: 24px; align-items: center; padding: 28px; color: #fff; background: var(--tutorial-colour); border: 2px solid var(--tutorial-edge); border-radius: 18px; }
.group-heading > span { display: grid; place-items: center; width: 48px; height: 48px; color: var(--navy); background: var(--amber); border-radius: 12px; font: 800 1rem "Manrope", sans-serif; }
.group-heading h2 { font-size: clamp(2.1rem, 4vw, 3.4rem); }
.group-heading > p { color: #fff; font-weight: 600; }
.group-heading .section-kicker { margin-bottom: 8px; color: #fff; }
.tutorial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 31px; }
.tutorial-card { display: flex; flex-direction: column; overflow: hidden; color: #fff; background: var(--tutorial-colour); border: 2px solid var(--tutorial-edge); border-radius: 15px; box-shadow: 0 14px 35px rgba(7,26,47,.1); }
.video-thumb { aspect-ratio: 16/9; }
.video-thumb > span { left: 50%; top: 50%; width: 48px; height: 48px; transform: translate(-50%,-50%); font-size: .95rem; }
.tutorial-card > div { display: flex; flex-direction: column; flex: 1; padding: 24px; }
.tutorial-card small { align-self: flex-start; padding: 5px 9px; color: var(--navy); background: #fff; border-radius: 6px; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.tutorial-card h3 { margin: 14px 0 10px; color: #fff; font-size: 1.2rem; font-weight: 800; letter-spacing: -.025em; }
.tutorial-card p { margin-bottom: 20px; color: #fff; font-size: 1rem; font-weight: 500; }
.tutorial-direct-link { align-self: flex-start; margin-top: auto; color: #fff; font-weight: 700; font-size: .9rem; text-underline-offset: 4px; }
.legacy-resources { display: grid; grid-template-columns: 1.2fr .8fr; gap: 80px; align-items: center; margin-top: 105px; padding: 50px; color: white; background: var(--navy); border-radius: 22px; }
.legacy-resources h2 { font-size: 2.35rem; }
.legacy-resources p:not(.section-kicker):not(.support-update-label) { margin-top: 15px; color: #fff; font-weight: 600; }
.legacy-resources > div:last-child { display: grid; }
.legacy-resources a { padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.13); color: var(--cyan); text-decoration: none; font-weight: 700; }

@media (max-width: 1000px) {
  .header-inner { gap: 18px; }
  .primary-nav { gap: 17px; }
  .header-cta { display: none; }
  .hero-layout, .pdf-layout, .about-layout { gap: 55px; }
  .hero h1 { font-size: 4.6rem; }
  .workflow-visual { transform: scale(.9); transform-origin: center; }
  .steps-grid { grid-template-columns: 1fr 1fr; }
  .feature-layout, .faq-layout { gap: 60px; }
  .integration-grid, .tutorial-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; }
  .footer-grid > div:last-child { grid-column: 2; }
}

@media (max-width: 760px) {
  html { scroll-padding-top: 72px; }
  .shell { width: min(100% - 28px, 1180px); }
  .site-header, .solid-header { position: relative; background: var(--navy); }
  .header-inner { width: calc(100% - 28px); height: 72px; }
  .brand { padding: 6px 9px; }
  .brand img { width: 155px; }
  .menu-toggle { display: block; margin-left: auto; }
  .primary-nav { position: absolute; top: 72px; left: 14px; right: 14px; display: none; margin: 0; padding: 13px; background: var(--navy-2); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; box-shadow: 0 18px 40px rgba(0,0,0,.28); }
  .primary-nav.is-open { display: grid; }
  .primary-nav a { padding: 10px 8px; }
  .hero { min-height: auto; padding: 76px 0 96px; }
  .hero-layout, .pdf-layout, .split-heading, .feature-layout, .video-layout, .about-layout, .faq-layout, .cta-panel, .tutorial-hero-layout, .legacy-resources { grid-template-columns: 1fr; }
  .hero-layout { gap: 38px; }
  .hero h1, .tutorial-hero h1 { font-size: clamp(2.75rem, 14vw, 4.25rem); }
  .hero-lede { font-size: 1rem; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 18px; }
  .trust-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 0; margin-top: 40px; }
  .trust-strip li { padding-left: 15px; min-width: 0; }
  .workflow-visual { height: 365px; transform: none; }
  .statement-card { left: 8%; width: 185px; }
  .process-node { width: 120px; min-height: 87px; padding: 11px; }
  .node-import { right: 2%; }.node-reconcile { right: 3%; }.node-export { left: 1%; }
  .success-badge { right: 15%; }
  .hero-marquee div { justify-content: flex-start; padding-left: 20px; }
  .audience-band, .pdf-section, .steps-section, .feature-section, .integrations-section, .video-feature, .about-section, .faq-section { padding: 85px 0; }
  .audience-grid, .integration-grid, .tutorial-grid { grid-template-columns: 1fr; }
  .audience-grid { gap: 1px; }
  .pdf-layout { gap: 55px; }
  .pdf-art { min-height: 390px; }
  .pdf-paper, .data-sheet { width: 160px; min-height: 230px; padding: 19px; }
  .split-heading { gap: 22px; }
  .steps-grid { grid-template-columns: 1fr; margin-top: 45px; }
  .steps-grid li { min-height: 305px; }
  .step-icon { margin: 34px 0 23px; }
  .feature-layout, .faq-layout { gap: 47px; }
  .feature-intro { position: static; }
  .video-layout { gap: 45px; }
  .founders-photo { margin-right: 0; }
  .ecosystem-links { grid-template-columns: 1fr; }
  .cta-panel { gap: 38px; padding: 42px 27px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 42px 25px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-grid > div:last-child { grid-column: auto; }
  .footer-bottom { flex-direction: column; }
  .tutorial-hero { padding: 70px 0; }
  .tutorial-hero-layout { gap: 45px; }
  .learning-path { padding-top: 50px; }
  .learning-note { display: grid; gap: 4px; }
  .tutorial-group { padding-top: 72px; }
  .group-heading { grid-template-columns: 45px 1fr; gap: 16px; }
  .group-heading > p { grid-column: 2; }
  .legacy-resources { gap: 32px; margin-top: 75px; padding: 35px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
/* October PDF-import launch */
.hero-layout { grid-template-columns: 1fr 1.08fr; gap: 48px; }
.hero { min-height: auto; padding-bottom: 100px; }
.hero h1 { font-size: clamp(2.8rem, 4.8vw, 4.7rem); }
.hero-actions { gap: 20px; flex-wrap: wrap; }
.launch-hero-media { min-width: 0; }
.launch-cover { display: block; overflow: hidden; border-radius: 18px; background: #103b78; text-decoration: none; box-shadow: 0 24px 60px #0005; border: 1px solid #ffffff30; }
.launch-cover img { width: 100%; height: auto; }
.launch-cover-action { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 21px; color: white; font-weight: 700; }
.launch-cover-action > span { color: #c8d9ee; font-size: .78rem; white-space: nowrap; }
.hero-contact { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; font-size: .9rem; margin-top: 22px; color: #c7dbec; }
.hero-contact a { text-decoration: none; }
.trust-strip li { min-width: 0; padding-inline: 16px; }
.trust-strip span { color: #afc1d0; }
.launch-demo-section { padding: 90px 0; background: #0b2745; color: white; }
.launch-demo-section .split-heading { gap: 65px; }
.launch-demo-section .split-heading > p { color: #c0d1e1; }
.launch-player { margin-top: 35px; border-radius: 18px; overflow: hidden; background: #04111e; border: 1px solid #ffffff26; box-shadow: 0 24px 60px #0003; }
.launch-player video { display: block; width: 100%; height: auto; aspect-ratio: 16/9; }
.video-layout .launch-player { margin: 0; }
.demo-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; margin-top: 17px; color: #c1d2e2; font-size: .88rem; }
.demo-links a { color: var(--cyan); text-underline-offset: 4px; }
.launch-offers { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 50px; }
.launch-offers article { padding: 35px; border: 1px solid #ffffff26; border-radius: 18px; background: #ffffff07; }
.launch-offers h3 { font-size: 1.7rem; }
.launch-offers article > p:not(.section-kicker) { margin: 18px 0 24px; color: #c1d2e2; }
.pdf-screen-figure { margin: 0; min-width: 0; }
.pdf-demo-panel { min-width: 0; align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding: clamp(24px, 3vw, 40px); background: #e4f0fb; border: 1px solid #c5ddef; border-radius: var(--radius); }
.pdf-demo-panel h3 { margin: 0 0 28px; color: #071a2f; font-size: clamp(1.9rem, 3vw, 2.8rem); font-weight: 800; line-height: 1.15; }
.pdf-demo-panel .button { align-self: flex-start; margin-top: 28px; }
.pdf-demo-panel figcaption { color: #334e68; font-size: 1rem; }
.pdf-screen-figure img { border-radius: 16px; border: 1px solid var(--line); box-shadow: var(--shadow); }
.pdf-screen-figure figcaption { margin-top: 15px; color: var(--muted); font-size: .88rem; }
.pdf-layout { grid-template-columns: 1fr 1fr; gap: 55px; }
.screens-section { padding: 85px 0; background: #e8f1f8; }
.screens-section .section-kicker { color: #1653a0; font-size: 1.05rem; font-weight: 800; }
.screens-section h2 { font-size: clamp(2.2rem,4vw,3.7rem); }
.screens-intro { color: var(--muted); margin: 20px 0 35px; }
.screens-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 23px; }
.screens-grid figure { margin: 0; overflow: hidden; border: 2px solid #1653a0; border-radius: 15px; background: white; box-shadow: 0 8px 20px rgba(7,26,47,.08); }
.screens-grid figure:nth-child(2) { border-color: #176344; }
.screens-grid figure:nth-child(3) { border-color: #a9420e; }
.screens-grid figure a { display: block; position: relative; }
.screens-grid img { width: 100%; aspect-ratio: 16/9; object-fit: contain; }
.screens-grid a span { position: absolute; bottom: 9px; right: 9px; padding: 3px 9px; border-radius: 6px; background: var(--navy); color: white; font-size: .75rem; }
.screens-grid figcaption { padding: 24px; }
.screens-grid strong { font-family: Manrope,system-ui,sans-serif; font-size: 1.1rem; }
.screens-grid p { color: var(--muted); margin-top: 10px; font-size: .95rem; }
.compatibility-callout { display: flex; justify-content: space-between; align-items: center; gap: 30px; padding: 32px; margin-top: 32px; background: var(--navy); border-radius: 16px; color: white; }
.compatibility-callout h3 { font-size: 1.4rem; }
.compatibility-callout p { margin-top: 10px; color: #c1d2e2; }
.compatibility-callout .button { flex-shrink: 0; }
.screen-dialog { width: min(1250px,95vw); padding: 18px; background: #071a2f; color: white; border: 1px solid #536b85; border-radius: 15px; max-height: 95dvh; }
.screen-dialog::backdrop { background: #000c; }
.screen-dialog img { width: auto; max-width: 100%; max-height: 76dvh; margin: auto; }
.screen-dialog button { display: block; margin-left: auto; margin-bottom: 12px; color: white; border: 1px solid #698096; border-radius: 8px; padding: 8px 16px; background: transparent; cursor: pointer; }
.screen-dialog p { padding-top: 12px; }
@media(max-width:1000px) { .hero-layout { gap: 28px; } .screens-grid { gap: 14px; } .screens-grid figcaption { padding: 18px; } }
@media(max-width:760px) {
  .hero-layout,.pdf-layout,.launch-offers,.screens-grid { grid-template-columns: 1fr; }
  .hero { padding-top: 50px; padding-bottom: 90px; }
  .hero h1 { font-size: clamp(2.7rem,11vw,4rem); }
  .launch-hero-media { margin-top: 15px; }
  .launch-cover-action { padding: 15px; font-size: .88rem; }
  .hero-contact { font-size: .83rem; }
  .launch-demo-section,.screens-section { padding: 65px 0; }
  .launch-demo-section .split-heading { gap: 22px; }
  .launch-offers article { padding: 27px; }
  .compatibility-callout { flex-direction: column; align-items: flex-start; padding: 27px; }
  .demo-links { justify-content: flex-start; }
}
/* Tutorial finishing pass: readable cards and clear navigation. */
.tutorial-page .learning-path { background: #e8f1fa; }
.tutorial-page .tutorial-hero { background: linear-gradient(130deg,#09284b,#14549a); }
.tutorial-page .tutorial-jump { gap: 8px; padding: 12px; background: #ffffff10; }
.tutorial-page .tutorial-jump a { padding: 16px; border-radius: 9px; background: #ffffff14; font-size: 1.06rem; }
.tutorial-page .tutorial-jump a:hover { background: #ffffff26; }
.tutorial-page .tutorial-jump span { color: white; font-size: .82rem; }
.tutorial-page .learning-note { background: #cde7f7; color: #09284b; border-color: #1653a0; font-size: 1.06rem; }
.tutorial-page .learning-note span { color: #183d58; }
.tutorial-search-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 30px; margin-top: 28px; border-radius: 18px; background: #d3e4f5; border: 1px solid #a7c7e5; }
.tutorial-search-panel h2 { font-size: clamp(1.8rem,3vw,2.5rem); color: #09284b; }
.tutorial-search-panel p { margin-top: 12px; color: #183d58; font-size: 1.06rem; font-weight: 500; }
.tutorial-search-panel label { display: block; font-weight: 800; color: #09284b; margin-bottom: 8px; font-size: 1.06rem; }
.tutorial-search-panel input { width: 100%; min-height: 52px; border: 2px solid #49779e; border-radius: 9px; padding: 12px 16px; color: #09284b; background: white; font-size: 1.06rem; }
.tutorial-search-panel input::placeholder { color: #52697b; }
.tutorial-page .group-heading { align-items: center; }
.tutorial-page .group-heading h2 { font-size: clamp(2rem,3.2vw,2.8rem); overflow-wrap: anywhere; }
.tutorial-page .group-heading > p { color: white; font-size: 1.08rem; font-weight: 600; }
.tutorial-page .group-heading .section-kicker { color: white; font-size: .88rem; }
.tutorial-count { margin-top: 10px; color: white; font-size: .95rem; font-weight: 700; }
.tutorial-page .tutorial-grid { gap: 24px; }
.tutorial-page .tutorial-card { border-width: 2px; box-shadow: 0 10px 25px #09284b15; }
.tutorial-page .tutorial-card > div { padding: 26px; }
.tutorial-page .tutorial-card h3 { font-size: 1.4rem; line-height: 1.25; }
.tutorial-page .tutorial-card p { font-size: 1.08rem; line-height: 1.6; font-weight: 500; }
.tutorial-page .tutorial-card small { font-size: .8rem; }
.tutorial-page .tutorial-direct-link { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; width: 100%; border: 1px solid #ffffff80; border-radius: 8px; padding: 10px 12px; font-size: 1rem; font-weight: 800; text-decoration: none; background: #ffffff12; }
.tutorial-page .tutorial-direct-link:hover { color: #09284b; background: white; }
.tutorial-page .video-thumb { flex-shrink: 0; }
.video-thumb.is-playing::after,.video-poster.is-playing::after { display: none; }
.video-thumb.is-playing,.video-poster.is-playing { cursor: auto; }
.tutorial-back { display: inline-block; margin-top: 22px; color: #09284b; font-weight: 800; font-size: 1rem; text-underline-offset: 4px; padding-block: 8px; }
.tutorial-empty { margin-top: 28px; padding: 25px; background: #d3e4f5; border-radius: 12px; color: #09284b; font-size: 1.1rem; }
.tutorial-empty button { cursor: pointer; color: #09284b; font-weight: 800; text-decoration: underline; border: 0; background: transparent; padding: 8px; }
.tutorial-page .legacy-resources { background: #11416f; gap: 35px; }
.tutorial-page .legacy-resources p:not(.section-kicker):not(.support-update-label) { color: white; font-size: 1.08rem; }
.tutorial-page .legacy-resources a { color: white; font-size: 1.08rem; min-height: 48px; }
.tutorial-page .video-copy > p:not(.section-kicker) { color: white; font-size: 1.12rem; font-weight: 600; }
.site-footer { background: #0b315b; color: white; border-top: 5px solid #3e8ccf; }
.footer-grid { gap: 40px; }
.footer-grid h2 { font-size: 1.15rem; color: white; font-weight: 800; }
.footer-grid a,.footer-grid span { color: white; font-size: 1rem; font-weight: 600; overflow-wrap: anywhere; }
.footer-grid a { padding-block: 5px; }
.footer-brand p { font-size: 1.05rem; font-weight: 500; }
.footer-bottom { color: white; font-size: .95rem; font-weight: 500; }
[hidden] { display: none !important; }
@media(max-width:1000px) { .tutorial-page .tutorial-hero-layout { gap: 35px; } }
@media(max-width:760px) { .tutorial-search-panel { grid-template-columns: 1fr; gap: 24px; padding: 24px; } .tutorial-page .group-heading { grid-template-columns: 1fr; padding: 24px; gap: 12px; } .tutorial-page .group-heading > p { grid-column: 1; } .tutorial-page .group-heading > span { display: none; } .tutorial-page .tutorial-card > div { padding: 24px; } .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px 22px; } }
@media(max-width:420px) { .footer-grid { grid-template-columns: 1fr; } .footer-brand { grid-column: 1; } }
/* Match topic navigation to the destination section, independent of order. */
.tutorial-page .tutorial-jump a[href="#pdf-demo"] { background: #0b2745; border-color: #4c82b5; }
.tutorial-page .tutorial-jump a[href="#start"] { background: #1653a0; border-color: #5795e5; }
.tutorial-page .tutorial-jump a[href="#allocate"] { background: #176344; border-color: #55b88a; }
.tutorial-page .tutorial-jump a[href="#reconcile"] { background: #a9420e; border-color: #ef9c65; }
.tutorial-page .tutorial-jump a[href="#integrate"] { background: #634098; border-color: #b293e1; }
.tutorial-page .tutorial-jump a:hover { filter: brightness(1.12); box-shadow: 0 0 0 3px #ffffff40; }
/* One consistent, contrasting action across every tutorial card. */
.tutorial-page .tutorial-direct-link { background: #c5f3d3; color: #103b2b; border: 2px solid #c5f3d3; box-shadow: 0 3px 8px #00000012; }
.tutorial-page .tutorial-direct-link:hover { background: #e0fbe7; color: #103b2b; border-color: #e0fbe7; }
.tutorial-page .tutorial-direct-link:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
/* Keep primary navigation available throughout both pages. */
html { scroll-padding-top: 104px; }
body { padding-top: 88px; }
.site-header,.solid-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: #09284b; border-bottom: 1px solid #507ba2; box-shadow: 0 4px 18px #00000020; }
.primary-nav a { color: #fff; font-weight: 700; }
.primary-nav a[aria-current="page"] { color: #c5f3d3; text-decoration: underline; text-underline-offset: 7px; }
.hero { padding-top: 94px; }
.back-to-top { position: fixed; z-index: 90; right: 20px; bottom: 20px; display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 10px 16px; color: #103b2b; background: #c5f3d3; border: 2px solid #103b2b; border-radius: 10px; box-shadow: 0 5px 18px #0003; font-weight: 800; text-decoration: none; }
.footer-bottom { padding-bottom: 65px; }
@media(max-width:760px) {
  html { scroll-padding-top: 140px; }
  body { padding-top: 124px; }
  .site-header,.solid-header { position: fixed; }
  .header-inner { position: relative; height: 124px; align-items: flex-start; padding-top: 16px; }
  .menu-toggle { display: none; }
  .primary-nav,.primary-nav.is-open { position: absolute; display: flex; align-items: center; justify-content: flex-start; top: 72px; left: 0; right: 0; height: 52px; margin: 0; padding: 0 0 6px; gap: 8px; overflow-x: auto; background: transparent; border: 0; border-radius: 0; box-shadow: none; scrollbar-width: thin; scrollbar-color: #78a9d4 #09284b; }
  .primary-nav a { flex: 0 0 auto; padding: 8px 12px; font-size: .95rem; white-space: nowrap; background: #ffffff12; border-radius: 7px; }
  .hero { padding-top: 50px; }
  .back-to-top { right: 12px; bottom: 12px; padding: 8px 12px; font-size: .9rem; }
}

/* Keep the download action visible above the scrolling navigation. */
.header-trial-mobile { display: none; }
@media (min-width: 761px) and (max-width: 1000px) {
  body { padding-top: 124px; }
  html { scroll-padding-top: 140px; }
  .header-inner { position: relative; height: 124px; align-items: flex-start; padding-top: 16px; }
  .primary-nav { position: absolute; top: 72px; left: 0; right: 0; height: 52px; margin: 0; justify-content: flex-start; overflow-x: auto; }
  .primary-nav a { flex: 0 0 auto; white-space: nowrap; }
}
@media (max-width: 1000px) {
  .header-cta { display: inline-flex; margin-left: auto; flex-shrink: 0; min-height: 44px; }
  .header-trial-desktop { display: none; }
  .header-trial-mobile { display: inline; }
}
@media (max-width: 760px) {
  .header-inner { gap: 8px; }
  .brand img { width: clamp(115px, 30vw, 155px); }
  .header-cta { padding: 10px 12px; font-size: .88rem; white-space: nowrap; }
}

/* Friendly learning image above the tutorial topic links. */
.tutorial-hero-layout { align-items: start; }
.tutorial-hero-side { min-width: 0; }
.tutorial-learning-photo { margin: 0 0 20px; overflow: hidden; border: 2px solid #5795e5; border-radius: 16px; background: #103a62; box-shadow: 0 12px 30px #0003; }
.tutorial-learning-photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.tutorial-learning-photo figcaption { padding: 14px 18px; color: #fff; font-size: 1.1rem; font-weight: 800; }

/* Complete the tutorial introduction with a clear benefit banner. */
.tutorial-savings-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 40px; padding: 28px 32px; background: #176344; border: 2px solid #55b88a; border-radius: 16px; color: #fff; }
.tutorial-savings-banner strong { font-family: "Manrope", sans-serif; font-size: clamp(1.5rem, 2.5vw, 2.2rem); line-height: 1.2; }
.tutorial-hero .tutorial-savings-banner p { flex: 1 1 270px; margin: 0; font-size: 1.12rem; font-weight: 600; }
.tutorial-savings-banner .button { flex-shrink: 0; }
@media (max-width: 760px) { .tutorial-savings-banner { padding: 24px; } .tutorial-savings-banner .button { width: 100%; white-space: normal; text-align: center; } }

/* Clear, individually coloured footer navigation panels. */
.site-footer { padding-top: 52px; }
.footer-grid { grid-template-columns: 1.3fr repeat(3,minmax(0,1fr)); gap: 22px; align-items: stretch; }
.footer-grid > div { min-width: 0; }
.footer-grid > div:not(.footer-brand) { --footer-accent:#a7d9ff; padding: 20px; border: 2px solid var(--footer-accent); border-radius: 16px; background: #12416f; gap: 10px; }
.footer-grid > div:nth-child(3) { --footer-accent:#aee9ce; }
.footer-grid > div:nth-child(4) { --footer-accent:#ffd092; }
.footer-grid h2 { align-self: stretch; margin: -20px -20px 9px; padding: 15px 20px; border-radius: 13px 13px 0 0; background: var(--footer-accent); color: #092d4b; font-size: 1.2rem; font-weight: 850; }
.footer-grid a,.footer-grid span { font-size: 1.03rem; line-height: 1.55; font-weight: 650; }
.footer-grid a { width: 100%; border-radius: 5px; }
.footer-grid a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; background: #ffffff14; }
.footer-grid a:focus-visible { outline: 3px solid #ffe39f; outline-offset: 4px; }
.footer-brand p { padding: 18px; border: 2px solid #75b5e6; border-radius: 14px; background: #12416f; color: white; line-height: 1.65; font-weight: 600; }
@media(max-width:1000px) { .footer-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .footer-brand { grid-column: auto; } .footer-grid > div:last-child { grid-column: auto; } }
@media(max-width:560px) { .footer-grid { grid-template-columns: minmax(0,1fr); gap: 20px; } .footer-brand { grid-column: auto; } .footer-brand p { max-width: none; } }

.legacy-resources.support-updates { background:#143f68; border:2px solid #8fc9ed; align-items:center; }
.support-updates h2 { font-size:clamp(2rem,3.5vw,2.8rem); line-height:1.15; color:#bfe9ff; margin-bottom:14px; font-weight:850; }
.support-updates h3 { font-size:1.4rem; color:white; margin-bottom:12px; }
.support-updates p { font-size:1.08rem; line-height:1.65; }
.legacy-resources .support-resource-list { display:grid;gap:14px; }
.support-resource { display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:19px;border-radius:12px;background:#d7edff;color:#103654;border:2px solid #93c9ed; }
.support-resource:nth-child(2) { background:#d9f3e6;border-color:#98d9b9; }
.support-resource:nth-child(3) { background:#fff0d8;border-color:#eac389; }
.support-resource strong { font-size:1.08rem;line-height:1.5; }
.support-resource span { display:inline-block;border:1px solid currentColor;border-radius:20px;padding:5px 10px;font-size:.9rem;font-weight:750;white-space:nowrap; }
.legacy-resources a.support-request { display:inline-block;width:auto;margin-top:16px;padding:14px 20px;border:0;border-radius:8px;background:#b4edd2;color:#103c36;font-size:1.05rem;font-weight:800; }

/* Frame the pending support materials clearly. */
.legacy-resources .support-resource-list { padding:20px; background:#0b2948; border:2px solid #efbd62; border-radius:16px; }
.tutorial-page .legacy-resources .support-update-label { margin:0 0 4px; padding:10px 14px; border-radius:8px; color:#15324a; background:#ffda91; font-size:1.2rem; font-weight:800; text-align:center; }
@media(max-width:560px) { .legacy-resources .support-resource-list { padding:14px; } .support-resource span { white-space:normal; } }

/* Make the guided-demo invitation clear and easy to act on. */
.tutorial-demo-panel .section-kicker { display:inline-block; margin-bottom:20px; padding:12px 16px; border:2px solid #55b88a; border-radius:10px; background:#176344; color:#fff; font-size:clamp(1.1rem,1.7vw,1.35rem); font-weight:800; line-height:1.35; letter-spacing:0; text-transform:none; }
.tutorial-demo-panel .cta-actions { padding:28px; gap:20px; background:#15476f; border:2px solid #83c7ee; border-radius:16px; }
.tutorial-demo-panel .cta-actions .button { width:100%; text-align:center; }
.tutorial-demo-panel .cta-actions > a:not(.button) { display:block; width:100%; padding:12px 14px; background:#c5f3d3; border:2px solid #55b88a; border-radius:9px; color:#103b2b; font-size:1.15rem; font-weight:800; text-align:center; }
.tutorial-demo-panel .cta-actions > a:not(.button):hover { background:#e0fbe7; }
@media(max-width:560px) { .tutorial-demo-panel .cta-actions { padding:20px; } }

.tutorial-page .legacy-resources.support-updates .support-resource-list > p.support-update-label { color:#102c43; font-weight:850; }

/* Green PDF demonstration panel beside the blue workflow panel. */
.pdf-section .pdf-demo-panel { background:#176344; border-color:#328562; }
.pdf-section .pdf-demo-panel h3 { color:#fff; }
.pdf-section .pdf-demo-panel figcaption { color:#103b2b; background:#e0f5e9; padding:14px 16px; margin-top:14px; border-radius:8px; font-size:1.05rem; font-weight:750; line-height:1.55; }

/* Separate the homepage hero highlights with strong colour and borders. */
.hero-actions .text-link { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:14px 20px; background:#176344; border:2px solid #55b88a; border-radius:10px; color:#fff; font-weight:800; text-decoration:none; }
.hero-actions .text-link:hover { background:#207653; }
.hero .trust-strip { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:24px; }
.hero .trust-strip li { min-width:0; padding:18px 14px; border:2px solid #5795e5; border-radius:12px; background:#1653a0; }
.hero .trust-strip li:nth-child(2) { background:#176344; border-color:#55b88a; }
.hero .trust-strip li:nth-child(3) { background:#634098; border-color:#b293e1; }
.hero .trust-strip strong { color:#fff; font-size:1.05rem; }
.hero .trust-strip span { color:#fff; font-size:.85rem; font-weight:600; line-height:1.5; }
.hero .hero-contact { padding:14px; gap:12px; background:#15476f; border:2px solid #83c7ee; border-radius:12px; }
.hero .hero-contact a { color:#fff; font-size:1rem; font-weight:700; padding:5px; }
.hero .hero-contact a:hover { text-decoration:underline; }
.hero-marquee > div { flex-wrap:wrap; gap:10px; padding:16px 20px; }
.hero-marquee i { display:none; }
.hero-marquee span { padding:8px 14px; border:1px solid #78a9d4; border-radius:8px; background:#15476f; color:#fff; }
.hero-marquee span:nth-of-type(even) { background:#176344; border-color:#55b88a; }
@media(max-width:560px) { .hero .trust-strip { grid-template-columns:1fr; } .hero-actions .text-link { width:100%; } .hero-marquee span { padding:7px 10px; } }

/* Explain the two import routes instead of an isolated keyword strip. */
.hero-import-routes { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:20px; padding-top:28px; padding-bottom:32px; }
.import-route { display:flex; flex-direction:column; gap:12px; padding:24px; color:#fff; border:2px solid #5795e5; border-radius:14px; background:#1653a0; text-decoration:none; }
.import-route.route-bank { background:#176344; border-color:#55b88a; }
.import-route strong { font:800 1.25rem "Manrope",sans-serif; line-height:1.4; }
.import-route span { font-size:1rem; line-height:1.6; }
.import-route b { padding:10px 12px; border-radius:8px; background:#ffe3a5; color:#183349; font-size:1rem; line-height:1.5; }
.import-route small { margin-top:auto; font-size:1rem; font-weight:800; text-decoration:underline; text-underline-offset:4px; }
.import-route:hover { box-shadow:0 0 0 3px #ffffff40; }
.faq-list details[id] { scroll-margin-top:150px; }
@media(max-width:760px) { .hero-import-routes { grid-template-columns:1fr; } }

/* Prominent actions and duration beneath the launch video. */
.demo-links { display:grid; grid-template-columns:1fr 1fr 1fr; align-items:stretch; gap:16px; margin-top:20px; padding:20px; background:#176344; border:2px solid #55b88a; border-radius:14px; color:#fff; font-size:1.15rem; font-weight:800; }
.demo-links > span,.demo-links > a { display:flex; align-items:center; justify-content:center; min-height:64px; padding:16px; border-radius:10px; line-height:1.4; text-align:center; }
.demo-links > span { background:#104b33; border:1px solid #78cfa6; color:#fff; }
.demo-links > a { color:#103b2b; background:#c5f3d3; border:2px solid #91d9ad; text-decoration:none; }
.demo-links > a:last-child { background:#ffe3a5; color:#183349; border-color:#efbd62; }
.demo-links > a:hover { text-decoration:underline; text-underline-offset:4px; filter:brightness(1.05); }
.demo-links > a:focus-visible { outline:3px solid #fff; outline-offset:4px; }
@media(max-width:900px) { .demo-links { grid-template-columns:1fr; } }

/* Keep download and support actions beside the demonstration. */
.demo-download-contact { display:grid; grid-template-columns:1.2fr 1fr; gap:20px; margin-top:24px; }
.demo-download,.demo-contact { display:flex; flex-direction:column; gap:14px; padding:26px; border-radius:14px; border:2px solid #55b88a; background:#176344; color:#fff; }
.demo-contact { background:#1653a0; border-color:#5795e5; }
.demo-download-contact strong { font:800 1.35rem "Manrope",sans-serif; line-height:1.4; }
.demo-download-contact p { font-size:1rem; line-height:1.6; color:#fff; }
.demo-contact a { padding:12px 16px; background:#d7edff; color:#103654; border-radius:8px; font-size:1.1rem; font-weight:800; text-decoration:none; }
.demo-contact a:hover { text-decoration:underline; }
.boxed-launch-offers > article { padding:28px; border:2px solid #55b88a; background:#176344; border-radius:16px; }
.boxed-launch-offers > article:nth-child(2) { background:#634098; border-color:#b293e1; }
.boxed-launch-offers .section-kicker { display:inline-block; padding:8px 12px; background:#ffffff20; border:1px solid #ffffff80; border-radius:8px; color:#fff; font-size:1rem; font-weight:800; }
.boxed-launch-offers h3 { color:#fff; font-size:1.5rem; }
.boxed-launch-offers p:not(.section-kicker) { color:#fff; font-size:1.08rem; line-height:1.6; }
.boxed-launch-offers .button-outline-light { background:#c5f3d3; color:#103b2b; border:2px solid #91d9ad; font-size:1.05rem; }
@media(max-width:760px) { .demo-download-contact { grid-template-columns:1fr; } }

/* Prominent branding and an immediate video route for PDF imports. */
.site-header .brand { min-height: 58px; display: flex; align-items: center; padding: 10px 12px; }
.site-header .brand img { width: 230px; }
.pdf-watch-link { display: flex; flex-direction: column; gap: 4px; margin-bottom: 24px; background: #c5f3d3; color: #103b2b; border: 2px solid #75cf99; text-align: center; font-size: 1.15rem; }
.pdf-watch-link small { font-size: .92rem; font-weight: 600; }
.demo-return { margin-top: 18px; }
@media (min-width: 1001px) and (max-width: 1200px) { .header-inner { gap: 16px; } .primary-nav { gap: 15px; } .site-header .brand img { width: 196px; } }
@media (max-width: 1000px) {
  body { padding-top: 144px; }
  html { scroll-padding-top: 160px; }
  .header-inner { height: 144px; gap: 10px; padding-top: 12px; }
  .primary-nav,.primary-nav.is-open { top: 88px; }
  .site-header .brand { min-height: 64px; max-width: 260px; min-width: 0; flex: 1 1 auto; }
  .site-header .brand img { width: 100%; height: auto; }
  .header-cta { min-height: 64px; }
}
@media (max-width: 760px) {
  .site-header .brand { max-width: 235px; padding: 10px 8px; }
  .header-cta { width: 122px; padding: 10px 8px; white-space: normal; text-align: center; font-size: .92rem; line-height: 1.3; }
}

/* A concise introduction and a contrasting PDF demonstration button. */
.hero-audience { margin-top: 22px; padding: 16px 20px; border-left: 4px solid #ffc02e; border-radius: 0 10px 10px 0; background: #17456b; color: #fff; font-size: 1.08rem; font-weight: 800; line-height: 1.5; }
.hero-audience span { display: block; margin-top: 4px; color: #c5f3d3; font-weight: 600; }
.pdf-watch-link { background: #ffc02e; color: #09284b; border-color: #ffe19a; box-shadow: 0 6px 18px #0003; }
.pdf-watch-link:hover,.pdf-watch-link:focus-visible { background: #ffe19a; color: #09284b; }

/* Lead with the complete cashbook workflow; keep detailed offer cards below. */
.cashbook-intro { min-height: 0; padding-bottom: 56px; }
.cashbook-intro .hero-layout { display: block; max-width: 1060px; }
.cashbook-intro h1 { max-width: 950px; font-size: clamp(2.6rem, 5vw, 4.5rem); }
.cashbook-intro .hero-lede { max-width: 950px; font-size: 1.18rem; line-height: 1.7; }
.cashbook-intro-steps { margin: 26px 0; padding-left: 24px; display: grid; gap: 16px; color: #e0eaf3; font-size: 1.12rem; line-height: 1.65; }
.cashbook-intro-steps strong { color: #fff; }
.intro-packages,.intro-other,.intro-pdf-note { max-width: 960px; margin-top: 18px; font-size: 1.05rem; line-height: 1.65; color: #e0eaf3; }
.intro-packages strong { color: #c5f3d3; }
.intro-pdf-note { color: #ffe19a; }
.intro-contact { margin-top: 22px; color: #c9dce9; font-size: 1rem; }
.intro-contact a { color: inherit; text-underline-offset: 4px; }
@media(max-width:760px) { .cashbook-intro { padding-bottom: 40px; } .cashbook-intro .hero-lede,.cashbook-intro-steps { font-size: 1.05rem; } .cashbook-intro .hero-actions { gap: 14px; } }

/* Visual opening: benefits left, playable demonstration right. */
.cashbook-intro { padding:64px 0 54px; background:radial-gradient(ellipse at 95% 10%,#22634488,transparent 55%),linear-gradient(120deg,#09284b,#123e64); }
.cashbook-intro .hero-layout { display:grid; grid-template-columns:1fr 1.13fr; max-width:1280px; gap:48px; align-items:center; }
.cashbook-intro h1 { font-size:clamp(2.6rem,4.2vw,4rem); }
.cashbook-intro .hero-lede { color:#ffe19a; font-weight:800; font-size:1.28rem; line-height:1.45; margin-top:22px; }
.hero-summary { color:#fff; font-size:1.1rem; line-height:1.55; margin-top:18px; max-width:480px; }
.hero-who { color:#c5f3d3; font-size:.95rem; margin-top:16px; }
.hero-demo { min-width:0; background:#f5f8fc; border:2px solid #75b8d8; border-radius:18px; overflow:hidden; box-shadow:0 22px 45px #0004; scroll-margin-top:110px; }
.hero-demo-heading { padding:20px 24px; color:#09284b; }
.demo-new { display:inline-block; padding:6px 10px; border-radius:6px; background:#ffc02e; color:#09284b; font-size:.75rem; font-weight:900; letter-spacing:.06em; }
.hero-demo h2 { font-size:1.6rem; margin-top:10px; }
.hero-demo .launch-player { border:0; border-radius:0; box-shadow:none; margin:0; background:#06192b; }
.hero-demo video { width:100%; height:auto; display:block; aspect-ratio:16/9; }
.hero-demo-footer { padding:18px 24px; background:#176344; color:#fff; }
.hero-demo-footer strong,.hero-demo-footer span { display:block; }
.hero-demo-footer span { margin-top:4px; font-size:.85rem; }
.quick-workflow { background:#ecf4fa; border-bottom:1px solid #ccddea; }
.quick-workflow .shell { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding-top:22px; padding-bottom:22px; color:#09284b; font-weight:800; }
.quick-workflow b { color:#176344; margin-right:10px; }
.cashbook-detail-copy { max-width:1000px; margin:0 auto 36px; }
@media(max-width:760px) { .cashbook-intro { padding:32px 0; } .cashbook-intro .hero-layout { grid-template-columns:1fr; gap:28px; } .cashbook-intro h1 { font-size:2.65rem; } .cashbook-intro .hero-actions { margin-top:24px; } .hero-demo-heading { padding:16px 18px; } .hero-demo-footer { padding:14px 18px; } .quick-workflow .shell { grid-template-columns:1fr; gap:12px; } }

/* The original four-step cycle, with readable text and the new PDF import. */
.cashbook-cycle { padding:56px 0; background:#dceae1; color:#09284b; scroll-margin-top:110px; }
.cycle-layout { display:grid; grid-template-columns:.8fr 1.2fr; align-items:center; gap:44px; }
.cycle-copy .section-kicker { color:#176344; }
.cycle-copy h2 { font-size:clamp(2rem,3vw,2.9rem); line-height:1.15; }
.cycle-copy h2 em { color:#176344; font-style:normal; }
.cycle-copy p:not(.section-kicker) { margin:20px 0 26px; font-size:1.1rem; line-height:1.6; max-width:360px; }
.cycle-diagram { position:relative; min-width:0; }
.cycle-arrows { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.cycle-steps { position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(3,minmax(120px,auto)); gap:14px; list-style:none; margin:0; padding:0; }
.cycle-steps li { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:14px 10px; border-radius:16px; color:#fff; background:#1653a0; text-align:center; box-shadow:0 5px 16px #09284b18; }
.cycle-download { grid-column:2; grid-row:1; }
.cycle-steps .cycle-import { grid-column:3; grid-row:2; background:#176344; }
.cycle-steps .cycle-allocate { grid-column:2; grid-row:3; background:#ffc02e; color:#09284b; }
.cycle-steps .cycle-export { grid-column:1; grid-row:2; background:#634098; }
.cycle-number { display:grid; place-items:center; width:27px; height:27px; margin-bottom:6px; background:#ffffff28; border:1px solid #ffffff80; border-radius:50%; font-size:.85rem; font-weight:800; }
.cycle-export .cycle-number { margin-bottom:4px; }
.cycle-steps .cycle-export-format { align-self:stretch; margin-top:9px; padding-top:8px; border-top:1px solid #ffffff66; }
.cycle-allocate .cycle-number { background:#09284b12; border-color:#09284b55; }
.cycle-steps h3 { font-size:1.05rem; line-height:1.25; color:inherit; }
.cycle-steps p { margin-top:5px; font-size:.95rem; line-height:1.35; }
.cycle-steps small { margin-top:8px; font-size:.77rem; line-height:1.35; }
.cycle-centre { position:absolute; left:32%; top:34%; width:36%; height:32%; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:12px 8px; background:#fff; border:3px solid #ffc02e; border-radius:16px; box-shadow:0 10px 25px #09284b30; }
.cycle-centre img { width:100%; max-width:210px; height:auto; }
.cycle-centre span { margin-top:7px; color:#09284b; font-size:1rem; font-weight:900; text-align:center; }
@media(max-width:1000px) { .cycle-layout { grid-template-columns:1fr; gap:28px; } .cycle-copy { text-align:center; } .cycle-copy p:not(.section-kicker) { max-width:580px; margin-inline:auto; } .cycle-diagram { width:min(640px,100%); margin-inline:auto; } }
@media(max-width:560px) { .cashbook-cycle { padding:36px 0; } .cycle-diagram { display:flex; flex-direction:column; gap:18px; } .cycle-centre { position:relative; inset:auto; order:-1; width:min(100%,300px); height:auto; margin:0 auto; padding:16px 20px; } .cycle-centre img { max-width:220px; } .cycle-steps { width:100%; grid-template-columns:minmax(0,1fr); grid-template-rows:none; gap:18px; } .cycle-steps li { min-height:110px; padding:18px; position:relative; } .cycle-steps .cycle-download, .cycle-steps .cycle-import, .cycle-steps .cycle-allocate, .cycle-steps .cycle-export { grid-column:1; grid-row:auto; } .cycle-steps li:not(:last-child)::after { content:'↓'; position:absolute; bottom:-24px; color:#5088b8; font-size:22px; font-weight:800; } .cycle-steps h3 { font-size:1.2rem; } .cycle-steps small { font-size:.9rem; } .cycle-arrows { display:none; } }

/* Lead the catch-up section with automatic PDF conversion and included usage. */
.pdf-import-highlight { padding:26px 28px; margin:24px 0; border:2px solid #ffe19a; border-radius:16px; background:#ffc02e; color:#09284b; }
.pdf-import-highlight > strong { display:block; font-family:"Manrope",sans-serif; font-size:clamp(1.3rem,2.2vw,1.75rem); line-height:1.35; }
.pdf-import-highlight > p { margin-top:12px; font-size:1.08rem; line-height:1.55; }
.pdf-value-points { display:flex; flex-wrap:wrap; gap:12px; margin-top:20px; }
.pdf-value-points span { flex:1 1 250px; padding:12px 16px; border-radius:9px; background:#09284b; color:#fff; font-size:1rem; font-weight:750; line-height:1.45; }
.pdf-value-points span:last-child { background:#176344; }
@media(max-width:560px) { .pdf-import-highlight { padding:22px 18px; } .pdf-value-points span { flex-basis:100%; } }

/* Conversion-first marketing, two clear routes and restrained colour. */
.hero-proof { color:#ffe19a; font-size:.95rem; font-weight:750; margin-top:14px; line-height:1.5; }
.hero-demo-footer a { display:inline-block; margin-top:12px; color:#fff; font-weight:700; text-underline-offset:4px; }
.export-choices { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin:32px 0; }
.export-choices article { padding:28px; border-radius:16px; background:#134b78; border:1px solid #74b0d6; color:#fff; }
.export-choices article:nth-child(2) { background:#176344; border-color:#7dccaa; }
.choice-label { color:#ffe19a; font-size:.85rem; font-weight:800; }
.export-choices h3 { margin:14px 0; font-size:1.65rem; line-height:1.25; }
.export-choices p,.direct-import-note { font-size:1.08rem; line-height:1.65; }
.export-choices a { display:inline-block; margin-top:20px; color:#fff; font-weight:750; text-underline-offset:5px; }
.direct-import-note { color:#e2edf7; }
a:focus-visible,button:focus-visible,summary:focus-visible { outline:3px solid #ffc02e; outline-offset:4px; }
@media(max-width:760px) { .export-choices { grid-template-columns:1fr; gap:16px; } .export-choices article { padding:24px; } .hero-demo { scroll-margin-top:160px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }

/* Secondary questions stay together in one accessible expandable group. */
.faq-list > .faq-more { background:#e7f2fa; border:2px solid #75a6d2; box-shadow:none; }
.faq-list > .faq-more > summary { color:#09284b; padding:24px; line-height:1.45; }
.faq-more-content { display:grid; gap:14px; padding:0 18px 18px; }
.faq-more[open] > .faq-more-content { animation:faq-reveal .2s ease-out; }
@keyframes faq-reveal { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:560px) { .faq-list > .faq-more > summary { padding:20px 16px; } .faq-more-content { padding:0 10px 12px; } }

/* Clear closing actions on the homepage. */
.faq-list > .faq-more > summary { font-size:clamp(1.2rem, 2vw, 1.45rem); font-weight:900; color:#09284b; }
.home-bottom-cta .light-kicker { color:#a8f5e8; font-size:clamp(1.05rem, 1.6vw, 1.3rem); font-weight:900; letter-spacing:.015em; line-height:1.4; }
.home-bottom-cta .cta-actions { padding:24px; background:#123b5a; border:2px solid #68c8d8; border-radius:18px; box-shadow:0 12px 25px rgba(0,0,0,.18); gap:12px; }
.home-bottom-cta .cta-actions .button { width:100%; justify-content:center; text-align:center; }
.home-bottom-cta .cta-actions > a:not(.button) { color:#fff; font-weight:800; font-size:1rem; text-underline-offset:4px; }
.home-bottom-cta .cta-actions > a[href^="tel:"] { font-size:clamp(1.25rem, 2vw, 1.5rem); }
.home-bottom-cta .cta-actions > a:not(.button):hover { text-decoration:underline; }
.home-contact-strip { padding:38px 20px; }
.home-contact-strip .lead-contact-card { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:24px; max-width:850px; padding:24px 30px; background:#fff; border:2px solid #91cbb9; border-radius:18px; box-shadow:0 12px 26px rgba(9,40,75,.14); }
.home-contact-strip .lead-contact-card strong { font-size:clamp(1.3rem, 2vw, 1.6rem); line-height:1.3; }
@media(max-width:560px) { .home-bottom-cta .cta-actions { padding:20px; width:100%; } .home-bottom-cta .cta-actions .button { white-space:normal; } .home-contact-strip .lead-contact-card { width:100%; padding:22px 18px; text-align:center; } }

/* Compact photographs paired with the existing audience colours. */
.audience-grid { gap:22px; background:transparent; border:0; border-radius:0; box-shadow:none; overflow:visible; }
.audience-grid article { padding:0; border-radius:14px; overflow:hidden; box-shadow:0 8px 22px #09284b18; }
.audience-photo { display:block; width:100%; height:180px; object-fit:cover; object-position:center; }
.audience-card-copy { padding:24px; }
.audience-grid h3 { font-size:1.55rem; margin-bottom:12px; }
.audience-grid p { font-size:1.02rem; line-height:1.6; }
@media(max-width:760px) { .audience-grid { gap:22px; } .audience-photo { height:auto; aspect-ratio:3/2; max-height:210px; } }

/* Give the integration introduction and closing guidance their own space. */
.integrations-section .centered-heading { padding:32px; background:#cbdff5; border:2px solid #91b5dc; border-radius:18px; box-shadow:0 5px 16px #09284b0c; }
.integrations-section .centered-heading .section-kicker { font-size:clamp(1.25rem,2.2vw,1.65rem); line-height:1.4; letter-spacing:.02em; text-transform:none; color:#164b7d; font-weight:800; }
.integration-help-box { max-width:960px; margin:28px auto 0; padding:24px 28px; background:#d5eadf; border:2px solid #99c6ad; border-radius:16px; }
.integration-help-box .integration-note { margin-top:0; }
.integration-help-box .integration-contact { margin-top:12px; }
@media(max-width:560px) { .integrations-section .centered-heading { padding:24px 18px; } .integration-help-box { padding:22px 18px; } }

/* High-contrast controls for the homepage demonstration only. */
.smart-video-controls { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:10px 12px; background:#ffc02e; color:#09284b; border-top:2px solid #e4a900; }
.smart-video-controls button { min-height:44px; padding:8px 12px; border:1px solid #09284b; border-radius:7px; background:#09284b; color:#fff; font:inherit; font-size:.9rem; font-weight:700; cursor:pointer; }
.smart-video-controls button:focus-visible,.smart-video-controls input:focus-visible { outline:3px solid #176344; outline-offset:3px; }
.smart-video-controls output { font-size:.85rem; font-weight:700; font-variant-numeric:tabular-nums; }
.smart-video-controls input { flex:1 1 90px; min-width:60px; height:44px; accent-color:#09284b; cursor:pointer; }
.smart-video-controls .video-mute { background:transparent; color:#09284b; }
.hero-demo .launch-player:fullscreen { display:flex; flex-direction:column; justify-content:center; background:#000; }
.hero-demo .launch-player:fullscreen video { flex:1; min-height:0; object-fit:contain; }

.hero-demo-footer .hero-video-trial { display:flex; justify-content:center; margin:0; color:#09284b; text-decoration:none; min-height:48px; }
.hero-demo-footer .hero-trial-terms { margin:10px 0 18px; color:#fff; font-size:.9rem; line-height:1.5; font-weight:700; }

/* Keep the complete product promise readable beside the demonstration. */
.cashbook-intro h1 { font-size:clamp(2.2rem,3.5vw,3.5rem); line-height:1.15; }
@media(max-width:760px) { .cashbook-intro h1 { font-size:clamp(1.85rem,7.5vw,2.8rem); } }

/* Play the homepage demonstration in a clear, keyboard-accessible pop-up. */
.demo-popup { width:min(960px,calc(100vw - 24px)); max-height:92dvh; margin:auto; padding:0; overflow:auto; color:#09284b; background:#f0f6fc; border:2px solid #ffc02e; border-radius:16px; box-shadow:0 20px 80px #0006; }
.demo-popup::backdrop { background:#06192bdf; }
.demo-popup-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 20px; }
.demo-popup-heading h2 { font-size:clamp(1.1rem,3vw,1.5rem); }
.demo-popup-heading button { flex-shrink:0; min-height:44px; padding:8px 14px; cursor:pointer; }
.demo-popup .launch-player { margin:0; border:0; border-radius:0; box-shadow:none; }
.demo-popup video { display:block; width:100%; max-height:65dvh; aspect-ratio:16/9; background:#000; object-fit:contain; }
.demo-popup-status:not(:empty) { padding:12px 20px; font-weight:700; }
.demo-popup .launch-player:fullscreen { display:flex; flex-direction:column; justify-content:center; background:#000; }
.demo-popup .launch-player:fullscreen video { max-height:none; flex:1; min-height:0; }

/* October 2026 imagery: keep the people, product and actions visible together. */
.cashbook-intro .hero-layout { grid-template-columns:1fr 1.1fr; gap:44px; }
.hero-founders-photo { margin:0; min-width:0; overflow:hidden; border:2px solid #72a9c8; border-radius:20px; background:#123b5a; box-shadow:0 22px 45px #0003; }
.hero-founders-photo > img { display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; }
.hero-founders-photo figcaption { display:grid; gap:7px; padding:20px 24px; background:#123b5a; color:#fff; }
.hero-founders-photo figcaption > span { color:#b4ebee; font-size:.95rem; }
.hero-founders-photo figcaption strong { font-family:"Manrope",sans-serif; font-size:1.16rem; }
.hero-founders-photo figcaption a { justify-self:start; margin-top:6px; color:#ffe19a; font-weight:800; text-underline-offset:4px; }
.product-demo-section { padding:64px 0; background:#e4f0fb; color:#09284b; }
.product-demo-layout { display:grid; grid-template-columns:.85fr 1.15fr; gap:44px; align-items:center; }
.product-demo-intro { min-width:0; }
.product-demo-intro > img { display:block; width:100%; max-width:400px; height:auto; aspect-ratio:3/2; object-fit:cover; border-radius:14px; margin-bottom:24px; }
.product-demo-intro h2 { font-size:clamp(1.8rem,3vw,2.7rem); line-height:1.18; }
.product-demo-intro > p:not(.section-kicker) { margin:18px 0; font-size:1.06rem; line-height:1.65; }
.product-demo-intro .dark-link { color:#164b7d; }
.catchup-visual-layout { display:grid; grid-template-columns:1fr .95fr; gap:44px; align-items:center; margin-bottom:32px; }
.catchup-intro h2 { font-size:clamp(2rem,3.7vw,3.4rem); }
.catchup-intro > p:last-child { margin-top:22px; color:#e0edf6; font-size:1.12rem; line-height:1.7; }
.context-photo { margin:0; overflow:hidden; border:1px solid #72a9c8; border-radius:16px; background:#123b5a; }
.context-photo img { display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; }
.context-photo figcaption { padding:15px 20px; font-size:1rem; font-weight:700; color:#fff; }
.audience-photo { height:auto; aspect-ratio:3/2; max-height:none; }
.feature-context-photo { display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; border-radius:12px; margin-bottom:26px; }
.tutorial-learning-photo img { height:auto; aspect-ratio:3/2; object-fit:cover; }
.home-contact-strip .support-photo-layout { display:grid; grid-template-columns:1fr 1fr; gap:0; max-width:1080px; overflow:hidden; padding:0; background:#123b5a; border:2px solid #91cbb9; border-radius:20px; box-shadow:0 12px 26px #09284b20; }
.support-photo-layout > img { display:block; width:100%; height:100%; min-height:310px; object-fit:cover; }
.support-photo-copy { padding:clamp(24px,4vw,42px); align-self:center; color:#fff; }
.support-photo-copy .section-kicker { color:#b4ebee; }
.support-photo-copy h2 { font-size:clamp(1.8rem,3vw,2.5rem); line-height:1.2; }
.support-photo-copy > p:not(.section-kicker) { margin:18px 0 24px; font-size:1.05rem; line-height:1.65; }
.support-photo-copy .button { width:100%; white-space:normal; text-align:center; cursor:pointer; }
.support-photo-copy > a { display:block; margin-top:18px; color:#fff; font-size:1.2rem; font-weight:800; text-underline-offset:4px; }
@media(max-width:1000px) {
  .cashbook-intro .hero-layout { grid-template-columns:1fr 1fr; gap:28px; }
  .product-demo-layout,.catchup-visual-layout { gap:28px; }
  .tutorial-hero-layout { gap:40px; }
}
@media(max-width:760px) {
  .cashbook-intro .hero-layout,.product-demo-layout,.catchup-visual-layout,.home-contact-strip .support-photo-layout { grid-template-columns:minmax(0,1fr); }
  .hero-founders-photo { margin-top:8px; }
  .hero-founders-photo figcaption { padding:18px 20px; }
  .product-demo-section { padding:42px 0; }
  .product-demo-intro > img { max-width:none; }
  .product-demo-intro h2 br { display:none; }
  .catchup-visual-layout { gap:24px; }
  .support-photo-layout > img { min-height:0; height:auto; aspect-ratio:3/2; }
  .support-photo-copy { padding:26px 22px; }
}

/* A readable nine-step journey, with all panels available without JavaScript. */
.hero-actions .hero-screens-link { flex-basis:100%; color:#ffe19a; font-size:1rem; font-weight:800; text-underline-offset:4px; padding-top:5px; }
.real-screens-section { padding:72px 0; background:#bfd5ed; color:#09284b; scroll-margin-top:95px; }
.screenwalk-heading { display:grid; grid-template-columns:1fr .9fr; align-items:end; gap:48px; margin-bottom:30px; }
.screenwalk-heading h2 { font-size:clamp(2rem,4vw,3.5rem); line-height:1.16; }
.screenwalk-heading > p { font-size:1.12rem; line-height:1.7; color:#264c6b; }
.screenwalk-overview { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; margin:28px 0; }
.screenwalk-overview > a { display:grid; gap:7px; position:relative; padding:24px; border-radius:14px; background:#1653a0; color:#fff; border:2px solid #8cb7e8; text-decoration:none; }
.screenwalk-overview > a:nth-child(2) { background:#176344; border-color:#80bd9e; }
.screenwalk-overview > a:nth-child(3) { background:#123b5a; border-color:#78b5d4; }
.screenwalk-overview > a:not(:last-child)::after { content:'→'; position:absolute; top:calc(50% - 16px); right:-23px; width:24px; text-align:center; font-size:1.6rem; color:#164b7d; font-weight:800; }
.screenwalk-overview small { text-transform:uppercase; letter-spacing:.08em; color:#ffe19a; font-size:.82rem; font-weight:800; }
.screenwalk-overview strong { font-family:Manrope,sans-serif; font-size:1.45rem; }
.screenwalk-overview span { font-size:1rem; line-height:1.5; }
.screenwalk-benefit { margin-bottom:28px; padding:22px 26px; border:1px solid #8cb8b2; border-left:6px solid #176344; border-radius:12px; background:#e9f5ef; }
.screenwalk-benefit strong { font-size:1.2rem; }
.screenwalk-benefit p { margin-top:10px; line-height:1.65; font-size:1.04rem; }
.screenwalk { display:grid; grid-template-columns:245px minmax(0,1fr); gap:22px; align-items:start; scroll-margin-top:105px; }
.screenwalk-nav { display:grid; gap:9px; position:sticky; top:105px; }
.screenwalk-tab { --step-warm:#fff2e1; display:flex; align-items:center; gap:13px; min-width:0; padding:15px 16px; border:1px solid #c79074; border-radius:11px; background:linear-gradient(115deg,#fff6ec,var(--step-warm)); color:#123b5a; text-decoration:none; }
.screenwalk-tab:hover { background:#efc2a5; border-color:#994426; }
.screenwalk-tab[aria-selected="true"] { background:linear-gradient(115deg,#a94d2d,#85391f); color:#fff; border-color:#71301b; box-shadow:0 4px 12px #78381730; }
.screenwalk-number { display:flex; align-items:center; justify-content:center; flex-shrink:0; width:34px; height:34px; border-radius:50%; background:#ffdfbd; color:#123b5a; font-size:.9rem; font-weight:800; }
.screenwalk-tab[aria-selected="true"] .screenwalk-number { background:#ffc02e; }
.screenwalk-tab strong { display:block; font-size:.98rem; line-height:1.35; }
.screenwalk-tab small { display:block; margin-top:3px; font-size:.8rem; color:inherit; }
.screenwalk-view { min-width:0; background:#f5f9fd; border:1px solid #94b4d1; border-radius:16px; overflow:hidden; box-shadow:0 10px 28px #09284b14; }
.screenwalk-panel { scroll-margin-top:100px; }
.screenwalk-panel + .screenwalk-panel { border-top:2px solid #94b4d1; }
[data-walkthrough-ready] .screenwalk-panel + .screenwalk-panel { border-top:0; }
.screenwalk-panel[hidden] { display:none!important; }
.screenwalk-panel-copy { padding:28px 28px 22px; background:linear-gradient(115deg,#fff0df,#f0c5ad); border-bottom:1px solid #c79074; }
.screenwalk-stage { display:inline-block; padding:5px 10px; border-radius:6px; background:#1653a0; color:#fff; font-size:.8rem; font-weight:800; }
.screenwalk-stage.stage-during { background:#176344; }
.screenwalk-stage.stage-after { background:#123b5a; }
.screenwalk-panel h3 { font-family:Manrope,sans-serif; font-size:clamp(1.4rem,2.5vw,1.9rem); line-height:1.25; margin:14px 0; }
.screenwalk-panel-copy p { font-size:1.03rem; line-height:1.65; color:#264c6b; }
.screenwalk-panel figure { margin:0; }
.screenwalk-image { position:relative; display:block; width:100%; aspect-ratio:16/10; background:#c8dcec; border-block:1px solid #a5bfd5; }
.screenwalk-image img { display:block; width:100%; height:100%; padding:15px; object-fit:contain; }
.screenwalk-enlarge { position:absolute; bottom:12px; right:12px; padding:9px 13px; border:1px solid #ffffff90; border-radius:7px; background:#09284bf2; color:#fff; font-size:.85rem; font-weight:800; }
.screenwalk-panel figcaption { padding:15px 28px; font-size:.9rem; color:#264c6b; }
.screenwalk-controls { display:none; align-items:center; justify-content:space-between; gap:10px; padding:18px 22px; background:#123b5a; color:#fff; }
[data-walkthrough-ready] .screenwalk-controls { display:flex; }
.screenwalk-controls button { padding:11px 14px; min-height:44px; border:1px solid #b3d1e7; border-radius:8px; background:#f0f6fc; color:#09284b; font:inherit; font-size:.95rem; font-weight:800; cursor:pointer; }
.screenwalk-controls button:disabled { opacity:.45; cursor:default; }
.screenwalk-controls [role="status"] { font-size:.9rem; text-align:center; font-weight:700; }
.screenwalk-route-choices { display:grid; grid-template-columns:1fr 1fr; gap:22px; margin:30px 0; }
.screenwalk-route-choices article { padding:28px; border-radius:14px; color:#fff; background:#164b7d; }
.screenwalk-route-choices article:nth-child(2) { background:#176344; }
.screenwalk-route-choices .section-kicker { color:#ffe19a; font-size:.85rem; }
.screenwalk-route-choices h3 { font-size:1.38rem; line-height:1.4; margin:13px 0; }
.screenwalk-route-choices p { font-size:1.02rem; line-height:1.65; }
.screenwalk-result { margin:32px 0; background:#123b5a; border:2px solid #729fbe; border-radius:16px; overflow:hidden; color:#fff; }
.screenwalk-result figcaption { padding:28px; }
.screenwalk-result .section-kicker { color:#b4ebee; }
.screenwalk-result h3 { font-size:clamp(1.6rem,2.8vw,2.3rem); line-height:1.25; margin:12px 0; }
.screenwalk-result p:not(.section-kicker) { max-width:790px; font-size:1.04rem; line-height:1.65; }
.screenwalk-result > a { position:relative; display:block; }
.screenwalk-result img { display:block; width:100%; height:auto; }
.screenwalk-catchup { display:grid; grid-template-columns:1fr auto; align-items:center; gap:30px; padding:30px; border:1px solid #85b3a7; border-radius:15px; background:#d3eadf; }
.screenwalk-catchup h3 { font-size:1.65rem; line-height:1.3; margin-bottom:16px; }
.screenwalk-catchup p { font-size:1.04rem; line-height:1.65; }
.screenwalk-catchup .screenwalk-package-note { margin-top:15px; font-size:.94rem; color:#294c43; }
.screenwalk-tutorial-link { padding:30px 0; background:#d3eadf; color:#09284b; }
.screenwalk-tutorial-link > div { display:flex; align-items:center; justify-content:space-between; gap:28px; }
.screenwalk-tutorial-link strong { font-size:1.3rem; }
.screenwalk-tutorial-link p { max-width:700px; margin-top:10px; font-size:1.02rem; line-height:1.6; }
.screen-dialog { margin:auto; }
@media(max-width:1000px) {
 .screenwalk-heading { gap:28px; }
 .screenwalk { grid-template-columns:205px minmax(0,1fr); gap:16px; }
 .screenwalk-tab { padding:12px; gap:10px; }
 .screenwalk-panel-copy { padding:22px; }
 .screenwalk-catchup { grid-template-columns:1fr; gap:24px; }
 .screenwalk-catchup .button { justify-self:start; }
}
@media(max-width:760px) {
 .real-screens-section { padding:45px 0; }
 .screenwalk-heading,.screenwalk,.screenwalk-route-choices { grid-template-columns:minmax(0,1fr); }
 .screenwalk-heading { gap:20px; }
 .screenwalk-overview { grid-template-columns:1fr; gap:22px; }
 .screenwalk-overview > a { padding:18px 22px; }
 .screenwalk-overview > a:not(:last-child)::after { content:'↓'; top:auto; right:auto; bottom:-24px; left:calc(50% - 12px); }
 .screenwalk-nav { position:static; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
 .screenwalk-nav .screenwalk-tab:last-child { grid-column:1/-1; }
 .screenwalk-tab strong { font-size:.92rem; }
 .screenwalk-panel-copy { padding:22px 18px; }
 .screenwalk-image { aspect-ratio:4/3; }
 .screenwalk-image img { padding:8px; }
 .screenwalk-enlarge { bottom:8px; right:8px; font-size:.76rem; padding:7px 10px; }
 .screenwalk-panel figcaption { padding:14px 18px; }
 .screenwalk-controls { padding:14px 12px; gap:8px; }
 .screenwalk-controls button { padding:9px 10px; font-size:.85rem; }
 .screenwalk-controls [role="status"] { font-size:.8rem; }
 .screenwalk-route-choices article,.screenwalk-result figcaption,.screenwalk-catchup { padding:24px 20px; }
 .screenwalk-tutorial-link > div { flex-direction:column; align-items:flex-start; gap:22px; }
}
.screen-dialog .screen-original-link { display:inline-block; margin-top:16px; padding:10px 14px; min-height:44px; border:1px solid #8bbbd6; border-radius:8px; color:#ffe19a; font-weight:800; text-underline-offset:4px; }

/* One warm colour family makes the nine steps and their heading easier to scan. */
.screenwalk-tab:nth-child(2) { --step-warm:#fce7d2; }
.screenwalk-tab:nth-child(3) { --step-warm:#f9dbc1; }
.screenwalk-tab:nth-child(4) { --step-warm:#f5cfb1; }
.screenwalk-tab:nth-child(5) { --step-warm:#efc2a5; }
.screenwalk-tab:nth-child(6) { --step-warm:#eab59b; }
.screenwalk-tab:nth-child(7) { --step-warm:#e5a78e; }
.screenwalk-tab:focus-visible { outline:3px solid #09284b; outline-offset:3px; }
.screenwalk-panel-copy .screenwalk-stage { background:#85391f; }
.screenwalk-panel-copy p { color:#283f53; }
.screenwalk-view,.screenwalk-nav,.screenwalk-tab > span:last-child { min-width:0; }
.screen-dialog button,.lead-close { min-width:44px; min-height:44px; }
.lead-dialog { margin:auto; }
@media(max-width:760px) {
 .screenwalk-tab { min-height:68px; }
 .screenwalk-tab strong,.screenwalk-panel h3 { overflow-wrap:anywhere; }
 .hero-actions { align-items:stretch; }
 .hero-actions .button { white-space:normal; text-align:center; }
 .hero-actions .hero-screens-link { flex-basis:auto; }
 .footer-grid > div,.cta-actions,.hero-copy,.pdf-copy,.about-copy { min-width:0; }
 .cta-actions > a,.footer-grid a { overflow-wrap:anywhere; }
 .steps-grid a { white-space:normal; }
 .lead-dialog { max-height:90dvh; }
}

/* Extra steps keep the export and reconciliation decisions explicit. */
.screenwalk-tab:nth-child(8) { --step-warm:#e29b80; }
.screenwalk-tab:nth-child(9) { --step-warm:#dc8e74; }
.reconciliation-example { margin:22px; padding:22px; border:1px solid #81ad95; border-radius:12px; background:#e3f1e8; color:#153d2b; }
.reconciliation-example strong { font-size:1.12rem; }
.reconciliation-example p { margin:12px 0; font-size:1.04rem; line-height:1.65; }
.reconciliation-example span { display:block; font-weight:800; line-height:1.6; }
.screenwalk-panel[data-step-kind="reconcile"] .screenwalk-image { aspect-ratio:auto; }
.screenwalk-panel[data-step-kind="reconcile"] .screenwalk-image img { height:auto; padding:22px 12px 46px; }
.reconciliation-context { margin:22px; border:1px solid #94b4d1; border-radius:10px; background:#e4eff8; overflow:hidden; }
.reconciliation-context summary { padding:16px; font-size:1rem; font-weight:800; cursor:pointer; min-height:48px; }
.reconciliation-context > p { padding:0 16px 18px; font-size:.98rem; line-height:1.65; }
.reconciliation-context img { display:block; width:100%; height:auto; }
.export-save-guide { padding:28px; background:#edf4fa; }
.export-save-guide ol { display:grid; gap:16px; padding-left:24px; margin:20px 0 0; }
.export-save-guide li { padding:18px; border:1px solid #a9bfd3; border-radius:10px; background:#fff4e8; }
.export-save-guide strong { display:block; margin-bottom:8px; font-size:1.08rem; }
.export-save-guide span { display:block; font-size:1rem; line-height:1.65; }
.export-save-guide code { font-size:.94em; overflow-wrap:anywhere; }
@media(min-width:1001px) { .screenwalk-nav { max-height:calc(100dvh - 125px); overflow-y:auto; padding:4px; margin:-4px; scrollbar-width:thin; } }
@media(min-width:761px) and (max-width:1000px) { .screenwalk-nav { top:160px; max-height:calc(100dvh - 180px); overflow-y:auto; padding:4px; margin:-4px; scrollbar-width:thin; } }
@media(max-width:1000px) { .screenwalk,.screenwalk-panel { scroll-margin-top:160px; } }
@media(max-width:760px) { .reconciliation-example,.reconciliation-context { margin:18px; } .reconciliation-example { padding:18px; } .export-save-guide { padding:22px 18px; } .export-save-guide ol { padding-left:20px; } .export-save-guide li { padding:16px 12px; } }

/* Phase badges tie each group of three steps to its matching screen heading. */
.screenwalk-tab[data-phase="before"] { --step-warm:#fce7d2; --phase-colour:#174e86; }
.screenwalk-tab[data-phase="during"] { --step-warm:#f5cfb1; --phase-colour:#176344; }
.screenwalk-tab[data-phase="after"] { --step-warm:#e5a78e; --phase-colour:#85391f; }
.screenwalk-tab .screenwalk-phase { display:inline-flex; align-items:center; gap:5px; margin-top:7px; padding:4px 8px; background:var(--phase-colour); border:1px solid transparent; border-radius:5px; color:#fff; font-size:.73rem; font-weight:900; letter-spacing:.055em; line-height:1.35; }
.screenwalk-phase > span { font-size:.95rem; line-height:1; }
.screenwalk-tab[data-phase][aria-selected="true"] { background:var(--phase-colour); border-color:var(--phase-colour); }
.screenwalk-tab[aria-selected="true"] .screenwalk-phase { color:var(--phase-colour); background:#fff; border-color:#fff; }
.screenwalk-panel-copy .screenwalk-stage { display:inline-flex; flex-wrap:wrap; align-items:center; gap:5px; padding:7px 11px; font-weight:900; letter-spacing:.04em; }
.screenwalk-panel-copy .screenwalk-stage.stage-before { background:#174e86; }
.screenwalk-panel-copy .screenwalk-stage.stage-during { background:#176344; }
.screenwalk-panel-copy .screenwalk-stage.stage-after { background:#85391f; }
.screenwalk-stage > [aria-hidden] { font-size:1rem; line-height:1; }
.screenwalk-position { font-weight:700; letter-spacing:0; }

/* Recognisable original package logos, with consistent clear space. */
.integration-card:not(.integration-other) { grid-template-columns:156px minmax(0,1fr) 30px; gap:18px; }
.integration-logo { display:flex; align-items:center; justify-content:center; width:156px; height:96px; padding:13px; background:#09284b; border:1px solid #94bed780; border-radius:12px; }
.integration-logo img { display:block; width:auto; height:auto; max-width:100%; max-height:70px; object-fit:contain; }
.integration-card > a { min-width:44px; min-height:44px; }
.integration-card.integration-other { grid-template-columns:55px minmax(0,1fr) 44px; }
.integration-card:not(.integration-other) { grid-template-columns:156px minmax(0,1fr) 44px; }
@media(min-width:761px) and (max-width:1100px) {
 .integration-card:not(.integration-other) { grid-template-columns:120px minmax(0,1fr) 44px; gap:12px; padding:22px; }
 .integration-logo { width:120px; height:86px; padding:10px; }
 .integration-logo img { max-height:64px; }
}
@media(max-width:760px) {
 .integration-card:not(.integration-other) { grid-template-columns:120px minmax(0,1fr) 44px; gap:12px; padding:20px; }
 .integration-logo { width:120px; height:84px; padding:10px; }
 .integration-logo img { max-height:62px; }
 .integration-card h3 { font-size:1.18rem; }
}
@media(max-width:420px) {
 .integration-card:not(.integration-other) { grid-template-columns:96px minmax(0,1fr) 44px; gap:10px; padding:18px 14px; }
 .integration-logo { width:96px; height:74px; padding:8px; }
 .integration-logo img { max-height:56px; }
 .integration-card h3 { font-size:1.08rem; }
 .integration-card p { font-size:.94rem; }
}