:root {
    color-scheme:dark;
    --bg:#1e242b;
    --chrome:#20262d;
    --panel:#29333f;
    --panel-soft:#25303b;
    --line:#414f60;
    --blue:#3185ef;
    --blue-hover:#569cff;
    --text:#f4f6fa;
    --muted:#b5c2d5;
    --quiet:#8f9eb2;
    --radius:12px;
    font-family:'Segoe UI',Arial,sans-serif;
    font-synthesis:none
}

* {
    box-sizing:border-box
}
body {
    margin:0;
    background:var(--bg);
    color:var(--text)
}
button,input,textarea,select {
    font:inherit
}
button,a,input,textarea,select {
    -webkit-tap-highlight-color:transparent
}
a {
    color:inherit;
    text-decoration:none
}
button {
    cursor:pointer
}
button:disabled {
    opacity:.4;
    cursor:default
}
button {
    color:inherit
}
h1,h2,h3,p {
    margin-top:0
}
h1 {
    letter-spacing:-1.5px;
    line-height:1.13
}
h2 {
    letter-spacing:-.5px
}
p {
    line-height:1.55;
    color:var(--muted)
}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible {
    outline:3px solid #96bfff;
    outline-offset:4px
}
main:focus {
    outline:none
}
.icon {
    width:24px;
    height:24px;
    flex-shrink:0;
    vertical-align:middle
}
.button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    border:1px solid var(--line);
    border-radius:7px;
    padding:11px 20px;
    font-size:14px;
    font-weight:600;
    min-height:42px;
    white-space:nowrap
}
.primary {
    background:var(--blue);
    color:white;
    border-color:var(--blue)
}
.primary:hover {
    background:#246fcf
}
.subtle {
    background:transparent;
    border-color:#7a8aa0
}
.subtle:hover {
    background:#354253
}
.icon-button,.mini-button {
    background:transparent;
    border:0;
    min-width:36px;
    min-height:36px;
    border-radius:5px;
    display:inline-flex;
    align-items:center;
    justify-content:center
}
.icon-button:hover,.mini-button:hover:not(:disabled) {
    background:#3c4a5a
}
.text-button {
    background:none;
    border:0;
    color:#91baff;
    padding:6px
}
.text-link {
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:#91baff;
    font-weight:600;
    font-size:14px
}
.text-link:hover {
    text-decoration:underline
}
.skip {
    position:fixed;
    top:-100px;
    left:15px;
    z-index:100;
    background:white;
    color:#111;
    padding:12px
}
.skip:focus {
    top:10px
}
.sr-only {
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap
}
.topbar {
    height:78px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 28px 0 26px;
    border-bottom:1px solid #34404e;
    background:var(--chrome);
    position:sticky;
    top:0;
    z-index:20
}
.wordmark {
    display:flex;
    align-items:center;
    gap:10px;
    font-size:29px;
    font-weight:650;
    letter-spacing:-1px
}
.wordmark img {
    width:76px;
    height:64px;
    object-fit:contain
}
.header-actions {
    display:flex;
    gap:16px;
    align-items:center
}
.guest {
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--muted);
    font-size:13px;
    margin-right:12px
}
.guest .icon {
    width:18px;
    height:18px
}
.app-frame {
    display:flex;
    min-height:calc(100dvh - 78px)
}
.sidebar {
    width:200px;
    flex-shrink:0;
    background:var(--chrome);
    border-right:1px solid #303b48;
    position:sticky;
    top:78px;
    height:calc(100dvh - 78px);
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:18px 7px 18px
}
.sidebar nav {
    display:flex;
    flex-direction:column;
    gap:8px
}
.sidebar nav a {
    display:flex;
    align-items:center;
    gap:22px;
    padding:15px 20px;
    border-radius:8px;
    font-size:15px;
    min-height:54px;
    color:#d0daea
}
.sidebar nav a:hover {
    background:#2b3643
}
.sidebar nav a.active {
    background:#2c73cb;
    color:white
}
.sidebar nav .icon {
    width:25px;
    height:25px
}
.sidebar-bottom {
    display:flex;
    align-items:center;
    gap:8px;
    padding:20px 12px 0;
    font-size:11px;
    color:var(--muted);
    border-top:1px solid #33404e
}
.status-dot {
    width:7px;
    height:7px;
    border-radius:50%;
    background:#82a5d3;
    display:inline-block;
    flex-shrink:0
}
.version {
    margin-left:auto;
    font-variant-numeric:tabular-nums;
    color:#8b9bb0
}
.content-frame {
    min-width:0;
    flex:1;
    display:flex;
    flex-direction:column
}
main {
    flex:1;
    width:100%;
    max-width:1720px;
    margin:0 auto;
    padding:30px 32px 24px
}
footer {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    border-top:1px solid #303b48;
    padding:18px 28px;
    font-size:12px;
    color:var(--muted)
}
footer div {
    display:flex;
    gap:22px
}
footer a:hover {
    color:white
}
.footer-divider {
    padding:0 12px;
    color:#66788d
}
.panel {
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:var(--radius)
}
.home-heading {
    margin:0 0 18px 28px
}
.home-heading h1 {
    font-size:clamp(30px,3.25vw,53px);
    font-weight:720;
    margin-bottom:9px
}
.home-heading h1 span {
    color:#5a9bee
}
.home-heading p {
    font-size:clamp(17px,1.8vw,26px);
    margin:0 0 0 40px
}
.preview-strip {
    display:flex;
    gap:10px;
    align-items:center;
    flex-wrap:wrap;
    color:var(--muted);
    font-size:12px;
    margin:0 0 20px 0;
    padding:10px 14px;
    background:#222d38;
    border:1px solid #354355;
    border-radius:7px
}
.preview-strip strong {
    color:#dce7f5;
    font-weight:600
}
.preview-strip a {
    margin-left:auto;
    color:#9bc1f5
}
.home-grid {
    display:grid;
    grid-template-columns:minmax(0,1.9fr) minmax(285px,1fr);
    gap:26px
}
.conversion-column {
    min-width:0
}
.converter {
    padding:12px 18px 16px;
    background:linear-gradient(140deg,#2b3847,#27313d)
}
.direction-tabs {
    display:flex;
    justify-content:center
}
.direction-tabs button {
    border:1px solid #637187;
    background:#303c4b;
    color:white;
    min-width:142px;
    padding:12px 18px;
    font-size:15px
}
.direction-tabs button:first-child {
    border-radius:8px 0 0 0
}
.direction-tabs button:last-child {
    border-radius:0 8px 0 0
}
.direction-tabs button.selected {
    background:var(--blue);
    border-color:var(--blue)
}
.dropzone {
    border:2px dashed #4e99f5;
    border-radius:12px;
    padding:26px 16px 22px;
    text-align:center;
    min-height:323px;
    transition:background .15s
}
.dropzone.drag-active {
    background:#334b66;
    border-color:#adceff
}
.upload-icon {
    width:76px;
    height:76px;
    color:#6aa8f1;
    stroke-width:1.4;
    margin-bottom:10px
}
.dropzone h2 {
    font-size:29px;
    margin:0 0 6px
}
.drop-description {
    font-size:14px;
    margin:0 0 17px
}
.file-button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    background:var(--blue);
    border:1px solid #5a9df0;
    border-radius:9px;
    padding:13px 30px;
    position:relative;
    min-width:245px;
    font-size:20px;
    font-weight:600;
    overflow:hidden
}
.file-button input {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    opacity:0;
    cursor:pointer
}
.file-button:focus-within {
    outline:3px solid #b7d4ff;
    outline-offset:4px
}
.file-button:hover {
    background:#2476dc
}
.drop-help {
    font-size:14px;
    margin:14px 0 4px
}
.dropzone small {
    color:var(--muted);
    font-size:12px
}
.quick-tools {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:8px;
    margin-top:10px
}
.tool-card {
    display:flex;
    align-items:flex-start;
    gap:11px;
    padding:16px 11px;
    min-height:104px;
    text-align:left;
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:11px
}
.tool-card>.icon {
    width:29px;
    height:34px;
    color:#d1dff0
}
.tool-card.active-tool>.icon {
    color:#63a4fa
}
.tool-card:hover {
    background:#344354;
    border-color:#7495bc
}
.tool-card strong {
    display:block;
    font-size:14px;
    margin:2px 0 8px
}
.tool-card span:not(.chevron) {
    display:block;
    color:var(--muted);
    font-size:12px;
    line-height:1.45
}
.chevron {
    margin-left:auto;
    color:#a6bad3;
    font-size:22px;
    line-height:1
}
.example-panel {
    padding:24px 17px 18px;
    display:flex;
    flex-direction:column;
    background:linear-gradient(140deg,#28333f,#24303c)
}
.example-panel h2 {
    font-size:19px;
    margin:0 0 24px 5px
}
.example-pair {
    display:flex;
    gap:12px;
    align-items:center;
    background:#25313e;
    border:1px solid #344152;
    border-radius:12px;
    padding:25px 13px 8px;
    flex:1
}
.example-pair>div {
    flex:1;
    min-width:0
}
.example-arrow {
    width:24px;
    color:#729fd4;
    margin-top:-60px
}
.example-pair>div>p {
    text-align:center;
    font-size:13px;
    color:#e6edf7;
    margin:14px -7px 8px;
    line-height:1.5
}
.example-pair>div>p span {
    color:var(--muted);
    font-size:12px
}
.output-example {
    position:relative
}
.pdf-badge {
    position:absolute;
    right:8px;
    top:12px;
    color:white;
    background:#c94750;
    padding:5px 7px;
    border-radius:4px;
    z-index:1;
    font-size:11px;
    font-weight:700;
    box-shadow:0 3px 8px #0003
}
.example-panel>.text-link {
    margin:17px auto 0;
    font-size:12px
}
.report-paper {
    background:#f7f9fc;
    color:#1b2a43;
    border-radius:6px;
    padding:18px 13px 12px;
    aspect-ratio:.68;
    box-shadow:0 7px 22px #0002;
    display:flex;
    flex-direction:column;
    overflow:hidden
}
.report-kicker {
    font-size:5px;
    letter-spacing:1px;
    font-weight:700;
    margin-bottom:16px;
    color:#617b9d
}
.report-kicker span {
    font-weight:400
}
.report-paper h3 {
    font-size:clamp(13px,1.15vw,18px);
    line-height:1.17;
    letter-spacing:-.4px;
    margin:0 0 7px
}
.report-quarter {
    font-size:8px;
    color:#4a607e;
    margin:0 0 12px
}
.report-rule {
    height:2px;
    width:65%;
    background:#809bc2;
    margin-bottom:12px
}
.report-lines {
    display:flex;
    flex-direction:column;
    gap:4px
}
.report-lines i {
    display:block;
    height:3px;
    background:#d4deec;
    width:100%
}
.report-lines i:nth-child(2) {
    width:88%
}
.report-lines i:nth-child(3) {
    width:65%
}
.report-chart {
    display:flex;
    align-items:flex-end;
    gap:5px;
    height:70px;
    border-bottom:1px solid #d3dfed;
    margin:17px 0 12px
}
.report-chart b {
    background:linear-gradient(#85b3ee,#3974c5);
    flex:1
}
.report-bottom {
    display:flex;
    align-items:center;
    gap:10px;
    justify-content:space-between;
    margin-top:auto
}
.report-bottom .report-lines {
    flex:1
}
.report-donut {
    width:32px;
    height:32px;
    flex-shrink:0;
    border-radius:50%;
    background:conic-gradient(#366cb2 0 74%,#b3c8e4 74%);
    position:relative
}
.report-donut:after {
    content:'';
    position:absolute;
    inset:9px;
    background:#f7f9fc;
    border-radius:50%
}
.report-paper small {
    font-size:4px;
    color:#6d7d94;
    letter-spacing:.5px;
    margin-top:18px
}
.more-panel {
    display:grid;
    grid-template-columns:1.15fr 1fr 1fr;
    gap:15px;
    padding:14px 20px;
    margin-top:17px;
    align-items:center;
    background:#26313c
}
.more-panel h2 {
    font-size:25px;
    margin:0 0 7px
}
.more-panel p {
    font-size:14px;
    margin:0
}
.more-card {
    display:flex;
    align-items:center;
    gap:17px;
    background:#2c3744;
    border:1px solid #364352;
    border-radius:10px;
    padding:17px 14px;
    min-height:105px
}
.more-card:hover {
    border-color:#7c95b5;
    background:#334354
}
.more-card h3 {
    font-size:17px;
    margin:0 0 7px;
    letter-spacing:-.3px
}
.more-card h3 span {
    padding-left:12px;
    color:#a3b5cd
}
.more-card p {
    font-size:13px
}
.feature-icon {
    display:flex;
    align-items:center;
    justify-content:center;
    width:65px;
    height:65px;
    border-radius:7px;
    flex-shrink:0
}
.feature-icon .icon {
    width:33px;
    height:33px
}
.violet {
    background:#a496d9;
    color:#493c7b
}
.sage {
    background:#abc6ac;
    color:#31563f
}
.file-selection {
    margin-top:18px;
    border-top:1px solid #536174;
    padding-top:15px
}
.selection-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-size:13px
}
.file-selection ol {
    padding:0;
    list-style:none;
    margin:10px 0
}
.file-selection li {
    display:flex;
    gap:9px;
    align-items:center;
    padding:9px 0;
    border-bottom:1px solid #405064
}
.file-selection li>div {
    flex:1;
    min-width:0
}
.file-selection li strong {
    font-size:13px;
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}
.file-selection li small {
    display:block;
    font-size:11px;
    color:var(--muted);
    margin-top:4px
}
.inline-notice {
    font-size:13px;
    display:flex;
    gap:9px;
    align-items:flex-start;
    margin-top:14px
}
.inline-notice .icon {
    width:18px;
    height:18px
}
.issues {
    background:#49352e;
    border:1px solid #997055;
    color:#f1d8c7;
    border-radius:8px;
    font-size:13px;
    padding:12px 12px 12px 30px;
    line-height:1.6
}
.eyebrow {
    font-size:11px;
    letter-spacing:2px;
    color:#9caec6;
    font-weight:600;
    display:block;
    margin-bottom:14px
}
.lead {
    font-size:18px;
    max-width:850px;
    line-height:1.6
}
.narrow-page {
    max-width:960px;
    margin:20px auto 35px
}
.narrow-page h1,.section-page h1,.sample-page h1,.empty-page h1 {
    font-size:clamp(30px,3vw,44px);
    margin-bottom:18px
}
.explanation {
    padding:30px;
    margin:25px 0
}
.explanation .large-icon {
    margin-bottom:20px
}
.explanation p {
    max-width:720px
}
.explanation .button {
    margin-top:10px
}
.large-icon {
    width:48px;
    height:48px;
    color:#8db6ec
}
.two-cards {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px
}
.two-cards article {
    padding:24px
}
.two-cards h3 {
    font-size:18px
}
.two-cards p {
    margin:0;
    font-size:14px
}
.section-page {
    padding:12px 0
}
.section-grid {
    display:grid;
    grid-template-columns:minmax(0,2fr) minmax(240px,1fr);
    gap:24px;
    margin-top:30px
}
.showcase {
    padding:28px;
    min-height:420px
}
.sample-label {
    font-size:10px;
    letter-spacing:1.5px;
    color:#a7b7cd;
    display:block;
    margin-bottom:24px
}
.section-aside {
    padding:27px;
    align-self:start
}
.section-aside h2 {
    font-size:26px
}
.section-aside ul {
    list-style:none;
    padding:0;
    display:grid;
    gap:18px;
    margin:28px 0
}
.section-aside li {
    display:flex;
    align-items:center;
    gap:10px;
    font-size:14px
}
.section-aside li .icon {
    color:#8eb2df;
    width:19px
}
.section-aside p {
    font-size:13px
}
.section-aside .text-link {
    margin-top:24px
}
.brand-example h2 {
    font-size:37px;
    line-height:1.15;
    margin-top:30px
}
.northline {
    display:flex;
    align-items:center;
    gap:15px;
    font-size:48px;
    font-weight:800;
    color:#a3bde3
}
.northline span {
    font-size:17px;
    font-weight:500;
    color:#e0e8f3
}
.swatches {
    display:flex;
    gap:10px;
    margin:25px 0
}
.swatches span {
    height:70px;
    flex:1;
    display:flex;
    align-items:flex-end;
    padding:12px;
    border-radius:6px;
    font-size:12px;
    border:1px solid #536173
}
.brand-example>p {
    font-size:13px
}
.poster {
    background:#ece7dc;
    color:#273347;
    padding:30px;
    max-width:520px;
    min-height:310px;
    margin:auto;
    position:relative;
    overflow:hidden
}
.poster>span {
    font-size:9px;
    letter-spacing:2px
}
.poster h2 {
    font-size:40px;
    margin:20px 0;
    position:relative;
    z-index:1
}
.poster p {
    color:#4f5e6c;
    font-size:12px;
    margin-top:100px
}
.poster-art {
    position:absolute;
    bottom:10px;
    right:0;
    width:220px;
    height:170px
}
.poster-art i {
    display:block;
    position:absolute;
    right:20px;
    width:140px;
    height:140px;
    background:#5477a7;
    border-radius:50%
}
.poster-art b {
    position:absolute;
    bottom:0;
    right:100px;
    width:120px;
    height:105px;
    background:#b5a48b;
    transform:rotate(-20deg)
}
.sample-toolbar {
    display:flex;
    justify-content:center;
    gap:30px;
    font-size:12px;
    margin-top:20px;
    color:#b5c2d5
}
.sample-tiles {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:30px;
    max-width:500px;
    margin:auto
}
.sample-tiles .report-paper {
    max-height:280px;
    max-width:185px
}
.sample-tiles a>strong,.sample-tiles a>small {
    display:block;
    margin-top:12px;
    font-size:14px
}
.sample-tiles a>small {
    font-size:12px;
    color:var(--muted);
    margin-top:4px
}
.brand-tile {
    height:220px;
    background:#3b5071;
    display:grid;
    place-items:center;
    font-size:100px;
    color:#d8e5f7;
    border-radius:7px
}
.ai-example {
    text-align:center;
    padding-top:10px
}
.ai-example h2 {
    margin-top:25px;
    font-size:32px
}
.ai-example>p {
    padding:20px;
    border:1px solid #526177;
    border-radius:12px
}
.workflow-steps {
    display:flex;
    justify-content:center;
    gap:18px;
    margin-top:30px;
    font-size:12px;
    color:#b8c8dc
}
.document-example {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:25px
}
.document-example .report-paper {
    width:220px
}
.document-example .report-paper h3 {
    font-size:23px
}
.document-example .report-chart {
    height:85px
}
.page-title-row {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px
}
.viewer-toolbar {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;
    padding:18px 22px;
    border-bottom:1px solid var(--line);
    font-size:13px
}
.viewer-toolbar>span {
    color:var(--muted);
    font-size:12px
}
.sample-document {
    display:grid;
    grid-template-columns:260px 1fr;
    gap:50px;
    padding:36px;
    align-items:center
}
.sample-document .report-paper h3 {
    font-size:28px
}
.sample-document .report-chart {
    height:110px
}
.sample-document .report-kicker {
    font-size:8px
}
.sample-document .report-quarter {
    font-size:12px
}
.sample-document .report-paper small {
    font-size:7px
}
.sample-document h2 {
    font-size:29px
}
.prose {
    padding:30px
}
.prose h2 {
    font-size:21px;
    margin:26px 0 12px
}
.prose h2:first-child {
    margin-top:0
}
.prose ul {
    color:var(--muted);
    line-height:1.9
}
.feedback-form {
    padding:30px;
    display:flex;
    flex-direction:column;
    gap:12px
}
.feedback-form label {
    font-size:14px;
    font-weight:600;
    margin-top:8px
}
.feedback-form input,.feedback-form textarea,.feedback-form select {
    padding:12px;
    background:#1e2834;
    border:1px solid #64758a;
    border-radius:7px;
    color:white;
    max-width:100%
}
.feedback-form textarea {
    resize:vertical;
    min-height:160px
}
.feedback-form small {
    font-size:12px;
    color:var(--muted)
}
.feedback-form .button {
    align-self:start;
    margin-top:10px
}
.feedback-form p {
    font-size:13px;
    margin:0
}
.empty-page {
    padding:55px 15px
}
.mobile-menu,.nav-backdrop {
    display:none
}
.boot-screen {
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:25px;
    text-align:center
}
.boot-screen img {
    width:110px
}
.boot-screen h1 {
    font-size:36px
}
.boot-screen progress {
    width:180px;
    accent-color:#3185ef
}
#blazor-error-ui {
    display:none;
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    padding:18px;
    background:#553a31;
    color:white;
    z-index:100;
    font-size:14px
}
#blazor-error-ui a {
    margin-left:15px;
    text-decoration:underline
}

@media(min-width:1650px) {
    .dropzone {
    min-height:390px;
    padding-top:40px
}
.upload-icon {
    width:90px;
    height:90px
}
.report-chart {
    height:95px
}
.report-paper {
    padding:25px 20px
}
.example-panel {
    padding:26px
}
.example-pair {
    gap:18px;
    padding:28px 17px 10px
}
.more-panel {
    margin-top:22px
}

}

@media(max-width:1200px) {
    main {
    padding:24px 20px
}
.sidebar {
    width:174px
}
.sidebar nav a {
    gap:14px;
    padding-left:15px
}
.home-grid {
    gap:16px;
    grid-template-columns:minmax(0,1.7fr) minmax(260px,1fr)
}
.home-heading {
    margin-left:0
}
.home-heading p {
    margin-left:0
}
.tool-card {
    padding:13px 9px;
    gap:7px
}
.tool-card>.icon {
    width:24px
}
.tool-card .chevron {
    display:none
}
.tool-card strong {
    font-size:12px
}
.tool-card span:not(.chevron) {
    font-size:11px
}
.more-panel {
    padding:15px;
    gap:12px
}
.more-panel h2 {
    font-size:21px
}
.more-card {
    gap:10px;
    padding:12px
}
.feature-icon {
    width:45px;
    height:45px
}
.more-card h3 {
    font-size:15px
}
.more-card p {
    font-size:12px
}
.example-pair {
    gap:8px;
    padding:15px 8px 6px
}
.example-arrow {
    width:18px
}
.report-paper {
    padding:14px 9px
}
.report-kicker {
    margin-bottom:12px
}
.report-chart {
    height:50px;
    gap:3px
}
.report-paper small {
    font-size:3px
}
.report-paper h3 {
    font-size:13px
}

}

@media(max-width:980px) {
    .guest {
    display:none
}
.home-grid {
    grid-template-columns:1fr
}
.example-pair {
    max-width:540px;
    width:100%;
    margin:auto;
    gap:24px;
    padding:25px 35px
}
.example-panel h2 {
    margin-bottom:18px
}
.example-pair .report-paper {
    max-width:185px;
    margin:auto
}
.example-pair>div>p {
    font-size:14px
}
.report-chart {
    height:70px
}
.more-panel {
    grid-template-columns:1fr 1fr
}
.more-panel>div:first-child {
    grid-column:1/-1
}
.quick-tools {
    gap:10px
}
.tool-card {
    padding:17px 12px;
    gap:10px
}
.tool-card strong {
    font-size:14px
}
.tool-card span:not(.chevron) {
    font-size:12px
}
.section-grid {
    grid-template-columns:1fr
}
.section-aside ul {
    display:flex;
    flex-wrap:wrap;
    gap:20px
}
.sample-document {
    gap:25px;
    grid-template-columns:220px 1fr
}
.viewer-toolbar {
    flex-wrap:wrap
}
.viewer-toolbar>span {
    display:none
}
.home-heading h1 {
    font-size:36px
}
.home-heading p {
    font-size:20px
}
.preview-strip a {
    margin-left:17px
}

}

@media(max-width:700px) {
    .topbar {
    height:65px;
    padding:0 14px;
    gap:8px
}
.wordmark {
    font-size:23px;
    gap:4px
}
.wordmark img {
    width:48px;
    height:48px
}
.header-actions {
    gap:8px
}
.header-actions .button {
    font-size:12px;
    padding:8px 12px;
    min-height:36px
}
.header-actions .sign-in {
    display:none
}
.mobile-menu {
    display:inline-flex;
    width:35px;
    min-width:35px
}
.sidebar {
    display:none;
    position:fixed;
    top:65px;
    bottom:0;
    height:calc(100dvh - 65px);
    left:0;
    width:230px;
    z-index:30;
    overflow-y:auto
}
.sidebar.is-open {
    display:flex
}
.sidebar nav a {
    padding:12px 18px;
    min-height:48px
}
.nav-backdrop {
    display:block;
    position:fixed;
    inset:65px 0 0 0;
    background:#0008;
    border:0;
    z-index:25
}
.app-frame {
    min-height:calc(100dvh - 65px)
}
main {
    padding:24px 16px
}
.home-heading h1 {
    font-size:34px;
    line-height:1.16
}
.home-heading h1 span {
    display:block
}
.home-heading p {
    font-size:17px;
    margin-top:12px
}
.preview-strip {
    font-size:11px;
    gap:7px
}
.preview-strip>span:nth-of-type(2) {
    flex-basis:100%;
    margin-left:14px
}
.preview-strip a {
    margin-left:14px
}
.converter {
    padding:10px
}
.dropzone {
    padding:23px 9px;
    min-height:310px
}
.dropzone h2 {
    font-size:25px
}
.drop-description {
    font-size:13px
}
.direction-tabs button {
    min-width:120px;
    padding:10px
}
.file-button {
    min-width:220px;
    font-size:18px
}
.drop-help {
    font-size:12px
}
.quick-tools {
    grid-template-columns:1fr 1fr
}
.tool-card {
    min-height:95px
}
.more-panel {
    grid-template-columns:1fr;
    padding:19px
}
.more-card {
    padding:15px
}
.more-panel h2 {
    font-size:24px
}
.more-card h3 {
    font-size:17px
}
.feature-icon {
    width:55px;
    height:55px
}
.example-panel {
    padding:20px 14px
}
.example-panel h2 {
    font-size:18px
}
.example-pair {
    gap:12px;
    padding:20px 12px
}
.report-paper h3 {
    font-size:15px
}
.report-chart {
    height:65px
}
.report-paper small {
    font-size:4px
}
.example-pair>div>p {
    font-size:12px
}
.report-paper {
    padding:17px 12px
}
.example-arrow {
    width:20px
}
.two-cards {
    grid-template-columns:1fr
}
.narrow-page {
    margin-top:5px
}
.narrow-page h1,.section-page h1,.sample-page h1 {
    font-size:32px
}
.lead {
    font-size:16px
}
.showcase {
    padding:18px;
    min-height:350px
}
.poster {
    padding:23px
}
.poster h2 {
    font-size:33px
}
.poster-art {
    opacity:.7
}
.section-aside {
    padding:22px
}
.workflow-steps {
    flex-direction:column
}
.sample-tiles {
    gap:18px
}
.sample-tiles .report-paper {
    max-height:230px
}
.brand-tile {
    height:200px
}
.sample-document {
    grid-template-columns:1fr;
    padding:22px;
    gap:30px
}
.sample-document>.report-paper {
    width:240px;
    margin:auto
}
.page-title-row {
    align-items:flex-start;
    flex-direction:column;
    gap:0
}
.page-title-row .button {
    margin-bottom:20px
}
.viewer-toolbar {
    padding:15px
}
.viewer-toolbar .button {
    width:100%
}
.prose,.feedback-form,.explanation {
    padding:22px
}
footer {
    flex-direction:column;
    align-items:flex-start;
    padding:20px 16px;
    gap:13px;
    font-size:11px
}
.brand-example h2 {
    font-size:32px
}
.northline {
    font-size:40px
}

}

@media(prefers-reduced-motion:reduce) {
    * {
    scroll-behavior:auto!important;
    transition:none!important
}

}


h1:focus {
    outline:none
}

.example-pair .report-kicker {
    margin-bottom:8px
}

.example-pair .report-paper h3 {
    font-size:13px;
    margin-bottom:6px
}

.example-pair .report-quarter {
    font-size:8px;
    color:#4a607e;
    margin:0 0 8px
}

.example-pair .report-rule {
    margin-bottom:8px;
    flex-shrink:0
}

.example-pair .report-chart {
    height:42px;
    min-height:25px;
    margin:10px 0 8px
}

.example-pair .report-paper small {
    margin-top:8px
}

.example-pair .report-donut {
    width:24px;
    height:24px
}

.example-pair .report-donut:after {
    inset:7px
}


/* WEB02: operational forms, service availability and retained job state. */
.workflow-panel { border-top: 1px solid var(--border, #3d4855); padding: 24px 18px; }
.workflow-panel h3 { margin: 0 0 18px; }
.settings-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; border: 0; margin: 0 0 20px; padding: 0; }
.settings-grid label { display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.settings-grid input,.settings-grid select { width: 100%; min-height: 44px; color: #eef2f7; background: #1d252f; border: 1px solid #536173; border-radius: 7px; padding: 10px; font: inherit; }
.settings-grid small,.muted-note { color: #b1bfce; line-height: 1.5; font-size: 12px; }
.wide-setting { grid-column: 1 / -1; }
.action-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 18px; }
.job-panel { background: #1d252f; border: 1px solid #536173; border-radius: 10px; padding: 20px; margin-top: 24px; overflow-wrap: anywhere; }
.job-panel h3 { text-transform: capitalize; margin: 0; }
.job-panel progress { display: block; width: 100%; height: 10px; margin-top: 10px; accent-color: #387feb; }
.job-panel details { margin-top: 18px; color: #b1bfce; font-size: 12px; }
.job-panel summary { cursor: pointer; margin-bottom: 10px; }
.state-badge { border: 1px solid #536173; border-radius: 20px; padding: 5px 10px; color: #b1bfce; font-size: 12px; }
.service-rows { margin-top: 24px; }
.service-rows > div { display: flex; justify-content: space-between; gap: 20px; padding: 16px 0; border-top: 1px solid #3d4855; }
.service-rows span { color: #b1bfce; text-align: right; }
button:disabled { opacity: .5; cursor: not-allowed; }
@media (max-width: 600px) { .settings-grid { grid-template-columns: 1fr; } .workflow-panel { padding: 20px 8px; } }