/* ============================================================
   NOTICE OF OBJECTION LANDING PAGE
   (core/templates/core/service_pages/notice-of-objection.html)

   Loaded with service-pages.css, which supplies the shared pieces (.cs-grid,
   sticky .cs-rail, cards, quote factors, FAQ grid, reviews, offices, related).
   Everything here is prefixed .no- and is this page's own look.

   DESIGN BRIEF: every CRA page must look different from the others. The
   Voluntary Disclosures, Unfiled Returns and Taxpayer Relief heroes were
   "text left, card right"; the Audit Help hero is dark and centred. This page
   is a LIGHT violet page whose hero is a headline column beside a text
   column that ends in a compact deadline calculator, then an open strip of three
   rule plates. Its signature pieces are the calculator with its timeline bar, four
   "which situation are you in" route cards (alternatives, so no stairs or step
   numbers), a sample letter on paper with numbered parts, and a vertical
   "after you file" timeline.

   Palette: deep violet #4c1d95 / #5b21b6 (white text on it is 10:1 and 8.9:1),
   lavender #f5f3ff / #ede9fe / #ddd6fe, ink #1e1b4b and slate #334155 / #475569
   for text, mint #ecfdf5 with #065f46 for "you are in time", amber #fffbeb with
   #92400e for warnings. No red anywhere, and nothing loops: the only motion is
   a short hover lift.
   ============================================================ */

.no-hero {
    font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, sans-serif;
    color: #1e1b4b;
    background:
        radial-gradient(820px 340px at 8% -10%, rgba(139, 92, 246, 0.2) 0%, rgba(139, 92, 246, 0) 70%),
        radial-gradient(700px 320px at 100% 30%, rgba(16, 185, 129, 0.12) 0%, rgba(16, 185, 129, 0) 70%),
        linear-gradient(180deg, #f5f3ff 0%, #ffffff 100%) !important;
    border-bottom: 1px solid #ddd6fe;
    padding: clamp(1.25rem, 2.5vw, 2rem) 0 clamp(1.75rem, 3.5vw, 2.5rem) !important;
}
/* Same left/right edge as the rest of the redesign (see .cs-body in service-pages.css). */
.no-hero > .container {
    position: relative;
    max-width: none;
    width: 100%;
    padding-left: clamp(1.5rem, 6vw, 7rem);
    padding-right: clamp(1.5rem, 6vw, 7rem);
}
@media (min-width: 1280px) {
    .no-hero > .container { padding-right: max(clamp(1.5rem, 6vw, 7rem), 108px); }
}

.no-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #475569;
    margin-bottom: clamp(0.9rem, 2.5vw, 1.4rem);
}
.no-crumbs a { display: inline-flex; align-items: center; min-height: 36px; color: #4c1d95; text-decoration: none; }
.no-crumbs a:hover { text-decoration: underline; }
.no-crumbs span[aria-current] { color: #1e1b4b; }
.no-crumbs span[aria-hidden] { color: #94a3b8; }

/* Band 1: split headline row */
.no-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.25rem, 4vw, 3rem); align-items: start; }
.no-eyebrow {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #4c1d95;
    background: #ede9fe;
    border: 1px solid #c4b5fd;
    border-radius: 999px;
    padding: 0.32rem 0.85rem;
    margin-bottom: 1rem;
}
.no-hero h1 {
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: clamp(1.9rem, 4.6vw, 3.7rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: #1e1b4b;
    margin: 0;
}
.no-head-side { padding-top: 0.45rem; }
.no-hero-intro { font-size: 1.02rem; line-height: 1.7; color: #334155; margin: 0 0 0.9rem; }
.no-hero-points { list-style: none; margin: 0 0 1.1rem; padding: 0; display: grid; gap: 0.4rem; }
.no-hero-points li { display: flex; align-items: flex-start; gap: 0.55rem; font-size: 0.9rem; font-weight: 600; line-height: 1.45; color: #1e1b4b; }
.no-hero-points .cs-ico { flex-shrink: 0; width: 20px; height: 20px; margin-top: 0.05rem; padding: 3px; border-radius: 50%; color: #ffffff; background: #5b21b6; stroke-width: 3; }
.no-hero-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; }

.no-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 48px;
    padding: 0.8rem 1.45rem;
    font-size: 0.95rem;
    font-weight: 800;
    text-decoration: none;
    border-radius: 12px;
    border: 2px solid transparent;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.no-btn .cs-ico { width: 17px; height: 17px; }
.no-btn-solid { color: #ffffff; background: #5b21b6; box-shadow: 0 4px 0 #3b0f7a; }
.no-btn-line { color: #4c1d95; background: #ffffff; border-color: #7c3aed; }
.no-btn:focus-visible, .no-who-btn:focus-visible, .no-send:focus-visible, .no-input:focus-visible { outline: 3px solid #7c3aed; outline-offset: 3px; }

/* Sample notice under the headline: shows where the date that starts the clock is */
.no-sample { margin: clamp(1.5rem, 3vw, 2.25rem) 0 0; max-width: 460px; }
.no-sample-label { display: block; margin-bottom: 0.5rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: #4c1d95; }
.no-sample-sheet { padding: 1.1rem 1.2rem 0.9rem; background: #ffffff; border: 1px solid #ddd6fe; border-radius: 6px; box-shadow: 0 18px 30px -20px rgba(76, 29, 149, 0.6); transform: rotate(-1deg); font-family: Georgia, "Times New Roman", serif; }
.no-sample-title { display: block; margin-bottom: 0.7rem; padding-bottom: 0.45rem; font-size: 1.05rem; font-weight: 700; color: #1e1b4b; border-bottom: 2px solid #5b21b6; }
.no-sample-line { display: flex; justify-content: space-between; gap: 1rem; margin: 0 0 0.45rem; padding: 0.3rem 0.5rem; font-size: 0.86rem; line-height: 1.4; color: #334155; border-radius: 6px; }
.no-sample-line b { font-weight: 700; color: #64748b; text-align: right; }
.no-sample-line.is-hot { color: #1e1b4b; background: #fef3c7; box-shadow: inset 0 0 0 2px #f59e0b; }
.no-sample-line.is-hot b { color: #92400e; }
.no-sample figcaption { display: flex; align-items: flex-start; gap: 0.55rem; margin-top: 0.9rem; font-size: 0.9rem; font-weight: 700; line-height: 1.45; color: #4c1d95; }
.no-sample figcaption .cs-ico { flex-shrink: 0; width: 20px; height: 20px; margin-top: 0.1rem; color: #5b21b6; }

/* On wide screens (static two-row header) the headline column stays in view while
   the taller calculator is read, so the left side is never a blank gap. */
@media (min-width: 1366px) {
    .no-head-main { position: sticky; top: 1.25rem; }
}

/* Band 2: the deadline calculator */
.no-calc {
    margin-top: 1.4rem;
    background: #ffffff;
    border: 2px solid #c4b5fd;
    border-radius: 22px;
    box-shadow: 0 30px 60px -36px rgba(76, 29, 149, 0.55);
    padding: clamp(0.95rem, 2vw, 1.25rem);
}
.no-calc-head { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1rem; }
.no-calc-ico { display: grid; place-items: center; flex: 0 0 46px; width: 46px; height: 46px; color: #ffffff; background: #5b21b6; border-radius: 14px; }
.no-calc-ico .cs-ico { width: 24px; height: 24px; }
.no-calc-head h2 { margin: 0; font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif; font-size: clamp(1.15rem, 2.2vw, 1.45rem); font-weight: 700; color: #1e1b4b; }
.no-calc-head p { margin: 0.1rem 0 0; font-size: 0.88rem; color: #475569; }
.no-noscript { margin: 0 0 0.75rem; padding: 0.75rem 0.9rem; font-size: 0.9rem; color: #1e293b; background: #f5f3ff; border-radius: 12px; }

.no-label { display: block; margin-bottom: 0.4rem; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #4c1d95; }
.no-who { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; }
.no-who-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    min-height: 58px;
    padding: 0.55rem 0.8rem;
    font: inherit;
    text-align: left;
    color: #1e1b4b;
    background: #f5f3ff;
    border: 1.5px solid #ddd6fe;
    border-radius: 14px;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.no-who-btn strong { font-size: 0.92rem; line-height: 1.25; }
.no-who-btn span { font-size: 0.78rem; line-height: 1.35; color: #475569; }
.no-who-btn[aria-checked="true"] { background: #5b21b6; border-color: #5b21b6; color: #ffffff; }
.no-who-btn[aria-checked="true"] span { color: #ede9fe; }

.no-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem; margin-top: 0.85rem; }
.no-fields[hidden], .no-result[hidden], [data-no-year-wrap][hidden] { display: none; }
.no-fields:has([data-no-year-wrap][hidden]) { grid-template-columns: minmax(0, 1fr); }
.no-input {
    display: block;
    width: 100%;
    min-height: 46px;
    padding: 0.55rem 0.8rem;
    font: inherit;
    font-size: 1rem;
    color: #1e1b4b;
    background: #ffffff;
    border: 1.5px solid #a78bfa;
    border-radius: 12px;
}
.no-check { display: flex; align-items: flex-start; gap: 0.6rem; margin-top: 0.65rem; font-size: 0.86rem; line-height: 1.45; color: #1e293b; cursor: pointer; }
.no-check input { flex: 0 0 20px; width: 20px; height: 20px; margin-top: 0.1rem; accent-color: #5b21b6; }
.no-hint { display: block; margin-top: 0.4rem; font-size: 0.8rem; line-height: 1.45; color: #475569; }

.no-result { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px dashed #c4b5fd; }
.no-res-box { padding: 0.9rem 1.05rem; border-radius: 14px; border: 1.5px solid; }
.no-res-title { display: block; font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif; font-size: 1.15rem; font-weight: 700; margin-bottom: 0.2rem; }
.no-res-text, .no-res-box p { margin: 0; font-size: 0.95rem; line-height: 1.6; }
.no-res-ok { background: #ecfdf5; border-color: #6ee7b7; color: #064e3b; }
.no-res-ok .no-res-title { color: #065f46; }
.no-res-soon { background: #fffbeb; border-color: #f0cf7f; color: #1e293b; }
.no-res-soon .no-res-title { color: #92400e; }
.no-res-late { background: #fff7ed; border-color: #fdba74; color: #1e293b; }
.no-res-late .no-res-title { color: #9a3412; }
.no-res-gone { background: #f1f5f9; border-color: #cbd5e1; color: #1e293b; }
.no-res-gone .no-res-title { color: #334155; }
.no-res-other { background: #f5f3ff; border-color: #c4b5fd; color: #1e1b4b; }

.no-line { margin-top: 1rem; }
.no-line-track { position: relative; display: flex; height: 16px; border-radius: 999px; overflow: visible; background: #ede9fe; }
.no-line-seg { display: block; height: 100%; }
.no-line-object { background: #5b21b6; border-radius: 999px 0 0 999px; }
.no-line-extend { background: repeating-linear-gradient(135deg, #c4b5fd 0, #c4b5fd 6px, #ddd6fe 6px, #ddd6fe 12px); border-radius: 0 999px 999px 0; }
.no-line-today { position: absolute; top: -4px; bottom: -4px; width: 4px; margin-left: -2px; background: #1e1b4b; border-radius: 2px; }
.no-line-today i { position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); padding: 0.1rem 0.45rem; font-size: 0.68rem; font-style: normal; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: #ffffff; background: #1e1b4b; border-radius: 6px; white-space: nowrap; }
.no-line-labels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; margin-top: 0.7rem; font-size: 0.86rem; line-height: 1.4; color: #1e293b; }
.no-line-labels b { display: block; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #4c1d95; }
.no-line-l2 { text-align: center; }
.no-line-l3 { text-align: right; }
.no-res-rule { margin: 0.9rem 0 0; font-size: 0.9rem; line-height: 1.6; color: #1e293b; }
.no-res-both { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.no-res-both li { padding: 0.55rem 0.75rem; font-size: 0.84rem; line-height: 1.45; color: #1e293b; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; }
.no-res-both li.is-later { font-weight: 700; color: #1e1b4b; background: #ede9fe; border-color: #a78bfa; }
.no-res-note { margin: 0.7rem 0 0; font-size: 0.8rem; line-height: 1.5; color: #475569; }
.no-res-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem 1rem; margin-top: 0.9rem; }
.no-send {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0.6rem 1.2rem;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 800;
    color: #ffffff;
    background: #5b21b6;
    border: 0;
    border-radius: 12px;
    box-shadow: 0 4px 0 #3b0f7a;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.no-send:active { transform: translateY(2px); box-shadow: 0 2px 0 #3b0f7a; }
.no-disclaimer { font-size: 0.78rem; line-height: 1.4; color: #475569; }

/* Rules strip: an open header-style band under the hero (no box, no fill) */
.no-plates-wrap { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.5rem clamp(1rem, 3vw, 2.5rem); margin-top: clamp(1.5rem, 3vw, 2.25rem); padding: 1.1rem 0; border-top: 3px solid #5b21b6; border-bottom: 1px solid #c4b5fd; }
.no-plates-title { margin: 0; max-width: 9rem; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.08em; line-height: 1.4; text-transform: uppercase; color: #4c1d95; }
.no-plates { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.no-plate { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "num unit" "label label"; align-items: baseline; column-gap: 0.5rem; padding: 0.15rem clamp(0.75rem, 2vw, 1.6rem); color: #1e1b4b; }
.no-plate + .no-plate { border-left: 1px solid #c4b5fd; }
.no-plate:first-child { padding-left: 0; }
.no-plate-num { grid-area: num; font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif; font-size: 2.3rem; font-weight: 700; line-height: 1; color: #5b21b6; }
.no-plate-unit { grid-area: unit; font-size: 0.95rem; font-weight: 800; color: #4c1d95; }
.no-plate-label { grid-area: label; margin-top: 0.3rem; font-size: 0.86rem; line-height: 1.45; color: #334155; }

/* ---------- Body ---------- */
.no-body .cs-sec h2::after { content: ""; display: block; width: 54px; height: 4px; margin-top: 0.55rem; background: linear-gradient(90deg, #5b21b6, #34d399); border-radius: 4px; }
.no-body .cs-jump a:hover { background: #ede9fe; color: #4c1d95; }
.no-note { display: flex; gap: 0.75rem; align-items: flex-start; margin: 1rem 0 0; padding: 0.95rem 1.1rem; background: #f5f3ff; border: 1px dashed #a78bfa; border-radius: 14px; }
.no-note .cs-ico { flex-shrink: 0; width: 22px; height: 22px; margin-top: 0.1rem; color: #5b21b6; }
.no-note span { font-size: 0.9rem; line-height: 1.6; color: #1e293b; }
.no-note a { color: #4c1d95; font-weight: 700; }
.no-sub { margin: 1.75rem 0 0.25rem; font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif; font-size: 1.3rem; color: #1e1b4b; }

/* What it is */
.no-what { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem 1.1rem; }
.no-what li { display: flex; gap: 0.8rem; align-items: flex-start; padding: 0.9rem 1rem; background: #ffffff; border: 1px solid #ddd6fe; border-radius: 14px; }
.no-what-ico { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; color: #ffffff; background: #5b21b6; border-radius: 12px; }
.no-what-ico .cs-ico { width: 21px; height: 21px; }
.no-what h3 { margin: 0 0 0.15rem; font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif; font-size: 1rem; color: #1e1b4b; }
.no-what p { margin: 0; font-size: 0.86rem; line-height: 1.55; color: #334155; }

/* Route cards: four alternatives (not steps), so they are all drawn alike */
.no-routes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; }
.no-route { position: relative; display: flex; flex-direction: column; padding: 1.15rem 1.15rem 1.1rem; background: #ffffff; border: 1.5px solid #ddd6fe; border-radius: 16px; transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.25s ease; }
.no-route.is-here { background: #f5f3ff; border-color: #7c3aed; }
.no-route-tag { position: absolute; top: -11px; right: 14px; padding: 0.15rem 0.65rem; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #ffffff; background: #5b21b6; border-radius: 999px; }
.no-route-ico { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 0.65rem; color: #ffffff; background: #5b21b6; border-radius: 12px; }
.no-route-ico .cs-ico { width: 21px; height: 21px; }
.no-route-label { display: block; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: #4c1d95; }
.no-route h3 { margin: 0.15rem 0 0.7rem; font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif; font-size: 1.05rem; line-height: 1.3; color: #1e1b4b; }
.no-route-name { display: block; margin: 0.15rem 0 0.7rem; font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif; font-size: 1.2rem; line-height: 1.25; color: #5b21b6; }
.no-route dl { margin: 0; display: grid; gap: 0.5rem; padding-top: 0.7rem; border-top: 1px dashed #c4b5fd; }
.no-route dt { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: #475569; }
.no-route dd { margin: 0.05rem 0 0; font-size: 0.86rem; line-height: 1.5; color: #1e293b; }
.no-route-link { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 36px; margin-top: 0.6rem; font-size: 0.88rem; font-weight: 800; color: #4c1d95; text-decoration: underline; text-underline-offset: 3px; }
.no-route-link .cs-ico { width: 15px; height: 15px; }

/* Tables */
.no-table-wrap { overflow-x: auto; border: 1px solid #ddd6fe; border-radius: 16px; background: #ffffff; }
.no-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.no-table thead th { padding: 0.8rem 1rem; text-align: left; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #ffffff; background: #4c1d95; }
.no-table tbody th, .no-table tbody td { padding: 0.8rem 1rem; text-align: left; vertical-align: top; line-height: 1.55; color: #1e293b; border-top: 1px solid #ede9fe; }
.no-table tbody th { width: 30%; font-weight: 700; color: #1e1b4b; }
.no-table tbody tr:nth-child(even) { background: #faf8ff; }

/* Anatomy of a letter */
.no-anatomy { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); grid-template-areas: "paper parts" "cap ."; column-gap: clamp(1rem, 3vw, 2rem); align-items: stretch; }
.no-anatomy > .no-paper { grid-area: paper; }
.no-anatomy > .no-paper-cap { grid-area: cap; }
.no-anatomy > .no-parts { grid-area: parts; }
.no-paper { margin: 0; padding: 0.9rem; background: #ede9fe; border-radius: 18px; }
.no-paper-sheet { position: relative; padding: 1.6rem 1.4rem 1.3rem; background: #ffffff; border: 1px solid #ddd6fe; border-radius: 6px; box-shadow: 0 18px 30px -20px rgba(76, 29, 149, 0.6); font-family: Georgia, "Times New Roman", serif; }
.no-paper-title { display: block; margin-bottom: 0.9rem; padding-bottom: 0.55rem; font-size: 1.15rem; font-weight: 700; color: #1e1b4b; border-bottom: 2px solid #5b21b6; }
.no-paper-line { display: flex; gap: 0.6rem; align-items: flex-start; margin: 0 0 0.75rem; font-size: 0.88rem; line-height: 1.55; color: #334155; }
.no-paper-line b { flex: 0 0 22px; display: grid; place-items: center; width: 22px; height: 22px; margin-top: 0.1rem; font-family: "Plus Jakarta Sans", sans-serif; font-size: 0.74rem; font-weight: 800; color: #ffffff; background: #5b21b6; border-radius: 50%; }
.no-paper-cap { margin: 0.5rem 0.2rem 0; font-size: 0.76rem; line-height: 1.4; color: #475569; }
/* The list lines up with the white sheet: it starts at the sheet's top edge and ends at its
   bottom edge (the paper frame adds 0.9rem above the sheet and a caption below it). */
.no-parts { list-style: none; margin: 0; padding: 0.9rem 0; display: flex; flex-direction: column; justify-content: space-between; gap: 0.7rem; }
.no-parts li { display: flex; gap: 0.75rem; align-items: flex-start; }
.no-part-num { flex: 0 0 30px; display: grid; place-items: center; width: 30px; height: 30px; font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif; font-size: 0.95rem; font-weight: 700; color: #ffffff; background: #5b21b6; border-radius: 50%; }
.no-parts h3 { margin: 0 0 0.1rem; font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif; font-size: 1rem; color: #1e1b4b; }
.no-parts p { margin: 0; font-size: 0.86rem; line-height: 1.55; color: #334155; }

/* After you file: a vertical timeline */
.no-after { list-style: none; margin: 0; padding: 0 0 0 0.2rem; position: relative; display: grid; gap: 1.05rem; }
.no-after::before { content: ""; position: absolute; left: 22px; top: 22px; bottom: 22px; width: 3px; background: linear-gradient(180deg, #5b21b6, #c4b5fd); border-radius: 3px; }
.no-after li { position: relative; display: flex; gap: 0.9rem; align-items: flex-start; }
.no-after-dot { position: relative; z-index: 1; display: grid; place-items: center; flex: 0 0 46px; width: 46px; height: 46px; color: #ffffff; background: #5b21b6; border: 4px solid #ffffff; border-radius: 50%; box-shadow: 0 0 0 2px #c4b5fd; }
.no-after-dot .cs-ico { width: 21px; height: 21px; }
.no-after h3 { margin: 0.25rem 0 0.15rem; font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif; font-size: 1.05rem; color: #1e1b4b; }
.no-after p { margin: 0; font-size: 0.88rem; line-height: 1.6; color: #334155; }

/* Money */
.no-money { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; }
.no-money-card { padding: 1.1rem 1.1rem 1.15rem; background: #ffffff; border: 1.5px solid #ddd6fe; border-radius: 16px; box-shadow: 0 3px 0 #ddd6fe; }
.no-money-card:nth-child(even) { border-color: #a7f3d0; box-shadow: 0 3px 0 #a7f3d0; }
.no-money-ico { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 0.6rem; color: #4c1d95; background: #ede9fe; border-radius: 12px; }
.no-money-card:nth-child(even) .no-money-ico { color: #065f46; background: #d1fae5; }
.no-money-ico .cs-ico { width: 22px; height: 22px; }
.no-money h3 { margin: 0 0 0.3rem; font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif; font-size: 1.05rem; color: #1e1b4b; }
.no-money p { margin: 0; font-size: 0.87rem; line-height: 1.6; color: #334155; }

/* Missed the deadline */
.no-late { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; }
.no-late-col { padding: 1.15rem 1.15rem 1.2rem; border-radius: 16px; border: 1px solid; }
.no-late-look { background: #f5f3ff; border-color: #c4b5fd; }
.no-late-send { background: #ecfdf5; border-color: #6ee7b7; }
.no-late-col h3 { margin: 0 0 0.6rem; font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif; font-size: 1.12rem; color: #1e1b4b; }
.no-late-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.no-late-col li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.9rem; line-height: 1.55; color: #1e293b; }
.no-late-col li .cs-ico { flex-shrink: 0; width: 18px; height: 18px; margin-top: 0.2rem; }
.no-late-look li .cs-ico { color: #5b21b6; }
.no-late-send li .cs-ico { color: #047857; }

/* Chips */
.no-chips { list-style: none; margin: 0.75rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.no-chips li { padding: 0.45rem 0.85rem; font-size: 0.86rem; font-weight: 600; color: #334155; background: #f1f5f9; border: 1px solid #cbd5e1; border-radius: 999px; }

/* How we help */
.no-plan { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.85rem; }
.no-plan li { position: relative; padding: 1.5rem 1rem 1.05rem; background: #ffffff; border: 1px solid #ddd6fe; border-radius: 16px; transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.25s ease; }
.no-plan-num { position: absolute; top: -16px; left: 14px; display: grid; place-items: center; width: 34px; height: 34px; font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif; font-size: 1rem; font-weight: 700; color: #ffffff; background: #5b21b6; border-radius: 50%; box-shadow: 0 0 0 4px #ffffff; }
.no-plan-ico { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 0.5rem; color: #4c1d95; background: #ede9fe; border-radius: 11px; }
.no-plan-ico .cs-ico { width: 20px; height: 20px; }
.no-plan h3 { margin: 0 0 0.25rem; font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif; font-size: 1.02rem; color: #1e1b4b; }
.no-plan p { margin: 0; font-size: 0.85rem; line-height: 1.55; color: #334155; }

/* Documents */
.no-prep { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.8rem; }
.no-prep-card { padding: 1rem 0.95rem 1.1rem; background: linear-gradient(175deg, #f5f3ff 0%, #ffffff 70%); border: 1px solid #ddd6fe; border-radius: 16px; }
.no-prep-ico { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 0.6rem; color: #4c1d95; background: #ddd6fe; border-radius: 12px; }
.no-prep-ico .cs-ico { width: 22px; height: 22px; }
.no-prep-card h3 { margin: 0 0 0.4rem; font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif; font-size: 1.05rem; color: #1e1b4b; }
.no-prep-card ul { margin: 0; padding-left: 1.05rem; display: grid; gap: 0.3rem; }
.no-prep-card li { font-size: 0.84rem; line-height: 1.5; color: #1e293b; }
.no-prep-card li::marker { color: #5b21b6; }

/* Mistakes */
.no-mistakes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem; }
.no-mistake { display: flex; gap: 0.85rem; align-items: flex-start; padding: 1rem 1.05rem; background: #f5f3ff; border: 1px solid #ddd6fe; border-radius: 16px; }
.no-mistake-num { flex: 0 0 30px; display: grid; place-items: center; width: 30px; height: 30px; font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif; font-size: 0.95rem; font-weight: 700; color: #ffffff; background: #5b21b6; border-radius: 50%; }
.no-mistake h3 { margin: 0 0 0.2rem; font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif; font-size: 1rem; color: #1e1b4b; }
.no-mistake p { margin: 0; font-size: 0.86rem; line-height: 1.55; color: #1e293b; }

/* Options */
.no-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.no-opt { display: block; padding: 1.2rem 1.2rem 1.1rem; color: inherit; text-decoration: none; background: #ffffff; border: 1px solid #ddd6fe; border-radius: 16px; box-shadow: 0 2px 0 #ede9fe; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; }
.no-opt-ico { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 0.7rem; color: #ffffff; background: #5b21b6; border-radius: 13px; }
.no-opt-ico .cs-ico { width: 23px; height: 23px; }
.no-opt h3 { margin: 0 0 0.3rem; font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif; font-size: 1.1rem; color: #1e1b4b; }
.no-opt p { margin: 0 0 0.7rem; font-size: 0.88rem; line-height: 1.55; color: #334155; }
.no-opt-more { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.9rem; font-weight: 800; color: #4c1d95; }
.no-opt-more .cs-ico { width: 16px; height: 16px; }
.no-opt:focus-visible, .no-source:focus-visible { outline: 3px solid #7c3aed; outline-offset: 2px; }

/* Included, decides, sources */
.no-incl .cs-tile, .no-decides .cs-tile { color: #4c1d95; background: linear-gradient(140deg, #f5f3ff, #ddd6fe); border-color: #c4b5fd; transition: transform 0.3s cubic-bezier(0.3, 1.5, 0.5, 1), background 0.25s, color 0.25s; }
.no-incl { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem 1.25rem; }
.no-incl li { display: flex; gap: 0.8rem; align-items: flex-start; }
.no-incl h3 { margin: 0 0 0.15rem; font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif; font-size: 1rem; color: #1e1b4b; }
.no-incl p { margin: 0; font-size: 0.87rem; line-height: 1.55; color: #334155; }
.no-decides { display: flex; gap: 0.9rem; align-items: flex-start; margin-top: 1.2rem; padding: 1.05rem 1.2rem; background: #4c1d95; border-radius: 16px; }
.no-decides .cs-tile { flex-shrink: 0; }
.no-decides strong { display: block; font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif; font-size: 1.05rem; color: #ffffff; margin-bottom: 0.2rem; }
.no-decides p { margin: 0; font-size: 0.9rem; line-height: 1.6; color: #ede9fe; }
.no-sources { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.no-source { display: flex; align-items: center; gap: 0.8rem; min-height: 62px; padding: 0.75rem 0.9rem; color: inherit; text-decoration: none; background: #ffffff; border: 1px solid #ddd6fe; border-radius: 14px; box-shadow: 0 2px 0 #ede9fe; transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; }
.no-source-ico { display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; color: #ffffff; background: #5b21b6; border-radius: 11px; }
.no-source-ico .cs-ico { width: 20px; height: 20px; }
.no-source-text { flex: 1 1 auto; min-width: 0; }
.no-source-text strong { display: block; font-size: 0.92rem; line-height: 1.3; color: #1e1b4b; }
.no-source-text em { display: block; font-style: normal; font-size: 0.78rem; font-weight: 600; color: #475569; }
.no-source-go { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; color: #ffffff; background: #4c1d95; border-radius: 50%; transition: transform 0.2s ease; }
.no-source-go .cs-ico { width: 16px; height: 16px; }

/* ---------- Hover (mouse only) ---------- */
@media (hover: hover) and (pointer: fine) {
    .no-btn-solid:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #3b0f7a, 0 16px 26px -14px rgba(91, 33, 182, 0.7); }
    .no-btn-line:hover { background: #f5f3ff; border-color: #5b21b6; }
    .no-who-btn:hover { transform: translateY(-3px); border-color: #7c3aed; }
    .no-who-btn[aria-checked="true"]:hover { border-color: #5b21b6; }
    .no-send:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #3b0f7a, 0 14px 22px -12px rgba(76, 29, 149, 0.6); }
    .no-route:hover { transform: translateY(-4px); box-shadow: 0 18px 30px -18px rgba(76, 29, 149, 0.5); }
    .no-plan li:hover { transform: translateY(-4px); box-shadow: 0 18px 30px -18px rgba(76, 29, 149, 0.45); }
    .no-opt:hover { border-color: #7c3aed; transform: translateY(-3px); box-shadow: 0 2px 0 #ede9fe, 0 16px 26px -16px rgba(76, 29, 149, 0.5); }
    .no-incl li:hover .cs-tile { transform: rotate(-8deg) scale(1.1); color: #ffffff; background: #5b21b6; border-color: transparent; }
    .no-source:hover { border-color: #7c3aed; background: #f5f3ff; transform: translateY(-3px); box-shadow: 0 2px 0 #ede9fe, 0 16px 26px -16px rgba(76, 29, 149, 0.5); }
    .no-source:hover .no-source-go { transform: translate(2px, -2px); }
}
@media (prefers-reduced-motion: reduce) {
    .no-btn, .no-who-btn, .no-send, .no-route, .no-plan li, .no-opt, .no-incl .cs-tile, .no-source, .no-source-go { transition: none !important; }
    .no-btn:hover, .no-who-btn:hover, .no-send:hover, .no-route:hover, .no-plan li:hover, .no-opt:hover, .no-incl li:hover .cs-tile, .no-source:hover, .no-source:hover .no-source-go { transform: none !important; }
}

/* ============ Responsive ============ */
@media (max-width: 1200px) {
    .no-prep { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .no-plan { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991px) {
    .no-anatomy { grid-template-areas: "paper" "cap" "parts"; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
    .no-parts { padding: 0.25rem 0 0; justify-content: flex-start; }
    .no-head { grid-template-columns: minmax(0, 1fr); align-items: start; }
    .no-head-side { padding-top: 0; }
    .no-plates-wrap { grid-template-columns: minmax(0, 1fr); }
    .no-plates-title { max-width: none; }
    .no-sample { display: none; }
}
@media (max-width: 767px) {
    .no-fields, .no-what, .no-routes, .no-money, .no-late, .no-mistakes, .no-opts, .no-incl, .no-sources, .no-res-both { grid-template-columns: minmax(0, 1fr); }
        .no-plates { grid-template-columns: minmax(0, 1fr); }
    .no-plate + .no-plate { border-left: 0; border-top: 1px solid #ddd6fe; margin-top: 0.6rem; padding-top: 0.7rem; }
    .no-plate, .no-plate:first-child { padding-left: 0; padding-right: 0; }
    .no-line-labels { grid-template-columns: minmax(0, 1fr); }
    .no-line-l2, .no-line-l3 { text-align: left; }
    .no-table-wrap { border: 0; background: transparent; overflow: visible; }
    .no-table, .no-table thead, .no-table tbody, .no-table tr, .no-table th, .no-table td { display: block; }
    .no-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .no-table tbody tr { margin-bottom: 0.75rem; background: #ffffff; border: 1px solid #ddd6fe; border-radius: 14px; overflow: hidden; }
    .no-table tbody tr:nth-child(even) { background: #ffffff; }
    .no-table tbody th, .no-table tbody td { width: auto; border-top: 0; padding: 0.55rem 0.95rem; }
    .no-table tbody th { background: #ede9fe; padding-top: 0.75rem; }
    .no-table tbody td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 0.1rem; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: #475569; }
}
@media (max-width: 640px) {
    .no-hero-actions .no-btn { width: 100%; }
    .no-who-btn { min-height: 56px; }
    .no-plan, .no-prep { grid-template-columns: minmax(0, 1fr); }
    .no-plan li { margin-top: 0.4rem; }
    .no-send { width: 100%; }
    .no-after::before { left: 19px; }
    .no-after-dot { flex: 0 0 40px; width: 40px; height: 40px; }
}
@media (max-width: 359px) {
    .no-who { grid-template-columns: minmax(0, 1fr); }
}