/* Portal design tokens are shared across login, Mobile Office and account screens. */
/* Keep decorative orbits within the hero without changing table scrolling or keyboard focus. */
.home-hero {
    overflow-x: clip;
}
.hero-copy {
    min-width: 0;
}
.home-hero .floating-tag {
    right: 8px;
}
:root {
    --ink: #163c38;
    --muted: #647775;
    --teal: #137d70;
    --teal-dark: #0d6258;
    --paper: #f5f8f7;
    --line: #dce5e2;
    --orange: #df7751;
    --white: #fff;
    --button-grey: #edeaeb;
    --button-grey-hover: #dfdcdd;
    --shadow: 0 16px 55px #183f3810;
}
* {
    box-sizing: border-box;
}
html {
    font-size: 16px;
    scroll-behavior: smooth;
}
body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: Arial,Helvetica,sans-serif;
    line-height: 1.55;
}
a {
    color: var(--teal);
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
button,input,select {
    font: inherit;
}
button,a,input,select {
    touch-action: manipulation;
}
button {
    cursor: pointer;
}
button:disabled {
    opacity: .5;
    cursor: not-allowed;
}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible {
    outline: 3px solid #dc8c36;
    outline-offset: 4px;
}
h1,h2,h3,p {
    margin-top: 0;
}
h1 {
    font-size: clamp(2rem,4vw,3.25rem);
    line-height: 1.08;
    letter-spacing: -1.6px;
    margin-bottom: 16px;
}
h2 {
    font-size: 1.35rem;
    letter-spacing: -.35px;
    margin-bottom: 8px;
}
h3 {
    font-size: 1.05rem;
    margin-bottom: 5px;
}
.muted {
    color: var(--muted);
}
.small {
    font-size: .82rem;
}
.strong {
    font-weight: 700;
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.skip-link {
    position: absolute;
    top: -80px;
    left: 20px;
    background: var(--ink);
    color: white;
    padding: 14px;
    z-index: 10;
}
.skip-link:focus {
    top: 12px;
}
.site-header {
    background: #ffffffd9;
    border-bottom: 1px solid var(--line);
}
.header-inner {
    max-width: 1240px;
    min-height: 94px;
    margin: auto;
    padding: 20px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--ink);
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -1px;
}
.brand:hover {
    text-decoration: none;
}
.brand-mark {
    width: 42px;
    height: 42px;
    background: var(--orange);
    color: white;
    display: grid;
    place-items: center;
    border-radius: 12px;
    font-size: 2rem;
    line-height: 1;
}
.brand-sub {
    display: block;
    font-size: .59rem;
    letter-spacing: 1.8px;
    font-weight: 400;
}
.header-inner nav {
    display: flex;
    gap: 26px;
    align-items: center;
    font-size: .86rem;
}
.header-inner nav a {
    color: var(--ink);
}
.nav-signin {
    border: 1px solid var(--line);
    border-radius: 7px;
    padding: 10px 17px;
}
.page-container {
    max-width: 1240px;
    padding: 44px 40px 80px;
    margin: auto;
    min-height: calc(100vh - 190px);
}
.site-footer {
    max-width: 1240px;
    padding: 26px 40px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    gap: 24px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: .75rem;
}
.eyebrow,.section-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .67rem;
    font-weight: 700;
    letter-spacing: 1.8px;
    color: var(--teal);
    margin-bottom: 20px;
}
.section-tag {
    color: var(--muted);
    font-size: .6rem;
    margin-bottom: 10px;
}
.tiny-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--teal);
}
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    min-height: 48px;
    padding: 12px 22px;
    border-radius: 7px;
    border: 1px solid transparent;
    background: var(--button-grey);
    color: var(--ink);
    font-weight: 600;
    font-size: .9rem;
    transition: background .15s,transform .15s;
}
.button:hover {
    background: var(--button-grey-hover);
    text-decoration: none;
    transform: translateY(-1px);
}
.primary {
    background: var(--teal);
    color: #fff;
}
.primary:hover {
    background: var(--teal-dark);
    color: #fff;
}
.secondary,.provider {
    color: var(--ink);
    border-color: var(--line);
}
.secondary { background: var(--button-grey); }
.secondary:hover { background: var(--button-grey-hover); }
.provider { background: var(--white); }
.provider:hover {
    background: #f1f7f5;
}
.full {
    width: 100%;
}
.text-link {
    font-size: .88rem;
    font-weight: 600;
}
.page-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 30px;
}
.page-heading h1 {
    font-size: 2.8rem;
}
.page-heading p {
    margin-bottom: 0;
}
.pill {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 20px;
    background: #e2f1eb;
    color: #23684f;
    font-size: .72rem;
    white-space: nowrap;
}
.pill.neutral {
    color: #776b50;
    background: #f0ede4;
}
.panel,.search-panel,.metric {
    background: white;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 26px;
    margin-bottom: 26px;
    box-shadow: 0 5px 18px #183f3804;
}
.search-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.search-panel p {
    font-size: .84rem;
    margin-bottom: 0;
}
.inline-form {
    display: flex;
    gap: 12px;
}
.inline-form input {
    max-width: 190px;
}
.field {
    margin: 22px 0;
}
.field label {
    font-weight: 600;
    font-size: .85rem;
    display: block;
    margin-bottom: 7px;
}
input:not([type=checkbox]):not([type=radio]),select {
    width: 100%;
    border: 1px solid #bfcec9;
    border-radius: 6px;
    padding: 12px 14px;
    background: white;
    color: var(--ink);
}
input::placeholder {
    color: #7b8a84;
}
.check {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: .84rem;
    margin: 10px 0 25px;
}
.check input {
    width: 17px;
    height: 17px;
    accent-color: var(--teal);
}
.validation {
    color: #a23528;
    font-size: .86rem;
}
.validation ul {
    padding-left: 20px;
}
.notice {
    background: #f4efe4;
    border: 1px solid #e7dcc6;
    padding: 14px;
    border-radius: 6px;
    color: #776039;
    font-size: .85rem;
    margin: 20px 0;
}
.success {
    background: #e9f5ef;
    border-color: #c4e1d0;
    color: #246149;
}
.section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 16px;
}
.section-heading h2,.section-heading p {
    margin-bottom: 0;
}
.section-heading .section-tag {
    margin: 0;
}
.portal-section {
    margin-top: 34px;
}
.tool-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 14px;
}
.tool-card {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 20px 16px;
    background: white;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--ink);
    transition: border-color .15s,box-shadow .15s;
}
.tool-card:hover {
    border-color: var(--teal);
    box-shadow: var(--shadow);
    text-decoration: none;
}
.tool-card h3 {
    font-size: .93rem;
}
.tool-card p {
    font-size: .74rem;
    color: var(--muted);
    margin: 0;
}
.tool-icon {
    width: 36px;
    height: 36px;
    background: #e6f1ed;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: var(--teal);
    flex-shrink: 0;
}
.tool-arrow {
    margin-left: auto;
    color: var(--teal);
}
.metric-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 20px;
}
.metric span,.metric small {
    display: block;
    color: var(--muted);
    font-size: .8rem;
}
.metric strong {
    display: block;
    font-size: 2.3rem;
    line-height: 1.4;
    margin: 6px 0;
}
.metric small {
    font-size: .7rem;
}
.table-scroll {
    overflow-x: auto;
}
table {
    width: 100%;
    border-collapse: collapse;
    font-size: .83rem;
    text-align: left;
    white-space: normal;
}
th {
    background: #f6f8f7;
    color: var(--muted);
    font-weight: 500;
}
td,th {
    padding: 15px 12px;
    border-bottom: 1px solid var(--line);
}
thead button {
    background: none;
    border: 0;
    color: inherit;
    font-size: inherit;
    padding: 0;
}
tbody tr:last-child td {
    border-bottom: 0;
}
/* Account rows open in the current tab; their explicit links retain keyboard access. */
[data-account-row] { cursor: pointer; }
[data-account-row]:hover, [data-account-row]:focus-within { background: #edf5f1; }
.empty {
    text-align: center;
    color: var(--muted);
    padding: 36px;
}
.invoice-chart {
    display: block;
    width: 100%;
    max-height: 230px;
}
.chart-values {
    display: grid;
    grid-template-columns: repeat(6,1fr);
    gap: 8px;
    font-size: .7rem;
    color: var(--muted);
    text-align: center;
}
.chart-values strong {
    display: block;
    color: var(--ink);
    font-weight: 500;
}
.detail-list {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: 16px;
    font-size: .86rem;
}
.detail-list dt {
    color: var(--muted);
}
.detail-list dd {
    margin: 0;
}
.job-list {
    font-size: .88rem;
    padding-left: 20px;
}
.job-list li {
    padding: 6px;
}
.auth-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 80px;
    max-width: 1000px;
    margin: 35px auto 20px;
}
.auth-intro h1 {
    font-size: 5rem;
    letter-spacing: -3px;
}
.auth-intro p {
    font-size: 1.06rem;
    line-height: 1.8;
    color: var(--muted);
}
.intro-line {
    width: 48px;
    height: 3px;
    background: var(--orange);
    margin: 35px 0 22px;
}
.auth-intro>span.muted {
    font-size: .75rem;
}
.auth-card {
    background: white;
    padding: 38px;
    border: 1px solid var(--line);
    border-radius: 15px;
    box-shadow: var(--shadow);
}
.auth-card h1,.auth-card h2 {
    font-size: 1.8rem;
    letter-spacing: -.6px;
    line-height: 1.2;
}
.auth-card .muted {
    font-size: .88rem;
    margin-bottom: 28px;
}
.auth-card .provider {
    margin-bottom: 12px;
}
.provider {
    justify-content: flex-start;
    gap: 16px;
}
.provider-mark {
    width: 23px;
    text-align: center;
    font-size: 1.15rem;
    font-weight: 700;
}
.xero {
    color: #168bc4;
}
.qbo {
    color: #148d39;
}
.microsoft {
    color: #d0783a;
}
.divider {
    border-top: 1px solid var(--line);
    text-align: center;
    margin: 29px 0 25px;
    height: 1px;
}
.divider span {
    position: relative;
    top: -13px;
    padding: 0 15px;
    background: white;
    color: var(--muted);
    font-size: .76rem;
}
.auth-foot {
    font-size: .75rem;
    color: var(--muted);
    text-align: center;
    margin: 22px 0 0;
}
.single-auth {
    max-width: 470px;
    margin: 24px auto;
}
.back-link {
    display: inline-block;
    font-size: .8rem;
    margin: 12px 0 22px;
}
.code-form {
    padding-top: 8px;
}
.home-hero {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 65px;
    align-items: center;
    padding: 35px 0 65px;
}
.hero-copy h1 {
    font-size: clamp(3.2rem,5.5vw,5.15rem);
    letter-spacing: -3.2px;
    line-height: 1.05;
    margin: 12px 0 28px;
}
.hero-copy h1>span {
    color: var(--teal);
}
.hero-copy p {
    color: var(--muted);
    font-size: 1.05rem;
    line-height: 1.85;
}
.hero-actions {
    display: flex;
    align-items: center;
    gap: 27px;
    margin: 32px 0 48px;
}
.product-line {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    font-size: .6rem;
    letter-spacing: 1.3px;
    color: #7f908a;
}
.hero-illustration {
    position: relative;
    padding: 25px 14px 35px;
    min-width: 0;
}
.orbit {
    position: absolute;
    border: 1px solid #dce6df;
    border-radius: 50%;
    z-index: -1;
}
.orbit-one {
    inset: -30px -15px -40px -30px;
    transform: rotate(-13deg);
}
.orbit-two {
    inset: 2px -40px -6px -7px;
    transform: rotate(18deg);
}
.illustration-card {
    padding: 28px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 25px 70px #244b3820;
    border: 1px solid #d9e3de;
    transform: rotate(-3deg);
}
.mini-card-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .6rem;
    letter-spacing: 1.1px;
    color: #7f908a;
}
.mini-logo {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: var(--orange);
    color: #fff;
    text-align: center;
    font-size: 1.4rem;
    line-height: 28px;
}
.mini-dots {
    margin-left: auto;
    font-size: 1.2rem;
}
.illustration-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 29px 0 2px;
    letter-spacing: -.6px;
}
.illustration-subtitle {
    font-size: .76rem;
    color: var(--muted);
    margin-bottom: 25px;
}
.illustration-row {
    display: flex;
    gap: 13px;
    align-items: center;
    border: 1px solid #e4ebe7;
    border-radius: 8px;
    padding: 17px 13px;
    margin: 11px 0;
}
.illustration-row strong {
    font-size: .8rem;
    display: block;
}
.illustration-row small {
    font-size: .65rem;
    color: var(--muted);
}
.illustration-icon {
    display: grid;
    place-items: center;
    width: 33px;
    height: 33px;
    border-radius: 8px;
    background: #e7f3ed;
    color: var(--teal);
}
.illustration-icon.orange {
    background: #fbede4;
    color: var(--orange);
}
.illustration-icon.blue {
    background: #edf1f7;
    color: #4a6894;
}
.mini-arrow {
    color: #80968b;
    margin-left: auto;
}
.illustration-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .65rem;
    color: var(--muted);
    margin-top: 25px;
}
.floating-tag {
    position: absolute;
    bottom: 0;
    right: -8px;
    padding: 15px 21px;
    background: var(--ink);
    color: white;
    border-radius: 9px;
    box-shadow: var(--shadow);
    font-size: .75rem;
    transform: rotate(2deg);
}
.floating-tag span {
    color: #94c5ad;
    margin-right: 9px;
}
.home-tools {
    border-top: 1px solid var(--line);
    padding-top: 34px;
}
.home-tools h2 {
    font-size: 1.5rem;
}
.home-tools .section-heading>.muted {
    font-size: .8rem;
}
.home-tool-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    margin-top: 24px;
}
.home-tool {
    border-right: 1px solid var(--line);
    padding: 15px 28px 8px;
    color: var(--ink);
}
.home-tool:first-child {
    padding-left: 0;
}
.home-tool:last-child {
    border: 0;
}
.home-tool:hover {
    text-decoration: none;
}
.home-tool p {
    font-size: .83rem;
    color: var(--muted);
    max-width: 260px;
    margin-bottom: 25px;
}
.home-tool h3 {
    font-size: 1.2rem;
    margin-bottom: 12px;
}
.home-tool:hover h3 {
    text-decoration: underline;
}
.home-tool .text-link {
    color: var(--teal);
    font-size: .78rem;
}
@media(max-width:1000px) {
    .header-inner,.page-container,.site-footer {
        padding-left: 28px;
        padding-right: 28px;
    }
    .tool-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
    .home-hero {
        gap: 35px;
    }
    .hero-copy h1 {
        font-size: 3.6rem;
    }
    .auth-wrap {
        gap: 40px;
    }
    .auth-intro h1 {
        font-size: 4rem;
    }
    .hero-actions {
        gap: 16px;
        flex-wrap: wrap;
    }
    .floating-tag {
        right: 0;
    }
    .orbit {
        display: none;
    }
}
@media(max-width:700px) {
    .header-inner {
        min-height: 80px;
        padding: 18px 20px;
    }
    .header-inner nav {
        gap: 14px;
        font-size: .76rem;
    }
    .brand {
        font-size: 1.3rem;
    }
    .brand-mark {
        width: 34px;
        height: 34px;
    }
    .brand-sub {
        font-size: .5rem;
    }
    .page-container {
        padding: 30px 20px 50px;
    }
    .site-footer {
        padding: 22px 20px;
        flex-wrap: wrap;
        gap: 8px;
    }
    .page-heading {
        align-items: flex-start;
        flex-wrap: wrap;
    }
    .page-heading h1 {
        font-size: 2.2rem;
    }
    .auth-wrap {
        display: block;
        margin: 10px auto;
        max-width: 470px;
    }
    .auth-intro {
        margin-bottom: 26px;
    }
    .auth-intro h1 {
        font-size: 3rem;
    }
    .auth-intro h1 br {
        display: none;
    }
    .auth-intro .intro-line,.auth-intro>span.muted {
        display: none;
    }
    .auth-card {
        padding: 28px 23px;
    }
    .single-auth {
        margin: 0 auto;
    }
    .tool-grid,.metric-grid {
        grid-template-columns: 1fr;
    }
    .metric {
        margin-bottom: 0;
    }
    .metric-grid {
        margin-bottom: 26px;
        gap: 12px;
    }
    .inline-form {
        width: 100%;
    }
    .inline-form input {
        min-width: 0;
        max-width: none;
    }
    .search-panel {
        padding: 20px;
    }
    .inline-form .button {
        white-space: nowrap;
        padding: 12px;
    }
    .section-heading {
        flex-wrap: wrap;
        gap: 12px;
    }
    .detail-list {
        grid-template-columns: 1fr;
        gap: 7px;
    }
    .detail-list dd {
        margin-bottom: 12px;
    }
    .home-hero {
        grid-template-columns: 1fr;
        padding: 15px 0 40px;
        gap: 30px;
    }
    .hero-copy h1 {
        font-size: 3.6rem;
        letter-spacing: -2.2px;
    }
    .hero-actions {
        margin-bottom: 28px;
    }
    .hero-illustration {
        max-width: 430px;
        margin: auto;
        width: 100%;
        padding: 15px 15px 30px;
    }
    .illustration-card {
        transform: none;
    }
    .home-tool-grid {
        grid-template-columns: 1fr;
        margin-top: 12px;
    }
    .home-tool {
        border-right: 0;
        border-bottom: 1px solid var(--line);
        padding: 25px 0;
    }
    .home-tool p {
        max-width: none;
    }
    .home-tools .section-heading {
        align-items: flex-start;
    }
    .hero-copy p {
        font-size: .97rem;
    }
    .panel {
        padding: 20px;
    }
    .chart-values {
        font-size: .6rem;
        gap: 3px;
    }
}
@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto;
    }
    .button,.tool-card {
        transition: none;
    }
    .button:hover {
        transform: none;
    }
}
/* Native account forms retain the portal's cards, spacing and responsive tables. */
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin:1.25rem 0; }
.form-grid label { display:flex; flex-direction:column; gap:.4rem; font-weight:600; }
.form-grid label.checkbox { flex-direction:row; align-items:center; }
.form-grid label.wide { grid-column:1/-1; }
.form-grid input, .form-grid select, .form-grid textarea { width:100%; padding:.75rem; border:1px solid #cad8d6; border-radius:8px; font:inherit; background:#fff; }
.form-grid .checkbox input { width:auto; }
/* Both account options share the final right-hand cell, using the space below the password option. */
.account-options { display:flex; flex-direction:column; justify-content:center; gap:20px; min-width:0; }
.form-grid .account-options label.checkbox { align-items:flex-start; }
.account-options input { flex:0 0 auto; margin-top:4px; }
.account-admin-flag small { display:block; font-weight:400; margin-top:4px; }
.actions { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; margin:1rem 0; }
.preserve-lines { white-space:pre-wrap; overflow-wrap:anywhere; }
.validation-summary-errors { color:#a33822; }
@media(max-width:640px) { .form-grid { grid-template-columns:1fr; } }
@media print { .site-header,.site-footer,.page-heading,.skip-link { display:none; } .page-container { width:100%;padding:0; } .invoice-print { border:none;box-shadow:none; } }

/* Mobile Office retains the original large-button order and paired Simply/Lite columns. */
.office-classic { max-width:640px; margin:0 auto; }
.office-search-form { display:grid; gap:10px; font-size:1.25rem; }
.office-search-label { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.office-search-label label { white-space:nowrap; }
.office-search-field { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; }
.office-search-form .office-search-field input { width:100%; min-width:0; padding:8px; border:1px solid var(--line); border-radius:6px; }
.office-search-form .button { padding:8px 16px; }
.office-version { text-decoration:underline; font-size:1.5rem; }
.office-search .small { margin:7px 0 25px; }
.office-buttons { display:grid; gap:17px; margin-bottom:28px; }
.office-row { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:12px; }
.office-gap { margin-top:30px; }
.office-button { display:flex; justify-content:center; align-items:center; min-height:45px; padding:5px 10px; border:1px solid #bbc9c5; border-radius:6px; background:#edf1ef; color:var(--ink); font-size:clamp(1.1rem,5vw,1.75rem); text-align:center; line-height:1.25; }
.office-button:hover { background:#e0eae5; text-decoration:none; }
.office-button.unavailable, .office-button:disabled { opacity:.6; cursor:default; }
.office-admin { color:#c33c19; }
.office-text-row .office-button { background:none; border:0; text-decoration:underline; }
.office-diagnostics { margin:30px 0; }

/* Admin home follows the original dashboard's two columns and compact account lists. */
.dashboard-title { background:#0f7949; color:white; padding:14px 20px; font-size:1.1rem; letter-spacing:0; border-radius:6px; }
.dashboard-menu { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin:20px 0; }
.dashboard-menu .button { padding:7px 17px; font-size:.8rem; }
.dashboard-tabs { display:flex; flex-wrap:nowrap; gap:6px; margin:24px 0 0; max-width:100%; overflow-x:auto; }
.dashboard-tabs a { flex:0 0 auto; white-space:nowrap; padding:12px; border:1px solid var(--line); border-radius:8px 8px 0 0; background:#edf3f1; text-decoration:none; }
.dashboard-tabs a.active { background:#0f7949; border-color:#0f7949; color:white; font-weight:bold; }
.dashboard-tab-panel { border-top-left-radius:0; margin-top:0; }
.dashboard-tab-panel h2 { font-size:1.2rem; margin-bottom:14px; }
.dashboard-tab-panel .dashboard-menu { justify-content:flex-start; }
.system-data-fields { margin:24px 0; }
.system-data-price { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.diagnostic-text { white-space:pre-wrap; overflow-wrap:anywhere; }
.system-data-field { display:grid; grid-template-columns:minmax(160px,220px) minmax(200px,1fr) minmax(180px,1fr); gap:16px; align-items:start; margin:18px 0; }
.system-data-field>label { font-weight:bold; }
.system-data-field>label small { display:block; font-weight:normal; color:var(--muted); }
.system-data-field input:not([type=checkbox]), .system-data-field textarea, .system-data-field select { width:100%; min-width:0; }
.system-data-null { display:flex; gap:8px; align-items:center; margin-top:6px; font-size:.8rem; }
.system-data-null input { width:auto; }
@media(max-width:850px) { .system-data-field { grid-template-columns:1fr 2fr; } .system-data-field>p { grid-column:2; margin-top:0; } }
@media(max-width:560px) { .system-data-field { grid-template-columns:1fr; gap:6px; } .system-data-field>p { grid-column:1; } }
.dashboard-search { max-width:600px; margin:20px auto; text-align:center; }
.dashboard-search input { padding:8px; border:1px solid var(--line); border-radius:5px; max-width:65%; }
.dashboard-search p { margin:3px 0; }
.dashboard-columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:35px; }
.dashboard-columns section { margin-bottom:26px; }
.dashboard-columns h2 { font-size:1.1rem; font-weight:500; letter-spacing:0; margin-bottom:7px; }
.dashboard-columns h2 small { font-size:.8rem; }
.dashboard-list { list-style:none; padding:0; margin:0; font-size:.9rem; line-height:1.6; overflow-wrap:anywhere; }
.dashboard-list a { text-decoration:underline; }
.dashboard-list time { font-size:.8rem; }
.dashboard-list small { font-size:.75rem; }
.dashboard-list li { margin-bottom:4px; }
.turnover-total { font-size:.85rem; font-weight:600; margin:5px 0; }
.turnover-total strong { color:#bf2e24; }

/* Account summary keeps the established header, sections and one card per licence. */
.account-summary { background:white; border:1px solid var(--line); border-radius:10px; padding:22px; box-shadow:var(--shadow); }
.account-summary-header { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-bottom:27px; }
.account-summary-brand { flex:1; min-width:0; }
.account-summary-brand img { display:block; width:100%; max-width:541px; height:auto; }
.account-summary-brand>a { display:block; font-size:.85rem; text-decoration:underline; }
.account-summary-heading { max-width:42%; text-align:right; font-size:.85rem; }
.account-summary-heading p { margin:0 0 8px; }
.account-summary-heading h1 { font-size:1.45rem; letter-spacing:0; font-weight:500; }
.account-summary .button { padding:7px 13px; border-radius:9px; background:#edeaeb; color:#35434a; font-size:.8rem; line-height:1.2; min-height:30px; }
.account-section>h2 { color:#697985; font-size:1.3rem; letter-spacing:.6px; margin:13px 0 9px; }
.account-section>.panel { padding:20px 15px; margin:0 0 12px 12px; border-color:#e2e7ed; box-shadow:0 6px 22px #1128270c; }
.account-kv { display:grid; grid-template-columns:125px minmax(0,1fr); gap:8px 12px; font-size:.86rem; margin:0; }
.account-kv dt { color:#687889; }
.account-kv dd { margin:0; overflow-wrap:anywhere; }
.account-payment { color:#278216; }
.admin-actions .button,.button.admin-button,.account-summary .admin-actions .button,.account-summary .admin-button { border:1px solid #0f5831; }
.account-summary .purchase-button { background:#278516; color:white; }
.account-summary .actions { gap:7px; margin:14px 0 0; }
.account-note { border:1px solid #e2e7ed; border-radius:12px; padding:12px; margin:13px 0 0 12px; }
.account-note h3 { color:#687889; font-size:1.15rem; margin:0 0 7px; }
.account-note p { margin:0; font-size:.85rem; }
.account-note-dialog { width:min(560px, calc(100vw - 40px)); max-height:calc(100dvh - 40px); box-sizing:border-box; padding:28px; border:1px solid var(--line); border-radius:16px; background:#fff; color:var(--ink); box-shadow:0 20px 70px #163b3540; }
.account-note-dialog::backdrop { background:#163b3573; }
.account-note-dialog h2 { margin:0 0 8px; font-size:1.5rem; }
.account-note-dialog-content { max-height:55dvh; overflow:auto; overflow-wrap:anywhere; margin:24px 0; }
.account-note-dialog-content p { margin:0 0 12px; }
.license-card h3 { font-size:1.1rem; margin:0 0 5px; }
.license-card p { margin:4px 0; }
.license-description { padding-inline-start:24px; }
.license-description a { display:inline; margin-inline-start:.4em; white-space:nowrap; }
.license-stop { color:#c32621; font-size:.85rem; font-weight:600; }
.account-activity { margin-top:25px; }
.account-activity>summary { cursor:pointer; margin-bottom:20px; }
@media(max-width:700px) {
    .dashboard-columns { grid-template-columns:1fr; gap:0; }
    .account-summary { padding:16px 10px; }
    .account-summary-header { flex-wrap:wrap; }
    .account-summary-brand { flex-basis:100%; }
    .account-summary-heading { max-width:none; width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; text-align:left; }
    .account-summary-heading p { flex:1; }
    .account-summary-heading h1 { flex-basis:100%; }
    .account-section>.panel { margin-left:0; }
    .account-kv { grid-template-columns:95px minmax(0,1fr); }
    .office-search-form { font-size:1rem; }
}

/* Original form guidance stays next to its fields without relying on a legacy control. */
.form-grid label small { display:block; color:var(--muted); font-weight:normal; line-height:1.5; }
.form-grid > .wide { grid-column:1/-1; }
.form-instructions { padding:16px; border:1px solid var(--border); border-radius:12px; background:#f5f8f7; }
.form-instructions p { margin:0 0 10px; }
.form-instructions p:last-child { margin-bottom:0; }
.form-instructions h2 { font-size:1.1rem; margin-top:0; }
.account-page-header { margin-bottom:28px; }
[hidden] { display:none !important; }
.chart-container { position:relative; }
.chart-tooltip { position:absolute; z-index:2; pointer-events:none; background:#173d39; color:white; padding:8px 12px; border-radius:8px; font-size:.85rem; box-shadow:0 4px 12px #173d3928; white-space:nowrap; }
[data-chart-value]:focus { outline:2px solid #ce6a35; outline-offset:3px; }

/* Preserve the original renewal page's menu rows and compact, text-first reports. */
.renewals-classic { max-width:1040px; margin:0 auto; padding:10px; border:8px solid #eee; border-radius:5px; background:white; color:#444; font:14px/1.5 Arial,sans-serif; box-shadow:0 0 10px #4e707c40; }
.renewals-classic h1 { padding:11px 23px; margin:0 0 24px; background:#0f793f; color:white; font-size:16px; font-weight:normal; letter-spacing:0; }
.renewals-classic h2 { font-size:16px; font-weight:normal; letter-spacing:0; }
.renewal-controls { text-align:center; }
.renewal-menu-row { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin-bottom:24px; }
.renewals-classic .button { padding:7px 12px; min-height:32px; border:1px solid #006b31; border-radius:4px; background:#0f793f; color:white; font-size:13px; }
.renewals-classic .unrelated { background:#777; border-color:#666; }
.renewal-inputs { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:7px; margin:0 0 24px; }
.renewal-inputs label { font-weight:normal; }
.renewal-inputs input { width:130px; padding:5px; border:1px solid #888; border-radius:2px; font:inherit; }
.renewal-inputs #Rpi { width:70px; }
.renewal-list-line { padding-left:8px; overflow-wrap:anywhere; }
.renewal-detail blockquote { margin:12px 0 18px; padding-left:28px; }
.renewals-classic a:not(.button) { color:#0283b2; text-decoration:underline; }
.renewal-total { margin:28px 0; }
.renewal-instructions { margin-top:32px; overflow-wrap:anywhere; }
.brand-website img { display:block; width:260px; height:auto; max-width:42vw; }
.brand-website .brand-sub { margin-top:6px; }

/* One field per row, with its instruction immediately to the right on desktop. */
.license-field-list { display:grid; grid-template-columns:1fr; gap:12px; }
.form-grid.license-field-list label { display:grid; grid-template-columns:minmax(170px,220px) minmax(180px,280px) minmax(0,1fr); gap:16px; align-items:center; }
.license-field-list label>span { text-align:right; }
.form-grid.license-field-list label small { font-size:.9rem; }
.license-field-presets { padding-left:236px; }
.license-field-heading { display:grid; grid-template-columns:minmax(366px,516px) minmax(0,1fr); gap:16px; align-items:center; margin:16px 0 0; }
.license-field-heading h2 { font-size:1.1rem; margin:0; }
.license-field-heading p { font-size:.9rem; margin:0; }
.checkout-panel { max-width:900px; margin-inline:auto; }
.checkout-selection fieldset { border:1px solid var(--line); border-radius:10px; padding:16px; margin:20px 0; }
.checkout-version { display:flex; align-items:flex-start; gap:12px; margin:14px 0; }
.checkout-version input { flex:0 0 auto; margin-top:5px; }
.checkout-version span { min-width:0; }
.checkout-selection>label { display:block; max-width:230px; font-weight:bold; }
.checkout-selection input[type=number] { display:block; width:100%; padding:10px; border:1px solid var(--line); border-radius:8px; font:inherit; }
.checkout-totals { display:grid; grid-template-columns:1fr auto; gap:10px 20px; padding:20px; background:var(--paper); border-radius:10px; }
.checkout-totals dd { margin:0; text-align:right; }
.checkout-calculation td:not(:nth-child(2)) { white-space:nowrap; }
.checkout-calculation td:nth-child(2) { min-width:290px; }
.checkout-calculation td p { margin:8px 0; }
.checkout-consent { margin:22px 0; align-items:flex-start; }
@media(max-width:850px) {
    .form-grid.license-field-list label { grid-template-columns:minmax(140px,180px) minmax(160px,1fr); }
    .license-field-list label small { grid-column:2; }
    .license-field-presets { padding-left:196px; }
    .license-field-heading { grid-template-columns:1fr; gap:8px; }
}
@media(max-width:560px) {
    .form-grid.license-field-list label { grid-template-columns:1fr; gap:6px; }
    .license-field-list label>span { text-align:left; }
    .license-field-list label small { grid-column:1; }
    .license-field-presets { padding-left:0; }
    .renewals-classic { border-width:3px; }
}

/* Checkout navigation follows the reading flow; primary actions sit at the right. */
.checkout-panel .checkout-calculation th,.checkout-panel .checkout-calculation td { border:1px solid #bfcec9; }
.checkout-actions { display:flex; flex-wrap:wrap; align-items:center; width:100%; }
.checkout-actions .checkout-next,.checkout-actions .checkout-pay-button { margin-left:auto; }
.button.checkout-pay-button { background:#0865c5; border-color:#0865c5; color:#fff; }
.button.checkout-pay-button:hover { background:#0052a3; border-color:#0052a3; }
.turnover-chart { overflow-x:auto; }
.turnover-chart svg { display:block; width:100%; }
.license-instructions { color:#b91c1c; }
.form-actions { display:flex; width:100%; gap:12px; align-items:center; flex-wrap:wrap; margin-top:20px; }
.form-actions > button { margin-left:auto; }
form > button:last-child:not(.full) { display:block; margin-left:auto; }
.account-header-actions { display:flex; gap:8px; justify-content:flex-end; }
.dashboard-test-account { display:flex; justify-content:flex-end; margin-top:-75px; margin-bottom:32px; }
.checkout-discount { color:#075b37; background:#e8f5ed; border-color:#9ecbb0; }
@media(max-width:900px) { .dashboard-test-account { margin:0 0 16px; } }
.invoice-footer { justify-content:flex-end; margin-top:20px; }
@media print { .invoice-footer { display:none; } }

.account-note p.account-note-alert,.account-note-dialog p.account-note-alert { background:#b91c1c; color:#fff; padding:10px 12px; border-radius:6px; margin:8px 0; }
.account-note p:empty { min-height:1em; }