/* Ocean Plan Viewer — site stylesheet. Shared by every page.
   Two invariants, both easy to break by accident:
     · one measure — two equal columns and var(--gap), nothing else
     · .thumb gives 68px of usable height; every miniature must fit it
   Reasoning for these and every other decision: web/README.md */

:root{
  
  --bg:#EEF3F7;          
  --alt:#E2EAF0;         
  --grid:#C7D5E0;        
  --panel-bg:#D9E5EE;    
  --header:#102A43;      
  --header2:#243B53;     
  --accent:#00B8A9;      
         
  --crit-link:#FF0000;   
  --baseline:#465260;    
  --note:#FFD600;        
            
  --ph0:#00B8A9; --ph1:#2F80ED; --ph2:#6C4AB6; --ph3:#FF6B35;
  
  --ink:#102A43; --ink-2:#3E5063; --ink-3:#5A6B7D; --ink-4:#7D8B99;
  /* Links are orange so they separate from the navy body text; the teal below
     stays on the eyebrows and step numbers, which are marks, not links.
     #B03A0A clears 4.5:1 on all four backgrounds the site uses. */
  --link:#B03A0A;
  --link-hover:#7C2706;
  --accent-ink:#00776E;
  /* The same signal on the dark bars: #B03A0A is only 2.41:1 on the navy, so
     links there take a lighter orange. 6.27:1 on --header. */
  --link-dark:#FF8A4C;        
  --white:#FFFFFF;
  /* System fonts only. Nothing is fetched from anywhere, which is the same
     claim the pages make for the program. Each operating system renders in
     its own face; no visitor sees two of them. */
  --sans:system-ui,-apple-system,'Segoe UI',Roboto,Cantarell,sans-serif;
  --mono:ui-monospace,Consolas,'DejaVu Sans Mono','Liberation Mono',monospace;
  --pad:clamp(20px,4.5vw,72px);
  
  --gap:clamp(22px,3vw,44px);
  --bp1:860px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--link);text-decoration:none}
a:hover{color:var(--link-hover);text-decoration:underline}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
h1,h2,h3{font-weight:700;letter-spacing:-0.025em;margin:0}
p{margin:0}
code{font-family:var(--mono);font-size:.92em}

.wrap{max-width:1280px;margin:0 auto;padding-inline:var(--pad)}

.sitebar{background:var(--header);border-bottom:1px solid rgba(255,255,255,.14);font-size:11.5px}
.sitebar .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:30px}
.sitebar .owner{font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#7E97AC}
.sitebar nav{display:flex;gap:18px}
.sitebar a,.sitebar .here{font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase;
                          padding:7px 0;border-bottom:2px solid transparent}
.sitebar a{color:var(--link-dark)}
.sitebar a:hover{color:var(--white);text-decoration:none}
.sitebar .here{color:var(--white);border-bottom-color:var(--accent)}@media (max-width:430px){.sitebar .owner{display:none}}

.masthead{background:var(--header);color:var(--white)}
.masthead .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:62px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;color:var(--white);font-size:19px;font-weight:700;letter-spacing:-0.02em}
.brand:hover{text-decoration:none;color:var(--white)}
.mark{display:flex;flex-direction:column;gap:3px}
.mark i{display:block;height:4px;border-radius:1px}
.mark i:nth-child(1){width:20px;background:var(--accent)}
.mark i:nth-child(2){width:13px;background:var(--ph1);margin-left:5px}
.mark i:nth-child(3){width:16px;background:var(--ph2);margin-left:2px}
.nav{display:flex;gap:clamp(14px,2.2vw,28px);align-items:center;font-size:14px;flex-wrap:wrap}
.nav a{color:var(--link-dark)}
.nav a:hover{color:var(--white)}
.nav a.pill{background:var(--accent);color:var(--header);font-weight:600;padding:9px 18px;border-radius:3px}
.nav a.pill:hover{background:#00D4C3;color:var(--header);text-decoration:none}
.accent-rule{height:3px;background:var(--accent)}

.hero{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap);align-items:start;padding-block:clamp(40px,5.5vw,72px) 0}
.hero-text{grid-column:1}
.hero-aside{grid-column:2;align-self:end;display:flex;flex-direction:column;gap:14px}
figure.shot{grid-column:1/-1}
.hero-text{max-width:60ch}
.chart-shot{display:block;width:100%;max-width:1024px;height:auto;
            border:1px solid var(--grid);border-radius:4px;background:var(--white)}
figure.shot{margin:0;max-width:1024px}
figure.shot figcaption{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;
            color:var(--ink-3);margin-top:9px}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:18px}
h1{font-size:clamp(32px,5vw,56px);line-height:1.06;margin-bottom:14px}

.tagline{font-size:clamp(17px,1.65vw,21px);line-height:1.38;color:var(--header2);
         font-weight:500;max-width:37ch;margin:0 0 22px;padding-left:15px;
         border-left:3px solid var(--accent)}
.lede{font-size:clamp(16px,1.4vw,18px);line-height:1.6;color:var(--ink-2);max-width:58ch;margin-bottom:30px}
.cta-row{display:flex;gap:13px;flex-wrap:wrap;align-items:center}
.btn{display:inline-block;font-size:16px;font-weight:600;padding:14px 28px;border-radius:3px;border:1px solid transparent}
.btn-primary{background:var(--header);color:var(--white)}
.btn-primary:hover{background:var(--header2);color:var(--white);text-decoration:none}
.btn-quiet{color:var(--ink);border-color:var(--grid);background:var(--white)}
.btn-quiet:hover{border-color:var(--ink-3);text-decoration:none}
.cta-note{font-family:var(--mono);font-size:12.5px;color:var(--ink-3);margin-top:11px}

.route{margin:0;padding-top:14px;border-top:1px solid var(--grid)}
.route a{font-size:14.5px;color:var(--link);text-decoration:none;font-weight:500}
.route a:hover{text-decoration:underline}

.benefit{border-top:3px solid var(--accent);padding-top:14px}
.benefit b{display:block;font-size:18px;font-weight:700;letter-spacing:-0.02em;margin-bottom:7px}
.benefit span{font-size:13.5px;line-height:1.55;color:var(--ink-3)}

.who{padding-block:clamp(44px,5.5vw,68px) 0}
.who .pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
.who article{border-top:3px solid var(--accent);padding-top:18px}
.who article:nth-child(2){border-top-color:var(--ph3)}

.who .eyebrow{font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-4);margin:0 0 10px}
.who p.moment{font-size:14.8px;line-height:1.64;color:var(--ink-3);margin:0 0 14px}
.who .converge{margin-top:clamp(30px,3.4vw,46px);padding-top:22px;border-top:1px solid var(--grid)}
.who .converge p{font-size:clamp(17px,1.8vw,21px);line-height:1.45;color:var(--header);max-width:40ch;margin:0 0 10px}

.trust{padding-block:clamp(44px,5.5vw,68px) 0}
.trust h2{max-width:26ch}
.trust-lede{font-size:clamp(15.5px,1.3vw,17px);color:var(--ink-2);max-width:56ch;margin:-14px 0 30px}
.benefits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
.trust-ask{margin-top:22px;font-size:15px;font-weight:500}
.trust-ask a{color:var(--link);text-decoration:none}
.trust-ask a:hover{text-decoration:underline}
.trust-foot{margin-top:18px;padding-top:18px;border-top:1px solid var(--grid);
            font-size:14.5px;color:var(--ink-3);max-width:70ch}
.trust-foot a{color:var(--link);text-decoration:none;font-weight:500}
.trust-foot a:hover{text-decoration:underline}

.dl{padding-block:clamp(44px,5.5vw,68px) 0}
.dl-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap);align-items:start}
.dl-lede{font-size:clamp(15.5px,1.3vw,17px);color:var(--ink-2);margin:0 0 16px;max-width:48ch}

.dl-label{font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.08em;
          text-transform:uppercase;color:var(--ink-2);margin:0 0 11px}
.dl-label span{font-weight:400;color:var(--ink-3);letter-spacing:.04em}
.dl-row{display:flex;gap:11px;flex-wrap:wrap;margin-bottom:20px}

.dl-files{list-style:none;margin:0 0 22px;padding:0;font-family:var(--mono);font-size:12px;
          line-height:1.55;color:var(--ink-3)}
.dl-files li{padding:7px 0;border-top:1px solid var(--grid)}
.dl-files b{color:var(--ink-2);font-weight:600}
.dl-files span{overflow-wrap:anywhere}
.dl-note{background:var(--alt);border-left:3px solid var(--ph3);padding:18px 20px}
.dl-note p{font-size:14.3px;line-height:1.6;color:var(--ink-2);margin:0 0 12px}
.dl-note p:last-child{margin-bottom:0}
.steps,.features{padding-block:clamp(44px,5.5vw,68px) 0}
h2{font-size:clamp(24px,2.7vw,34px);margin-bottom:28px;max-width:34ch}
.steps ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap);list-style:none;margin:0;padding:0;counter-reset:s}
.steps li{counter-increment:s}
.steps li::before{content:"0" counter(s);display:block;font-family:var(--mono);font-size:12px;color:var(--accent-ink);border-top:1px solid var(--grid);padding-top:11px;margin-bottom:11px}
.steps h3,.features h3{font-size:17px;font-weight:600;letter-spacing:-0.01em;margin-bottom:9px}
.steps p,.features p{font-size:14.5px;line-height:1.62;color:var(--ink-3)}
.features ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap);list-style:none;margin:0;padding:0}
.features li{border-top:1px solid var(--grid);padding-top:16px}

.thumb{background:var(--white);border:1px solid var(--grid);border-radius:3px;height:86px;padding:9px 12px;margin-bottom:15px;overflow:hidden;position:relative}
.thumb .tbar{position:absolute;height:9px;border-radius:2px;border:1px solid rgba(16,42,67,.35)}
.thumb .tbase{position:absolute;height:3px;background:var(--baseline);border-radius:1px}
.thumb .tlink{position:absolute;border-left:2px solid var(--crit-link);border-bottom:2px solid var(--crit-link)}
.thumb .tlink::after{content:"";position:absolute;right:-1px;bottom:-4px;border-left:5px solid var(--crit-link);border-top:3px solid transparent;border-bottom:3px solid transparent}
.thumb .tslack{position:absolute;font-family:var(--mono);font-size:9.5px;font-weight:500;color:#C00000}
.thumb .tnote{position:absolute;width:7px;height:7px;background:var(--note);border:1px solid #000}
.thumb .tcap{position:absolute;font-family:var(--mono);font-size:9px;color:var(--ink-4);letter-spacing:.04em}

.mtab{display:grid;grid-template-columns:1fr 46px 46px 14px;gap:0 8px;font-size:9.5px;line-height:1.55}
.mtab .th{background:var(--header2);color:var(--white);font-family:var(--mono);font-size:8.5px;letter-spacing:.06em;padding:1px 5px;margin:-1px -5px 3px}
.mtab .td{color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mtab .alt{background:var(--alt)}

.msearch{border:1px solid var(--grid);border-radius:2px;padding:3px 7px;font-size:10px;color:var(--ink-2);display:flex;align-items:center;gap:6px;background:var(--bg)}
.msearch svg{flex:0 0 auto}
.mhit{margin-top:6px;font-size:9.5px;color:var(--ink-2);background:var(--note);display:inline-block;padding:1px 5px;border-radius:2px}

.chips{display:flex;flex-direction:column;gap:5px}
.chip{font-family:var(--mono);font-size:9.5px;line-height:1.25;color:var(--ink-2);background:var(--alt);border:1px solid var(--grid);border-radius:2px;padding:2px 7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.msgs{display:flex;flex-direction:column;gap:5px}
.msg{font-size:9.5px;line-height:1.25;padding:2px 7px;border-radius:2px;color:var(--header2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msg.w{background:#FFE096}
.msg.e{background:#F5BEBE}
.msg.i{background:var(--alt);color:var(--ink-3)}

.prov{margin-top:clamp(44px,5.5vw,68px);background:var(--panel-bg);border-radius:4px;padding:clamp(22px,3vw,30px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap);align-items:center}
.prov .prov-h{font-size:19px;font-weight:700;letter-spacing:-0.02em;margin:0 0 8px;max-width:none}
.prov p{font-size:14.5px;line-height:1.62;color:var(--ink-2);max-width:78ch}

.prov-go{display:flex;flex-direction:column;align-items:flex-start;gap:5px;flex-shrink:0}
.prov .langs{font-size:12.5px;color:var(--ink-3);margin:0;white-space:nowrap}
.foot{margin-top:clamp(36px,4.5vw,56px);background:var(--header);color:#B8C8D6}
.foot .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:22px;font-size:13px}
.foot a{color:var(--link-dark)}
.foot a:hover{color:var(--white)}
.foot nav{display:flex;gap:22px;flex-wrap:wrap}
.foot .tm{font-size:11px;opacity:.75}@media (max-width:860px){
  .hero,.who .pair,.features ul,.steps ol,.benefits,.dl-grid,.prov{
    grid-template-columns:minmax(0,1fr)}
}@media (max-width:860px){
  
  .hero-text,.hero-aside{grid-column:auto}
  .hero-text{order:1} figure.shot{order:2} .hero-aside{order:3}
}@media (max-width:560px){
  .btn{width:100%;text-align:center}
}

/* the copy-ready request on /mpp-or-xml/ */
.steps p.ask{background:var(--alt);border-left:3px solid var(--accent);padding:14px 16px;
             font-size:15px;line-height:1.6;color:var(--ink);margin:0 0 10px}
.steps p.asknote{font-size:13.5px;color:var(--ink-3);margin:0}
.steps p.asknote a{color:var(--link);text-decoration:none;font-weight:500}
.steps p.asknote a:hover{text-decoration:underline}

/* approval ticks on /no-installation/ — decorative, aria-hidden in the markup */
/* The one place the accent colour is written out rather than taken from
   --accent: a background image cannot read a custom property. Retuning the
   palette means changing #00B8A9 here too. A mask would keep the token, but
   it creates a compositing layer that changes text antialiasing nearby. */
.benefit.ok b::before{content:"";display:inline-block;width:21px;height:21px;vertical-align:-4px;margin-right:9px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2300B8A9'%3E%3Cpath d='M9 21h8.1a2 2 0 0 0 1.95-1.55l1.6-7A2 2 0 0 0 18.7 10H14V5.6A2.6 2.6 0 0 0 11.4 3L9 9.4z'/%3E%3Crect x='3' y='9.4' width='4' height='11.6' rx='1'/%3E%3C/svg%3E") no-repeat center/contain}

/* Placed last on purpose: .trust-foot a and friends set text-decoration:none
   further up, and an equally specific rule only wins if it comes after them. */
.route a,.trust-ask a,.trust-foot a,.steps p.asknote a,.prov-go a,.langs a,.benefit a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.nav a:not(.pill),.sitebar a,.foot a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}