/* Standalone sample workspace. All sample data stays in this page. */
[hidden]{display:none!important}
.office-header,.office-wrap,.office-footer{max-width:1120px;margin:auto;padding-left:24px;padding-right:24px}
.office-header{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:24px;padding-bottom:24px}
.office-header .brand img{width:148px;height:auto}
.office-header nav{display:flex;gap:24px;flex-wrap:wrap}
.office-header nav a,.office-footer a{color:var(--ink-2);font-size:15px;min-height:44px;display:inline-flex;align-items:center}
.demo-skip{position:absolute;left:16px;top:-100px;z-index:10;background:white;padding:12px}
.demo-skip:focus{top:10px}
.office-intro{padding:36px 0 28px;max-width:760px}
.eyebrow{text-transform:uppercase;letter-spacing:.1em;font-size:13px;font-weight:700;color:#0752dc}
.office-intro h1{font-size:clamp(38px,6vw,64px);margin:14px 0 20px}
.office-intro h1 span{color:#0752dc}
.office-intro p{font-size:19px;max-width:660px}
.office-intro .account-progress{font-size:16px;padding:14px 16px;border:1px solid #cbd9f6;border-radius:10px;background:#edf3ff;color:#123f99}
.account-progress a{color:inherit;font-weight:600}
.demo-controls{display:flex;flex-wrap:wrap;gap:8px}
.demo-controls button{font:inherit;font-size:15px;font-weight:600;min-height:46px;padding:10px 14px;border:1px solid #c6cfe0;border-radius:10px;background:#fff;color:var(--ink);cursor:pointer}
.demo-controls button:hover{border-color:#0752dc}
.demo-controls button[aria-pressed="true"]{color:#fff;background:#0752dc;border-color:#0752dc}
.demo-controls .demo-reset{font-weight:500;margin-left:auto;background:transparent}
.preview-status{font-size:14px;margin:12px 0;min-height:24px}
.office-preview{border:1px solid #d6dce8;border-radius:16px;background:#fff;overflow:hidden;box-shadow:0 16px 42px -30px #25365060}
.sample-top{display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:1px solid var(--line);padding:18px 20px}
.sample-top strong{display:flex;align-items:center;gap:10px;font-size:17px}
.sample-top strong span{display:grid;place-items:center;background:#eaf0fb;width:32px;height:32px;border-radius:8px;color:#3b4460}
.sample-label{font-size:12px;color:#56617b}
.sample-layout{display:grid;grid-template-columns:170px minmax(0,1fr)}
.sample-side{background:#f8f9fc;padding:24px 14px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:5px;font-size:13px;color:#64708b}
.sample-side b{font-size:11px;text-transform:uppercase;letter-spacing:.08em;margin:8px 10px;color:#56617b}
.sample-side span{padding:7px 10px}
.sample-side .selected{background:#e9edf5;color:#101426;border-radius:7px;font-weight:600}
.sample-main{padding:24px;min-width:0}
.sample-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.sample-title h2{margin:3px 0 0;font-size:22px}
.sample-count{font-size:12px;color:#56617b;background:#f0f3f9;padding:5px 10px;border-radius:20px}
.sample-promo{font-size:12px;color:#56617b;background:#eef1f7;border:1px solid var(--line);padding:10px 12px;border-radius:8px;margin-bottom:16px}
.invoice-scroll{max-width:100%;overflow:auto;overscroll-behavior-x:contain}
.invoice-table{border-collapse:collapse;width:100%;min-width:620px;font-size:12px;color:#3b4460;text-align:left}
.invoice-table caption{text-align:left;font-size:12px;padding:0 0 8px;color:#56617b}
.invoice-table th{font-size:11px;font-weight:600;color:#56617b;background:#f8f9fc}
.invoice-table th,.invoice-table td{padding:12px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.invoice-status{font-size:inherit}
.sample-footnote{font-size:12px;margin:18px 0 0;color:#56617b}
.office-preview.preview-readable .invoice-table{font-size:16px}
.office-preview.preview-readable .invoice-table th{font-size:14px}
.office-preview.preview-readable .invoice-table td{padding-top:15px;padding-bottom:15px}
.office-preview.preview-overdue tr[data-overdue]{background:#fff0e6;color:#762b00}
.office-preview.preview-overdue tr[data-overdue] .invoice-status{font-weight:800}
.office-preview.preview-focused .sample-clutter{display:none}
.try-own{display:grid;grid-template-columns:1fr 1fr;gap:48px;padding:64px 0 36px}
.try-own h2{font-size:30px;line-height:1.15;margin:12px 0 16px;max-width:18ch}
.try-own p{font-size:16px}
.office-ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.office-ctas .btn{font-size:15px}
.office-ctas button{min-height:44px;cursor:pointer}
#office-auth-status{color:#56617b}
.setup-steps{margin:0;padding:0;list-style:none;counter-reset:setup;display:grid;gap:20px}
.setup-steps li{margin:0;padding-left:42px;position:relative;counter-increment:setup}
.setup-steps li:before{content:counter(setup);position:absolute;left:0;top:0;background:#e5ecff;color:#123f99;border-radius:50%;width:28px;height:28px;display:grid;place-items:center;font-weight:700;font-size:14px}
.setup-steps b,.setup-steps span{display:block}
.setup-steps span{font-size:15px;margin-top:5px}
.setup-steps a{color:#0752dc}
.real-exercise{margin:24px 0 36px;padding:28px;border:1px solid #d6dce8;border-radius:16px;background:#fff;scroll-margin-top:24px}
.real-exercise h2{margin:12px 0 16px;font-size:30px;line-height:1.2}
.real-exercise p{font-size:16px}
.exercise-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;list-style:none;padding:0;margin:24px 0}
.exercise-steps h3{font-size:19px;line-height:1.3;margin:0 0 12px}
.exercise-steps blockquote{margin:12px 0;padding:14px;background:#edf3ff;border-left:3px solid #0752dc;border-radius:4px;font-size:16px;color:#123f99}
.exercise-outcome{border-top:1px solid #d6dce8;padding-top:20px;margin:0}
.own-sites{border-top:1px solid #d6dce8;padding:32px 0;display:flex;gap:32px;align-items:center;justify-content:space-between}
.own-sites h2{margin:0 0 12px}
.own-sites p{font-size:15px;max-width:660px;margin:0}
.own-sites .btn{flex-shrink:0}
.office-footer{border-top:1px solid #d6dce8;padding-top:24px;padding-bottom:40px;display:flex;gap:20px;flex-wrap:wrap}
.office-footer a{margin:0}
.demo-noscript{margin:16px 0;padding:12px;background:#fff0e6}
@media(max-width:800px){.sample-layout{grid-template-columns:1fr}.sample-side{display:none}.try-own{gap:28px}.own-sites{align-items:flex-start;flex-direction:column;gap:16px}}
@media(max-width:800px){.exercise-steps{grid-template-columns:1fr}.real-exercise{padding:20px}.real-exercise h2{font-size:28px}}
@media(max-width:600px){.office-header,.office-wrap,.office-footer{padding-left:18px;padding-right:18px}.office-header{align-items:flex-start;gap:16px}.office-header .brand img{width:128px}.office-header nav{gap:4px 12px;justify-content:flex-end}.office-header nav a{font-size:13px}.office-intro{padding-top:20px}.office-intro p{font-size:17px}.demo-controls{display:grid;grid-template-columns:1fr 1fr}.demo-controls button{font-size:13px;padding:10px;text-align:left}.demo-controls .demo-reset{margin:0}.preview-status{min-height:42px}.sample-top{padding:14px;flex-wrap:wrap}.sample-main{padding:14px}.try-own{grid-template-columns:1fr;padding-top:40px;gap:28px}.office-ctas{flex-direction:column}.office-ctas .btn{justify-content:center}.try-own h2{font-size:28px}.office-footer{gap:8px 20px}}