@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/assets/fonts/open-sans-400.ttf") format("truetype");
}

@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/assets/fonts/open-sans-600.ttf") format("truetype");
}

@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/assets/fonts/open-sans-700.ttf") format("truetype");
}

:root {
    color-scheme: light;
    --bg: #e3eef8;
    --panel: #ffffff;
    --ink: #14213f;
    --muted: #60708d;
    --line: #dbe5f0;
    --blue: #0f9a9d;
    --blue-dark: #087f82;
    --cyan: #17c8c3;
    --teal: #12aaa3;
    --violet: #6e56e8;
    --warn: #b45309;
}

* {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

html {
    min-height: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(circle at 18% 0%, rgba(15, 154, 157, 0.16), transparent 34%),
        radial-gradient(circle at 88% 28%, rgba(111, 212, 238, 0.18), transparent 30%),
        linear-gradient(180deg, #f2f8fc 0%, var(--bg) 100%);
    color: var(--ink);
    font: 0.9375rem/1.45 "Open Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.app {
    width: min(93.75rem, calc(100% - 2.25rem));
    margin: 0 auto;
    padding: 1.125rem 0 1.375rem;
    flex: 1 0 auto;
}

.siteFooter {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: min(93.75rem, calc(100% - 2.25rem));
    min-height: 3.625rem;
    margin: auto auto 0;
    padding: 0.875rem 0 1.125rem;
    color: var(--muted);
    font-size: 0.8125rem;
    font-weight: 600;
}

.footerLinks {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.siteFooter a {
    color: inherit;
    text-decoration: underline;
}

.siteFooter a:hover {
    color: var(--teal);
}

.cookieNotice {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 30;
    width: min(23rem, calc(100vw - 2rem));
    padding: 1.25rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 1.25rem 3.75rem rgba(20, 33, 63, .18);
    color: var(--ink);
    font-size: 0.8125rem;
}

.cookieNotice p {
    margin: 0 0 1rem;
    line-height: 1.55;
}

.cookieNotice a {
    color: var(--ink);
    font-weight: 700;
}

.cookieNotice button {
    min-height: 2.5rem;
    padding: 0.5625rem 1.125rem;
}

.hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 24.375rem;
    min-height: 16.25rem;
    overflow: hidden;
    border-radius: 1.125rem;
    background:
        radial-gradient(circle at 76% 18%, rgba(255, 255, 255, 0.24) 0 4.375rem, transparent 4.5rem),
        radial-gradient(circle at 72% 60%, rgba(255, 255, 255, 0.22) 0 6rem, transparent 6.125rem),
        linear-gradient(115deg, #fafdff 0%, #dff5ff 36%, #26d5c5 62%, #268cf1 100%);
}

.hero::before {
    content: "";
    position: absolute;
    right: 2.625rem;
    top: 5.5rem;
    width: 5.75rem;
    height: 4.5rem;
    opacity: .35;
    background-image: radial-gradient(circle, rgba(255, 255, 255, .68) 0.125rem, transparent 0.125rem);
    background-size: 1.125rem 1.125rem;
}

.heroText {
    position: relative;
    z-index: 1;
    padding: 2.625rem 4.125rem;
}

.hero h1 {
    max-width: 42.5rem;
    margin: 0 0 1.875rem;
    color: #121d3c;
    font-size: clamp(1.75rem, 2.5vw, 2.425rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: 0;
}

.hero p {
    max-width: 38.75rem;
    margin: 0;
    color: #455371;
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.45;
}

.siteMenu {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.625rem;
}

.siteMenuItem {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    min-height: 2.375rem;
    padding: 0 1rem;
    border-radius: 1.875rem;
    background: rgba(255, 255, 255, .65);
    color: #52607a;
    font-size: 0.875rem;
    font-weight: 700;
}

.siteMenuItem {
    color: var(--teal);
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: underline;
}

.siteMenuItem::before {
    color: var(--blue);
    font-size: 1.25rem;
    line-height: 1;
}

.iconShield::before {
    content: "✓";
    color: var(--teal);
}

.heroArt {
    position: relative;
    z-index: 1;
    min-height: 16.25rem;
}

.browserMock {
    position: absolute;
    right: 6rem;
    top: 2.625rem;
    width: 14rem;
    height: 10.5rem;
    border-radius: 0.75rem;
    background: linear-gradient(180deg, #ffffff 0%, #eef6ff 100%);
    overflow: hidden;
}

.browserMock::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 2rem;
    background: linear-gradient(90deg, #1a7ef1, #31a4ff);
}

.browserMock > span {
    position: relative;
    z-index: 1;
    display: inline-block;
    width: 0.5625rem;
    height: 0.5625rem;
    margin: 0.8125rem 0 0 0.5rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .85);
}

.node,
.line {
    position: absolute;
    border-radius: 0.25rem;
}

.node {
    width: 1.75rem;
    height: 1.375rem;
    border: 0.1875rem solid #69a0f3;
    background: #dbeafe;
}

.node.root {
    left: 6.375rem;
    top: 3.625rem;
    width: 1.875rem;
    height: 1.5rem;
    background: #77a5f4;
    border-color: #77a5f4;
}

.node.child.one {
    left: 2.625rem;
    top: 7.625rem;
}

.node.child.two {
    left: 6.4375rem;
    top: 7.625rem;
}

.node.child.three {
    left: 10.25rem;
    top: 7.625rem;
}

.line {
    background: #88b1f5;
}

.line.vertical {
    left: 7.25rem;
    top: 5.0625rem;
    width: 0.1875rem;
    height: 1.625rem;
}

.line.horizontal {
    left: 3.4375rem;
    top: 6.5625rem;
    width: 7.6875rem;
    height: 0.1875rem;
}

.line.down {
    top: 6.5625rem;
    width: 0.1875rem;
    height: 1.0625rem;
}

.line.down.one {
    left: 3.4375rem;
}

.line.down.two {
    left: 7.25rem;
}

.line.down.three {
    left: 11.0625rem;
}

.fileBadge {
    position: absolute;
    right: 2.75rem;
    top: 10.25rem;
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    min-height: 3.25rem;
    padding: 0 1.125rem;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, .95);
    color: #1b3f75;
    font-weight: 700;
}

.panel,
.sideCard {
    background: rgba(255, 255, 255, .92);
    border-radius: 1rem;
}

.errorApp {
    display: grid;
    place-items: center;
}

.errorPanel {
    width: min(48rem, 100%);
    padding: 3rem;
}

.errorCode {
    margin: 0 0 0.375rem;
    color: var(--teal);
    font-size: clamp(6.75rem, 15vw, 12.75rem);
    font-weight: 700;
    line-height: .9;
}

.errorPanel h1 {
    margin: 0 0 0.875rem;
    color: var(--ink);
    font-size: 3.25rem;
    font-weight: 700;
    line-height: 1.05;
    white-space: nowrap;
}

.errorPanel p:not(.eyebrow):not(.errorCode) {
    max-width: 34rem;
    margin: 0 0 1.75rem;
    color: var(--muted);
    font-size: 1rem;
}

.workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 29.375rem;
    gap: 1.5rem;
    align-items: start;
    margin-top: 1.5rem;
}

.mainColumn,
.sideColumn {
    display: grid;
    gap: 1.375rem;
}

.formPanel,
.status {
    padding: 1.875rem;
}

.contentPanel {
    margin-top: 1.5rem;
    padding: 2.25rem;
}

.workspace .contentPanel {
    margin-top: 0;
}

.contentPanel h1 {
    margin: 0 0 1rem;
    color: var(--ink);
    font-size: clamp(2rem, 4vw, 3.25rem);
    font-weight: 700;
    line-height: 1.08;
}

.contentPanel h2 {
    margin: 2rem 0 0.75rem;
    font-size: 1.25rem;
}

.contentPanel p,
.contentPanel li {
    color: var(--muted);
    font-size: 0.9375rem;
}

.contentPanel p {
    max-width: 56rem;
}

.grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 2.125rem;
    row-gap: 1.5rem;
}

.wide {
    grid-column: 1 / -1;
}

.field {
    position: relative;
    display: grid;
    gap: 0.5625rem;
    color: var(--ink);
    font-size: 0.875rem;
    font-weight: 700;
}

.labelText {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    min-height: 1.5rem;
    line-height: 1.25;
}

.labelText::before {
    display: inline-grid;
    width: 1.25rem;
    height: 1.25rem;
    place-items: center;
    color: #71809b;
    font-size: 1.125rem;
    font-weight: 500;
}

.fieldLink .labelText::before { content: none; }
.fieldPulse .labelText::before { content: "⌁"; }
.fieldClock .labelText::before { content: "◷"; }
.fieldHourglass .labelText::before { content: "⌛"; font-size: 0.9375rem; }
.fieldPlug .labelText::before { content: "⦿"; }
.fieldRepeat .labelText::before { content: "↻"; }
.fieldTimer .labelText::before { content: "◴"; }
.fieldFile .labelText::before { content: "□"; }
.fieldLayers .labelText::before { content: "▧"; }
.fieldUser .labelText::before { content: "♙"; }
.fieldCalendar .labelText::before { content: "□"; }
.fieldStar .labelText::before { content: "☆"; }
.fieldPlus .labelText::before { content: "+"; }
.fieldMinus .labelText::before { content: "−"; }

.settingsPanel .labelText::before {
    content: none;
}

.settingsChecks {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    padding-top: 0.25rem;
}

.settingCheck {
    grid-template-columns: 1.375rem 1fr;
    column-gap: 0.75rem;
    align-items: start;
    display: grid;
    color: var(--ink);
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.45;
    user-select: none;
}

.settingCheck input {
    width: 1.25rem;
    height: 1.25rem;
    min-height: 1.25rem;
    margin-top: 0.1875rem;
    padding: 0;
}

.settingCheck span,
.settingCheck small {
    grid-column: 2;
}

.settingCheck small {
    margin-top: 0.125rem;
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 400;
}

.hint,
.formNote,
.checks small,
.sideCard p,
.tipsCard li {
    color: var(--muted);
}

.hint {
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.35;
}

input,
select {
    width: 100%;
    min-height: 2.8125rem;
    border: 0.0625rem solid var(--line);
    border-radius: 0.4375rem;
    color: var(--ink);
    background: rgba(255, 255, 255, .86);
    padding: 0.625rem 0.9375rem;
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    transition: border-color .18s ease, background .18s ease;
}

input::placeholder {
    color: #9aa6b8;
}

input:focus,
select:focus {
    border-color: rgba(15, 154, 157, .68);
    background: #fff;
    outline: 0.25rem solid rgba(15, 154, 157, .12);
}

.checks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.0625rem 2.125rem;
    margin-top: 1.625rem;
}

.checks label {
    display: grid;
    grid-template-columns: 1.375rem 1fr;
    column-gap: 0.75rem;
    align-items: start;
    color: var(--ink);
    font-size: 0.875rem;
    font-weight: 700;
    user-select: none;
	cursor: pointer;
}

.checks input {
    width: 1.25rem;
    height: 1.25rem;
    min-height: 1.25rem;
    margin-top: 0.125rem;
}

input[type="checkbox"] {
    position: relative;
    flex: 0 0 auto;
    display: block;
    appearance: none;
    width: 1.25rem;
    min-width: 1.25rem;
    max-width: 1.25rem;
    height: 1.25rem;
    min-height: 1.25rem;
    padding: 0;
    border: 0.125rem solid #b9d1df;
    border-radius: 0.375rem;
    background: #fff;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease;
}

input[type="checkbox"]::after {
    content: "";
    position: absolute;
    left: 0.3125rem;
    top: 0.0625rem;
    width: 0.1875rem;
    height: 0.625rem;
    border: solid #fff;
    border-width: 0 0.1875rem 0.1875rem 0;
    opacity: 0;
    transform: rotate(45deg) scale(.72);
    transition: opacity .14s ease, transform .14s ease;
}

input[type="checkbox"]:checked {
    border-color: var(--teal);
    background: linear-gradient(135deg, #0f9a9d, #6fd4ee);
}

input[type="checkbox"]:checked::after {
    opacity: 1;
    transform: rotate(45deg) scale(1);
}

input[type="checkbox"]:focus-visible {
    outline: 0.1875rem solid rgba(15, 154, 157, .18);
    outline-offset: 0.125rem;
}

.checks span,
.checks small {
    grid-column: 2;
}

.checks small {
    margin-top: 0.125rem;
    font-size: 0.75rem;
    font-weight: 400;
}

.settingsPanel {
    margin-top: 1.5rem;
    color: var(--ink);
}

.settingsPanel summary {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    width: auto;
    min-width: 10rem;
    padding: 0.625rem 1.125rem;
    border: 0.0625rem solid var(--line);
    border-radius: 1.875rem;
    background: #fff;
    color: #40506c;
    cursor: pointer;
    font-size: 0.9375rem;
    font-weight: 700;
    list-style: none;
    transition: border-color .16s ease;
    user-select: none;
}

.settingsPanel summary::-webkit-details-marker {
    display: none;
}

.settingsPanel summary::before {
    content: "⚙";
    color: var(--blue);
    font-size: 1.625rem;
    font-weight: 700;
    line-height: 1;
}

.settingsPanel summary:hover {
    border-color: #c8d6e7;
}

.settingsBody {
    margin-top: 1.5rem;
    display: flow-root;
}

.settingsGrid {
    padding: 1.5rem;
    border: 0.0625rem solid var(--line);
    border-radius: 0.75rem;
    background: #fbfdff;
}

.settingsPanel.isSliding .settingsBody {
    overflow: hidden;
    will-change: height, opacity, margin-top;
}

.actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.125rem;
    margin-top: 1.625rem;
}

.actionsMain {
    display: flex;
    flex-wrap: wrap;
    gap: 1.125rem;
}

.actions .secondaryAction {
    margin-left: auto;
}


button,
.downloads a,
.errorAction {
    display: inline-flex;
    min-height: 2.875rem;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    border-radius: 1.875rem;
    cursor: pointer;
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 700;
    padding: 0.6875rem 1.125rem;
    text-decoration: none;
    white-space: nowrap;
    transition: background .16s ease, border-color .16s ease;
    user-select: none;
}

.errorAction {
    width: auto;
    max-width: max-content;
}

button:disabled {
    cursor: not-allowed;
    opacity: .55;
    transform: none;
}

.primaryAction {
    border: 0;
    background: linear-gradient(15deg, #0f9a9d, #6fd4ee);
    color: #fff;
}

.secondaryAction,
.ghostAction {
    border: 0.0625rem solid var(--line);
    background: #fff;
    color: #40506c;
}

.secondaryAction.primaryAction {
    border: 0;
    background: linear-gradient(15deg, #0f9a9d, #6fd4ee);
    color: #fff;
}

.formNote {
    display: flex;
    align-items: center;
    gap: 0.5625rem;
    margin: 0.875rem 0 0;
    font-size: 0.75rem;
    font-weight: 400;
    user-select: none;
}

.sideColumn {
    grid-template-rows: auto auto auto;
}

.sideCard {
    padding: 1.75rem;
}

.sideCard h2 {
    margin: 0 0 1.5rem;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.25;
}

.benefit {
    display: grid;
    grid-template-columns: 4.125rem 1fr;
    gap: 1.125rem;
    align-items: center;
}

.benefit + .benefit {
    margin-top: 1.5rem;
}

.benefit strong {
    display: block;
    margin-bottom: 0.375rem;
    font-size: 0.9375rem;
    font-weight: 700;
}

.benefit p {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.55;
}

.benefitIcon {
    display: block;
    border-radius: 0.875rem;
}

.benefitIcon {
    width: 4rem;
    height: 4rem;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 2.875rem 2.875rem;
}

.heartIcon {
    background-color: #e7fffb;
    background-image: url("/assets/icons/icon-heart-search.svg");
}

.dataIcon {
    background-color: #eafaff;
    background-image: url("/assets/icons/icon-sitemap-precise.svg");
}

.shieldIcon {
    background-color: #f3efff;
    background-image: url("/assets/icons/icon-ai-document-shield.svg");
}

.tipsCard ul {
    display: grid;
    gap: 1.125rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

.tipsCard li {
    position: relative;
    padding-left: 1.875rem;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.55;
}

.tipsCard li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    display: inline-grid;
    width: 1.125rem;
    height: 1.125rem;
    place-items: center;
    border: 0.125rem solid var(--teal);
    border-radius: 50%;
    color: var(--teal);
    font-size: 0.6875rem;
}

.eyebrow {
    color: var(--teal);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: .08em;
    margin: 0 0 0.5rem;
    text-transform: uppercase;
}

h2 {
    color: var(--ink);
    letter-spacing: 0;
}

.statusHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.statusHead h2 {
    margin: 0;
    font-size: 2.125rem;
    font-weight: 700;
    line-height: 1.12;
}

.meter {
    height: 1.125rem;
    overflow: hidden;
    background: #dfeaf5;
    border-radius: 62.4375rem;
    margin: 1.5rem 0 1.625rem;
}

.meter span {
    display: block;
    width: 8%;
    height: 100%;
    background: linear-gradient(90deg, #0f9a9d, #6fd4ee);
    transition: width .25s ease;
}

.activity {
    display: grid;
    gap: 0.625rem;
    margin: 0 0 1.5rem;
    padding: 1.375rem;
    border: 0.0625rem solid var(--line);
    border-radius: 0.75rem;
    background: #fbfdff;
    color: var(--muted);
    font-size: 0.875rem;
    overflow-wrap: anywhere;
}

.activity > div {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 0.3125rem;
    align-items: baseline;
}

.activity strong {
    color: var(--ink);
}

#currentUrl {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.testOnly {
    display: none;
}

.status.isTestMode .testOnly {
    display: block;
}

.status.isTestMode .activity {
    margin-top: 1.5rem;
}

.stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.125rem;
}

.stats div,
.statButton {
    border: 0.0625rem solid var(--line);
    border-radius: 0.75rem;
    padding: 1.25rem 1.5rem;
    background: #fbfdff;
    color: inherit;
    text-align: left;
}

.statButton {
    display: block;
    min-height: auto;
    width: 100%;
    cursor: pointer;
}

.statButton:disabled {
    cursor: default;
    opacity: 1;
}

.statButton:not(:disabled):hover {
    border-color: #b8c9dc;
    background: #ffffff;
}

.stats strong,
.statButton strong {
    display: block;
    color: #071938;
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
}

.stats span,
.statButton span {
    color: var(--muted);
    font-size: 0.875rem;
    font-weight: 400;
}

.detailsStack {
    position: relative;
    margin-top: 1.125rem;
}

.detailsStack.isSizing {
    overflow: hidden;
    will-change: height;
}

.urlDetails,
.errorDetails {
    padding: 1.25rem 1.375rem;
    border: 0.0625rem solid #f3c174;
    border-radius: 0.75rem;
    background: #fffaf0;
}

.urlDetails {
    border-color: var(--line);
    background: #fbfdff;
}

.urlDetails.isSliding,
.errorDetails.isSliding {
    overflow: hidden;
    will-change: height, opacity;
}

.urlDetails h3,
.errorDetails h3 {
    margin: 0 0 0.875rem;
    color: var(--ink);
    font-size: 1rem;
}

.urlDetails ul,
.errorDetails ul {
    display: grid;
    gap: 0.625rem;
    margin: 0;
    padding-left: 1.125rem;
    color: var(--muted);
    font-size: 0.875rem;
}

.urlDetails ul,
.errorDetails ul {
    padding-left: 0;
    list-style: none;
}

.urlDetails li {
    min-width: 0;
}

.urlDetails a {
    display: block;
    overflow: hidden;
    color: var(--muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.urlDetails a:hover {
    color: var(--teal);
}

.downloads {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    margin-top: 1.375rem;
}

.downloads a {
    border: 0;
    background: linear-gradient(15deg, #0f9a9d, #6fd4ee);
    color: #fff;
}

details {
    margin-top: 1rem;
    color: var(--warn);
}

.loader {
    width: 2.625rem;
    height: 2.625rem;
    border: 0.25rem solid #dbe9f4;
    border-top-color: var(--teal);
    border-radius: 50%;
    animation: spin .8s linear infinite;
}

.diagnostics {
    margin-top: 1.375rem;
    padding: 1.5rem;
    border-color: #f3c174;
    background: #fffaf0;
}

.diagnostics h2 {
    color: #8a4b0f;
}

.diagnostics li {
    margin: 0.375rem 0;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .settingsPanel.isSliding .settingsBody,
    .detailsStack.isSizing,
    .urlDetails.isSliding,
    .errorDetails.isSliding {
        transition: none !important;
    }
}

@media (max-width: 73.75rem) {
    .hero,
    .workspace {
        grid-template-columns: 1fr;
    }

    .heroArt {
        display: none;
    }

    .heroText {
        padding: 2.375rem;
    }

    .sideColumn {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sideCard {
        padding: 1.5rem;
    }
}

@media (max-width: 56.25rem) {
    .grid,
    .checks,
    .settingsChecks,
    .stats,
    .sideColumn {
        grid-template-columns: 1fr;
    }

    .actions {
        align-items: stretch;
        flex-direction: column;
    }

    .actionsMain {
        flex-direction: column;
        width: 100%;
    }

    .actions button {
        width: 100%;
    }

    .actions .secondaryAction {
        margin-left: 0;
    }

    .formPanel,
    .status,
    .errorPanel {
        padding: 1.375rem;
    }

    .errorPanel h1 {
        font-size: 2.25rem;
    }
}

@media (max-width: 40rem) {
    .app {
        width: min(100% - 1.25rem, 93.75rem);
        padding-top: 0.625rem;
    }

    .hero {
        min-height: auto;
        border-radius: 0.875rem;
    }

    .heroText {
        padding: 1.75rem 1.375rem;
    }

    .hero h1 {
        font-size: 1.45rem;
    }

    .hero p {
        font-size: 1rem;
    }

    .errorPanel h1 {
        font-size: 1.75rem;
    }

    .statusHead {
        align-items: flex-start;
    }
}