/* © 2026 Steve McLean. All rights reserved. Proprietary — no copying, modifying or reuse without written permission. */
/* Reef — the tech agent. Code lives in deep water; findings are pinned to the exact line. */
.reef-page{
  --deep:#0B2530;--deep2:#103341;--deep3:#174656;--glass:#9FE3D6;--foamline:rgba(159,227,214,.18);
  --reefc:#F0607A;--amber:#F2A93B;--calm:#5FC8A0;--slate:#8EA6AC;
  --mono:ui-monospace,"SF Mono","Cascadia Mono","Roboto Mono",Menlo,Consolas,monospace;
}
.reef-page .nav a[aria-current=page]{color:var(--ink);font-weight:700}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* hero */
.rf-hero{background:radial-gradient(900px 500px at 85% 20%,#14404F 0,transparent 70%),var(--deep);color:#E8F4F2;padding:84px 0 92px}
.rf-hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:56px;align-items:center}
.rf-mark{font:600 22px var(--serif);color:var(--glass);margin-bottom:18px;display:flex;align-items:center;gap:10px}
.rf-mark::before{content:"";width:22px;height:22px;border-radius:50% 50% 50% 8px;background:var(--reefc);box-shadow:inset -5px -5px 0 rgba(0,0,0,.18)}
.rf-hero h1{font-size:clamp(36px,4.4vw,56px);color:#fff;max-width:16ch}
.rf-lead{font-size:clamp(17px,1.5vw,20px);color:#BFD8D5;max-width:52ch;margin-top:20px}
.rf-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.rf-btn{background:var(--glass);border-color:var(--glass);color:var(--deep)}
.rf-btn:hover{background:#B9EEE4}
.btn.rf-ghost{color:#E8F4F2;border-color:rgba(232,244,242,.45)}
.rf-promise{margin-top:20px;font-size:14px;color:var(--slate)}

/* a finding pinned to its line */
.rf-pin{margin:0;background:var(--deep2);border:1px solid var(--foamline);border-radius:14px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}
.rf-pin-file{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-bottom:1px solid var(--foamline);font:13px var(--mono);color:var(--glass)}
.rf-open{background:none;border:1px solid var(--foamline);color:#CFE6E2;border-radius:8px;font:600 12px var(--sans);padding:5px 10px;cursor:pointer}
.rf-open:hover{border-color:var(--glass)}
.rf-code{list-style:none;margin:0;padding:12px 0;counter-reset:l var(--start,0);font:13.5px/1.75 var(--mono);color:#CFE2E0;overflow-x:auto}
.rf-code li{display:flex;white-space:pre;padding:0 16px 0 0}
.rf-code li::before{content:attr(data-n);min-width:44px;padding-right:14px;text-align:right;color:#5E7F87;flex:none}
.rf-code li.hit{background:rgba(240,96,122,.16);box-shadow:inset 3px 0 0 var(--reefc);color:#fff}
.rf-code code{font:inherit}
.rf-note{margin:0 14px 14px;padding:14px 16px;border-radius:10px;background:#fff;color:var(--ink);font-size:15px;line-height:1.5;position:relative}
.rf-note b{display:block;font:600 17px var(--serif);margin-bottom:4px;color:var(--ink)}
.rf-note::before{content:"";position:absolute;top:-8px;left:58px;border:8px solid transparent;border-top:0;border-bottom-color:#fff}

/* live console */
.rf-live{background:var(--deep);color:#E8F4F2;padding-top:12px;border-top:1px solid var(--foamline)}
.rf-live-head{max-width:760px;margin-bottom:26px}
.rf-live-head h2{color:#fff}
.rf-live-head p{color:#BFD8D5;margin-top:12px}
.rf-console{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:18px;align-items:start}
.rf-chat,.rf-side{background:var(--deep2);border:1px solid var(--foamline);border-radius:14px}
.rf-chat{display:flex;flex-direction:column;height:640px}
.rf-log{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:12px;overscroll-behavior:contain}
.rf-m{max-width:92%;padding:11px 14px;border-radius:12px;font-size:15.5px;line-height:1.55}
.rf-m.u{align-self:flex-end;background:var(--glass);color:var(--deep);border-bottom-right-radius:4px}
.rf-m.b{align-self:flex-start;background:#F7FBFA;color:var(--ink);border-bottom-left-radius:4px}
.rf-m.b ul{margin:6px 0 0;padding-left:18px}.rf-m.b li{margin:3px 0}
.rf-m.b p+p{margin-top:8px}
.rf-cite{font:12.5px var(--mono);background:#E3F1EE;color:#0E4A43;border:0;border-radius:6px;padding:1px 6px;cursor:pointer;white-space:nowrap}
.rf-cite:hover{background:var(--glass)}
.rf-verdict{display:inline-block;font-weight:700;padding:0 6px;border-radius:5px}
.rf-verdict.safe{background:#DDF3EA;color:#16624A}.rf-verdict.test{background:#FDEFD6;color:#80520B}.rf-verdict.risky{background:#FCE0E5;color:#9A1E36}.rf-verdict.cant{background:#E7EDEE;color:#40575D}
.rf-steps{align-self:flex-start;font-size:13px;color:var(--slate);display:flex;flex-direction:column;gap:3px;padding-left:2px}
.rf-steps span::before{content:"✓ ";color:var(--calm)}
.rf-steps.working span:last-child::before{content:"";display:inline-block;width:8px;height:8px;margin-right:7px;border-radius:50%;background:var(--glass);animation:rfp 1s infinite}
@keyframes rfp{50%{opacity:.25}}
.rf-chips{display:flex;gap:8px;overflow-x:auto;padding:4px 18px 12px;scrollbar-width:thin}
.rf-chips button{flex:none;background:transparent;border:1px solid var(--foamline);color:#DCEFEC;border-radius:999px;padding:8px 13px;font:500 13.5px var(--sans);cursor:pointer;min-height:38px}
.rf-chips button:hover{border-color:var(--glass);color:#fff}
.rf-form{display:flex;gap:8px;padding:12px;border-top:1px solid var(--foamline)}
.rf-form input{flex:1;min-width:0;background:var(--deep);border:1px solid var(--foamline);border-radius:999px;color:#fff;padding:12px 16px;font:16px var(--sans)}
.rf-form input:focus{outline:none;border-color:var(--glass)}
.rf-small{font-size:13px;color:var(--slate);margin-top:14px}
.rf-small.dark{color:var(--mute);text-align:center}

/* evidence side */
.rf-side{padding:14px;min-height:640px;max-height:640px;overflow-y:auto}
.rf-side-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;color:#fff}
.rf-files-btn{background:none;border:0;color:var(--glass);font:600 13px var(--sans);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.rf-empty{color:var(--slate);font-size:14.5px;padding:30px 6px}
.rf-cards{display:flex;flex-direction:column;gap:12px}
.rf-card{background:#F7FBFA;color:var(--ink);border-radius:12px;padding:14px 15px}
.rf-card h4{font:600 16px var(--serif);margin:0 0 10px}
.rf-f{display:grid;grid-template-columns:10px 1fr;gap:4px 10px;padding:9px 0;border-top:1px solid #E1ECEA}
.rf-f:first-of-type{border-top:0;padding-top:0}
.rf-dot{width:10px;height:10px;border-radius:50%;margin-top:6px;background:var(--slate)}
.rf-dot.high{background:var(--reefc)}.rf-dot.medium{background:var(--amber)}.rf-dot.low{background:var(--slate)}.rf-dot.ok{background:var(--calm)}
.rf-f b{font-size:14.5px;line-height:1.4}
.rf-f p{grid-column:2;font-size:13.5px;color:var(--ink2);line-height:1.5}
.rf-f .fix{color:#16624A}
.rf-f .cites{grid-column:2;display:flex;flex-wrap:wrap;gap:5px;margin-top:3px}
.rf-when{grid-column:2;font:600 12.5px var(--sans);color:#80520B}
.rf-snip{border-radius:9px;overflow:hidden;background:var(--deep2);margin-top:8px}
.rf-snip .rf-pin-file{padding:7px 10px;font-size:12px}
.rf-snip .rf-code{font-size:12.5px;padding:6px 0}
.rf-impact-v{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.rf-impact-v .rf-verdict{font-size:15px;padding:3px 10px}
.rf-impact-v span{font-size:13.5px;color:var(--ink2)}
.rf-radial{width:100%;height:auto;display:block;margin:4px 0 6px}
.rf-hits{font-size:13px}
.rf-hits div{display:flex;gap:8px;align-items:baseline;padding:4px 0;border-top:1px solid #E1ECEA}
.rf-hits em{font-style:normal;color:var(--mute);min-width:118px;font-size:12.5px}
.rf-map{width:100%;height:auto;display:block}
.rf-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--ink2);margin-top:6px}
.rf-legend i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;vertical-align:0}
.rf-ch{padding:9px 0;border-top:1px solid #E1ECEA;font-size:13.5px}
.rf-ch:first-of-type{border-top:0;padding-top:0}
.rf-ch b{font-size:14.5px}
.rf-ch.broke{background:#FDF1F3;margin:0 -15px;padding:10px 15px}
.rf-ch small{color:var(--mute);display:block}
.rf-facts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rf-facts div{background:#EAF3F1;border-radius:8px;padding:8px 10px;font-size:13px}
.rf-facts b{display:block;font:600 18px var(--serif)}

/* four jobs */
.rf-jobs h2,.rf-catches h2,.rf-price h2{max-width:22ch}
.rf-jobs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px 34px;margin-top:40px}
.rf-jobs-grid h3{font-size:26px;margin-bottom:10px;padding-top:16px;border-top:3px solid var(--reefc)}
.rf-jobs-grid div:nth-child(2) h3{border-color:var(--amber)}.rf-jobs-grid div:nth-child(3) h3{border-color:var(--calm)}.rf-jobs-grid div:nth-child(4) h3{border-color:var(--deep3)}
.rf-jobs-grid p{color:var(--ink2);font-size:16px}

/* questions owners ask */
.rf-catches{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.rf-qs{display:grid;grid-template-columns:1fr 1fr;gap:0 48px;margin:40px 0 0}
.rf-qs div{padding:18px 0;border-top:1px solid var(--line)}
.rf-qs dt{font:600 20px/1.3 var(--serif);margin-bottom:6px}
.rf-qs dd{margin:0;color:var(--ink2);font-size:16px}
.rf-origin{margin-top:34px;max-width:70ch;font-size:16px;color:var(--ink2);padding-left:16px;border-left:3px solid var(--reefc)}

/* rules */
.rf-rules{background:var(--deep);color:#E8F4F2}
.rf-rules-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:48px;align-items:start}
.rf-rules h2{color:#fff}
.rf-rules ul{list-style:none;margin:0;padding:0}
.rf-rules li{padding:14px 0;border-top:1px solid var(--foamline);color:#BFD8D5}
.rf-rules li b{color:#fff}

/* price */
.rf-price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px}
.rf-price-grid>div{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:24px}
.rf-price-grid>div:nth-child(2){border-color:var(--deep3);box-shadow:0 0 0 1px var(--deep3)}
.rf-amt{font:600 32px var(--serif);margin:10px 0 8px}.rf-amt span{font:15px var(--sans);color:var(--mute)}
.rf-price-grid p{color:var(--ink2)}
.rf-inc{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font-size:14.5px}
.rf-final{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:26px}

/* file viewer */
.rf-viewer{border:0;padding:0;border-radius:14px;width:min(900px,96vw);max-height:88vh;background:var(--deep2);color:#E8F4F2}
.rf-viewer::backdrop{background:rgba(6,20,26,.6)}
.rf-viewer-in{display:flex;flex-direction:column;max-height:88vh}
.rf-viewer-head{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--foamline);font:14px var(--mono);color:var(--glass)}
.rf-viewer .x{background:none;border:0;color:#fff;font-size:26px;cursor:pointer;line-height:1}
.rf-viewer-files{display:flex;flex-wrap:wrap;gap:6px;padding:10px 16px;border-bottom:1px solid var(--foamline)}
.rf-viewer-files button{font:12.5px var(--mono);background:var(--deep);color:#CFE2E0;border:1px solid var(--foamline);border-radius:6px;padding:4px 8px;cursor:pointer}
.rf-viewer-files button[aria-pressed=true]{border-color:var(--glass);color:#fff}
.rf-code.big{overflow:auto;flex:1;font-size:13.5px}

@media (prefers-reduced-motion:reduce){.rf-steps.working span:last-child::before{animation:none}}
@media (max-width:980px){
  .rf-hero-grid{grid-template-columns:minmax(0,1fr);gap:36px}
  .rf-console{grid-template-columns:minmax(0,1fr)}
  .rf-chat{height:560px}
  .rf-side{min-height:0;max-height:none}
  .rf-jobs-grid{grid-template-columns:1fr 1fr}
  .rf-rules-grid{grid-template-columns:1fr;gap:20px}
}
@media (max-width:640px){
  .rf-hero{padding:48px 0 56px}
  .rf-qs,.rf-jobs-grid,.rf-price-grid{grid-template-columns:1fr}
  .rf-chat{height:74svh;min-height:460px}
  .rf-code{font-size:12px}
  .rf-code li::before{min-width:34px;padding-right:10px}
  .rf-m{max-width:100%}
  .rf-hits em{min-width:96px}
  .reef-page .nav nav a:not([aria-current]){display:none}
}
.btn.rf-ghost:hover{border-color:var(--glass);color:#fff}
@media (max-width:640px){.rf-form{padding-right:76px}}
/* Reef's three action words, like the rest of the team */
.rf-verbs{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 18px}
.rf-verbs i{font-style:normal;font-weight:700;font-size:14px;letter-spacing:.02em;padding:5px 12px;border-radius:999px;color:#bff3ea;background:rgba(95,211,196,.12);border:1px solid rgba(95,211,196,.35)}

.rf-jobs-grid div:nth-child(5) h3{border-color:#2FB57E}.rf-jobs-grid div:nth-child(6) h3{border-color:#7C6FD6}
.rf-worth{margin-top:34px;padding:18px 22px;border-radius:14px;background:rgba(15,148,136,.08);border:1px solid rgba(15,148,136,.25);font-size:17px;color:var(--ink2);max-width:860px}.rf-worth b{color:var(--ink)}
/* hero: value first */
.rf-saves{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 0;padding:0}
.rf-saves li{padding:10px 16px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(95,211,196,.3);color:#BFD8D5;font-size:15px}
.rf-saves li b{color:#fff;font-weight:700}
.rf-saves-note{margin-top:12px;font-size:15px;color:#9FC2BE;max-width:52ch}
.rf-alert-head{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--foamline);color:#fff;font-size:15px}
.rf-dot{width:10px;height:10px;border-radius:50%;background:var(--reefc);box-shadow:0 0 0 4px rgba(240,96,122,.18);flex:none}
.rf-caught{margin-left:auto;font-size:12.5px;color:#9FE3D6;background:rgba(95,211,196,.12);border:1px solid rgba(95,211,196,.3);border-radius:999px;padding:3px 10px;white-space:nowrap}
.rf-note .rf-fixline{display:inline;font:700 15px var(--sans);margin:0}
.rf-worth-card{margin:0 14px 14px;padding:14px 16px;border-radius:10px;background:linear-gradient(135deg,#0F9488,#0b6f66);color:#E9FBF8}
.rf-worth-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:15px}
.rf-worth-top b{font:700 30px var(--serif);color:#fff}
.rf-worth-parts{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:6px;font-size:14px;color:#CFF3EE}
.rf-worth-parts b{color:#fff}
.rf-worth-card p{margin:8px 0 0;font-size:12px;color:#BFE9E3}
/* the 25% calculator */
.rf-cost{background:linear-gradient(180deg,#0B2530 0%,#0e2f3b 100%);color:#E8F4F2;border-top:1px solid var(--foamline)}
.rf-cost-kick{color:var(--glass);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:13px;margin:0 0 10px}
.rf-cost h2{color:#fff;max-width:20ch}
.rf-cost-lead{color:#BFD8D5;font-size:clamp(17px,1.5vw,20px);max-width:60ch;margin-top:16px}
.rf-calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:28px;margin-top:34px;align-items:start}
.rf-calc-in{background:var(--deep2);border:1px solid var(--foamline);border-radius:16px;padding:20px}
.rf-presets{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.rf-presets button{font:600 14px var(--sans);padding:8px 14px;border-radius:999px;border:1px solid var(--foamline);background:transparent;color:#CFE6E2;cursor:pointer}
.rf-presets button.on{background:var(--glass);color:var(--deep);border-color:var(--glass)}
.rf-calc-in label{display:block;font-weight:600;color:#E8F4F2;margin-top:14px;font-size:15px}
.rf-calc-in label small{display:block;font-weight:400;color:var(--slate);font-size:13px;margin-top:2px}
.rf-calc-in input[type=number]{width:100%;margin-top:6px;font:600 18px var(--sans);padding:10px 12px;border-radius:10px;border:1px solid var(--foamline);background:#0B2530;color:#fff}
.rf-calc-in input[type=range]{width:100%;margin-top:10px;accent-color:#5fd3c4}
.rf-calc-in label b{color:var(--glass);float:right}
.rf-calc-out{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.rf-o{background:var(--deep2);border:1px solid var(--foamline);border-radius:16px;padding:16px 18px}
.rf-o span{display:block;color:#BFD8D5;font-size:14px}.rf-o b{display:block;font:700 clamp(28px,3.4vw,40px) var(--serif);color:#fff;margin:4px 0 2px}.rf-o small{color:var(--slate);font-size:13px}
.rf-o-lost{grid-column:1/-1;border-color:rgba(240,96,122,.45)}.rf-o-lost b{color:#FF8DA0}
.rf-o-back{border-color:rgba(95,200,160,.5)}.rf-o-back b{color:#7BE0B8}
.rf-roi{grid-column:1/-1;background:linear-gradient(135deg,#0F9488,#0b6f66);border-radius:16px;padding:16px 18px;color:#E9FBF8;font-size:16px}
.rf-roi b{font:700 34px var(--serif);color:#fff;margin-right:6px}
.rf-cost-note{color:var(--slate);font-size:13px;max-width:80ch;margin-top:20px}
.rf-btn2{background:transparent;color:var(--glass);border-color:var(--foamline)}
@media(max-width:860px){.rf-calc{grid-template-columns:minmax(0,1fr)}}
.rf-tag{margin:14px 0 0;font:italic 600 clamp(18px,1.8vw,22px) var(--serif);color:#FF9B7A}

/* MSP section */
.rf-msp-jump{margin-top:14px;font-size:15px}.rf-msp-jump a{color:var(--glass);font-weight:600;text-underline-offset:3px}
.rf-msp{background:var(--paper);border-bottom:1px solid var(--line)}
.rf-msp h2{max-width:22ch}
.rf-msp-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:40px;align-items:start;margin-top:34px}
.rf-msp-map{margin:0;background:var(--deep);color:#E8F4F2;border-radius:20px;padding:24px 20px 20px;position:relative;overflow:hidden;box-shadow:0 0 0 2px rgba(159,227,214,.35),0 24px 50px -28px rgba(11,37,48,.8)}
.rf-msp-map::before{content:"";position:absolute;inset:-40% -20% auto auto;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(127,224,210,.28),transparent 65%);pointer-events:none}
.rf-msp-you{display:flex;align-items:center;gap:12px;justify-content:center;position:relative}
.rf-msp-logo{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font:600 16px var(--sans);color:var(--deep);background:linear-gradient(135deg,#9FE3D6,#A8D8FF 60%,#E3C8FF)}
.rf-msp-you b{display:block;font:600 20px var(--serif);color:#fff}.rf-msp-you small{color:#A9D2D0;font-size:13px}
.rf-msp-lines{display:grid;grid-template-columns:repeat(3,1fr);height:26px;margin:10px 0 6px}
.rf-msp-lines i{justify-self:center;width:2px;background:linear-gradient(var(--glass),rgba(159,227,214,.2))}
.rf-msp-clients{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.rf-msp-clients div{background:var(--deep2);border:1px solid var(--foamline);border-radius:12px;padding:10px 6px;text-align:center}
.rf-msp-clients b{display:block;color:#fff;font-size:14px}.rf-msp-clients small{display:block;color:#A9D2D0;font-size:12px}
.rf-msp-clients em{display:inline-block;margin-top:6px;font-style:normal;font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:99px}
.rf-msp-clients em.ok{background:rgba(127,224,210,.18);color:#9FE3D6}.rf-msp-clients em.no{background:rgba(255,255,255,.08);color:#B9C6C8}
.rf-msp-map figcaption{margin-top:16px;font-size:13.5px;color:#C6DEDC;line-height:1.5}
.rf-msp-tw{min-width:0;overflow-x:auto}
.rf-msp-t{width:100%;border-collapse:collapse;font-size:16px}
.rf-msp-t th,.rf-msp-t td{text-align:left;vertical-align:top;padding:12px 10px;border-bottom:1px solid var(--line)}
.rf-msp-t th{width:34%;font-weight:600;color:var(--ink)}.rf-msp-t td{color:var(--ink2)}
.rf-linkbtn{background:none;border:0;padding:0;font:inherit;font-weight:600;color:var(--deep3);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
@media(max-width:820px){.rf-msp-grid{grid-template-columns:1fr;gap:24px}.rf-msp-t th{width:40%}}
.rf-msp .rf-cost-kick{color:var(--deep3)}
.rf-buy{margin-top:10px;font-size:14px;color:var(--ink2)}.rf-buy b{color:var(--ink)}