.contracts-page { --ca-ink:#172b3a; --ca-muted:#586b78; --ca-primary:#146d70; --ca-primary-dark:#0d4d53; --ca-accent:#8bd3bd; --ca-pale:#edf7f5; --ca-line:#dce7e7; --ca-white:#fff; --ca-surface:#f7faf9; --ca-radius:18px; --ca-shadow:0 16px 44px rgba(18,54,65,.09); }
.contracts-page *, .contracts-page *::before, .contracts-page *::after { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:120px; }
.contracts-page { color:var(--ca-ink); background:var(--ca-white); font-family:"Noto Sans", "Segoe UI", Arial, sans-serif; font-size:16px; line-height:1.65; letter-spacing:normal; -webkit-font-smoothing:antialiased; }
.contracts-page :focus-visible { outline:3px solid var(--ca-primary); outline-offset:3px; }

/* Site template overrides: the template colours h1-h3 and gives bare ul/ol items padding, bullets and counters */
.contracts-page h1, .contracts-page h2, .contracts-page h3 { color:inherit; font-family:inherit; font-weight:700; }
.contracts-page h3 { letter-spacing:normal; }
.contracts-page ul, .contracts-page ol { margin:0; padding:0; list-style:none; }
.contracts-page ul li, .contracts-page ol li { margin:0; padding:0; }
.contracts-page ul li::before, .contracts-page ol li::before { content:none; position:static; width:auto; height:auto; border-radius:0; background:none; }

/* Shared bits */
.contracts-page .ca-wrap { width:min(1140px, calc(100% - 40px)); margin:0 auto; }
.contracts-page .ca-eyebrow { display:inline-flex; align-items:center; gap:9px; color:var(--ca-primary); font-size:.78rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }
.contracts-page .ca-eyebrow::before { content:""; width:25px; height:2px; background:var(--ca-accent); }
.contracts-page .ca-btn { display:inline-flex; justify-content:center; align-items:center; min-height:48px; padding:12px 20px; border:1px solid transparent; border-radius:999px; text-decoration:none; font-weight:750; transition:transform .18s ease, background .18s ease; }
.contracts-page .ca-btn:hover { transform:translateY(-2px); }
.contracts-page .ca-btn-primary, .contracts-page .ca-btn-primary:hover { color:#fff; background:var(--ca-primary); }
.contracts-page .ca-btn-primary:hover { background:var(--ca-primary-dark); }
.contracts-page .ca-btn-secondary, .contracts-page .ca-btn-secondary:hover { color:var(--ca-primary-dark); border-color:#b9d3cf; background:rgba(255,255,255,.78); }
.contracts-page .ca-btn-light, .contracts-page .ca-btn-light:hover { color:var(--ca-primary-dark); background:#fff; }

/* Hero, with the site-wide buy heading (extbc_buy_head) as its first row */
.contracts-page .ca-hero { overflow:hidden; position:relative; padding:40px 0 78px; background:radial-gradient(circle at 88% 20%, rgba(139,211,189,.25), transparent 28%), linear-gradient(135deg, #f4faf8 0%, #fff 58%, #f0f8f7 100%); border-bottom:1px solid var(--ca-line); }
.contracts-page .ca-buy { margin-bottom:56px; padding-bottom:22px; border-bottom:1px solid var(--ca-line); }
.contracts-page .ca-buy .buy-head__title { font-size:clamp(1.2rem, 2vw, 1.5rem); font-weight:800; line-height:1.3; letter-spacing:-.02em; }
.contracts-page .ca-buy .buy-head__note { color:var(--ca-muted); }
.contracts-page .ca-hero-grid { display:grid; grid-template-columns:minmax(0, 1.15fr) minmax(310px, .85fr); gap:54px; align-items:center; }
.contracts-page .ca-hero .ca-display { max-width:750px; margin:20px 0; font-size:clamp(2.35rem, 5vw, 4.35rem); line-height:1.06; letter-spacing:-.045em; }
.contracts-page .ca-hero .ca-display span { color:var(--ca-primary); }
.contracts-page .ca-lead { max-width:690px; margin:0; color:var(--ca-muted); font-size:clamp(1.05rem, 1.7vw, 1.23rem); }
.contracts-page .ca-actions { display:flex; flex-wrap:wrap; align-items:center; gap:13px; margin-top:30px; }
.contracts-page .ca-hero-note { margin-top:16px; color:var(--ca-muted); font-size:.87rem; }

/* Illustrative overview card */
.contracts-page .ca-visual { position:relative; padding:25px; border:1px solid #d5e7e3; border-radius:26px; background:rgba(255,255,255,.78); box-shadow:var(--ca-shadow); }
.contracts-page .ca-visual-top { display:flex; justify-content:space-between; align-items:center; gap:12px; padding-bottom:17px; border-bottom:1px solid var(--ca-line); }
.contracts-page .ca-visual-title { font-size:.92rem; font-weight:800; }
.contracts-page .ca-status { display:inline-flex; align-items:center; gap:6px; padding:5px 9px; border-radius:999px; color:#17634f; background:#e1f5ec; font-size:.72rem; font-weight:800; }
.contracts-page .ca-status::before { content:""; width:6px; height:6px; border-radius:50%; background:#34a77c; }
.contracts-page .ca-mini-stats { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:16px 0; }
.contracts-page .ca-mini-stat { padding:15px; border:1px solid var(--ca-line); border-radius:13px; background:#fff; }
.contracts-page .ca-mini-stat strong { display:block; color:var(--ca-primary-dark); font-size:1.5rem; line-height:1.2; }
.contracts-page .ca-mini-stat span { display:block; margin-top:5px; color:var(--ca-muted); font-size:.78rem; }
.contracts-page .ca-record { display:grid; grid-template-columns:35px 1fr auto; align-items:center; gap:11px; padding:13px 0; border-bottom:1px solid #edf2f1; }
.contracts-page .ca-record:last-child { border-bottom:0; }
.contracts-page .ca-record-icon { display:grid; place-items:center; width:35px; height:35px; border-radius:10px; color:var(--ca-primary); background:var(--ca-pale); font-weight:900; }
.contracts-page .ca-record strong { display:block; font-size:.84rem; }
.contracts-page .ca-record small { display:block; color:var(--ca-muted); font-size:.74rem; }
.contracts-page .ca-record em { color:var(--ca-primary); font-size:.73rem; font-style:normal; font-weight:800; }

/* Sections */
.contracts-page .ca-section { padding:78px 0; }
.contracts-page .ca-section-soft { background:var(--ca-surface); }
.contracts-page .ca-section-head { max-width:760px; margin-bottom:34px; }
.contracts-page .ca-section h2 { margin:12px 0; font-size:clamp(1.85rem, 3.6vw, 2.75rem); line-height:1.14; letter-spacing:-.035em; }
.contracts-page .ca-section-head p { margin:0; color:var(--ca-muted); font-size:1.04rem; }

/* Screenshots: each links to the full-size image */
.contracts-page .ca-shot { margin:0; }
.contracts-page .ca-shot a { display:block; overflow:hidden; border:1px solid var(--ca-line); border-radius:14px; background:#fff; box-shadow:var(--ca-shadow); transition:transform .18s ease, box-shadow .18s ease; }
.contracts-page .ca-shot a:hover { transform:translateY(-2px); box-shadow:0 20px 50px rgba(18,54,65,.14); }
.contracts-page .ca-shot img { display:block; width:100%; max-width:none; height:auto; }
.contracts-page .ca-shot figcaption { margin-top:12px; color:var(--ca-muted); font-size:.9rem; }
.contracts-page .ca-shot figcaption strong { color:var(--ca-ink); }
.contracts-page .ca-shot-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:24px; margin-top:32px; }

/* Customers and vendors */
.contracts-page .ca-party-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.contracts-page .ca-party { padding:27px; border:1px solid var(--ca-line); border-radius:var(--ca-radius); background:#fff; }
.contracts-page .ca-party h3 { margin:0 0 9px; font-size:1.2rem; }
.contracts-page .ca-party p { margin:0; color:var(--ca-muted); }
.contracts-page .ca-party-tag { display:inline-flex; margin-bottom:14px; padding:6px 10px; border-radius:8px; color:var(--ca-primary-dark); background:var(--ca-pale); font-size:.76rem; font-weight:800; }
.contracts-page .ca-checks { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px 20px; margin:22px 0 0; padding:0; list-style:none; }
.contracts-page .ca-checks li { position:relative; padding-left:25px; color:var(--ca-muted); }
.contracts-page .ca-checks li::before { content:"✓"; position:absolute; left:0; top:1px; color:var(--ca-primary); font-weight:900; }

/* Capabilities */
.contracts-page .ca-feature-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:17px; }
.contracts-page .ca-feature { min-height:205px; padding:24px; border:1px solid var(--ca-line); border-radius:var(--ca-radius); background:#fff; }
.contracts-page .ca-feature-icon { display:grid; place-items:center; width:43px; height:43px; margin-bottom:17px; border-radius:12px; color:var(--ca-primary); background:var(--ca-pale); font-size:1.13rem; font-weight:900; }
.contracts-page .ca-feature h3 { margin:0 0 8px; font-size:1.08rem; line-height:1.3; }
.contracts-page .ca-feature p { margin:0; color:var(--ca-muted); font-size:.94rem; }

/* Lifecycle */
.contracts-page .ca-lifecycle { display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:11px; counter-reset:ca-step; }
.contracts-page .ca-step { position:relative; padding:19px 16px; border:1px solid var(--ca-line); border-radius:15px; background:#fff; counter-increment:ca-step; }
.contracts-page .ca-step::before { content:"0" counter(ca-step); display:inline-block; margin-bottom:13px; color:var(--ca-primary); font-size:.78rem; font-weight:900; letter-spacing:.08em; }
.contracts-page .ca-step h3 { margin:0 0 7px; font-size:.98rem; }
.contracts-page .ca-step p { margin:0; color:var(--ca-muted); font-size:.85rem; }

/* Built around Business Central */
.contracts-page .ca-advantage-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:45px; align-items:start; }
.contracts-page .ca-advantage-copy p { color:var(--ca-muted); }
.contracts-page .ca-benefit-list { display:grid; gap:12px; }
.contracts-page .ca-benefit { display:grid; grid-template-columns:30px 1fr; gap:12px; padding:17px 0; border-bottom:1px solid var(--ca-line); }
.contracts-page .ca-benefit:last-child { border-bottom:0; }
.contracts-page .ca-benefit-mark { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; color:var(--ca-primary); background:var(--ca-pale); font-weight:900; }
.contracts-page .ca-benefit strong { display:block; margin-bottom:3px; }
.contracts-page .ca-benefit p { margin:0; color:var(--ca-muted); font-size:.93rem; }

/* Integrations */
.contracts-page .ca-integrations { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; margin-top:28px; }
.contracts-page .ca-integration { padding:17px; border:1px solid var(--ca-line); border-radius:13px; background:#fff; }
.contracts-page .ca-integration strong { display:block; font-size:.94rem; }
.contracts-page .ca-integration span { display:block; margin-top:5px; color:var(--ca-muted); font-size:.82rem; }

/* Contact band, text left and button right (its #book-a-demo id is where the buy button lands while card payments are off) */
.contracts-page .ca-cta { padding:65px 0; color:#fff; background:linear-gradient(115deg, #0d4d53, #176f70); }
.contracts-page .ca-cta-grid { display:flex; justify-content:space-between; align-items:center; gap:32px; }
.contracts-page .ca-cta-grid > .ca-btn { flex:0 0 auto; }
.contracts-page .ca-cta h2 { max-width:690px; margin:11px 0; font-size:clamp(1.9rem, 4vw, 2.8rem); line-height:1.12; letter-spacing:-.035em; }
.contracts-page .ca-cta-copy p { max-width:700px; margin:0; color:rgba(255,255,255,.82); }
.contracts-page .ca-cta .ca-eyebrow { color:#b8ecda; }

.contracts-page .ca-fineprint { padding:22px 0 30px; color:var(--ca-muted); font-size:.82rem; }

/* Intro: page title, short pitch and the tab cards. The cards form a folder-tab row; the selected one joins the panel under it. */
.contracts-page .ca-intro { position:relative; padding:40px 0 0; background:radial-gradient(circle at 88% 20%, rgba(139,211,189,.25), transparent 28%), linear-gradient(135deg, #f4faf8 0%, #fff 58%, #f0f8f7 100%); border-bottom:1px solid var(--ca-line); }
.contracts-page .ca-intro .ca-buy { margin-bottom:34px; }
.contracts-page .ca-intro-head { max-width:820px; margin-bottom:34px; }
.contracts-page .ca-intro-title { margin:16px 0; font-size:clamp(1.8rem, 3.4vw, 2.7rem); font-weight:700; line-height:1.1; letter-spacing:-.04em; }
.contracts-page .ca-intro-title span { color:var(--ca-primary); }
.contracts-page .ca-intro .ca-lead { max-width:780px; }
.contracts-page .ca-tabs { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; margin-bottom:-1px; }
.contracts-page .ca-tab, .contracts-page .ca-tab:hover { color:var(--ca-ink); text-decoration:none; }
.contracts-page .ca-tab { position:relative; display:flex; flex-direction:column; gap:5px; padding:22px 24px 24px; border:1px solid var(--ca-line); border-radius:var(--ca-radius) var(--ca-radius) 0 0; background:rgba(255,255,255,.6); transition:background .18s ease, box-shadow .18s ease; }
.contracts-page .ca-tab:hover { background:#fff; }
.contracts-page .ca-tab::before { content:""; position:absolute; left:-1px; right:-1px; top:-1px; height:4px; border-radius:var(--ca-radius) var(--ca-radius) 0 0; background:transparent; transition:background .18s ease; }
.contracts-page .ca-tab-name { font-size:1.25rem; font-weight:800; letter-spacing:-.02em; line-height:1.25; }
.contracts-page .ca-tab-tag { color:var(--ca-primary); font-size:.76rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
.contracts-page .ca-tab-desc { margin-top:6px; font-size:.95rem; }
.contracts-page .ca-tab-fit { color:var(--ca-muted); font-size:.85rem; }
.contracts-page.has-tabs .ca-tab[aria-selected="true"] { z-index:1; border-color:#b9d3cf; border-bottom-color:#fff; background:#fff; box-shadow:0 -10px 28px rgba(18,54,65,.07); }
.contracts-page.has-tabs .ca-tab[aria-selected="true"]::before { background:var(--ca-primary); }

/* Tab panels: every panel is visible without JavaScript, one at a time with it */
.contracts-page .ca-panel[hidden] { display:none !important; }
.contracts-page .ca-panel .ca-hero { background:radial-gradient(circle at 88% 20%, rgba(139,211,189,.18), transparent 30%), #fff; }

/* Problem and outcome cards */
.contracts-page .ca-outcomes { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px; }
.contracts-page .ca-outcome { padding:24px 22px; border:1px solid var(--ca-line); border-top:3px solid var(--ca-accent); border-radius:var(--ca-radius); background:#fff; }
.contracts-page .ca-outcome h3 { margin:0 0 9px; font-size:1.05rem; line-height:1.3; }
.contracts-page .ca-outcome p { margin:0; color:var(--ca-muted); font-size:.93rem; }

/* Figures an Agreements contract shows, as chips */
.contracts-page .ca-kpis { display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 0; }
.contracts-page .ca-kpis li { padding:6px 12px; border:1px solid #b9d3cf; border-radius:999px; background:#fff; color:var(--ca-primary-dark); font-size:.82rem; font-weight:700; }

/* Six-step route (must stay above the media queries so they can still reduce the columns) */
.contracts-page .ca-lifecycle--six { grid-template-columns:repeat(6, minmax(0,1fr)); }

/* Demo band and the link across to the other app */
.contracts-page .ca-demo { display:flex; justify-content:space-between; align-items:center; gap:32px; padding:36px 40px; border:1px solid #cfe3df; border-radius:24px; background:var(--ca-pale); }
.contracts-page .ca-demo h2 { margin:10px 0; font-size:clamp(1.5rem, 3vw, 2.1rem); }
.contracts-page .ca-demo p { max-width:680px; margin:0; color:var(--ca-muted); }
.contracts-page .ca-demo > .ca-btn { flex:0 0 auto; }
.contracts-page .ca-switch { padding:30px 0; border-top:1px solid var(--ca-line); background:var(--ca-pale); }
.contracts-page .ca-switch-grid { display:flex; justify-content:space-between; align-items:center; gap:24px; }
.contracts-page .ca-switch-grid p { max-width:760px; margin:0; color:var(--ca-muted); }
.contracts-page .ca-switch-grid p strong { color:var(--ca-ink); }
.contracts-page .ca-switch-grid > .ca-btn { flex:0 0 auto; }

/* Side-by-side comparison */
.contracts-page .ca-compare-section { border-top:1px solid var(--ca-line); background:var(--ca-surface); }
.contracts-page .ca-compare { overflow-x:auto; border:1px solid var(--ca-line); border-radius:var(--ca-radius); background:#fff; box-shadow:var(--ca-shadow); }
.contracts-page .ca-compare table { width:100%; min-width:720px; margin:0; border-collapse:collapse; font-size:.93rem; }
.contracts-page .ca-compare th, .contracts-page .ca-compare td { padding:15px 18px; border:0; border-bottom:1px solid var(--ca-line); background:#fff; color:var(--ca-muted); font-weight:400; text-align:left; vertical-align:top; }
.contracts-page .ca-compare thead th, .contracts-page .ca-compare thead td { background:var(--ca-pale); }
.contracts-page .ca-compare thead th { color:var(--ca-primary-dark); font-size:1.02rem; font-weight:800; }
.contracts-page .ca-compare tbody th { width:19%; color:var(--ca-ink); font-weight:700; }
.contracts-page .ca-compare tbody tr:last-child th, .contracts-page .ca-compare tbody tr:last-child td { border-bottom:0; }
.contracts-page .ca-sr { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

@media (max-width:900px) {
    .contracts-page .ca-hero-grid, .contracts-page .ca-advantage-grid { grid-template-columns:1fr; }
    .contracts-page .ca-hero-grid { gap:34px; }
    .contracts-page .ca-visual { max-width:620px; }
    .contracts-page .ca-feature-grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
    .contracts-page .ca-lifecycle { grid-template-columns:repeat(3, minmax(0,1fr)); }
    .contracts-page .ca-integrations { grid-template-columns:repeat(2, minmax(0,1fr)); }
    .contracts-page .ca-shot-grid { grid-template-columns:1fr; }
}
@media (max-width:600px) {
    .contracts-page .ca-cta-grid { flex-direction:column; align-items:flex-start; }
    .contracts-page .ca-wrap { width:min(100% - 28px, 1140px); }
    .contracts-page .ca-hero { padding:28px 0 52px; }
    .contracts-page .ca-buy { margin-bottom:34px; }
    .contracts-page .ca-section { padding:55px 0; }
    .contracts-page .ca-party-grid, .contracts-page .ca-checks, .contracts-page .ca-feature-grid { grid-template-columns:1fr; }
    .contracts-page .ca-lifecycle { grid-template-columns:repeat(2, minmax(0,1fr)); }
    .contracts-page .ca-integrations { grid-template-columns:1fr 1fr; }
    .contracts-page .ca-visual { padding:17px; }
}
@media (prefers-reduced-motion:reduce) {
    html { scroll-behavior:auto; }
    .contracts-page .ca-btn, .contracts-page .ca-shot a { transition:none; }
    .contracts-page .ca-btn:hover, .contracts-page .ca-shot a:hover { transform:none; }
}

/* Tabs, outcomes, comparison and bands at smaller widths */
@media (max-width:900px) {
    .contracts-page .ca-outcomes { grid-template-columns:repeat(2, minmax(0,1fr)); }
    .contracts-page .ca-demo { padding:30px 26px; }
}
@media (max-width:760px) {
    /* The comparison becomes one card per row, with each app's answer labelled */
    .contracts-page .ca-compare { overflow:visible; border:0; background:transparent; box-shadow:none; }
    .contracts-page .ca-compare table, .contracts-page .ca-compare tbody, .contracts-page .ca-compare tr, .contracts-page .ca-compare th, .contracts-page .ca-compare td { display:block; min-width:0; width:auto; }
    .contracts-page .ca-compare thead { display:none; }
    .contracts-page .ca-compare tbody tr { margin-bottom:12px; overflow:hidden; border:1px solid var(--ca-line); border-radius:15px; background:#fff; }
    .contracts-page .ca-compare tbody tr:last-child th, .contracts-page .ca-compare tbody tr:last-child td { border-bottom:0; }
    .contracts-page .ca-compare tbody th { width:auto; padding:12px 16px; border-bottom:1px solid var(--ca-line); background:var(--ca-pale); color:var(--ca-primary-dark); }
    .contracts-page .ca-compare tbody td { padding:12px 16px; border-bottom:1px solid #edf2f1; }
    .contracts-page .ca-compare tbody td:last-child { border-bottom:0; }
    .contracts-page .ca-compare tbody td::before { content:attr(data-label); display:block; margin-bottom:2px; color:var(--ca-primary); font-size:.72rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
    .contracts-page .ca-intro { padding-bottom:26px; }
    .contracts-page .ca-tabs { grid-template-columns:1fr; margin-bottom:0; }
    .contracts-page .ca-tab { border-radius:var(--ca-radius); }
    .contracts-page .ca-tab::before { border-radius:var(--ca-radius) var(--ca-radius) 0 0; }
    .contracts-page .ca-tab-fit { display:none; }
    .contracts-page.has-tabs .ca-tab[aria-selected="true"] { border-color:var(--ca-primary); box-shadow:var(--ca-shadow); }
}
@media (max-width:600px) {
    .contracts-page .ca-intro { padding-top:28px; }
    .contracts-page .ca-intro .ca-buy { margin-bottom:26px; }
    .contracts-page .ca-outcomes { grid-template-columns:1fr; }
    .contracts-page .ca-demo, .contracts-page .ca-switch-grid { flex-direction:column; align-items:flex-start; }
    .contracts-page .ca-demo { padding:24px 20px; }
    .contracts-page .ca-compare th, .contracts-page .ca-compare td { padding:13px 14px; }
}
@media (prefers-reduced-motion:reduce) {
    .contracts-page .ca-tab, .contracts-page .ca-tab::before { transition:none; }
}

/* Task-list screenshot beside a short callout */
.contracts-page .ca-shot-row { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:32px; align-items:center; margin-top:32px; }
.contracts-page .ca-shot-copy h3 { margin:0 0 10px; font-size:1.3rem; line-height:1.3; }
.contracts-page .ca-shot-copy p { margin:0; color:var(--ca-muted); }
@media (max-width:900px) {
    .contracts-page .ca-shot-row { grid-template-columns:1fr; gap:20px; }
}