/* oowl shield — brochure components for the web (November 2026).
   Ported from the oowl shield brochure v0.3 (~/dev/oowl-wazuh/brochure): the same
   navy/green palette, original inline SVG/HTML mock-ups, plan cards, comparison
   table and timeline. Loaded only on pages that use them (home, /services/monitoring).
   All values are tints of the two brand colours in site.css; amber is functional
   only (sample-data labels and the in-development mark). See DESIGN.md. */

:root {
  --navy: #11223a; --navy2: #1a2f4d; --navy3: #26406a; --navyline: #34507c;
  --onnavy: #c9d3e3; --onnavy2: #a9b8cd; --mint: #8fd0ae;
  --green: #0d5c3d; --green2: #13724d; --gtint: #e4f0e9; --gtint2: #cfe5d8; --ntint: #e9edf3;
  --draft: #8a4b00; --draftbg: #fff4e5; --urgent: #9b2c2c; --urgentbg: #f8e6e4;
}

/* ---------------------------------------------------------- shared bits --- */
.s-ico { width: 22px; height: 22px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.s-badge { width: 40px; height: 40px; border-radius: 5px; background: var(--gtint); color: var(--green);
  display: inline-flex; align-items: center; justify-content: center; flex: none; }
.s-badge.n { background: var(--ntint); color: var(--navy); }
.s-badge.d { background: var(--navy3); color: var(--mint); }
.s-badge.g { background: var(--green); color: #fff; }
.s-badge.g2 { background: var(--green2); color: #fff; }
.s-badge.sm { width: 30px; height: 30px; }
.s-badge.sm .s-ico { width: 17px; height: 17px; }
.s-kicker { font-size: 15.5px; font-weight: 600; color: var(--green); margin-bottom: 10px; letter-spacing: 0; }
.s-lead { font-size: 18.5px; max-width: 64ch; }
.s-sample { display: inline-flex; align-items: center; gap: 5px; background: var(--draftbg); color: var(--draft);
  border: 1px solid var(--draft); font-size: 12px; font-weight: 600; line-height: 1.3; padding: 2px 7px; border-radius: 3px; white-space: nowrap; }
.s-flag { color: var(--draft); font-weight: 600; font-size: .78em; vertical-align: super; line-height: 0; margin-left: 1px; }
.s-fn { font-size: 14px; color: var(--muted); margin-top: 28px; }
.s-fn .s-flag { vertical-align: baseline; font-size: 1em; margin: 0 4px 0 0; }
.s-ticks { list-style: none; padding: 0; margin: 0; }
.s-ticks li { position: relative; padding-left: 26px; margin-top: 9px; }
.s-ticks li:first-child { margin-top: 0; }
.s-ticks li svg { position: absolute; left: 0; top: 5px; width: 16px; height: 16px; stroke: var(--green); fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.s-chk { list-style: none; padding: 0; margin: 0; }
.s-chk li { position: relative; padding-left: 28px; margin-top: 9px; }
.s-chk li::before { content: ""; position: absolute; left: 0; top: 5px; width: 15px; height: 15px; border: 1.5px solid var(--green); border-radius: 3px; background: #fff; }
.s-irow { display: flex; gap: 14px; align-items: flex-start; }
.s-irow h3, .s-irow h4 { margin-top: 2px; }
.s-panel { background: var(--band); border-radius: 5px; padding: 24px 26px; }
.s-panel.g { background: var(--gtint); }
.s-panel.n { background: var(--ntint); }
.s-panel.w { background: #fff; border: 1px solid var(--hair); }
.s-panel h3 { font-size: 19px; margin-bottom: 10px; }
.s-panel p, .s-panel li { font-size: 15.5px; }
.s-navy { background: var(--navy); color: var(--onnavy); border-radius: 5px; padding: 24px 26px; }
.s-navy h3, .s-navy h4, .s-navy b, .s-navy strong { color: #fff; }
.s-navy a { color: var(--mint); }
.s-greenp { background: var(--green); color: #e6f3ec; border-radius: 5px; padding: 24px 26px; }
.s-greenp h3, .s-greenp h4, .s-greenp b, .s-greenp strong { color: #fff; }
.s-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.s-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.s-grid5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.s-card h3 { font-size: 17px; margin: 14px 0 6px; letter-spacing: -0.01em; }
.s-card p { font-size: 15px; }
.s-band { display: flex; gap: 20px; align-items: center; }
.s-band h3 { font-size: 20px; margin-bottom: 4px; }
.s-band p { font-size: 15.5px; }
.s-band .s-badge { width: 52px; height: 52px; }
.s-band .s-badge .s-ico { width: 28px; height: 28px; }
.s-h3 { font-size: 22px; margin: 52px 0 18px; }
.s-split { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 52px 0 18px; }
.s-split .s-h3 { margin: 0; }
.s-mt { margin-top: 24px; }
.s-mtl { margin-top: 40px; }
.s-small { font-size: 15px; }
.s-xs { font-size: 13.5px; }
.s-anchor { scroll-margin-top: 16px; }
@media (max-width: 980px) {
  .s-grid5 { grid-template-columns: repeat(2, 1fr); }
  .s-grid5 > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .s-grid2, .s-grid3 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .s-grid5 { grid-template-columns: 1fr; }
  .s-panel, .s-navy, .s-greenp { padding: 20px; }
  .s-band { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* ------------------------------------------------------- the dark hero --- */
section.s-hero { background: var(--navy); color: var(--onnavy); padding: 76px 0 64px; position: relative; overflow: hidden; border: 0; }
.s-hero .s-rings { position: absolute; right: -180px; top: -60px; width: 760px; height: 400px; pointer-events: none; }
.s-hero .wrap { position: relative; }
.s-hero h1 { color: #fff; font-size: clamp(32px, 4.8vw, 54px); letter-spacing: -0.022em; line-height: 1.07; max-width: 18ch; }
.s-hero .s-kicker { color: var(--mint); font-size: 17px; }
.s-hero .s-lead { color: var(--onnavy); margin-top: 20px; }
.s-hero .crumb, .s-hero .crumb a { color: var(--onnavy2); border-bottom-color: var(--navyline); }
.s-hero .crumb a:hover { color: #fff; border-bottom-color: #fff; }
.s-hero .actions { margin-top: 30px; display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
.s-hero .btn { background: #fff; border-color: #fff; color: var(--navy); }
.s-hero .btn:hover, .s-hero .btn:focus { background: var(--gtint); border-color: var(--gtint); color: var(--navy); }
.s-hero .btn.secondary, .s-hero .btn.secondary:link, .s-hero .btn.secondary:visited { background: transparent; border-color: var(--navyline); color: #fff; }
.s-hero .btn.secondary:hover { background: var(--navy2); border-color: var(--onnavy2); color: #fff; }
.s-hero :focus-visible { outline-color: var(--mint); }
.s-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 470px); gap: 56px; align-items: start; margin-top: 40px; }
.s-vlist { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.s-vlist li { display: flex; gap: 14px; align-items: flex-start; font-size: 16px; line-height: 1.45; }
.s-vlist b { color: #fff; display: block; font-size: 17px; font-weight: 600; }
.s-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 48px; }
.s-strip > div { background: var(--navy2); border: 1px solid var(--navyline); border-radius: 5px; padding: 18px 20px; }
.s-strip h2, .s-strip h3 { color: #fff; font-size: 17px; margin: 12px 0 4px; letter-spacing: -0.01em; }
.s-strip p { font-size: 15px; color: var(--onnavy); }
.s-strip a { color: var(--mint); border-bottom: 1px solid rgba(143, 208, 174, .45); }
.s-hero .s-fn { color: var(--onnavy2); }
.s-hero .s-fn .s-flag, .s-hero .s-flag, .s-navy .s-flag, .s-greenp .s-flag,
.s-fit .s-flag, .s-flow .s-flag, .s-gap3 .s-flag, .s-au .s-flag { color: #ffc27a; }
@media (max-width: 980px) {
  .s-hero-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 760px) {
  section.s-hero { padding: 52px 0 48px; }
  .s-strip { grid-template-columns: 1fr; gap: 12px; margin-top: 36px; }
  .s-hero .s-rings { right: -320px; top: -40px; }
  .s-hero .actions .btn { width: 100%; }
}

/* cover art: a sample monthly report and a sample "we're calling you" card */
.s-art { position: relative; max-width: 470px; padding-bottom: 116px; }
.s-art .back { position: absolute; left: 26px; top: 14px; right: -10px; bottom: 120px; transform: rotate(3deg); background: #dfe6ef; border-radius: 6px; }
.s-doc { position: relative; transform: rotate(-2.2deg); background: #fff; border-radius: 6px; overflow: hidden; box-shadow: 0 0 0 1px #2c4669;
  font-size: 13.5px; line-height: 1.4; color: var(--slate); margin-right: 18px; }
.s-doc .hd { background: var(--navy); color: #fff; padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.s-doc .hd .wm { display: flex; align-items: center; gap: 7px; font-weight: 600; letter-spacing: -0.03em; font-size: 16px; }
.s-doc .hd .meta { font-size: 11.5px; color: var(--onnavy); text-align: right; line-height: 1.3; }
.s-doc .bd { padding: 12px 16px 16px; }
.s-doc .tag { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.s-doc .ttl { color: var(--navy); font-weight: 600; margin: 12px 0 4px; font-size: 13.5px; }
.s-call { position: absolute; right: -6px; bottom: 0; width: min(330px, 80%); background: var(--navy2); border: 1px solid var(--navyline);
  border-radius: 10px; padding: 14px 16px; color: var(--onnavy); font-size: 14px; line-height: 1.45; }
.s-call .top { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--onnavy2); margin-bottom: 6px; }
.s-call .top .s-ico { width: 16px; height: 16px; color: var(--mint); }
.s-call .top .s-sample { margin-left: auto; }
.s-call b { color: #fff; }

/* the report pieces, shared by the cover art and the full sample */
.s-verdict { display: flex; align-items: center; gap: 12px; background: var(--gtint); border-radius: 4px; padding: 11px 13px; }
.s-verdict b { color: var(--navy); font-size: 16px; display: block; line-height: 1.25; }
.s-minis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.s-mini { background: var(--band); border-radius: 4px; padding: 7px 9px; }
.s-mini .v { color: var(--navy); font-weight: 600; font-size: 17px; line-height: 1.2; }
.s-mini .k { font-size: 12px; color: var(--muted); line-height: 1.3; }
.s-act { display: grid; grid-template-columns: 24px 1fr auto; gap: 10px; align-items: start; padding: 9px 0; border-bottom: 1px solid var(--hair); }
.s-act .n { width: 22px; height: 22px; border-radius: 50%; background: var(--green); color: #fff; font-weight: 600; font-size: 12.5px;
  display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.s-act b { color: var(--navy); }
.s-act.c { grid-template-columns: 22px 1fr; padding: 6px 0; }
.s-act.c .n { width: 19px; height: 19px; font-size: 11px; }
.s-okgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; }
.s-okgrid div { display: flex; gap: 6px; align-items: flex-start; }
.s-okgrid .s-ico { width: 15px; height: 15px; color: var(--green); stroke-width: 2.6; margin-top: 3px; }
.s-chip { display: inline-flex; align-items: center; gap: 4px; border-radius: 3px; padding: 2px 7px; font-weight: 600; font-size: 12px; white-space: nowrap; line-height: 1.35; }
.s-chip svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2.6; stroke-linecap: round; }
.s-chip.u { background: var(--urgentbg); color: var(--urgent); }
.s-chip.r { background: var(--ntint); color: var(--navy); }
@media (max-width: 560px) {
  .s-art { padding-bottom: 128px; }
  .s-doc { margin-right: 6px; font-size: 13px; }
  .s-call { width: 88%; }
  .s-okgrid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------- why it matters */
.s-scen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.s-scen > div { border: 1px solid var(--hair); border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; background: #fff; }
.s-scen .sh { background: var(--navy); padding: 16px 18px; display: flex; gap: 12px; align-items: center; min-height: 76px; }
.s-scen .sh h3 { color: #fff; margin: 0; font-size: 18px; line-height: 1.25; }
.s-scen .sb { padding: 16px 18px; font-size: 15.5px; flex: 1; }
.s-scen .sn { background: var(--gtint); padding: 16px 18px; font-size: 15.5px; }
.s-scen .lbl { font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 4px; }
.s-scen .sn .lbl { color: var(--green); }
.s-gap3 { display: grid; grid-template-columns: 1fr 1fr 1.25fr; border-radius: 6px; overflow: hidden; }
.s-gap3 > div { padding: 22px 24px; font-size: 15.5px; }
.s-gap3 h3 { font-size: 18px; margin: 12px 0 6px; }
.s-gap3 .a { background: var(--ntint); }
.s-gap3 .b { background: var(--band); }
.s-gap3 .c { background: var(--green); color: #e6f3ec; }
.s-gap3 .c h3 { color: #fff; }
@media (max-width: 860px) {
  .s-scen, .s-gap3 { grid-template-columns: 1fr; }
  .s-scen .sh { min-height: 0; }
}

/* -------------------------------------------------------- how it works --- */
.s-flow { background: var(--navy); border-radius: 6px; padding: 24px 22px 18px; color: var(--onnavy); }
.s-flow .cap { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.s-flow .cap h3 { color: #fff; font-size: 20px; margin: 0; }
.s-flow .cap span { font-size: 14px; color: var(--onnavy2); }
.s-flow svg.diagram { display: block; width: 100%; height: auto; }
.s-flow ol { display: none; }
@media (max-width: 900px) {
  .s-flow { padding: 20px 18px; }
  .s-flow svg.diagram { display: none; }
  .s-flow ol { display: grid; gap: 10px; list-style: none; padding: 0; margin: 0; counter-reset: f; }
  .s-flow li { background: var(--navy2); border: 1px solid var(--navyline); border-radius: 5px; padding: 13px 15px; font-size: 15px; position: relative; }
  .s-flow li.au { background: var(--green); border-color: var(--green); color: #e6f3ec; }
  .s-flow li.you { background: #fff; border-color: #fff; color: var(--slate); }
  .s-flow li.you b { color: var(--navy); }
  .s-flow li.off { border-style: dashed; border-color: #ffb963; }
  .s-flow li b { color: #fff; display: block; font-size: 16.5px; }
  .s-flow li + li::before { content: ""; position: absolute; left: 24px; top: -11px; width: 2px; height: 10px; background: var(--mint); }
  .s-flow .zone { font-size: 13.5px; color: var(--mint); font-weight: 600; margin: 4px 0 -2px; }
}

/* ------------------------------------------------------- sample report --- */
.s-report-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.s-paperwrap { background: var(--ntint); border-radius: 6px; padding: 20px; }
.s-paperwrap .top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; font-weight: 600; color: var(--navy); font-size: 15px; }
.s-paper { background: #fff; border-radius: 5px; border: 1px solid var(--hair); overflow: hidden; font-size: 14.5px; line-height: 1.45; }
.s-paper .hd { background: var(--navy); color: #fff; padding: 14px 18px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.s-paper .hd .wm { font-weight: 600; letter-spacing: -0.03em; display: flex; gap: 8px; align-items: center; font-size: 18px; }
.s-paper .hd .meta { font-size: 12.5px; color: var(--onnavy); text-align: right; line-height: 1.35; }
.s-paper .bd { padding: 16px 18px 18px; }
.s-paper h3 { font-size: 15.5px; margin: 16px 0 6px; letter-spacing: -0.01em; }
.s-paper .s-verdict b { font-size: 17px; }
.s-bars { display: grid; gap: 5px; margin: 6px 0 6px; }
.s-bars .r { display: grid; grid-template-columns: 112px 1fr; gap: 10px; align-items: center; font-size: 13px; }
.s-bars i { display: block; height: 10px; border-radius: 3px; background: var(--ntint); overflow: hidden; }
.s-bars b { display: block; height: 100%; background: var(--green); border-radius: 3px; }
.s-bars .w72 { width: 72%; } .s-bars .w87 { width: 87%; } .s-bars .w81 { width: 81%; } .s-bars .w91 { width: 91%; }
.s-urgent { background: var(--urgentbg); border-radius: 5px; padding: 20px 22px; }
.s-urgent .top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; gap: 10px; }
.s-urgent h3 { font-size: 18px; margin-bottom: 10px; }
.s-urgent .s-irow { margin-top: 10px; font-size: 15px; }
.s-urgent b { color: var(--navy); }
.s-steps2 { font-size: 14.5px; }
.s-steps2 .t { color: var(--navy); font-weight: 600; margin-bottom: 6px; }
.s-steps2 ol { padding-left: 20px; margin: 0; }
.s-steps2 li { margin-top: 3px; }
.s-receive { display: grid; gap: 16px; }
.s-receive h3 { font-size: 16.5px; margin-bottom: 2px; }
.s-receive p { font-size: 15px; }
@media (max-width: 900px) {
  .s-report-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .s-paperwrap { padding: 12px; }
  .s-paper .bd { padding: 14px; }
  .s-act { grid-template-columns: 24px 1fr; }
  .s-act .s-chip { grid-column: 2; justify-self: start; }
}

/* ---------------------------------------------------------------- plans --- */
.s-tiers { display: grid; grid-template-columns: 1fr 1.06fr 1fr; gap: 20px; align-items: stretch; }
.s-tier { border: 1px solid var(--hair); border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; background: #fff; }
.s-tier .th { padding: 22px 22px 18px; min-height: 150px; }
.s-tier.w .th { background: var(--ntint); }
.s-tier.s { border: 2px solid var(--green); }
.s-tier.s .th { background: var(--green); color: #e6f3ec; }
.s-tier.p .th { background: var(--navy); color: var(--onnavy); }
.s-tier .nm { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; color: var(--navy); line-height: 1.05; }
.s-tier.s .nm, .s-tier.p .nm { color: #fff; }
.s-tier .rec { display: inline-block; background: #fff; color: var(--green); font-size: 12.5px; font-weight: 600; padding: 2px 8px; border-radius: 3px; margin-bottom: 8px; }
.s-tier .rec.hide { visibility: hidden; }
.s-tier .sub { font-size: 15px; margin-top: 6px; }
.s-tier .pr { padding: 18px 22px 16px; border-bottom: 1px solid var(--hair); }
.s-tier .big { font-size: 38px; font-weight: 600; color: var(--navy); letter-spacing: -0.02em; line-height: 1; }
.s-tier .big small { font-size: 15px; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.s-tier .gst { font-size: 13px; color: var(--muted); margin-top: 5px; }
.s-tier .setup { margin-top: 12px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; background: var(--band); border-radius: 4px; padding: 7px 10px; font-size: 13.5px; }
.s-tier .setup b { color: var(--navy); font-size: 16px; white-space: nowrap; }
.s-tier .ask { font-size: 21px; font-weight: 600; color: var(--navy); letter-spacing: -0.015em; line-height: 1.2; }
.s-tier .ask + p { font-size: 14.5px; color: var(--muted); margin-top: 6px; }
.s-tier .facts2 { padding: 14px 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; border-bottom: 1px solid var(--hair); }
.s-tier .facts2 div { font-size: 13px; color: var(--muted); line-height: 1.35; }
.s-tier .facts2 b { display: block; font-size: 17px; color: var(--navy); }
.s-tier .inc { padding: 18px 22px 22px; font-size: 15px; flex: 1; }
.s-tier .lbl { font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.s-tier .inc p { margin-bottom: 14px; }
.s-tier .inc .s-xs { margin: 14px 0 0; color: var(--muted); }
.s-includes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 28px; margin-top: 4px; }
.s-includes div { display: flex; gap: 10px; align-items: flex-start; font-size: 15.5px; }
.s-includes .s-ico { width: 19px; height: 19px; color: var(--mint); margin-top: 2px; }
.s-terms { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--navyline); display: flex; gap: 8px 28px; flex-wrap: wrap; font-size: 15px; }
@media (max-width: 980px) {
  .s-tiers { grid-template-columns: 1fr; max-width: 560px; }
  .s-tier .th { min-height: 0; }
  .s-includes { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .s-includes { grid-template-columns: 1fr; }
}

/* comparison table */
.s-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.s-cmp { min-width: 660px; border-collapse: separate; border-spacing: 0; font-size: 15px; }
table.s-cmp th, table.s-cmp td { padding: 10px 14px; text-align: center; border-bottom: 1px solid var(--hair); vertical-align: middle; background: none; }
table.s-cmp td:first-child, table.s-cmp th:first-child { text-align: left; color: var(--navy); }
table.s-cmp thead th { color: #fff; font-weight: 600; font-size: 17px; padding: 14px; border-bottom: 0; }
table.s-cmp thead th:first-child { background: none; }
table.s-cmp thead th.w { background: var(--navy3); border-radius: 5px 0 0 0; }
table.s-cmp thead th.s { background: var(--green); }
table.s-cmp thead th.p { background: var(--navy); border-radius: 0 5px 0 0; }
table.s-cmp thead th small { display: block; font-size: 13px; font-weight: 400; color: #e6edf5; }
table.s-cmp td.sc { background: var(--gtint); }
table.s-cmp tr.sec td { background: var(--band); font-weight: 600; color: var(--muted); font-size: 13.5px; text-align: left; padding: 8px 14px; }
table.s-cmp tr.sec td.sc { background: var(--gtint2); }
table.s-cmp .yes svg { width: 18px; height: 18px; stroke: var(--green); fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
table.s-cmp .no { color: var(--muted); }
table.s-cmp b { color: var(--navy); }
table.s-cmp .pricecell b { font-size: 18px; }
table.s-cmp tr:last-child td { border-bottom: 1px solid var(--hair); }
.s-fit { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.s-fit > div { border-radius: 6px; padding: 20px 22px; font-size: 15.5px; }
.s-fit h3 { font-size: 18px; margin-bottom: 6px; }
.s-fit .a { background: var(--ntint); }
.s-fit .b { background: var(--gtint); border: 2px solid var(--green); }
.s-fit .c { background: var(--navy); color: var(--onnavy); }
.s-fit .c h3 { color: #fff; }
@media (max-width: 860px) { .s-fit { grid-template-columns: 1fr; } }
.s-scrollhint { display: none; font-size: 13.5px; color: var(--muted); margin-bottom: 8px; }
@media (max-width: 700px) { .s-scrollhint { display: block; } }

/* ------------------------------------------------------- setup timeline --- */
.s-tlwrap { background: var(--gtint); border-radius: 6px; padding: 28px 18px 24px; }
.s-tl { display: grid; grid-template-columns: repeat(6, 1fr); position: relative; list-style: none; padding: 0; margin: 0; }
.s-tl::before { content: ""; position: absolute; left: 8%; right: 8%; top: 24px; height: 3px; background: var(--gtint2); }
.s-tl li { text-align: center; position: relative; padding: 0 8px; }
.s-tl .dot { width: 50px; height: 50px; margin: 0 auto 10px; border-radius: 50%; background: var(--green); color: #fff;
  display: flex; align-items: center; justify-content: center; border: 4px solid var(--gtint); }
.s-tl li.last .dot { background: var(--navy); }
.s-tl .when { font-size: 13px; color: var(--green); font-weight: 600; }
.s-tl li.last .when { color: var(--navy); }
.s-tl h3 { font-size: 16px; margin: 2px 0 4px; letter-spacing: -0.01em; }
.s-tl p { font-size: 14px; line-height: 1.45; }
@media (max-width: 900px) {
  .s-tlwrap { padding: 22px 20px; }
  .s-tl { grid-template-columns: 1fr; gap: 0; }
  .s-tl::before { left: 24px; right: auto; top: 26px; bottom: 26px; width: 3px; height: auto; }
  .s-tl li { text-align: left; display: grid; grid-template-columns: 50px 1fr; column-gap: 16px; padding: 0 0 18px; }
  .s-tl li:last-child { padding-bottom: 0; }
  .s-tl .dot { margin: 0; grid-row: 1 / span 3; }
}

/* ------------------------------------------------------ security/privacy --- */
.s-df { display: grid; grid-template-columns: 1.5fr 1fr; gap: 20px; }
.s-au { background: var(--green); color: #e6f3ec; border-radius: 6px; padding: 24px 26px; }
.s-au h3 { color: #fff; font-size: 20px; margin-bottom: 4px; }
.s-au .items { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.s-au .items div { background: var(--green2); border-radius: 4px; padding: 10px 12px; font-size: 15px; display: flex; gap: 9px; align-items: center; color: #fff; }
.s-au .items .s-ico { width: 18px; height: 18px; color: var(--mint); }
.s-off { background: var(--ntint); border-radius: 6px; padding: 24px 26px; font-size: 15.5px; }
.s-off h3 { font-size: 20px; margin-bottom: 8px; }
.s-swap { display: grid; grid-template-columns: 1.5fr 22px 1fr; align-items: center; gap: 6px; margin: 10px 0 0; }
.s-swap span { background: #fff; border-radius: 3px; padding: 5px 7px; color: var(--navy); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; text-align: center; overflow-wrap: anywhere; }
.s-swap span.c { background: var(--navy); color: var(--mint); }
.s-swap .arr { text-align: center; color: var(--green); font-weight: 600; }
table.s-e8 { font-size: 15px; margin-top: 12px; }
table.s-e8 th { background: var(--navy); color: #fff; }
table.s-e8 tr:nth-child(even) td { background: var(--band); }
.s-not div { display: flex; gap: 9px; align-items: flex-start; margin-top: 7px; font-size: 15.5px; }
.s-not .s-ico { width: 18px; height: 18px; color: var(--muted); margin-top: 3px; }
.s-collect .s-irow { margin-bottom: 14px; font-size: 15.5px; }
.s-collect b { color: var(--navy); }
@media (max-width: 860px) {
  .s-df { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .s-au .items { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- faq --- */
.s-faq .faq { max-width: none; }
@media (min-width: 1024px) {
  .s-faq .faq { display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; border-top: 0; }
  .s-faq .faq details:nth-child(1), .s-faq .faq details:nth-child(2) { border-top: 1px solid var(--hair); }
}

/* ------------------------------------------------ about + call to action --- */
section.s-back { background: var(--navy); color: var(--onnavy); border: 0; position: relative; overflow: hidden; }
.s-back .s-rings { position: absolute; right: -200px; top: -80px; width: 760px; height: 400px; pointer-events: none; }
.s-back .wrap { position: relative; }
.s-back h2 { color: #fff; font-size: clamp(25px, 3.1vw, 34px); max-width: 30ch; }
.s-back .s-kicker { color: var(--mint); }
.s-back .s-lead { color: var(--onnavy); margin-top: 14px; }
.s-princ { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 32px; }
.s-princ > div { background: var(--navy2); border: 1px solid var(--navyline); border-radius: 5px; padding: 18px 20px; font-size: 15px; }
.s-princ h3 { color: #fff; font-size: 17px; margin: 12px 0 4px; }
.s-cta { background: var(--green); border-radius: 7px; padding: 34px 34px 30px; color: #e6f3ec; display: grid; grid-template-columns: 1.15fr 1fr; gap: 34px; margin-top: 40px; }
.s-cta h2 { color: #fff; font-size: clamp(26px, 3vw, 34px); margin-bottom: 10px; }
.s-cta .s-kicker { color: var(--mint); margin-bottom: 4px; }
.s-cta .c { display: flex; align-items: center; gap: 12px; color: #fff; font-size: 20px; font-weight: 600; margin-top: 12px; border: 0; }
.s-cta a.c:hover { text-decoration: underline; text-underline-offset: 4px; }
.s-cta .c .s-ico { width: 24px; height: 24px; color: var(--mint); }
.s-cta .btn { margin-top: 22px; background: #fff; border-color: #fff; color: var(--navy); }
.s-cta .btn:hover, .s-cta .btn:focus { background: var(--gtint); border-color: var(--gtint); color: var(--navy); }
.s-cta :focus-visible { outline-color: #fff; }
.s-cta .handy { background: var(--green2); border-radius: 5px; padding: 22px 24px; }
.s-cta .handy h3 { color: #fff; font-size: 18px; margin-bottom: 8px; }
.s-cta .handy .s-chk li { font-size: 15px; }
.s-cta .handy .s-chk li::before { background: transparent; border-color: var(--mint); }
.s-back .s-fine { margin-top: 30px; font-size: 13.5px; color: var(--onnavy2); max-width: 110ch; }
@media (max-width: 980px) {
  .s-princ { grid-template-columns: 1fr 1fr; }
  .s-cta { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .s-princ { grid-template-columns: 1fr; }
  .s-cta { padding: 24px 20px; }
  .s-cta .handy { padding: 18px; }
  .s-cta .c { font-size: 18px; }
  .s-cta .btn { width: 100%; }
}

/* ------------------------------------------------- home page additions --- */
.s-home .s-hero h1 { max-width: 19ch; }
.s-home .s-hero .s-lead { max-width: 58ch; }
.s-homeshield { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 56px; align-items: end; }
.s-homeshield .s-ticks li { font-size: 16px; margin-top: 14px; }
.s-homeshield .s-ticks li:first-child { margin-top: 0; }
.s-homeshield .s-ticks b { color: var(--ink); }
.s-homeshield .actions { display: flex; gap: 26px; flex-wrap: wrap; align-items: center; }
.s-h2 { font-size: clamp(25px, 3.1vw, 33px); max-width: 26ch; }
.s-hero-grid.s-hero-top { margin-top: 0; align-items: center; }
.s-artcap { margin-top: 14px; font-size: 14px; color: var(--onnavy2); }
.s-artcap a { color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .5); }
@media (max-width: 980px) { .s-homeshield { grid-template-columns: 1fr; gap: 32px; } }

/* --------------------------------------------------------- page helpers --- */
.s-h3.first { margin-top: 0; }
.s-split.tight { margin: 0 0 10px; }
.s-ink { color: var(--navy); }
table.s-cmp thead td { background: none; border-bottom: 0; }
table.s-cmp th[scope="row"] { font-weight: 400; color: var(--navy); background: none; font-size: 15px; text-align: left; }
table.s-cmp th[scope="row"], table.s-cmp td { width: 20%; }
table.s-cmp th[scope="row"] { width: 40%; }
.s-onlink { color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .5); }
.s-onlink:hover { border-bottom-color: #fff; }
.s-back .s-onlink { color: #fff; }
.s-navy .s-terms a { color: var(--mint); border-bottom: 1px solid rgba(143, 208, 174, .45); }
.s-off a, .s-collect a, #privacy p a { border-bottom: 1px solid rgba(13, 92, 61, .35); }
/* in-page jump list under the hero, like the brochure's contents list */
nav.s-jump { background: var(--navy2); border-top: 1px solid var(--navyline); }
nav.s-jump .wrap { display: flex; gap: 6px 26px; flex-wrap: wrap; padding-top: 14px; padding-bottom: 14px; }
nav.s-jump a { color: var(--onnavy); font-size: 15px; padding: 4px 0; border-bottom: 1px solid transparent; }
nav.s-jump a:hover { color: #fff; border-bottom-color: var(--mint); }
nav.s-jump :focus-visible { outline-color: var(--mint); }
@media (max-width: 760px) {
  nav.s-jump .wrap { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 22px; }
  nav.s-jump a { white-space: nowrap; }
}

/* ------------------------------------------------- review fixes (9 Nov) --- */
.s-paper .hd .wm, .s-doc .hd .wm { white-space: nowrap; }
@media (max-width: 980px) { .s-tier .rec.hide { display: none; } }
@media (max-width: 560px) {
  .s-card { display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; align-items: start; }
  .s-card .s-badge { grid-row: 1 / span 2; }
  .s-card h3 { margin: 6px 0 4px; }
  .s-card p { grid-column: 2; }
  .s-art { padding-bottom: 150px; }
}
@media (max-width: 560px) {
  .s-strip > div { display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; padding: 16px; }
  .s-strip > div .s-badge { grid-row: 1 / span 2; }
  .s-strip h2, .s-strip h3 { margin: 6px 0 2px; }
  .s-strip p { grid-column: 2; }
}
/* Home: "What we offer" cards */
.offer-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.offer-card { display: flex; flex-direction: column; align-items: flex-start; background: #fff; border: 1px solid var(--hair); border-radius: 5px; padding: 22px 22px 20px; }
.offer-card h3 { font-size: 19px; letter-spacing: -0.015em; margin: 12px 0 8px; }
.offer-card p { font-size: 15.5px; margin-bottom: 14px; }
.offer-card .tlink { margin-top: auto; }
.offer-card.soon { background: var(--band); border-style: dashed; }
.offer-tag { display: inline-block; font-size: 13px; font-weight: 600; padding: 3px 9px; border-radius: 3px; background: var(--draftbg); color: var(--draft); }
.offer-tag.live { background: var(--gtint); color: var(--green); }
@media (max-width: 900px) { .offer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .offer-grid { grid-template-columns: 1fr; gap: 12px; } .offer-card { padding: 18px; } }
/* spacing helpers last, so they win over component margins */
.s-mt { margin-top: 24px; }
.s-mtl { margin-top: 40px; }

/* real portal screenshot (oowl's own environment), replaces the made-up report + "we're calling you" cards (13 Nov 2026, compliance) */
.s-shot { margin: 0; max-width: 470px; }
.s-shot .own { display: inline-flex; align-items: center; gap: 6px; background: #e8f3ec; color: #0d5c3d; font-size: 12.5px; font-weight: 600; padding: 4px 10px; border-radius: 99px; margin-bottom: 10px; }
.s-shot .frame { background: #fff; border-radius: 6px; overflow: hidden; box-shadow: 0 0 0 1px #2c4669; }
.s-shot .frame img { display: block; width: 100%; height: auto; }
.s-shot.crop .frame { max-height: 620px; }
.s-shot.crop .frame img { margin-top: 0; }
.s-shot.full { max-width: 760px; }
.s-shot figcaption { margin-top: 12px; font-size: 14px; line-height: 1.5; }
.s-onnavy .s-shot figcaption, .s-shot.dark figcaption { color: var(--onnavy2); }