:root{font-family:Inter,Segoe UI,Arial,sans-serif;color:#15233d;background:#f7f9fc;--navy:#0d1b35;--green:#16a34a;--green-dark:#12813c;--green-darker:#0f6b32;--blue:#3158b7;--muted:#647084;--line:#e4e9f0}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:#15233d;background:#f7f9fc}a{color:inherit}nav{height:68px;background:var(--navy);color:#fff;display:flex;align-items:center;gap:25px;padding:0 max(5%,calc((100% - 1200px)/2));position:sticky;top:0;z-index:20;border-bottom:1px solid #ffffff12}.brand{font-size:20px;font-weight:800;text-decoration:none;margin-right:auto;letter-spacing:-.4px}.brand::before{content:'✓';display:inline-flex;align-items:center;justify-content:center;width:25px;height:25px;border:2px solid #22c55e;border-radius:7px;margin-right:8px;color:#22c55e;font-size:14px}.nav-link{color:#dce3ef;text-decoration:none;font-size:14px}.nav-link:hover{color:#fff}.nav-cta{background:var(--green-dark);padding:11px 16px;border-radius:8px;font-weight:700}.site-hero{max-width:1200px;margin:0 auto;padding:78px 5% 72px;display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center}.site-hero-copy .eyebrow{margin-top:0}.eyebrow{font-size:12px;font-weight:800;letter-spacing:1.6px;color:#3158b7;margin:0 0 12px}.site-hero h1{font-size:58px;line-height:1.02;letter-spacing:-2px;margin:0 0 22px}.site-hero h1 span{color:var(--green-dark)}.hero-lead{font-size:19px;line-height:1.6;color:#526075;max-width:650px}.hero-actions{display:flex;gap:12px;margin:28px 0 18px;flex-wrap:wrap}.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:8px;padding:13px 20px;text-decoration:none;font-weight:700;cursor:pointer;font:inherit}.button-green{background:var(--green-dark);color:#fff}.button-green:hover{background:var(--green-darker)}.button-light-outline{background:#fff;border:1px solid #cfd7e3;color:#1a2943}.button-outline{background:#fff;border:1px solid #8fc9a5;color:var(--green-dark)}.full{width:100%}.hero-points{display:flex;gap:17px;flex-wrap:wrap;color:#536076;font-size:13px}.hero-points span::first-letter{color:var(--green-dark)}.dashboard-preview{background:#fff;border:1px solid #e2e8f0;border-radius:20px;padding:28px;box-shadow:0 22px 55px #15233d18}.preview-top{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:700}.preview-dot{margin-left:auto;color:var(--green-dark);font-size:12px}.shield{display:inline-flex;width:30px;height:30px;border-radius:8px;background:#eaf7ee;color:var(--green-dark);align-items:center;justify-content:center}.score-ring{width:170px;height:170px;border-radius:50%;margin:27px auto 9px;display:flex;align-items:center;justify-content:center;flex-direction:column;background:radial-gradient(circle,#fff 56%,transparent 57%),conic-gradient(#22a957 0 76%,#dce3eb 76% 100%);position:relative}.score-ring strong{font-size:46px;line-height:1}.score-ring span{font-size:12px;color:#65707d;margin-top:5px}.score-label{text-align:center;font-size:18px;font-weight:800;color:var(--green-dark)}.preview-muted{text-align:center;color:#65707d;font-size:13px;margin:7px 0 22px}.preview-stats{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:12px;overflow:hidden}.preview-stats div{text-align:center;padding:15px 8px;border-right:1px solid var(--line)}.preview-stats div:last-child{border-right:0}.preview-stats strong,.preview-stats span{display:block}.preview-stats strong{font-size:22px}.preview-stats span{font-size:11px;color:#65707d;margin-top:3px}.preview-issue{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;margin-top:16px;padding:13px;border-radius:10px;background:#f8fafc;font-size:12px}.preview-issue span:first-child{color:#65707d}.preview-issue span:last-child{font-size:18px}.trust-strip{background:#eef3f8;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 5%;display:flex;justify-content:center;gap:28px;align-items:center;flex-wrap:wrap;color:#526075;font-size:13px}.trust-strip strong{color:#27364e}.section{max-width:1200px;margin:0 auto;padding:90px 5%}.section-heading{max-width:760px;margin-bottom:38px}.section-heading.centered{text-align:center;margin-left:auto;margin-right:auto}.section-heading h2{font-size:38px;line-height:1.12;letter-spacing:-1px;margin:5px 0 14px}.section-heading p:not(.eyebrow){font-size:17px;line-height:1.6;color:#657186}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.feature-card{background:#fff;border:1px solid var(--line);border-radius:15px;padding:28px;box-shadow:0 7px 25px #15233d08}.feature-number{font-size:12px;font-weight:800;color:var(--blue);letter-spacing:1px}.feature-card h3{font-size:20px;margin:15px 0 8px}.feature-card p{color:#687489;line-height:1.55;margin:0}.how-section{background:#eef4fa;padding:85px 5%}.steps-grid{max-width:1200px;margin:40px auto 0;display:grid;grid-template-columns:repeat(5,1fr);gap:22px}.step{text-align:center;position:relative}.step:not(:last-child)::after{content:'→';position:absolute;right:-18px;top:19px;color:#aebbd0}.step-icon{width:46px;height:46px;border-radius:50%;background:#fff;border:1px solid #d9e2ee;display:flex;align-items:center;justify-content:center;margin:0 auto 15px;color:var(--blue);font-weight:800}.step h3{font-size:16px;margin:0 0 8px}.step p{font-size:13px;line-height:1.5;color:#65707d;margin:0}/* Pricing cards: shared layout, separate featured card and badge styles. */
.pricing-section { padding-bottom:55px; scroll-margin-top:88px; }
.pricing-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:24px;
    align-items:stretch;
    margin:2rem 0;
}
.price-card, .pricing-card {
    display:flex;
    flex-direction:column;
    min-width:0;
    position:relative;
    background:#fff;
    color:var(--navy);
    border:1px solid #dce4ee;
    border-radius:20px;
    padding:32px 28px 28px;
    box-shadow:0 6px 24px #15233d08;
    transition:border-color .18s ease,box-shadow .18s ease;
}
.price-card:hover, .pricing-card:hover {
    border-color:#a8b7ca;
    box-shadow:0 12px 32px #15233d12;
}
.price-card.is-featured, .pricing-card.featured {
    border-color:var(--green);
    box-shadow:0 0 0 1px var(--green),0 12px 32px #16a34a12;
    background:linear-gradient(180deg,#f1fbf5 0,#fff 180px);
}
.popular-badge, .pricing-card > .popular {
    position:absolute;
    top:-14px;
    left:50%;
    transform:translateX(-50%);
    display:inline-block;
    background:var(--green-dark);
    color:#fff;
    border:3px solid #f7f9fc;
    border-radius:999px;
    padding:5px 14px;
    font-size:10px;
    font-weight:800;
    line-height:1.3;
    letter-spacing:.08em;
    white-space:nowrap;
}
.plan-heading { min-height:92px; }
.price-card h3, .pricing-card h2 {
    margin:0 0 10px;
    font-size:23px;
    font-weight:750;
    letter-spacing:-.5px;
}
.price-description {
    margin:0;
    color:#58677d;
    font-size:14px;
    line-height:1.6;
}
.price-card .price, .pricing-card .price {
    margin:18px 0 6px;
    font-size:42px;
    line-height:1.15;
    font-weight:800;
    letter-spacing:-1.5px;
}
/* "Price on application" and its translations are words, not a figure: at the figure's size they
   wrap across several lines and outweigh the plans that do have a price. */
.price-card .price.price-text, .pricing-card .price.price-text {
    font-size:18px;
    line-height:1.25;
    letter-spacing:0;
    padding:12px 0 7px;
}
.price small, .price span {
    font-size:14px;
    font-weight:500;
    letter-spacing:0;
    color:#58677d;
}
.billing { margin:0; font-size:13px; line-height:1.5; color:#58677d; }
.price-card ul, .pricing-card ul {
    flex:1;
    list-style:none;
    padding:22px 0 0;
    margin:24px 0 28px;
    border-top:1px solid var(--line);
}
.price-card li, .pricing-card li {
    position:relative;
    padding:0 0 0 25px;
    margin-bottom:14px;
    font-size:14px;
    line-height:1.55;
    color:#46536a;
}
.price-card li:last-child, .pricing-card li:last-child { margin-bottom:0; }
.price-card li::before, .pricing-card li::before {
    content:'✓';
    position:absolute;
    left:0;
    color:var(--green-dark);
    font-weight:800;
}
.price-card .button, .pricing-card .button {
    min-height:48px;
    font-weight:700;
    border-radius:10px;
    margin-top:auto;
}
.price-card .button-outline:hover { background:#f0f9f3; border-color:var(--green-dark); }
.price-card .button:focus-visible, .pricing-card .button:focus-visible {
    outline:3px solid var(--blue);
    outline-offset:4px;
}
.pricing-note { text-align:center; color:#647084; font-size:13px; line-height:1.6; margin-top:24px; }
@media(prefers-reduced-motion:reduce) { .price-card, .pricing-card { transition:none; } }
@media(max-width:900px) {
    .pricing-grid { grid-template-columns:1fr; gap:30px; }
    .plan-heading { min-height:0; }
    .price-card, .pricing-card { padding:30px 24px 24px; }
}
.assurance-band{max-width:1100px;margin:25px auto 75px;background:#edf5f8;border:1px solid #dce8ef;border-radius:15px;padding:25px;display:grid;grid-template-columns:repeat(4,1fr);gap:22px}.assurance-band div{padding-left:18px;border-left:1px solid #d2dee8}.assurance-band div:first-child{border-left:0}.assurance-band strong,.assurance-band span{display:block}.assurance-band strong{font-size:14px;margin-bottom:6px}.assurance-band span{font-size:12px;line-height:1.45;color:#68758a}.final-cta{max-width:1100px;margin:0 auto 70px;background:var(--navy);color:#fff;border-radius:15px;padding:32px 38px;display:flex;align-items:center;justify-content:space-between;gap:25px}.final-cta h2{margin:0 0 7px;font-size:26px}.final-cta p{margin:0;color:#c6cfdd;font-size:14px}footer{background:var(--navy);color:#dbe2ed;padding:55px max(5%,calc((100% - 1200px)/2)) 28px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:45px}footer h3{color:#fff;margin:0 0 15px}footer p,footer a{font-size:13px;color:#aeb9ca;line-height:1.7}footer a{text-decoration:none;display:block}.footer-brand{font-size:20px;font-weight:800;color:#fff}.copyright{grid-column:1/-1;border-top:1px solid #ffffff18;padding-top:20px;margin-top:10px;font-size:11px;color:#7f8ca1}@media(max-width:900px){.site-hero{grid-template-columns:1fr;padding-top:55px}.feature-grid,.pricing-grid{grid-template-columns:1fr}.steps-grid{grid-template-columns:1fr;gap:28px}.step:not(:last-child)::after{content:'↓';right:auto;top:auto;bottom:-25px;left:50%}.assurance-band{grid-template-columns:1fr 1fr;margin:25px 20px 60px}.final-cta{margin:0 20px 60px;display:block}.final-cta .button{margin-top:20px}footer{grid-template-columns:1fr 1fr}.site-hero h1{font-size:46px}}@media(max-width:650px){nav{padding:0 18px;gap:10px}.nav-link{display:none}.nav-cta{padding:9px 11px;font-size:12px}.site-hero{padding:45px 20px}.site-hero h1{font-size:40px}.hero-lead{font-size:17px}.hero-points{display:block}.hero-points span{display:block;margin:7px 0}.trust-strip{padding:18px 20px;display:block}.trust-strip span{display:block;margin-top:6px}.section{padding:65px 20px}.section-heading h2{font-size:31px}.how-section{padding:65px 20px}.pricing-section{padding-bottom:35px}.assurance-band{grid-template-columns:1fr;margin:20px 20px 50px}.assurance-band div{border-left:0;border-top:1px solid #d2dee8;padding:15px 0 0}.assurance-band div:first-child{border-top:0}.final-cta{padding:27px}.final-cta h2{font-size:22px}footer{grid-template-columns:1fr;padding:45px 20px 25px}.copyright{grid-column:1}.dashboard-preview{padding:20px}}
/* Existing application components */
.hero,.page,.panel,.authbox{max-width:1100px;margin:34px auto}.hero{background:#fff;border-radius:20px;padding:38px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 8px 30px #0000000b}.hero h1,.page h1{font-size:38px;margin:8px 0}/* The score ring fills in proportion to --score (0-100), set inline by the page. One neutral
   colour on purpose: the ring reports how much of the assessment is passing, never whether that
   is good. A red-to-green dial would turn a coverage figure into a verdict, which is exactly the
   claim BoardSummary refuses to make. --score-hole is the surface it sits on. */
.score{--score:0;--score-hole:#f7f9fc;width:150px;height:150px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle,var(--score-hole) 60%,transparent 61%),conic-gradient(var(--blue) 0 calc(var(--score) * 1%),#dde3ec calc(var(--score) * 1%) 100%)}
/* line-height:1 on all three children: the circle is a fixed height, so inherited leading is what
   pushes the stack off centre. The mock ring has always had this; the real one had not. */
.score strong{font-size:42px;line-height:1}
.score small{font-size:13px;line-height:1;color:var(--muted);margin-top:3px}
.score span{font-size:12px;line-height:1;margin-top:6px}
/* A plain count is not a score. It shares the pagehead slot but must not borrow the ring, or
   "3 open questionnaires" reads as a measurement out of 100. */
.count{min-width:104px;padding:16px 20px;border-radius:14px;background:#eef2ff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.count strong{font-size:32px;line-height:1}
.count span{font-size:12px;line-height:1;margin-top:6px}.grid{max-width:1100px;margin:20px auto;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.grid article,.panel{background:#fff;border-radius:16px;padding:26px;box-shadow:0 5px 20px #00000008}.metric{font-size:30px;display:block;margin:15px 0 4px}.actions{max-width:1100px;margin:24px auto;display:flex;gap:12px}.form{display:flex;flex-direction:column;gap:12px}.form input,.form textarea,.form select{font:inherit;padding:12px;border:1px solid #d8deea;border-radius:8px}.form textarea{min-height:100px}.pagehead{margin-bottom:20px}.authbox{max-width:620px;background:#fff;border-radius:18px;padding:40px;box-shadow:0 8px 30px #0000000b}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:13px 10px;border-bottom:1px solid #edf0f5}th{font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:#697386}small{color:#697386}.pagehead{display:flex;justify-content:space-between;gap:2rem;align-items:flex-start;margin:2rem 0}.narrow{max-width:650px;margin:4rem auto}.notice{padding:1rem;border-radius:12px;background:#e8f4ed;margin:1rem 0}.form{display:grid;gap:1rem;max-width:600px}.form label{display:grid;gap:.4rem;font-weight:600}.form input,.form select{padding:.75rem;border:1px solid #d7dce2;border-radius:8px}.badge{display:inline-block;padding:.3rem .6rem;border-radius:999px;background:#eef1f4;font-size:.85rem}.panel{overflow:auto}.notice.success{background:#e8f5e9;border:1px solid #a5d6a7}.assessment-run{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:20px 0}.assessment-run h2{margin:0 0 6px}.assessment-run p{margin:0}.empty-state{text-align:center;padding:40px}button:disabled{opacity:.7;cursor:wait}.legend{max-width:1100px;margin:18px auto;display:flex;gap:18px;flex-wrap:wrap;font-size:13px;color:#4b5563}.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px}.pass{background:#2e7d32}.pending{background:#d97706}.auto{background:#5264d8}.muted{color:#697386;font-size:13px}.control-card{border:1px solid #e6e9ed;border-radius:12px;margin:12px 0;background:#fff;overflow:hidden}.control-card summary{cursor:pointer;list-style:none;padding:18px;display:flex;justify-content:space-between;gap:16px;align-items:center}.control-card summary::-webkit-details-marker{display:none}.control-card summary>span:first-child{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.control-card em{font-style:normal;font-size:12px;color:#697386;background:#f1f3f6;padding:4px 7px;border-radius:999px}.summary-right{display:flex;align-items:center;gap:10px;white-space:nowrap}.check-table{border-top:1px solid #e6e9ed}.check-row{display:grid;grid-template-columns:1.25fr .8fr 1.35fr 1.5fr;gap:16px;padding:16px 18px;border-bottom:1px solid #edf0f5;align-items:start}.check-row:last-child{border-bottom:0}.check-row>div{min-width:0}.result{display:inline-block;padding:4px 8px;border-radius:999px;font-size:11px;font-weight:700}.result-pass{background:#e8f5e9;color:#256029}.result-pending{background:#fff4df;color:#8a5600}@media(max-width:800px){.check-row{grid-template-columns:1fr 1fr}.summary-right{flex-direction:column;align-items:flex-end}.control-card summary{align-items:flex-start}}

/* Removed: targeted .page-head, which no view uses. The working rule is the .pagehead breakpoint in the responsive section below. */

/* Local test login */
.auth-shell { min-height: 70vh; display:flex; align-items:center; justify-content:center; padding:48px 20px; }
.auth-card { width:100%; max-width:460px; background:#fff; border:1px solid #dbe3ee; border-radius:18px; padding:36px; box-shadow:0 12px 35px rgba(15,31,55,.08); }
.brand-mark { font-size:1.25rem; font-weight:700; margin-bottom:28px; }
.brand-mark .accent { color:#16a34a; }
.auth-card h1 { margin-bottom:8px; }
.muted { color:#64748b; }
.auth-form { display:flex; flex-direction:column; gap:10px; margin-top:24px; }
.auth-form label { font-weight:600; margin-top:6px; }
.auth-form input { width:100%; box-sizing:border-box; padding:12px 13px; border:1px solid #cbd5e1; border-radius:9px; font:inherit; }
.primary-button { margin-top:10px; border:0; border-radius:9px; padding:13px 18px; background:var(--green-dark); color:white; font-weight:700; cursor:pointer; }
.alert-error { margin-top:18px; padding:12px 14px; border-radius:9px; background:#fef2f2; border:1px solid #fecaca; color:#991b1b; }
.test-credentials { margin-top:24px; padding:14px 16px; border-radius:10px; background:#f8fafc; border:1px solid #e2e8f0; line-height:1.8; }
.back-link { display:inline-block; margin-top:24px; color:#2563eb; text-decoration:none; }

/* Grouped application navigation. Native disclosures also work without JavaScript. */
.app-navigation { display:flex; align-items:center; gap:6px; }
.app-nav-link, .nav-group summary { display:flex; align-items:center; gap:9px; padding:12px 13px; border-radius:8px; color:#dce3ef; font-size:14px; font-weight:600; text-decoration:none; cursor:pointer; white-space:nowrap; }
.nav-group { position:relative; }
.nav-group summary { list-style:none; }
.nav-group summary::-webkit-details-marker { display:none; }
.nav-chevron { width:6px; height:6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); margin-top:-3px; }
.nav-group[open] .nav-chevron { transform:rotate(225deg); margin-top:3px; }
.app-nav-link:hover, .nav-group summary:hover, .nav-group[open] summary { background:#ffffff12; color:#fff; }
.app-nav-link[aria-current="page"], .nav-group.is-current summary { background:#ffffff18; color:#fff; }
.app-navigation a:focus-visible, .app-navigation summary:focus-visible { outline:2px solid #86efac; outline-offset:3px; }
.nav-dropdown { position:absolute; top:calc(100% + 9px); right:0; width:240px; padding:7px; border:1px solid var(--line); border-radius:12px; background:#fff; color:var(--navy); box-shadow:0 12px 30px #0d1b3526; }
.nav-dropdown a, .nav-dropdown button { display:block; padding:12px; border-radius:7px; font-size:14px; text-decoration:none; }
.nav-dropdown button { width:100%; border:0; background:none; color:inherit; font:inherit; font-size:14px; text-align:left; cursor:pointer; }
.nav-dropdown a:hover, .nav-dropdown button:hover, .nav-dropdown a[aria-current="page"] { background:#eef4fa; color:var(--blue); }
.nav-dropdown a[aria-current="page"] { font-weight:700; }
.nav-dropdown .nav-signout { border-top:1px solid var(--line); border-radius:0 0 7px 7px; margin-top:5px; }
@media(max-width:900px) {
    nav:has(.app-navigation) { height:auto; min-height:68px; flex-wrap:wrap; gap:8px; padding:12px 18px; }
    .app-navigation { width:100%; flex-wrap:wrap; gap:2px; }
    .app-nav-link, .nav-group summary { padding:12px 10px; font-size:13px; }
    .nav-group { position:static; }
    .nav-dropdown { left:18px; right:18px; top:100%; width:auto; max-height:60vh; overflow-y:auto; }
}

/* Plain-language guidance inside assessment controls. */
.control-help { padding:20px 24px; background:#f0f7f4; border-top:1px solid #dce8df; }
.control-help h3 { font-size:17px; margin:0 0 10px; color:var(--navy); }
.control-help p { margin:8px 0; max-width:80ch; font-size:14px; line-height:1.65; color:#46536a; }
/* Website monitoring: scoped layout and DNS setup guidance. */
.websites-page { padding:0 20px; }
.websites-page > .panel { margin:24px 0; border:1px solid #e0e7ef; box-shadow:0 4px 18px #0d1b3505; }
.websites-page h2 { margin-top:0; font-size:24px; overflow-wrap:anywhere; }
.websites-page h3 { margin:24px 0 10px; }
.websites-page p, .websites-page li { line-height:1.7; color:#46536a; }
.websites-page .form { max-width:720px; margin:16px 0; }
.websites-page .form input, .websites-page .form select, .websites-page .form textarea { min-width:0; width:100%; box-sizing:border-box; background:#fff; }
.websites-page .form .button { justify-self:start; }
.websites-page .form p { margin:0; font-size:14px; }
.websites-page details { border:1px solid #dce4ed; border-radius:10px; padding:16px 18px; margin:16px 0; }
.websites-page summary { cursor:pointer; font-weight:650; color:#203451; }
.websites-page summary:focus-visible, .websites-page a:focus-visible, .websites-page button:focus-visible { outline:3px solid #2563eb; outline-offset:4px; }
.website-tabs { flex-wrap:wrap; gap:10px; }
.website-tabs a { overflow-wrap:anywhere; min-width:0; }
.website-tabs a[aria-current="page"] { background:#173858; color:white; border-color:#173858; box-shadow:0 3px 8px #17385820; }
.website-verification { margin:24px 0 18px; padding:24px; border-radius:12px; background:#f1f7fb; border:1px solid #d7e6ef; }
.website-verification h3 { margin-top:0; }
.website-verification .eyebrow { margin-top:0; font-size:11px; font-weight:700; letter-spacing:1.2px; }
.website-verification details { background:#fff; margin-bottom:0; }
.website-verification li { padding-left:5px; margin:12px 0; }
.website-dns { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:#dce5ee; border:1px solid #dce5ee; border-radius:10px; overflow:hidden; }
.website-dns > div { background:white; padding:16px; min-width:0; }
.website-dns dt { color:#52647a; font-size:12px; font-weight:700; margin-bottom:8px; }
.website-dns dd { margin:0; font-size:14px; }
.website-dns code { overflow-wrap:anywhere; user-select:all; }
.websites-page .website-delete { border-color:#ead1d1; }
.website-delete summary { color:#9b3030; }
.websites-page table { font-size:14px; }
.websites-page th { background:#f7f9fc; }
.websites-page td { vertical-align:top; line-height:1.6; overflow-wrap:anywhere; }
.websites-page article.panel { border:1px solid #e0e7ef; box-shadow:none; margin:16px 0; }
@media(max-width:650px) {
    .websites-page { padding:0 12px; }
    .websites-page h1 { font-size:29px; }
    .websites-page > .panel { padding:18px; }
    .website-verification { padding:16px; }
    .website-dns { grid-template-columns:1fr; }
    .websites-page details { padding:14px; }
    .websites-page .button { white-space:normal; }
}

/* Results-first website workspace. */
.website-submenu { position:sticky; top:12px; z-index:5; display:flex; flex-wrap:wrap; gap:6px; padding:10px; margin:20px 0; background:#fff; border:1px solid #dce4ed; border-radius:12px; box-shadow:0 4px 16px #17385812; }
.website-submenu a { padding:10px 13px; border-radius:8px; color:#203451; font-size:14px; font-weight:600; text-decoration:none; }
.website-submenu a:hover, .website-submenu a:focus-visible { background:#eaf2f8; }
.websites-page [id] { scroll-margin-top:110px; }
.websites-page .website-overview { margin-bottom:16px; }
.websites-page .website-overview > p { margin:8px 0; font-size:14px; }
.websites-page .website-add { background:#f8fafc; margin:24px 0; }
.websites-page .website-add > summary { font-size:17px; }
.websites-page .panel:target { border-color:#6b96bc; }
@media(max-width:650px) {
    .website-submenu { top:0; flex-wrap:nowrap; overflow-x:auto; border-radius:0; }
    .website-submenu a { white-space:nowrap; padding:10px; }
    .websites-page [id] { scroll-margin-top:75px; }
}

/* Essentials list on the assessment page: the prioritised entry point into the 84-check catalogue. */
.essentials-list{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.essentials-list li{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:11px 14px;background:#fff;border:1px solid var(--line);border-left:3px solid #e0a200;border-radius:9px;font-size:14px}
.essentials-list li strong{color:var(--blue);font-variant-numeric:tabular-nums}
.essentials-list .essential-name{min-width:0;overflow-wrap:anywhere}
.essentials-list li em{font-style:normal;font-size:12px;font-weight:700;color:#8a6100;background:#fdf5e2;padding:3px 9px;border-radius:999px;white-space:nowrap}

/* ============================================================================
   Component styles and responsive fixes — September 2026.

   A CSS/markup audit found nine class names used across the views with no rule
   behind them. `.button.secondary` alone appears 17 times on 8 pages, so every
   secondary action has been rendering identically to the primary one and the
   visual hierarchy was flat throughout the application. `.button.danger` and
   `.button.small` were equally undefined, which meant a destructive Remove or
   Reject button looked exactly like the safe action beside it.
   ============================================================================ */

/* --- Button variants -------------------------------------------------------
   Used by Assessments, Automation, Dashboard, Microsoft365, SignUp, Websites,
   ZeroTrust, Admin and Evidence. */

/* The primary button: a `.button` with no variant class beside it.
   The base `.button` rule at the top of this file sets geometry only — padding,
   radius, weight, `border:0` — and leaves background and colour alone, because
   the marketing pages always pair it with `.button-green` or `.button-outline`.
   The application pages do not: they write plain `class="button"` for the main
   action on the page. So `Run cyber assessment`, `Run assessment now`,
   `Download CSV` and every `Choose <plan>` on Billing were rendering with no
   background, no border and inherited body colour — indistinguishable from
   ordinary text, and sitting next to a `.button.secondary` that does have a
   fill, so the primary action looked like the least important thing in the row.

   The `:not()` chain says "no variant class", and keeps this from overriding the
   marketing outline variants, which share its specificity and are declared
   earlier in the file. `.secondary` and `.danger` are excluded for clarity —
   they would win on specificity anyway. */
.button:not(.secondary):not(.danger):not(.button-outline):not(.button-light-outline):not(.button-green) {
    background: var(--green-dark);
    color: #fff;
}
.button:not(.secondary):not(.danger):not(.button-outline):not(.button-light-outline):not(.button-green):hover {
    background: var(--green-darker);
}

.button.secondary,
.button-secondary {
    background: #fff;
    border: 1px solid #cfd7e3;
    color: #1a2943;
}
.button.secondary:hover,
.button-secondary:hover { background: #f4f7fb; border-color: #a8b7ca; }

.button.small { padding: 8px 13px; font-size: 13px; border-radius: 7px; }

/* Destructive actions must not look like the safe action next to them. */
.button.danger {
    background: #fff;
    border: 1px solid #e3b4b4;
    color: #a32020;
}
.button.danger:hover { background: #fdf3f3; border-color: #c96a6a; }

.button:disabled, .button[disabled] { opacity: .55; cursor: not-allowed; }
.button:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

/* --- Form building blocks --------------------------------------------------
   `.form label` is a grid, which stacks a checkbox above its own text. These
   put the control and its label back on one line. */
.checkbox {
    display: flex !important;
    align-items: flex-start;
    gap: .65rem;
    font-weight: 500;
    line-height: 1.5;
    cursor: pointer;
}
.checkbox input[type=checkbox] { width: 18px; height: 18px; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--green); }

.field-group {
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 16px 18px;
    margin: 0;
    display: grid;
    gap: .7rem;
    background: #fbfcfe;
}
.field-group legend { font-weight: 700; font-size: 13px; padding: 0 6px; color: #3d4a5f; }

/* Paired fields. `.grid` is the three-column stat-card layout and styles
   article children, so it is the wrong tool for form fields. */
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }

.form-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.form-actions p { margin: 0; font-size: 13px; }
.form textarea { min-height: 90px; resize: vertical; }
.form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible {
    outline: 2px solid var(--blue); outline-offset: 1px; border-color: var(--blue);
}
.form input[readonly] { background: #f6f8fb; color: #4a5768; }

/* --- Notices ---------------------------------------------------------------
   `.notice` defaults to a success-green tint, which is wrong for an error.
   `.alert`/`.alert-error` are used by DevLogin, `.warn` by Evidence. */
/* The amber text was applied but the green tint was left behind, so a warning banner still read as
   a success message. The background has to move with it. #8a6100 on #fff4df is the same pairing the
   pending result pill already uses and is above AA. */
.notice.warning { background: #fff4df; border: 1px solid #f0dcb4; }
.notice.warning, .warn { color: #8a6100; }
.warn { font-weight: 600; }
.alert, .notice[role=alert] {
    padding: 1rem;
    border-radius: 12px;
    margin: 1rem 0;
    background: #fdf2f2;
    border: 1px solid #e9b8b8;
    color: #8a2020;
}
.alert-error { background: #fdf2f2; border-color: #e9b8b8; color: #8a2020; }

.panel.compact { padding: 18px 20px; }

/* --- Sign-up page ----------------------------------------------------------
   `.microsoft-button` and `.signup-box` were referenced but never defined. */
.signup-box { max-width: 460px; }
.microsoft-button {
    background: #2f2f2f;
    color: #fff;
    justify-content: center;
}
.microsoft-button:hover { background: #1f1f1f; }

/* ============================================================================
   Responsive fixes.

   The marketing page and the Websites section had a responsive pass; the rest
   of the application did not. Three concrete faults are fixed below.
   ============================================================================ */

/* 1. Tables never scrolled. Every data table (Admin, Evidence, Monitoring,
      Risks, Remediation) is fixed at width:100% with ~13px cell padding and no
      overflow container, so on a phone the widest table forced the whole page
      to scroll sideways. Making the table itself a scroll container keeps the
      page body fixed and confines the scrolling to the table. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll table { min-width: 100%; }

/* 2. `.pagehead` is a flex row that never collapsed. A media query existed for
      this, but it targeted `.page-head` — a class no view uses — so the fix was
      written and never applied. Corrected here. */
@media (max-width: 800px) {
    .pagehead { display: block; }
    .pagehead .score, .pagehead .count { margin-top: 16px; }
}

/* 3. `.grid` is a hard three-column layout with no breakpoint, so the dashboard
      and admin summary cards were squeezed to roughly 110px columns on a phone. */
@media (max-width: 900px) {
    .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}

@media (max-width: 650px) {
    .grid { grid-template-columns: 1fr; }
    .field-row { grid-template-columns: 1fr; }

    /* Panels ran edge to edge with no gutter. */
    .hero, .page, .panel, .authbox, .grid { margin-left: 14px; margin-right: 14px; }
    .panel, .grid article { padding: 20px 18px; }
    .pagehead { margin-left: 14px; margin-right: 14px; }
    th, td { padding: 11px 8px; }

    .form { max-width: 100%; }
    .form-actions .button { width: 100%; justify-content: center; }
    .essentials-list li { grid-template-columns: 1fr; gap: 4px; }
    .essentials-list li em { justify-self: start; }
}

/* --- Board summary --------------------------------------------------------
   The verdict block is the one thing a non-technical reader will actually read,
   so it gets weight. Colour reinforces the status but never carries it alone:
   the status word is always present as text. */
.board-verdict {
    max-width: 1100px;
    margin: 22px auto;
    padding: 28px 30px;
    background: #fff;
    border: 1px solid var(--line);
    border-left: 5px solid var(--muted);
    border-radius: 16px;
    box-shadow: 0 5px 20px #00000008;
}
.board-verdict h2 { margin: 6px 0 10px; font-size: 25px; line-height: 1.25; letter-spacing: -.4px; }
.board-verdict p { margin: 0; color: #4a5768; line-height: 1.6; max-width: 70ch; }
.board-status { font-size: 12px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; }
.board-baseline-met { border-left-color: var(--green-dark); }
.board-baseline-met .board-status { color: var(--green-dark); }
.board-partial, .board-scope-undeclared { border-left-color: #c98a00; }
.board-partial .board-status, .board-scope-undeclared .board-status { color: #8a6100; }
.board-significant-gaps { border-left-color: #b3261e; }
.board-significant-gaps .board-status { color: #a32020; }
.board-unassessed { border-left-color: #65707d; }
.board-unassessed .board-status { color: #65707d; }

.board-actions { margin: 14px 0 18px; padding-left: 22px; display: grid; gap: 12px; }
.board-actions li { line-height: 1.55; }
.board-actions strong { display: block; }
.board-actions span { color: #4a5768; font-size: 14px; }

@media (max-width: 650px) {
    .board-verdict { margin-left: 14px; margin-right: 14px; padding: 22px 20px; }
    .board-verdict h2 { font-size: 21px; }
}

/* --- Locked features -------------------------------------------------------
   A feature the current plan does not include is shown, not hidden: the customer
   cannot want what they cannot see, and hiding it moves the question to support.
   This is presentation only — every gated action is refused on the server too. */
.is-locked {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    opacity: .45;
    filter: grayscale(1);
    pointer-events: none;
    user-select: none;
    margin-bottom: 14px;
}
.locked {
    border: 1px dashed #c3cddb;
    border-radius: 12px;
    padding: 18px 20px;
    background: #fbfcfe;
    margin: 12px 0;
}
.locked p { margin: 0 0 10px; line-height: 1.55; }
.locked p:last-child { margin-bottom: 0; }
.locked-label {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #4a5768;
    display: flex;
    align-items: center;
    gap: 7px;
}
.locked-icon { font-size: 13px; }

/* A disabled control must read as unavailable rather than merely low-contrast. */
select option:disabled { color: #8a93a1; }
.button[disabled], .button:disabled { filter: grayscale(1); }

/* --- Pricing: four tiers ---------------------------------------------------
   The grid was fixed at three columns; adding Enterprise made it overflow. */
.pricing-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.price-card { padding: 28px 22px 24px; }
.price-card .price { font-size: 30px; }
.price-card .price small { font-size: 14px; }
@media (max-width: 1100px) { .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } }
@media (max-width: 640px) { .pricing-grid { grid-template-columns: 1fr; } }

/* --- Billing period toggle ------------------------------------------------- */
.period-toggle {
    display: inline-flex;
    gap: 4px;
    margin: 4px auto 22px;
    padding: 4px;
    background: #eef2f7;
    border-radius: 999px;
    border: 1px solid var(--line);
}
.period-toggle a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 9px 20px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    color: #4a5768;
}
.period-toggle a span { font-size: 11px; font-weight: 600; color: #65707d; }
.period-toggle a.is-selected { background: #fff; color: var(--navy); box-shadow: 0 2px 8px #15233d14; }
.period-toggle a.is-selected span { color: var(--green-dark); }
.period-toggle a:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

/* --- Board summary: quarter movement --------------------------------------- */
.quarter-movement { font-size: 19px; font-weight: 700; margin: 4px 0 8px; }

/* --- Result pills: statuses beyond pass/pending ----------------------------
   The evidence workflow produces Requested, Submitted, Pending, Verified and
   Rejected. Only two had a style, so the rest rendered as bare text. */
.result-rejected { background: #fdf2f2; color: #8a2020; }
.result-info { background: #eef2f7; color: #46536a; }

/* Empty states carry real guidance now, so they need room to breathe. */
.empty-state p { margin: 0 0 8px; }
.empty-state p:last-child { margin-bottom: 0; }

/* A pagehead metric on a page that is not the dashboard. */

/* --- Language switcher -----------------------------------------------------
   Sits at the end of the nav bar, after the auto margin on .brand has pushed
   everything right. Buttons rather than links because choosing a language is a
   POST: it writes a cookie that changes every later page. See
   Pages/Shared/_LanguageSwitcher.cshtml.

   Drawn as a segmented control. Four bare words in a row read as text, not as
   something you can press; a tray with the current option filled is a shape
   people already recognise as a language picker.
   -------------------------------------------------------------------------- */

/* The bar is a non-wrapping flex row, so anything that can shrink, does. These
   could, and did: at around 1100px the brand broke across two lines and "How it
   works" wrapped, because the switcher was taking roughly 320px and nothing else
   was allowed to give. Nothing in a nav bar should wrap. */
nav .brand { white-space:nowrap; flex-shrink:0; }
nav .nav-link, nav .nav-cta { white-space:nowrap; }

.language-switcher { display:flex; align-items:center; gap:2px; flex-shrink:0; margin-left:14px; padding:3px; border-radius:9px; background:#ffffff12; }
.language-option { font:inherit; font-size:13px; line-height:1; cursor:pointer; border:0; border-radius:6px; padding:7px 10px; background:transparent; color:#b9c4d6; white-space:nowrap; }
.language-option:hover { background:#ffffff1a; color:#fff; }
/* The current language is marked by weight and a filled background, not by
   colour alone: colour alone is not a distinction for a reader who cannot see it. */
.language-option.is-current { background:#ffffff2b; color:#fff; font-weight:700; }
.language-option:focus-visible { outline:3px solid var(--blue); outline-offset:2px; }

/* Compact is the default: two-letter codes, with the native name kept in the
   DOM so it is still what a screen reader announces. */
.language-full { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.language-code { display:inline; }

/* Full names on the marketing pages when the window is wide enough to hold
   them. That is the one place this control has real work to do: a visitor who
   cannot read the page has to be able to recognise their own language, and
   "Français" does that where "FR" only half does.

   The signed-in navigation is excluded at every width -- it already carries five
   items, and by then the reader chose their language long ago. */
@media(min-width:1201px){
  nav:not(:has(.app-navigation)) .language-full { position:static; width:auto; height:auto; clip-path:none; }
  nav:not(:has(.app-navigation)) .language-code { display:none; }
}

@media(max-width:900px){
  .language-switcher { margin-left:8px; }
  .language-option { padding:7px 8px; }
}

/* A clear next action, followed by the wider workspace. */
.journey-next { border-left: 4px solid var(--brand, #2563eb); }
.journey-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 0; list-style: none; margin: 24px 0; }
.journey-steps li { padding: 18px; border: 1px solid var(--line, #dce3ed); border-radius: 12px; }
.journey-steps .eyebrow, .journey-steps a { display: block; }
.journey-steps a { margin-top: 8px; font-weight: 650; }
@media (max-width: 640px) { .journey-steps { grid-template-columns: 1fr; } }
/* ---- Product walkthrough --------------------------------------------------
   A real recording of the application, so the frame is deliberately plain: a
   border and a shadow, no play-button illustration over the top. The browser's
   own controls are the ones people know how to use.

   aspect-ratio matches the 1440x900 the recorder captures at. Without it the
   element has zero height until the metadata loads, and because preload="none"
   that does not happen until the visitor presses play -- so the section would
   collapse and the rest of the page would jump when it did. */
/* Narrower than the 1200px sections around it. At full width a 1440x900 capture is enlarged past
   the resolution it was recorded at, and the interface in it starts to look soft. */
.walkthrough-section { max-width: 1000px; }
.walkthrough-player { margin: 0; }
.walkthrough-player video {
  display: block;
  width: 100%;
  aspect-ratio: 8 / 5;
  background: var(--navy, #0d1b35);
  border: 1px solid var(--line, #e4e9f0);
  border-radius: 16px;
  box-shadow: 0 18px 50px #0d1b3521;
}
.walkthrough-player figcaption {
  margin-top: 14px;
  color: var(--muted, #647084);
  font-size: 14px;
  text-align: center;
}
/* The fallback paragraph only renders in a browser that cannot play the source
   at all, where it sits inside the black video box. */
.walkthrough-player video p { color: #fff; padding: 24px; text-align: center; }
.walkthrough-player video p a { color: #fff; }

/* ---- Pre-sales assistant ---------------------------------------------------
   Fixed to the corner of the marketing pages. The launcher is always in the
   document; the panel is toggled with the hidden attribute rather than a class,
   so a browser with no JavaScript shows neither and the page is unaffected. */
.assistant { position: fixed; right: 20px; bottom: 20px; z-index: 60; }
/* The launcher and the panel are both display:flex below, and a class rule beats the browser's own
   [hidden]{display:none} — so without this the panel renders open on every public page and the
   script's hidden toggle does nothing at all. Scoped to the widget rather than fixing [hidden]
   globally, which would change how the rest of the site behaves. */
.assistant [hidden] { display: none; }
.assistant-launcher {
  display: flex; align-items: center; gap: 9px;
  padding: 13px 20px; border: 0; border-radius: 999px;
  background: var(--navy, #0d1b35); color: #fff;
  font: inherit; font-weight: 650; cursor: pointer;
  box-shadow: 0 10px 30px #0d1b3540;
}
.assistant-launcher:hover { background: #16294a; }
.assistant-panel {
  display: flex; flex-direction: column;
  width: min(380px, calc(100vw - 40px));
  height: min(560px, calc(100vh - 40px));
  background: #fff;
  border: 1px solid var(--line, #e4e9f0);
  border-radius: 16px;
  box-shadow: 0 24px 60px #0d1b3533;
  overflow: hidden;
}
.assistant-head { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border-bottom: 1px solid var(--line, #e4e9f0); }
.assistant-head strong { display: block; }
.assistant-head span { display: block; color: var(--muted, #647084); font-size: 13px; margin-top: 2px; }
.assistant-close { margin-left: auto; border: 0; background: none; font-size: 20px; line-height: 1; cursor: pointer; color: var(--muted, #647084); padding: 2px 6px; }
.assistant-log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.assistant-message { max-width: 86%; padding: 10px 13px; border-radius: 13px; font-size: 14px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.assistant-message.is-assistant { background: #eef4fa; align-self: flex-start; }
.assistant-message.is-user { background: var(--navy, #0d1b35); color: #fff; align-self: flex-end; }
/* The failure notice is a message in the log, not a toast: it belongs in the
   conversation it interrupted, and it must not read as an answer. */
.assistant-message.is-error { background: #fdecec; color: #8a1f1f; align-self: flex-start; }
.assistant-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line, #e4e9f0); }
.assistant-form input { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--line, #e4e9f0); border-radius: 10px; font: inherit; font-size: 14px; }
/* --green-dark, not --green: white on the brand green measures 3.30:1, below AA. Same reason the
   marketing buttons use the darker token. */
.assistant-form button { border: 0; border-radius: 10px; padding: 10px 16px; background: var(--green-dark, #12813c); color: #fff; font: inherit; font-weight: 650; cursor: pointer; }
.assistant-form button:hover:not(:disabled) { background: var(--green-darker, #0f6b32); }
.assistant-form button:disabled { background: var(--muted, #647084); cursor: default; }
.assistant-note { padding: 0 16px 12px; margin: 0; color: var(--muted, #647084); font-size: 12px; }

@media (max-width: 600px) {
  .assistant { right: 12px; bottom: 12px; left: 12px; }
  .assistant-launcher { margin-left: auto; }
  .assistant-panel { width: 100%; height: min(70vh, 520px); }
}

.notice.assessment-disclaimer { background: #f5f7fb; color: #334155; border: 1px solid #d8deea; }
.operator-page .panel { margin: 24px 0; }
.operator-page td { vertical-align: top; overflow-wrap: anywhere; }
.operator-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.operator-metrics h2 { font-size: 16px; }
.operator-metrics p { font-size: 13px; color: var(--muted); }
.operator-services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.operator-services > div { padding: 16px; background: #f5f7fb; border-radius: 8px; }
.operator-services h3 { margin: 0 0 12px; font-size: 16px; }
.operator-services p { font-size: 14px; line-height: 1.6; }
.operator-search { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.operator-search input { padding: 10px 12px; border: 1px solid #d8deea; border-radius: 8px; max-width: 100%; font: inherit; }
.operator-pagination { display: flex; gap: 20px; margin-top: 16px; }
@media(max-width:800px) { .operator-metrics, .operator-services { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media(max-width:650px) { .operator-metrics, .operator-services { grid-template-columns: 1fr; } }
.assessment-disclaimer p { margin: .5rem 0 0; }
.assessment-limits-details p { margin: 0; padding: 16px; max-width: 90ch; line-height: 1.65; overflow-wrap: anywhere; }
.assessment-limits-print { display: none; }
.zt-guidance, .assessment-limits-details { margin-top: 12px; border: 1px solid #d8deea; border-radius: 8px; background: #f5f7fb; white-space: normal; }
.zt-guidance summary, .assessment-limits-details summary { padding: 12px 16px; cursor: pointer; color: var(--blue); font-weight: 600; }
.zt-guidance[open] summary, .assessment-limits-details[open] summary { border-bottom: 1px solid #d8deea; }
.zt-guidance-body { padding: 16px; overflow-wrap: anywhere; }
.zt-guidance-body h4 { margin: 0 0 6px; font-size: 14px; color: var(--navy); }
.zt-guidance-body p { margin: 0 0 16px; line-height: 1.65; max-width: 75ch; }
.zt-guidance summary:focus-visible, .assessment-limits-details summary:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
@media print {
  /* The page resets body margins to zero, so the paper margin has to come from here. */
  @page { margin: 18mm 16mm; }
  .assessment-limits-summary, .assessment-limits-details { display: none; }
  .assessment-limits-print { display: block; }
  .assistant, .skip-link, .print-hint { display: none; }
  body:has(.board-pack) nav, body:has(.board-pack) footer { display: none; }
  body:has(.board-pack), .board-pack { background: white; color: black; margin: 0; padding: 0; max-width: none; }
  .board-pack .panel, .board-pack .board-verdict { break-inside: avoid; box-shadow: none; }
  .board-pack .grid { display: grid; grid-template-columns: repeat(3, 1fr); }
}
.marketing-question{border-bottom:1px solid var(--line);padding:20px 0;line-height:1.7}
.marketing-question summary{font-weight:700;cursor:pointer;font-size:18px}
.marketing-question summary:focus-visible{outline:3px solid var(--blue);outline-offset:5px}
.marketing-question p{max-width:85ch;color:var(--muted);margin:12px 0 0}
.sample-preview h2{font-size:25px;line-height:1.3}.sample-preview>p{line-height:1.65}.sample-counts{display:grid;grid-template-columns:2fr 1fr;gap:18px;margin:25px 0}.sample-counts strong{display:block;font-size:34px;color:var(--green-dark)}.sample-counts span{display:block;font-size:13px}.sample-priority{background:#fff8e5;border-left:4px solid #d39500;padding:15px}.questionnaire-answers table{table-layout:fixed;width:100%;min-width:0}.questionnaire-answers th:nth-child(1){width:5%}.questionnaire-answers th:nth-child(2){width:25%}.questionnaire-answers th:nth-child(3){width:40%}.questionnaire-answers th:nth-child(4){width:12%}.questionnaire-answers th:nth-child(5){width:18%}.questionnaire-answers td{vertical-align:top;overflow-wrap:anywhere;line-height:1.6}.questionnaire-answers select,.questionnaire-answers textarea{width:100%;min-width:0;max-width:100%}.questionnaire-answers details{margin-top:12px}.questionnaire-answers summary{cursor:pointer;font-weight:600}.questionnaire-answers td .button{white-space:normal}@media(max-width:650px){.questionnaire-answers thead{display:none}.questionnaire-answers table,.questionnaire-answers tbody,.questionnaire-answers tr,.questionnaire-answers td{display:block;width:100%}.questionnaire-answers tr{border:1px solid var(--line);border-radius:10px;margin:16px 0;padding:12px}.questionnaire-answers td{border:0;padding:8px}.questionnaire-answers td:nth-child(2){font-weight:700}}
.skip-link{position:fixed;top:8px;left:8px;z-index:1000;padding:12px 18px;background:#fff;color:#15233d;border:2px solid #3158b7;border-radius:6px;transform:translateY(-160%)}.skip-link:focus{transform:translateY(0)}#main-content{scroll-margin-top:90px}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.trial-code{margin:14px 0 12px;font-size:14px}.trial-code summary{cursor:pointer;color:#4b5563;font-weight:600;width:fit-content}.trial-code summary:focus-visible{outline:2px solid #5264d8;outline-offset:3px;border-radius:4px}.trial-code[open] summary{margin-bottom:10px}.trial-code label{display:block;font-weight:600;margin-bottom:6px}.trial-code input{font:inherit;width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid #d7dce2;border-radius:8px}.trial-code input:focus{outline:2px solid #5264d8;outline-offset:1px;border-color:transparent}.trial-code .muted{margin:8px 0 0}
/* Home page redesign (homepage-redesign branch). Reuses the marketing tokens and section layout;
   only the parts that are new to this page live here. */
.landing-panel{position:relative;align-self:start;margin-top:30px}
.landing-sample-tag{display:inline-block;margin:0 0 14px;padding:4px 10px;border-radius:999px;background:#fff4df;color:#8a5600;font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase}
.landing-panel-score{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center;margin:8px 0 18px}
.landing-panel-score .score-ring{margin:10px 0;width:150px;height:150px}
.landing-counts{list-style:none;margin:0;padding:0;display:grid;gap:12px;font-size:14px;color:#526075}
.landing-counts strong{color:#15233d;font-size:18px;margin-right:4px}
.landing-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:9px}
.landing-dot.ok{background:#22a957}.landing-dot.wait{background:#e0a100}.landing-dot.bad{background:#dc3b3b}
.landing-latest{display:grid;gap:6px;padding:14px;border-radius:10px;background:#f8fafc;border:1px solid var(--line);font-size:13px}
.landing-latest-label{font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}
.landing-status{display:inline-block;justify-self:start;padding:4px 9px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap}
.landing-status.ok{background:#e8f5e9;color:#256029}.landing-status.wait{background:#fff4df;color:#8a5600}.landing-status.bad{background:#fde8e8;color:#a32020}
.landing-problem{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:start}
.landing-problem h2{font-size:38px;line-height:1.12;letter-spacing:-1px;margin:5px 0 18px}
.landing-problem h2 span{display:block;color:var(--blue)}
.landing-problem-copy>p:not(.eyebrow){font-size:17px;line-height:1.6;color:#526075}
.landing-question{margin:20px 0;padding:16px 20px;border-left:4px solid var(--blue);background:#eef3fb;border-radius:0 10px 10px 0;font-size:19px;font-weight:700;color:#1f3466}
.landing-stat{font-size:15px!important;border-top:1px solid var(--line);padding-top:16px}
.landing-flow{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:14px;counter-reset:flow}
.landing-flow li{position:relative;background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px 22px 20px 62px;box-shadow:0 7px 25px #15233d08}
.landing-flow li::before{counter-increment:flow;content:counter(flow);position:absolute;left:20px;top:20px;width:28px;height:28px;border-radius:50%;background:#eef3fb;color:var(--blue);font-weight:800;display:flex;align-items:center;justify-content:center;font-size:13px}
.landing-flow li:last-child{border-color:#a8dcb9;background:#f3fbf6}
.landing-flow li:last-child::before{background:#dff3e6;color:var(--green-dark)}
.landing-flow strong,.landing-flow span{display:block}
.landing-flow strong{margin-bottom:5px}.landing-flow span{color:#65707d;line-height:1.5}
.landing-triggers{padding-top:30px}
.landing-trigger-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.landing-trigger-grid .feature-card{padding:22px}
.landing-trigger-grid .feature-card h3{font-size:17px;margin-top:0}
.landing-plan-note{margin-top:12px!important;font-size:12px;font-weight:700;color:var(--blue)!important}
.landing-provider{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.landing-provider h2{font-size:34px;line-height:1.15;letter-spacing:-.8px;margin:5px 0 16px}
.landing-provider p{font-size:16px;line-height:1.6;color:#526075}
.landing-msp{background:#f3fbf6;border:1px solid #cbe9d5;border-radius:12px;padding:16px 18px}
.landing-msp strong{color:var(--green-dark)}
.landing-request{margin:0;background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px;box-shadow:0 22px 55px #15233d14;display:grid;gap:14px}
.landing-request figcaption{font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}
.landing-request p{margin:0;font-size:16px;line-height:1.6;color:#27364e}
.landing-request-button{justify-self:start;pointer-events:none}
.landing-request small{font-size:12px;line-height:1.5}
.landing-evidence .section-heading{margin-bottom:24px}
.landing-table-wrap{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px;box-shadow:0 7px 25px #15233d08;overflow-x:auto}
.landing-table{min-width:560px}
.landing-table td:first-child{font-family:Consolas,monospace;font-size:13px;color:#3d4b63;white-space:nowrap}
.landing-table td{font-size:14px}
.landing-report-link{margin-top:22px}
.landing-final-action{display:grid;gap:8px;justify-items:center;flex-shrink:0}
.landing-final-action small{color:#c6cfdd;font-size:12px}
@media(max-width:900px){
  .landing-problem,.landing-provider{grid-template-columns:1fr;gap:34px}
  .landing-trigger-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .landing-final-action{justify-items:start;margin-top:20px}
}
@media(max-width:650px){
  .landing-panel-score{grid-template-columns:1fr;justify-items:center;text-align:left}
  .landing-problem h2{font-size:30px}.landing-provider h2{font-size:28px}
  .landing-question{font-size:17px}
  .landing-trigger-grid{grid-template-columns:1fr}
}