/*
    Created By: Greg Hacic
    Last Modified: 5 September 2026 by Greg Hacic
    Questions?: greg@controllayer.app
    Copyright (c) 2026 Interactive Ties LLC
    
    Notes:
        - ControlLayer website - shared stylesheet
        - brand palette is drawn from the ControlLayer shield logo (royal blue / sky / navy / silver)
        - the cool trio indigo/violet/cyan is reserved for automation CATEGORY identity only (Validation Rule / Flow / Trigger), matching the product's design language spec; warm tones = state
*/
:root {
    /* brand (from the logo) */
    --brand:        #1B66E8;  /* royal blue - primary actions & links */
    --brand-hover:  #1252C7;
    --brand-deep:   #0E2C63;  /* navy - dark surfaces, emphasis */
    --brand-sky:    #4FA5F2;  /* light blue - gradients, highlights */
    --brand-silver: #C7CDD6;  /* silver - quiet chrome */
    /* category (cool) - product semantics, do not use as generic brand color */
    --cl-indigo: #5C4EE5;   /* Validation Rule */
    --cl-violet: #8B5CF6;   /* Flow */
    --cl-cyan:   #0891B2;   /* Trigger */
    /* state (warm) */
    --cl-green:  #2E844A;
    --cl-blue:   #0070D2;
    --cl-amber:  #DD7A01;
    --cl-red:    #C23934;
    --cl-slate:  #706E6B;
    /* neutrals */
    --ink:       #0F1B33;
    --ink-2:     #16294D;
    --text:      #202A3C;
    --text-soft: #55617A;
    --bg:        #ffffff;
    --bg-soft:   #F6F8FC;
    --bg-tint:   #E9F1FD;
    --border:    #E0E6F0;
    --code-bg:   #122547;
    --radius: 10px;
    --shadow: 0 1px 2px rgba(15,27,51,.06), 0 8px 24px -12px rgba(15,27,51,.18);
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, SFMono-Regular, "Cascadia Code", Consolas, Menlo, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--font);
    color: var(--text);
    background: var(--bg);
    line-height: 1.6;
    font-size: 16.5px;
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { line-height: 1.2; color: var(--ink); margin: 0 0 .5em; font-weight: 700; }
h1 { font-size: clamp(2rem, 4.5vw, 3.1rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); letter-spacing: -.015em; }
h3 { font-size: 1.15rem; }
p  { margin: 0 0 1em; }
.container { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 12px; top: 12px; background: #fff; padding: 8px 14px; z-index: 99; }

/* ---------- header / nav ---------- */
.site-header {
    position: sticky; top: 0; z-index: 50;
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
}
.nav-row { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.15rem; color: var(--ink); }
.brand:hover { text-decoration: none; }
.brand em { font-style: normal; color: var(--brand); }
.site-nav { display: flex; align-items: center; gap: 26px; }
.site-nav > a { color: var(--text); font-weight: 500; font-size: .95rem; }
.site-nav > a:hover { color: var(--brand); text-decoration: none; }
.site-nav > a.active { color: var(--brand); }
/* the nav CTA is a button, not a link: keep its text white in every state
   (the .site-nav > a rules above are more specific than .btn-primary alone) */
.site-nav > a.btn-primary, .site-nav > a.btn-primary:hover, .site-nav > a.btn-primary.active { color: #fff; }
.nav-toggle { display: none; background: none; border: 0; padding: 8px; cursor: pointer; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--ink); margin: 5px 0; border-radius: 2px; transition: .2s; }

/* ---------- buttons ---------- */
.btn {
    display: inline-block; font-weight: 600; border-radius: 8px;
    padding: 12px 22px; border: 1px solid transparent; cursor: pointer;
    font-size: 1rem; transition: .15s;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-hover); }
.btn-ghost { border-color: var(--border); color: var(--ink); background: #fff; }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); }
.btn-inverse { background: #fff; color: var(--brand-deep); }
.btn-inverse:hover { background: var(--bg-tint); }
.btn-outline-light { border-color: rgba(255,255,255,.45); color: #fff; }
.btn-outline-light:hover { border-color: #fff; }
.btn-sm { padding: 8px 16px; font-size: .9rem; }
.btn-lg { padding: 14px 28px; font-size: 1.05rem; }

/* ---------- hero ---------- */
.hero {
    background: radial-gradient(1200px 500px at 75% -10%, rgba(79,165,242,.32), transparent 60%),
              radial-gradient(900px 420px at 15% 0%, rgba(27,102,232,.30), transparent 55%),
              var(--ink);
    color: #C5D4EA;
    padding: 92px 0 84px;
}
.hero h1 { color: #fff; max-width: 21ch; }
.hero .lede { font-size: 1.22rem; max-width: 58ch; color: #AFC3E0; }
.hero-badge {
    display: inline-flex; align-items: center; gap: 8px;
    border: 1px solid rgba(255,255,255,.25); border-radius: 999px;
    font-size: .82rem; padding: 5px 14px; margin-bottom: 22px; color: #D6E4F7;
    letter-spacing: .02em;
}
.hero-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cl-green); }
.hero-ctas { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
.hero-note { margin-top: 16px; font-size: .85rem; color: #89A0C4; }

/* status chips row in hero */
.hero-chips { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 44px; }
.chip {
    font-size: .8rem; font-weight: 600; padding: 6px 12px;
    border-radius: 4px; border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.07); color: #E8F0FA;
    border-left-width: 4px;
}
.chip-active    { border-left-color: var(--cl-green); }
.chip-scheduled { border-left-color: var(--brand-sky); }
.chip-expired   { border-left-color: var(--cl-slate); }
.chip-audited   { border-left-color: var(--cl-amber); }

/* ---------- sections ---------- */
.section { padding: 76px 0; }
.section-soft { background: var(--bg-soft); }
.section-head { max-width: 640px; margin-bottom: 44px; }
.section-head .kicker {
    text-transform: uppercase; letter-spacing: .12em; font-size: .78rem;
    font-weight: 700; color: var(--brand); margin-bottom: 10px;
}
.section-head p { color: var(--text-soft); font-size: 1.05rem; }

/* ---------- cards & grids ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.card {
    background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
    padding: 26px; box-shadow: var(--shadow);
}
.card p { color: var(--text-soft); font-size: .95rem; margin-bottom: 0; }
.card .card-icon { font-size: 1.4rem; margin-bottom: 12px; display: block; }
.accent { border-left: 4px solid var(--brand); }
.accent-validation { border-left: 4px solid var(--cl-indigo); }
.accent-flow       { border-left: 4px solid var(--cl-violet); }
.accent-trigger    { border-left: 4px solid var(--cl-cyan); }
.accent-green      { border-left: 4px solid var(--cl-green); }
.accent-amber      { border-left: 4px solid var(--cl-amber); }
.accent-blue       { border-left: 4px solid var(--cl-blue); }
.accent-slate      { border-left: 4px solid var(--cl-slate); }

.badge {
    display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; padding: 3px 9px; border-radius: 4px; color: #fff;
    margin-bottom: 14px;
}
.badge-validation { background: var(--cl-indigo); }
.badge-flow       { background: var(--cl-violet); }
.badge-trigger    { background: var(--cl-cyan); }
.badge-neutral    { background: var(--cl-slate); }
.badge-green      { background: var(--cl-green); }
/* generic brand badge - for anything that is NOT an automation category. The indigo/violet/cyan
   badges above are reserved for Validation Rule / Flow / Trigger identity and must not be borrowed
   for unrelated labels (the blog's "Part 2 of 4" chips use this one) */
.badge-brand      { background: var(--brand); }

/* ---------- steps ---------- */
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.step { position: relative; padding: 26px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); }
.step::before {
    counter-increment: step; content: counter(step);
    display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center;
    border-radius: 50%; background: var(--bg-tint); color: var(--brand);
    font-weight: 800; margin-bottom: 14px;
}
.step p { color: var(--text-soft); font-size: .95rem; margin: 0; }

/* ---------- code ---------- */
pre {
    background: var(--code-bg); color: #E4EDFB; border-radius: var(--radius);
    padding: 18px 20px; overflow-x: auto; font-size: .86rem; line-height: 1.55;
}
pre code { font-family: var(--mono); }
code { font-family: var(--mono); font-size: .88em; background: var(--bg-tint); color: var(--ink-2); padding: 2px 6px; border-radius: 4px; }
pre code { background: none; color: inherit; padding: 0; }
.code-caption { font-size: .82rem; color: var(--text-soft); margin-top: -8px; }

/* ---------- feature list ---------- */
.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li { padding-left: 30px; position: relative; margin-bottom: 12px; }
.check-list li::before {
    content: "\2713"; position: absolute; left: 0; top: 0;
    color: var(--cl-green); font-weight: 800;
}

/* ---------- screenshots ---------- */
.shot { margin: 36px 0 0; }
.shot img {
    display: block; width: 100%; height: auto; border-radius: var(--radius);
    border: 1px solid #D7E1EF; box-shadow: 0 12px 32px rgba(20,40,80,.12);
}
.shot-dark img { border-color: rgba(255,255,255,.18); }
.shot-frame {
    border: 2px dashed #A9BBD8; border-radius: var(--radius);
    background: repeating-linear-gradient(45deg, #F3F7FC, #F3F7FC 14px, #EBF2FA 14px, #EBF2FA 28px);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; aspect-ratio: 16 / 9; padding: 24px; text-align: center; color: var(--text-soft);
}
.shot-frame .shot-label { font-weight: 700; color: var(--brand-deep); }
.shot-frame .shot-hint { font-size: .88rem; max-width: 46ch; }
.shot figcaption { font-size: .85rem; color: var(--text-soft); margin-top: 10px; text-align: center; }
.shot-dark .shot-frame {
    border-color: rgba(255,255,255,.35);
    background: repeating-linear-gradient(45deg, rgba(255,255,255,.05), rgba(255,255,255,.05) 14px, rgba(255,255,255,.09) 14px, rgba(255,255,255,.09) 28px);
    color: #AFC3E0;
}
.shot-dark .shot-frame .shot-label { color: #fff; }
.shot-dark figcaption { color: #89A0C4; }

/* ---------- pricing ---------- */
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.price-card { display: flex; flex-direction: column; }
.price-card .price { font-size: 2rem; font-weight: 800; color: var(--ink); margin: 6px 0 2px; }
.price-card .price small { font-size: .95rem; font-weight: 500; color: var(--text-soft); }
.price-card .plan-tag { font-size: .8rem; color: var(--text-soft); margin-bottom: 18px; }
.price-card .check-list { flex: 1; margin: 18px 0 24px; font-size: .93rem; }
.price-featured { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand), var(--shadow); position: relative; }
.price-featured .flag {
    position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
    background: var(--brand); color: #fff; font-size: .72rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; padding: 3px 12px; border-radius: 999px;
}

/* ---------- callout panels (echo of app inline panels) ---------- */
.panel {
    border: 1px solid var(--border); border-left-width: 4px; border-radius: 8px;
    padding: 16px 20px; margin: 22px 0; background: #fff; font-size: .95rem;
}
.panel p:last-child { margin-bottom: 0; }
.panel-info    { border-left-color: var(--cl-blue);  background: #F2F8FE; }
.panel-warning { border-left-color: var(--cl-amber); background: #FFF9F2; }
.panel-danger  { border-left-color: var(--cl-red);   background: #FEF6F6; }
.panel-success { border-left-color: var(--cl-green); background: #F4FAF6; }
.panel-neutral { border-left-color: var(--cl-slate); background: var(--bg-soft); }
.panel .panel-title { font-weight: 700; color: var(--ink); display: block; margin-bottom: 4px; }

/* ---------- FAQ ---------- */
.faq details {
    border: 1px solid var(--border); border-radius: var(--radius);
    background: #fff; margin-bottom: 12px; padding: 0 22px;
}
.faq summary {
    cursor: pointer; font-weight: 600; color: var(--ink);
    padding: 18px 0; list-style: none; position: relative; padding-right: 30px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: "+"; position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
    color: var(--brand); font-size: 1.3rem; font-weight: 400;
}
.faq details[open] summary::after { content: "–"; }
.faq details > div { padding: 0 0 18px; color: var(--text-soft); }
.faq details > div p:last-child { margin-bottom: 0; }

/* ---------- CTA band ---------- */
.cta-band { background: linear-gradient(120deg, var(--brand), var(--brand-deep)); color: #fff; text-align: center; padding: 72px 0; }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.88); max-width: 54ch; margin: 0 auto 28px; }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; margin: 22px 0; }
table { border-collapse: collapse; width: 100%; font-size: .93rem; background: #fff; }
th, td { text-align: left; padding: 10px 14px; border: 1px solid var(--border); vertical-align: top; }
th { background: var(--bg-soft); color: var(--ink); }

/* ---------- footer ---------- */
.site-footer { background: var(--ink); color: #9FB0CC; margin-top: 0; font-size: .92rem; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; padding: 56px 24px 32px; }
.footer-brand p { margin-top: 12px; max-width: 34ch; }
.site-footer h3 { color: #fff; font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 14px; }
.site-footer nav a { display: block; color: #9FB0CC; margin-bottom: 9px; }
.site-footer nav a:hover { color: #fff; text-decoration: none; }
.site-footer .brand { color: #fff; }
/* the copyright line and the legal links sit on one row on desktop and stack on narrow screens */
.footer-legal { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 28px; border-top: 1px solid rgba(255,255,255,.12); padding-top: 22px; padding-bottom: 26px; font-size: .8rem; color: #7487A8; }
.footer-legal p { margin-bottom: 0; }
/* a ROW, unlike the stacked column navs above. Making this nav a flex container is what does it:
   ".site-footer nav a" sets display:block for the Product/Docs/Company columns and would otherwise
   stack these too, but flex items lay out along the main axis regardless of their display value */
.footer-legal-links { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 22px; }
/* .site-footer prefix needed to outrank ".site-footer nav a" (0,1,2) and clear its margin-bottom;
   not var(--brand) for the color: royal blue on the navy footer is close to unreadable, so these
   follow the same muted-to-white treatment the nav columns use, one step brighter than the
   copyright text beside them so they still read as links rather than as more small print */
.site-footer .footer-legal-links a { margin: 0; color: #9FB0CC; }
.site-footer .footer-legal-links a:hover { color: #fff; text-decoration: none; }

/* ---------- page hero (inner pages) ---------- */
.page-hero { background: var(--bg-soft); border-bottom: 1px solid var(--border); padding: 60px 0 48px; }
.page-hero h1 { max-width: 26ch; }
.page-hero p { color: var(--text-soft); max-width: 62ch; font-size: 1.08rem; margin-bottom: 0; }

/* ---------- docs layout ---------- */
.docs-layout { display: grid; grid-template-columns: 240px 1fr; gap: 48px; padding: 48px 0 90px; }
.docs-sidebar { position: sticky; top: 88px; align-self: start; font-size: .92rem; }
.docs-sidebar h4 { text-transform: uppercase; font-size: .72rem; letter-spacing: .1em; color: var(--text-soft); margin: 22px 0 8px; }
.docs-sidebar h4:first-child { margin-top: 0; }
.docs-sidebar a { display: block; color: var(--text); padding: 5px 10px; border-radius: 6px; border-left: 3px solid transparent; }
.docs-sidebar a:hover { background: var(--bg-tint); text-decoration: none; }
.docs-sidebar a.active { color: var(--brand); font-weight: 600; border-left-color: var(--brand); background: var(--bg-tint); border-radius: 0 6px 6px 0; }
.docs-content { min-width: 0; }
.docs-content h1 { font-size: 2rem; }
.docs-content h2 { font-size: 1.4rem; margin-top: 2.2em; }
.docs-content h3 { margin-top: 1.8em; }
.docs-content > h1 + p.lede { font-size: 1.1rem; color: var(--text-soft); }
.docs-content li { margin-bottom: 6px; }
.doc-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 30px; }
.doc-cards .card h3 { margin-bottom: 6px; }
.doc-cards .card a { font-weight: 600; }

/* ---------- legal documents (privacy, terms, EULA, DPA, sub-processors) ---------- */
/* these pair .legal-content with .container-reading rather than defining their own width: a policy
   is prose and wants the same ~70-character measure a blog post does, not the 1080px marketing grid.
   Headings are smaller than the docs scale because a numbered clause is a signpost, not a headline */
.legal-content { padding: 44px 0 80px; line-height: 1.7; }
.legal-content h2 { font-size: 1.22rem; margin-top: 2.4em; scroll-margin-top: 84px; } /* scroll-margin keeps the sticky header off an anchored clause */
.legal-content h3 { font-size: 1.01rem; margin-top: 1.7em; }
.legal-content ul, .legal-content ol { padding-left: 22px; margin: 0 0 1em; }
.legal-content li { margin-bottom: 7px; }
.legal-meta { font-size: .85rem; color: var(--text-soft); border-bottom: 1px solid var(--border); padding-bottom: 16px; margin-bottom: 4px; }
/* table of contents - two columns on desktop because these documents run long enough that a
   single-column list pushes the first clause below the fold */
.legal-toc { background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 24px; margin: 30px 0 44px; }
.legal-toc h2 { font-size: .76rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text-soft); margin: 0 0 12px; }
.legal-toc ol { columns: 2; column-gap: 32px; font-size: .92rem; margin: 0; }
.legal-toc li { margin-bottom: 5px; break-inside: avoid; }
/* sibling-document links at the foot of every legal page */
.legal-nav { margin-top: 56px; padding-top: 26px; border-top: 1px solid var(--border); font-size: .92rem; }
.legal-nav h2 { font-size: .76rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text-soft); margin: 0 0 10px; }
.legal-nav a { display: inline-block; margin: 0 20px 6px 0; }
.legal-nav a[aria-current="page"] { color: var(--text-soft); font-weight: 600; }
@media (max-width: 640px) { .legal-toc ol { columns: 1; } }

/* status badge trio used in docs lifecycle page */
.status-badge {
    display: inline-block; font-size: .74rem; font-weight: 700; letter-spacing: .04em;
    padding: 3px 10px; border-radius: 4px; color: #fff; text-transform: uppercase;
}
.st-active { background: var(--cl-green); }
.st-scheduled { background: var(--cl-blue); }
.st-retrying, .st-warning { background: var(--cl-amber); }
.st-error { background: var(--cl-red); }
.st-terminal { background: var(--cl-slate); }

/* ---------- blog ---------- */
/* a narrower column than .container: prose wants ~65-75 characters per line, and the 1080px
   marketing grid is far too wide to read a 900-word post in */
.container-reading { max-width: 748px; }

/* index listing */
.post-list { list-style: none; padding: 0; margin: 0; }
.post-card { padding: 0 0 32px; margin-bottom: 32px; border-bottom: 1px solid var(--border); }
.post-card:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 8px; }
.post-card-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: .85rem; color: var(--text-soft); margin-bottom: 10px; }
.post-card-meta .badge { margin-bottom: 0; }
.post-card-title { font-size: 1.5rem; margin-bottom: .4em; }
.post-card-title a { color: var(--ink); }
.post-card-title a:hover { color: var(--brand); text-decoration: none; }
.post-card-excerpt { color: var(--text-soft); margin-bottom: .6em; }
.post-card-more a { font-weight: 600; font-size: .93rem; }
.post-feed-link { margin-top: 40px; font-size: .9rem; color: var(--text-soft); }

/* post header */
.post-hero { background: var(--bg-soft); border-bottom: 1px solid var(--border); padding: 52px 0 40px; margin-bottom: 44px; }
.post-hero h1 { font-size: clamp(1.85rem, 3.6vw, 2.6rem); max-width: 22ch; }
.post-eyebrow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: .82rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--brand); margin-bottom: 14px; }
.post-eyebrow a { color: var(--brand); }
.post-eyebrow-sep, .post-meta-sep { color: var(--brand-silver); }
.post-part { color: var(--text-soft); }
.post-deck { font-size: 1.15rem; color: var(--text-soft); max-width: 46ch; margin-bottom: 1em; }
.post-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: .88rem; color: var(--text-soft); margin-bottom: 0; }
/* only ever seen by whoever is previewing a post before its publish date */
.post-scheduled { border: 1px dashed var(--cl-amber); border-radius: 8px; background: #FFF9F2; color: var(--ink); font-size: .88rem; padding: 10px 14px; margin-bottom: 20px; }

/* post body typography */
.post-body { font-size: 1.06rem; line-height: 1.75; }
.post-body h2 { font-size: 1.45rem; margin-top: 1.9em; margin-bottom: .6em; }
.post-body h3 { margin-top: 1.6em; }
.post-body ul, .post-body ol { padding-left: 22px; margin: 0 0 1em; }
.post-body li { margin-bottom: 8px; }
.post-body blockquote { margin: 1.6em 0; padding: 4px 0 4px 22px; border-left: 4px solid var(--brand); color: var(--ink); font-size: 1.12rem; }
.post-body blockquote p:last-child { margin-bottom: 0; }
.post-body > p:first-child { font-size: 1.14rem; color: var(--ink); }

/* in-post early access CTA */
.post-cta { margin: 52px 0 0; padding: 30px 32px; border-radius: var(--radius); border: 1px solid var(--border); border-left: 4px solid var(--brand); background: var(--bg-tint); }
.post-cta h2 { font-size: 1.3rem; margin-bottom: .4em; }
.post-cta p { color: var(--text-soft); margin-bottom: 20px; }

/* next / more in this series */
.post-series-nav { margin-top: 32px; padding: 22px 26px; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; }
.post-series-label { font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-soft); margin-bottom: 8px; }
.post-series-link { display: block; }
.post-series-link:hover { text-decoration: none; }
.post-series-part { display: block; font-size: .82rem; color: var(--text-soft); margin-bottom: 2px; }
.post-series-title { font-size: 1.1rem; font-weight: 700; color: var(--ink); margin-bottom: 0; }
.post-series-link:hover .post-series-title { color: var(--brand); }
.post-series-upcoming { border-style: dashed; background: var(--bg-soft); }
.post-series-upcoming .post-series-title { color: var(--text-soft); }
.post-series-when { font-size: .88rem; color: var(--text-soft); margin: 6px 0 0; }

/* author byline */
.author-bio { display: flex; gap: 18px; align-items: flex-start; margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--border); }
/* the source headshot is already square (300x300) and pre-cropped to the face, so object-fit has
   nothing to crop today - it is kept as a guard so a future replacement that is NOT square gets
   cropped rather than squashed into an oval */
.author-photo { width: 72px; height: 72px; border-radius: 50%; flex: none; object-fit: cover; background: var(--bg-soft); }
.author-detail p { font-size: .93rem; color: var(--text-soft); margin-bottom: 0; }
/* scoped to beat ".author-detail p" on specificity rather than reaching for !important */
.author-detail p.author-name { font-weight: 700; color: var(--ink); font-size: 1rem; margin-bottom: 6px; }
.author-linkedin { font-weight: 500; font-size: .85rem; margin-left: 10px; }
.post-back { margin: 40px 0 72px; font-size: .92rem; }

@media (max-width: 620px) {
    .post-hero { padding: 36px 0 30px; margin-bottom: 32px; }
    .post-cta { padding: 24px 22px; }
    .author-bio { flex-direction: column; gap: 14px; }
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
    .grid-3, .steps, .price-grid { grid-template-columns: 1fr; }
    .grid-2, .doc-cards { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .docs-layout { grid-template-columns: 1fr; }
    .docs-sidebar { position: static; order: -1; border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; background: #fff; }
    .site-nav {
        display: none; position: absolute; top: 64px; left: 0; right: 0;
        background: #fff; border-bottom: 1px solid var(--border);
        flex-direction: column; align-items: flex-start; padding: 18px 24px; gap: 16px;
    }
    .site-nav.open { display: flex; }
    .nav-toggle { display: block; }
}

/* ---------- modal + lead form ---------- */
body.modal-open { overflow: hidden; }
.modal-overlay {
    position: fixed; inset: 0; z-index: 1000;
    display: flex; align-items: flex-start; justify-content: center;
    padding: 48px 20px; overflow-y: auto;
    background: rgba(15,27,51,.55);
}
.modal-overlay[hidden] { display: none; }
.modal {
    position: relative; width: 100%; max-width: 520px;
    background: #fff; border-radius: var(--radius); box-shadow: var(--shadow);
    padding: 32px; margin: auto;
}
.modal-close {
    position: absolute; top: 12px; right: 14px;
    background: none; border: 0; cursor: pointer;
    font-size: 1.6rem; line-height: 1; color: var(--text-soft);
}
.modal-close:hover { color: var(--ink); }
.modal h2 { font-size: 1.4rem; }
.modal-intro { color: var(--text-soft); font-size: .95rem; margin-bottom: 22px; }

.lead-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-field { margin-bottom: 16px; }
.form-field label {
    display: block; font-size: .85rem; font-weight: 600;
    color: var(--ink); margin-bottom: 6px;
}
.form-field input,
.form-field select,
.form-field textarea {
    width: 100%; font: inherit; color: var(--text);
    padding: 10px 12px; border: 1px solid var(--border);
    border-radius: 8px; background: #fff; box-sizing: border-box;
}
.form-field textarea { resize: vertical; }
/* the select is left as the platform's native control on purpose - it inherits the padding, border
   and font above, which is enough to line it up with the inputs without fighting the OS over what
   a dropdown looks like */
.form-field select { line-height: normal; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    outline: none; border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(27,102,232,.18);
}
.lead-submit { width: 100%; margin-top: 6px; }
/* consent notice under the submit button - quiet enough not to compete with the button, large
   enough to actually be readable, which is the whole point of it being there */
.form-consent { font-size: .8rem; line-height: 1.55; color: var(--text-soft); margin: 14px 0 0; text-align: center; }

.form-success h2 { color: var(--cl-green); }
.form-success p { color: var(--text-soft); margin-bottom: 22px; }

/* contact page: the form carries the page, the sidebar carries the things that must NOT go
   through the form (vulnerability reports, data subject requests) plus the shorter route to
   early access. Sidebar second in the source order so the form is what a screen reader and a
   narrow viewport both reach first */
.contact-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 32px; align-items: start; }
.contact-grid .form-card { padding: 32px; }
.contact-grid .form-card h2 { font-size: 1.35rem; margin-bottom: 22px; }
.contact-grid .form-success p:last-child { margin-bottom: 0; }
.contact-aside { display: grid; gap: 18px; }
.contact-aside h3 { font-size: 1rem; margin-bottom: 8px; }
@media (max-width: 860px) {
    .contact-grid { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 520px) {
    /* 32px of padding either side of a 375px screen is a quarter of it spent on nothing */
    .contact-grid .form-card { padding: 22px; }
}

/* honeypot + hidden iframe: kept in the DOM but out of view */
.hp-field {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (max-width: 520px) {
    .modal-overlay { padding: 0; }
    .modal { max-width: none; min-height: 100vh; border-radius: 0; }
    .lead-form .form-row { grid-template-columns: 1fr; gap: 0; }
}

/*  contact form server-side validation states (contact.php re-renders with these after a POST) */
.form-card .panel { margin-bottom: 20px; }
.form-field.has-error input,
.form-field.has-error select,
.form-field.has-error textarea { border-color: var(--cl-red); }
.field-error { color: var(--cl-red); font-size: 0.9rem; margin: 6px 0 0; }