@charset "UTF-8";
/* ShipClarity site stylesheet.
   Union of the three former inline stylesheets (index, guides, article), de-duplicated.
   Values are copied verbatim; where pages disagreed, the index.html variant is the
   shared default and the page-specific variant is scoped by the body class:
     body.home   - index.html
     body.guides - guides.html, 404.html
     body.guide  - guide articles (src/layouts/guide.html) */

/* ---- shared ---- */
:root{--bg:#faf9f6;--card:#fff;--ink:#1a1a1a;--muted:#5f5f5f;--line:#e8e5df;--brand:#2f6f4f;--brand2:#245a40;--soft:#e7f2ec;--gold:#b98a2f;--warnbg:#fef7e0;--warn:#8a6416;--codebg:#f1efe9;--err:#b3261e;}
@media (prefers-color-scheme:dark){:root{--bg:#14130f;--card:#1e1d1a;--ink:#ece9e2;--muted:#a49e93;--line:#332f28;--brand:#7fbf9e;--brand2:#7fbf9e;--soft:#22322a;--gold:#d4a94c;--warnbg:#2a2312;--warn:#d4a94c;--codebg:#26241f;--err:#ff8a80;}}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Segoe UI',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--ink);line-height:1.6;}
.wrap{max-width:860px;margin:0 auto;padding:0 20px;}
.cta{display:inline-block;background:var(--brand);color:#fff;font-weight:700;font-size:1.05rem;padding:15px 32px;border-radius:10px;text-decoration:none;}
.cta:hover{background:var(--brand2);}
.cta.small{padding:11px 22px;font-size:.95rem;}
footer{text-align:center;padding:44px 20px;color:var(--muted);font-size:.88rem;border-top:1px solid var(--line);margin-top:20px;}
footer a{color:var(--brand)}
footer .privacy{display:inline-block;margin-top:6px;font-size:.8rem;}
img.px{position:absolute;width:1px;height:1px;border:0;opacity:0;pointer-events:none;}

/* ---- home (index.html) ---- */
.home header{text-align:center;padding:64px 20px 44px;}
.home .logo{font-size:1.5rem;font-weight:800;color:var(--brand);letter-spacing:-.5px;margin-bottom:40px;}
.home h1{font-size:2.3rem;line-height:1.15;letter-spacing:-1px;margin-bottom:18px;}
.home h1 .hl{color:var(--brand);}
.sub{font-size:1.15rem;color:var(--muted);max-width:620px;margin:0 auto 28px;}
.async{display:block;margin-top:14px;font-size:.9rem;color:var(--muted);}
.home section{padding:40px 0;}
.home section.alt{background:var(--card);border-block:1px solid var(--line);}
.home h2{font-size:1.5rem;text-align:center;margin-bottom:8px;letter-spacing:-.3px;}
.home .lead{text-align:center;color:var(--muted);max-width:640px;margin:0 auto 30px;}
.pains{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.pain{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:22px;}
.pain .ic{font-size:1.6rem;margin-bottom:10px;}
.pain h3{font-size:1.02rem;margin-bottom:6px;}
.pain p{font-size:.9rem;color:var(--muted);}
.steps{display:grid;grid-template-columns:repeat(2,1fr);gap:28px 16px;counter-reset:s;}
.step{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:22px;position:relative;}
.step::before{counter-increment:s;content:counter(s);position:absolute;top:-14px;left:20px;width:28px;height:28px;background:var(--brand);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem;}
.step h3{font-size:1rem;margin:8px 0 6px;}
.step p{font-size:.9rem;color:var(--muted);}
/* "What an audit actually finds" card (formerly inline styles) */
.sample{max-width:640px;margin:0 auto;background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:24px;}
.sample .sev{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:20px;}
.sample .tag{color:#fff;font-size:.8rem;font-weight:700;padding:4px 12px;border-radius:20px;}
.sample .tag.critical{background:#b98a2f;}
.sample .tag.high{background:#d63a3a;}
.sample .tag.medium{background:#c98a00;}
.sample .tag.low{background:#5f5f5f;}
.sample .headline{border-left:4px solid #b98a2f;padding-left:16px;}
.sample .headline .title{font-weight:700;margin-bottom:4px;}
.sample .headline p{color:var(--muted);font-size:.94rem;margin:0;}
.sample .note{font-size:.86rem;color:var(--muted);margin-top:18px;margin-bottom:0;}
.sample .download{text-align:center;margin:18px 0 0;}
.pkgs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start;}
.pkg{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:24px;display:flex;flex-direction:column;}
.pkg.featured{border-color:var(--brand);border-width:2px;box-shadow:0 8px 30px rgba(47,111,79,.10);}
.pkg .badge{display:inline-block;background:var(--soft);color:var(--brand);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:3px 10px;border-radius:20px;margin-bottom:10px;width:fit-content;}
.pkg h3{font-size:1.15rem;margin-bottom:4px;}
.pkg .price{font-size:1.8rem;font-weight:800;color:var(--brand);margin:6px 0;}
.pkg .price small{font-size:.85rem;color:var(--muted);font-weight:500;}
.pkg .who{font-size:.85rem;color:var(--muted);margin-bottom:14px;min-height:38px;}
.pkg ul{list-style:none;font-size:.88rem;margin-bottom:18px;}
.pkg li{padding:5px 0 5px 22px;position:relative;}
.pkg li::before{content:"✓";position:absolute;left:0;color:var(--brand);font-weight:700;}
.pkg li.no{color:var(--muted);}
.pkg li.no::before{content:"-";color:var(--muted);}
.pkg .turn{font-size:.82rem;color:var(--muted);margin-bottom:14px;}
.pkg .cta{margin-top:auto;text-align:center;}
.compare{text-align:center;color:var(--muted);font-size:.92rem;max-width:720px;margin:26px auto 0;}
.about{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:28px;display:flex;gap:20px;align-items:flex-start;}
.about .av{width:64px;height:64px;border-radius:50%;object-fit:cover;background:var(--soft);display:flex;align-items:center;justify-content:center;font-size:1.6rem;flex:0 0 64px;}
.about h3{margin-bottom:6px;}
.about p{font-size:.92rem;color:var(--muted);}
.final{text-align:center;padding:50px 20px;}
/* "By the numbers" */
.nums{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;}
.num{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px 14px;text-align:center;}
.num b{display:block;font-size:1.9rem;line-height:1.1;font-weight:800;color:var(--brand);margin-bottom:6px;}
.num span{display:block;font-size:.82rem;color:var(--muted);}
.nums-note{text-align:center;color:var(--muted);font-size:.9rem;max-width:640px;margin:20px auto 0;}
/* "URL + email" form (src/partials/quoteform.html, behaviour in assets/quote.js) */
.quote{max-width:720px;margin:30px auto 0;background:var(--soft);border:1px solid var(--brand);border-radius:14px;padding:22px 24px;text-align:center;}
.final .quote{margin:0 auto 26px;}
.quote-promise{font-weight:700;margin-bottom:14px;}
.quote-form{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;justify-content:center;}
.quote-form[hidden]{display:none;}
.quote-field{flex:1 1 220px;text-align:left;font-size:.82rem;font-weight:600;color:var(--muted);}
.quote-field span{display:block;margin-bottom:4px;}
.quote-field input{width:100%;font:inherit;font-size:1rem;font-weight:400;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:8px;padding:10px 12px;}
.quote-field input:focus-visible{outline:2px solid var(--brand);outline-offset:1px;border-color:var(--brand);}
.quote-field input[aria-invalid="true"]{border-color:var(--err);}
.quote-form button{border:0;cursor:pointer;font-family:inherit;flex:0 0 auto;}
.quote-form button:disabled{opacity:.6;cursor:default;}
.quote-status{font-size:.92rem;margin-top:12px;}
.quote-status:empty{display:none;}
.quote-status.ok{color:var(--brand);font-weight:700;}
.quote-status.err{color:var(--err);}
.quote-status a{color:var(--brand);font-weight:700;}
.quote-note{font-size:.8rem;color:var(--muted);margin-top:10px;}
.quote-note a{color:var(--brand);}
@media(max-width:720px){.pains,.steps,.pkgs{grid-template-columns:1fr;}.nums{grid-template-columns:repeat(2,1fr);}.home h1{font-size:1.8rem;}.quote-form button{flex:1 1 100%;}}

/* ---- inner pages: guides list, 404 (body.guides) and articles (body.guide) ---- */
.guides .wrap,.guide .wrap{max-width:760px;}
.guides header,.guide header{text-align:center;padding:48px 20px 8px;}
.guides .logo,.guide .logo{font-size:1.3rem;font-weight:800;color:var(--brand);letter-spacing:-.5px;text-decoration:none;}
.guides main{padding:28px 0 40px;}
.guides h1{font-size:1.9rem;letter-spacing:-.5px;margin:22px 0 10px;text-align:center}
.guides .lead{color:var(--muted);text-align:center;max-width:520px;margin:0 auto 36px}
.card{display:block;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px 24px;margin-bottom:16px;text-decoration:none;color:inherit}
.card:hover{border-color:var(--brand)}
.card h2{font-size:1.15rem;margin-bottom:6px;color:var(--ink)}
.card p{color:var(--muted);font-size:.92rem;margin-bottom:0}
.card .arrow{color:var(--brand);font-weight:700}

/* ---- guide article (body.guide) ---- */
body.guide{line-height:1.65;}
.guide main{padding:28px 0 10px;}
.guide h1{font-size:2rem;line-height:1.2;letter-spacing:-.5px;margin:22px 0 14px;}
.guide .meta{color:var(--muted);font-size:.88rem;margin-bottom:28px}
.guide .lead{font-size:1.08rem;color:var(--ink);margin-bottom:18px}
.guide p{margin-bottom:16px}
.guide h2{font-size:1.3rem;margin:38px 0 6px;letter-spacing:-.2px}
.guide h2 .num{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;background:var(--brand);color:#fff;border-radius:50%;font-size:.95rem;margin-right:10px;vertical-align:middle}
.guide h3{font-size:.95rem;text-transform:uppercase;letter-spacing:.06em;color:var(--brand);margin:18px 0 6px}
.guide code, .guide .code-inline{font-family:ui-monospace,Consolas,monospace;background:var(--codebg);padding:2px 6px;border-radius:5px;font-size:.9em}
.guide pre{background:var(--codebg);border:1px solid var(--line);border-radius:8px;padding:14px 16px;overflow-x:auto;margin:10px 0 16px;font-family:ui-monospace,Consolas,monospace;font-size:.85rem}
.callout{background:var(--warnbg);color:var(--warn);border-radius:10px;padding:14px 16px;font-size:.92rem;margin:16px 0}
.box{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px 22px;margin:14px 0 30px}
.box .label{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:6px}
.guide ul, .guide ol{margin:0 0 16px 22px}
.guide li{margin-bottom:6px}
.cta-box{background:var(--soft);border:1px solid var(--brand);border-radius:14px;padding:26px 24px;margin:44px 0 30px;text-align:center}
.cta-box h2{margin-top:0}
.cta-box p{color:var(--muted);max-width:520px;margin-left:auto;margin-right:auto}
.guide .cta{font-size:1rem;padding:13px 28px;margin:6px 6px}
.cta.ghost{background:transparent;color:var(--brand);border:2px solid var(--brand);padding:11px 26px}
.toc{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px 22px;margin:24px 0 8px}
.toc .label{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:8px}
.toc ol{margin:0 0 0 20px}
.toc a{color:var(--ink);text-decoration:none}
.toc a:hover{color:var(--brand)}