/* ---------------------------------------------------------------------------
   Shared stylesheet for the NetEnroll legal pages.

   These pages are deliberately plain HTML and CSS. The marketing page compiles
   JSX in the browser, which is fine for marketing and wrong here: a terms page
   has to render for a compliance reviewer, a carrier, a crawler, and a browser
   with scripting disabled. Nothing on these pages needs JavaScript, so nothing
   on these pages uses it.

   Colour tokens are copied from the marketing page's Tailwind config so the
   three legal pages and netenroll.com stay visually the same site.
--------------------------------------------------------------------------- */

:root {
    --ink: #111827;
    --muted: #667085;
    --line: #E6E9ED;
    --soft: #F8FAF9;
    --mint: #ECFDF5;
    --brandgreen: #10B981;
    --deepgreen: #087F5B;
    --white: #fff;

    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                 Helvetica, Arial, sans-serif;

    /* A legal document is read, not scanned. ~68 characters a line. */
    --measure: 44rem;
}

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 16.5px;
    line-height: 1.72;
    color: var(--ink);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
}

/* Anchored headings must not hide under the sticky masthead. */
h2[id], h3[id] { scroll-margin-top: 88px; }

/* ---------------------------------------------------------------- masthead */

.masthead {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--line);
}

.masthead-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    height: 66px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.masthead a.brand { display: inline-flex; align-items: center; }
.masthead img { height: 26px; width: auto; display: block; }

.masthead nav {
    display: flex;
    align-items: center;
    gap: 22px;
    font-size: 14px;
    font-weight: 500;
}

.masthead nav a {
    color: var(--muted);
    text-decoration: none;
    white-space: nowrap;
}

.masthead nav a:hover { color: var(--ink); }
.masthead nav a[aria-current="page"] { color: var(--deepgreen); font-weight: 600; }

/* On a phone the three document links matter more than the CTA, so the CTA is
   the thing that goes. */
.masthead .cta {
    background: var(--brandgreen);
    color: #fff;
    padding: 9px 16px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 13.5px;
    text-decoration: none;
}
.masthead .cta:hover { background: var(--deepgreen); color: #fff; }
@media (max-width: 720px) { .masthead .cta { display: none; } }

/* Three document names plus a logo do not fit a phone at full size. The nav
   tightens first, then "& Compliance" drops, before anything is allowed to
   run off the right edge. */
@media (max-width: 620px) {
    .masthead-inner { padding: 0 16px; gap: 12px; }
    .masthead nav { gap: 15px; font-size: 13.5px; }
    .masthead img { height: 22px; }
}

@media (max-width: 470px) {
    .masthead nav { gap: 13px; font-size: 13px; }
    .nav-long { display: none; }
}

/* ------------------------------------------------------------------ layout */

.wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.doc-head {
    padding: 52px 0 34px;
    border-bottom: 1px solid var(--line);
}

.eyebrow {
    margin: 0 0 14px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--deepgreen);
}

h1 {
    margin: 0;
    font-size: clamp(2.1rem, 4.2vw, 3rem);
    line-height: 1.08;
    letter-spacing: -0.03em;
    font-weight: 700;
}

.doc-meta {
    margin: 18px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 26px;
    font-size: 14px;
    color: var(--muted);
}

.doc-meta strong { color: var(--ink); font-weight: 600; }

.doc-intro {
    margin: 22px 0 0;
    max-width: var(--measure);
    font-size: 17.5px;
    color: var(--muted);
}

/* Two columns once there is room for a table of contents beside the text. */
.doc-body {
    display: grid;
    gap: 44px;
    padding: 40px 0 72px;
}

@media (min-width: 1024px) {
    .doc-body {
        grid-template-columns: minmax(0, 1fr) 244px;
        gap: 64px;
        align-items: start;
    }
    .toc { order: 2; position: sticky; top: 90px; }
    .doc-content { order: 1; }
}

.doc-content { max-width: var(--measure); min-width: 0; }

/* --------------------------------------------------------- table of contents */

.toc {
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 20px 22px;
    background: var(--soft);
}

.toc h2 {
    margin: 0 0 12px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    border: 0;
    padding: 0;
}

.toc ol {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: toc;
    font-size: 14px;
    line-height: 1.5;
}

.toc li { counter-increment: toc; margin: 0 0 9px; }
.toc li:last-child { margin-bottom: 0; }

.toc a {
    color: var(--muted);
    text-decoration: none;
    display: block;
}

.toc a::before {
    content: counter(toc) ".";
    color: var(--brandgreen);
    font-variant-numeric: tabular-nums;
    margin-right: 7px;
    font-weight: 600;
}

.toc a:hover { color: var(--ink); }

/* ---------------------------------------------------------------- sections */

.doc-content h2 {
    margin: 46px 0 0;
    padding-top: 26px;
    border-top: 1px solid var(--line);
    font-size: 1.42rem;
    line-height: 1.28;
    letter-spacing: -0.018em;
    font-weight: 650;
}

.doc-content > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.doc-content h3 {
    margin: 30px 0 0;
    font-size: 1.06rem;
    line-height: 1.4;
    font-weight: 650;
}

/* One level below h3, for the labelled parts inside a clause. Set in the muted
   colour so it reads as a label on the paragraph beneath it, not a new section. */
.doc-content h4 {
    margin: 26px 0 0;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--deepgreen);
}

.doc-content p { margin: 15px 0 0; }
.doc-content ul, .doc-content ol { margin: 15px 0 0; padding-left: 24px; }
.doc-content li { margin: 8px 0 0; }
.doc-content li::marker { color: var(--brandgreen); }

.doc-content a { color: var(--deepgreen); text-underline-offset: 2px; }
.doc-content a:hover { color: var(--brandgreen); }

.doc-content strong { font-weight: 650; }

/* Statutory text and defined terms that must not be softened by paraphrase. */
.callout {
    margin: 24px 0 0;
    padding: 20px 22px;
    border-left: 3px solid var(--brandgreen);
    background: var(--mint);
    border-radius: 0 12px 12px 0;
    font-size: 16px;
}

.callout p:first-child { margin-top: 0; }

.callout.plain {
    border-left-color: var(--line);
    background: var(--soft);
}

.sample-consent {
    margin: 20px 0 0;
    padding: 20px 22px;
    border: 1px dashed var(--brandgreen);
    border-radius: 12px;
    background: var(--white);
    font-size: 15.5px;
}

.sample-consent .label {
    display: block;
    margin-bottom: 10px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--deepgreen);
}

/* Rate and disclosure tables. Scroll the table, never the page. */
.table-scroll { margin: 20px 0 0; overflow-x: auto; }

table {
    width: 100%;
    min-width: 420px;
    border-collapse: collapse;
    font-size: 15px;
}

th, td {
    text-align: left;
    padding: 11px 14px;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}

thead th {
    background: var(--soft);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
}

tbody tr:last-child td { border-bottom: 0; }

/* ------------------------------------------------------------ contact block */

.contact-card {
    margin: 26px 0 0;
    padding: 26px 28px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--soft);
}

.contact-card h3 { margin-top: 0; }

.contact-card address {
    margin: 14px 0 0;
    font-style: normal;
    line-height: 1.7;
}

.contact-card .company { font-weight: 650; color: var(--ink); }
.contact-card a { color: var(--deepgreen); font-weight: 600; text-decoration: none; }
.contact-card a:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ footer */

.site-footer {
    border-top: 1px solid var(--line);
    background: var(--soft);
    padding: 46px 0 40px;
}

.footer-grid {
    display: grid;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

@media (min-width: 760px) {
    .footer-grid { grid-template-columns: 1.6fr 1fr 1fr; gap: 44px; }
}

.footer-grid h2 {
    margin: 0 0 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
}

.footer-grid ul { margin: 0; padding: 0; list-style: none; font-size: 14.5px; }
.footer-grid li { margin: 0 0 10px; }
.footer-grid a { color: var(--muted); text-decoration: none; }
.footer-grid a:hover { color: var(--ink); }

.footer-entity {
    font-size: 14.5px;
    color: var(--muted);
    line-height: 1.75;
    font-style: normal;
}

.footer-entity .company { display: block; font-weight: 650; color: var(--ink); }
.footer-entity a { color: var(--muted); text-decoration: none; }
.footer-entity a:hover { color: var(--ink); }

.footer-legal {
    max-width: 1200px;
    margin: 34px auto 0;
    padding: 22px 20px 0;
    border-top: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    justify-content: space-between;
    font-size: 13px;
    color: var(--muted);
}

.footer-logo { height: 24px; width: auto; display: block; margin-bottom: 16px; }

/* Keyboard users get the same affordance mouse users do. */
a:focus-visible, button:focus-visible {
    outline: 2px solid var(--brandgreen);
    outline-offset: 3px;
    border-radius: 4px;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--ink);
    color: #fff;
    padding: 10px 16px;
    z-index: 50;
    border-radius: 0 0 8px 0;
    text-decoration: none;
}
.skip-link:focus { left: 0; }

@media print {
    .masthead, .toc, .skip-link { display: none; }
    body { font-size: 11pt; }
    .doc-body { display: block; padding-top: 0; }
    .doc-content { max-width: none; }
    a { color: inherit; text-decoration: none; }
}