:root{
  --b30:#08415c; --b45:#1b6e8c; --b60:#3f9bb0; --b75:#93c9d6;
  --hot:#b5541f; --hot-lit:#e0762f;
  --deep:#0b1d2a;
  --paper:#f4f8f9; --card:#ffffff; --ink:#12232b; --ink2:#3d555f; --line:#dbe6ea;
  --onDeep:#eaf2f5; --onDeep2:#a9c3cf;
  --ink3:#6b8089;
  --band:linear-gradient(90deg,var(--b30) 0%,var(--b45) 34%,var(--b60) 64%,var(--b75) 100%);
  --display:"Archivo","Liberation Sans",Arial,sans-serif;
  --body:"Source Sans 3","Liberation Sans",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"Liberation Mono",monospace;
  --wrap:1180px;
}
:root:not([data-theme="light"]){@media (prefers-color-scheme:dark){
  --paper:#0e1f2b; --card:#14293605; --card:#142936; --ink:#e9f1f4; --ink2:#a7c0cb; --ink3:#86a2ad;
  --line:#22404f; --b75:#a7d5e0;
}}
:root[data-theme="dark"]{
  --paper:#0e1f2b; --card:#142936; --ink:#e9f1f4; --ink2:#a7c0cb; --ink3:#86a2ad;
  --line:#22404f; --b75:#a7d5e0;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.62 var(--body);
  -webkit-font-smoothing:antialiased}
img,video{max-width:100%;display:block}
h1,h2,h3{font-family:var(--display);text-wrap:balance;margin:0;letter-spacing:-.022em;line-height:1.1}
p{margin:0}
a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:22px}
.rule{height:4px;background:var(--band)}
/* Kevin, on the About page. The source is 237px square, shown at 118 so it is
   sharp on a retina screen rather than upscaled into mush. */
.mug{float:right;width:118px;height:118px;border-radius:50%;margin:4px 0 16px 26px;
 border:3px solid var(--card);box-shadow:0 1px 10px rgba(18,22,28,.16)}
@media(max-width:620px){.mug{float:none;display:block;margin:0 0 18px}}
/* The kicker above every headline. It was 11.5px in the palest blue we have,
   which on the dark hero was close to invisible. Bigger, tighter tracking,
   and a colour chosen against the ground it actually sits on. */
.eyebrow{font:700 13px/1.35 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--b45)}
.hero .eyebrow,.phead .eyebrow,.priv .eyebrow{color:var(--b75)}
.cap .eyebrow{font-size:11px;letter-spacing:.14em;color:var(--b45)}
.hdlogo{display:block;width:167px;height:auto}
@media(max-width:520px){.hdlogo{width:138px}}
/* The product, in the hero, directly above its own tagline. */
.heroproduct{display:flex;align-items:center;gap:15px;margin-bottom:26px}
.heroproduct>div{font:700 clamp(34px,4.4vw,48px)/1 var(--display);letter-spacing:-.035em;color:#fff}
.heroproduct i{font-style:normal;font-weight:400;color:var(--onDeep2)}
.heroproduct sup{font-size:.34em;vertical-align:super;color:var(--onDeep2);margin-left:2px}
.heroproduct img{flex:0 0 auto}
.covers{margin-top:24px;padding-top:18px;border-top:1px solid #24435a;font-size:15.5px;
  line-height:1.55;color:var(--onDeep2);max-width:54ch}
.covers b{color:#fff;font-weight:600}

/* ---- masthead ---- */
.top{background:var(--deep);color:var(--onDeep);position:sticky;top:0;z-index:900}
/* An anchor link must not land with its heading hidden behind the frozen bar. */
:target{scroll-margin-top:96px}
html{scroll-padding-top:96px}
@media(max-width:700px){
  /* On a phone the bar was 227px - 27% of the screen - because the logo is full
     size and the seven links wrap onto two rows. Frozen, that would be most of
     the screen gone. So on a phone it is made SMALL enough to freeze: a smaller
     lockup, tighter padding, and the links on one row that scrolls sideways
     under a thumb instead of wrapping. The bar stays frozen everywhere. */
  .topin{padding-block:9px;gap:12px;flex-wrap:nowrap}
  .lock img.hdlogo{height:34px;width:auto}
  .topin nav{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;gap:15px;min-width:0}
  .topin nav::-webkit-scrollbar{display:none}
  .topin nav a{white-space:nowrap;flex:0 0 auto}
  html{scroll-padding-top:62px}
  :target{scroll-margin-top:62px}
}
.topin{display:flex;align-items:center;gap:26px;flex-wrap:wrap;padding-block:16px}
.lock{display:flex;align-items:center;gap:12px;margin-right:auto}
.lock img{display:block}
.wm{font:700 23px/1 var(--display);letter-spacing:-.03em;color:#fff}
.wm i{font-style:normal;font-weight:400;color:var(--onDeep2)}
.wm sup{font-size:9px;vertical-align:super;color:var(--onDeep2)}
nav{display:flex;gap:22px;flex-wrap:wrap;font:600 14.5px var(--body)}
nav a{color:var(--onDeep2);text-decoration:none;padding-block:4px;border-bottom:2px solid transparent}
nav a:hover,nav a:focus-visible{color:#fff;border-bottom-color:var(--hot-lit)}

/* ---- hero ---- */
.hero{background:var(--deep);color:var(--onDeep);padding-block:52px 64px}
.heroin{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:48px;align-items:center}
/* .solo is the hero with nothing in the right-hand column - which is where
   the 90-second film sat until it was pulled on October 3 for quoting the
   September prices. Without this the text column keeps its 48% width and the
   hero reads as a layout with a missing picture. */
.heroin.solo{grid-template-columns:minmax(0,1fr)}
.heroin.solo .lede{max-width:72ch}
/* The headline is a sentence now - the setup before the punchline - rather
   than a five-word slogan. At 54px it ran six lines and pushed the one primary
   button off the first screen, which would have undone the whole point of
   having one. 42px keeps the sentence and the way in on screen together. */
.hero h1{font-size:clamp(31px,3.4vw,42px);color:#fff;margin-block:16px 0;line-height:1.14}
.hero h1 em{font-style:normal;color:var(--hot-lit)}
.hero .lede{margin-top:20px;font-size:18.5px;color:var(--onDeep2);max-width:60ch}
.hero .lede b{color:#fff;font-weight:600}
.ctas{display:flex;gap:13px;flex-wrap:wrap;margin-top:28px}
.btn{font:600 15px var(--body);text-decoration:none;padding:12px 21px;border-radius:3px;
  border:1px solid transparent;display:inline-block}
.btn.p{background:var(--hot);color:#fff}
.btn.p:hover{background:var(--hot-lit)}
.btn.s{border-color:#2c5568;color:var(--onDeep)}
.btn.s:hover{border-color:var(--b60);color:#fff}
.player{border:1px solid #24435a;background:#000;border-radius:5px;overflow:hidden;position:relative}
/* ---- THE PLAY CONTROL ------------------------------------------------------
   Kevin, 17 October 2026: "The videos at one time, when you pulled up the
   page, had the arrow in the middle of the video block, so you knew to you
   could click on that to start the video. That seems to be gone. In order to
   start the video, you got to click the little tiny arrow underneath."

   He is right, and the cause was preload="metadata" on the two films he
   named: Chrome draws its own big centre button over a poster only while it
   has loaded nothing, so asking for metadata quietly took the button away.
   Rather than depend on that behaviour - it is a browser detail, not a
   decision we made - the page draws its own. It disappears on first play and
   the native controls take over. */
.player .pgo{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
border:0;background:transparent;cursor:pointer;padding:0}
.player .pgo::after{content:"";width:74px;height:74px;border-radius:50%;
background:rgba(12,40,58,.82);box-shadow:0 2px 22px rgba(0,0,0,.4);
transition:transform .12s ease, background .12s ease;
-webkit-mask:none;
background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 7.5v9l7-4.5z' fill='white'/></svg>");
background-repeat:no-repeat;background-position:54% 50%;background-size:46px 46px}
.player .pgo:hover::after{transform:scale(1.06);background-color:rgba(12,40,58,.95)}
.player .pgo:focus-visible{outline:3px solid #9fd3e3;outline-offset:-3px}
.player.playing .pgo{display:none}
.player video{width:100%;aspect-ratio:16/9;background:#000}
.plabel{display:flex;justify-content:space-between;gap:12px;background:#12283a;
  padding:10px 14px;font:600 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--onDeep2)}
.plabel b{color:var(--b60)}

/* ---- signal ---- */
.sec{padding-block:64px}
.sechead{max-width:64ch}
.sechead h2{font-size:clamp(26px,3vw,36px);margin-top:12px}
.sechead p{margin-top:14px;color:var(--ink2);font-size:18px}
.pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:20px;margin-top:32px}
.sig{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--hot);
  padding:22px 24px}
.sig h3{font-size:19px;color:var(--b30)}
.sig .src{font:600 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink2);margin-bottom:9px}
.sig p{margin-top:9px;color:var(--ink2);font-size:16.5px}

/* ---- shots ---- */
.shots{display:grid;gap:52px;margin-top:34px}
/* The screenshots are dense working screens. Side-by-side with the caption they
   shrank to an illegible strip, so the caption sits above and the shot gets the
   full column width. */
.shot{display:block}
.shot .cap{max-width:72ch;margin-bottom:18px}
.shot .cap h3{margin-top:4px}
.shot img{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:4px;
  box-shadow:0 18px 44px -30px rgba(8,65,92,.5)}
.cap h3{font-size:22px;margin-top:10px}
.cap p{margin-top:11px;color:var(--ink2);font-size:16.5px}

/* ---- views ---- */
.views{margin-top:26px;border-top:1px solid var(--line)}
.view{display:grid;grid-template-columns:170px minmax(0,1fr);gap:20px;padding-block:14px;
  border-bottom:1px solid var(--line)}
.view dt{font:600 16px var(--display);color:var(--b30)}
.view dd{margin:0;color:var(--ink2)}

/* ---- pricing ---- */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:32px}
.plan{background:var(--card);border:1px solid var(--line);padding:26px 26px 28px;
  display:flex;flex-direction:column}
.plan.lead{border-color:var(--b45);box-shadow:0 18px 40px -28px rgba(8,65,92,.55)}
.plan .tier{font:600 11.5px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--b60)}
.plan h3{font-size:23px;margin-top:7px;letter-spacing:.01em}
.plan h3 i{font-style:italic;font-weight:400;font-size:18px;letter-spacing:0;color:var(--ink2);
  font-family:var(--body)}
.planwhat{margin-top:9px;font-size:15.5px;line-height:1.5;color:var(--ink2)}
.planwhat b{color:var(--ink);font-weight:600}
.amt{font:700 50px/1 var(--display);letter-spacing:-.04em;margin-top:16px;
  font-variant-numeric:tabular-nums}
.amt span{font:600 14px var(--body);color:var(--ink2);letter-spacing:0}
.plan ul{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:9px;font-size:16px;color:var(--ink2)}
.plan li{padding-left:18px;position:relative}
.plan li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;
  background:var(--b60);border-radius:50%}
.excl{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);font-size:15px;color:var(--ink2)}
.excl b{color:var(--ink)}
.rev{margin-top:22px;background:var(--card);border:1px solid var(--line);
  border-left:3px solid var(--b45);padding:22px 24px;font-size:16.5px;color:var(--ink2)}
.rev b{color:var(--ink)}

/* ---- privacy ---- */
.priv{background:var(--deep);color:var(--onDeep)}
.priv .wrap{padding-block:52px}
.priv h2{font-size:clamp(24px,2.6vw,31px);color:#fff}
.priv p{margin-top:14px;color:var(--onDeep2);font-size:17.5px;max-width:74ch}
.priv p b{color:#fff;font-weight:600}

/* ---- flight deck ---- */
.bridge{background:var(--card);border:1px solid var(--line);padding:26px 28px;margin-top:6px}
.bridge p{font:600 19px/1.45 var(--display);letter-spacing:-.015em}
.bridge p span{color:var(--hot)}
.deck{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:26px}
.lvl{background:var(--card);border:1px solid var(--line);padding:0 0 22px;overflow:hidden}
.lvl .bar{height:5px}
.lvl .in{padding:20px 22px 0}
.lvl .dur{font:600 11.5px var(--mono);letter-spacing:.17em;text-transform:uppercase;color:var(--ink2)}
/* one wordmark rule everywhere: the prefix light, PILOT heavy. */
.lvl h3{font-size:21px;margin-top:8px;font-weight:400;color:var(--ink2);letter-spacing:-.02em}
.lvl h3 i{font-style:normal;font-weight:700;color:var(--ink)}
.lvl p{margin-top:11px;color:var(--ink2);font-size:16px}

/* ---- contact ---- */
.end{background:var(--deep);color:var(--onDeep);text-align:center}
.end .wrap{padding-block:64px}
.end h2{font-size:clamp(26px,3vw,38px);color:#fff}
.end p{margin-top:16px;color:var(--onDeep2);font-size:18px}
.endrow{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.cw{margin-top:34px;display:flex;justify-content:center}
.cw img{height:74px;border-radius:7px}
footer{background:var(--deep);color:#5f7a89;border-top:1px solid #1c3646}
footer .wrap{padding-block:22px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font:500 12px var(--mono);letter-spacing:.09em;text-transform:uppercase}
footer a{color:var(--b60);text-decoration:none}
@media(max-width:860px){
  .heroin,.shot{grid-template-columns:1fr}
  .shot:nth-child(even) .cap{order:0}
  .view{grid-template-columns:1fr;gap:4px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---- shared page furniture added for the multi-page site ---- */
.phead{background:var(--deep);color:var(--onDeep);padding-block:54px 58px}
.phead h1{font-size:clamp(30px,4vw,46px);color:#fff;margin-top:14px}
.phead p{margin-top:18px;color:var(--onDeep2);font-size:18.5px;max-width:66ch}
.prose{max-width:70ch}
.prose h2{font-size:clamp(23px,2.6vw,30px);margin-top:42px}
.prose h3{font-size:20px;margin-top:30px;color:var(--b30)}
.prose p{margin-top:15px;color:var(--ink2);font-size:17.5px}
.prose p.stand{font:600 21px/1.45 var(--display);color:var(--ink);letter-spacing:-.015em;
  border-left:3px solid var(--hot);padding-left:18px;margin-top:30px}
.prose ul{margin-top:15px;padding-left:20px;color:var(--ink2);font-size:17.5px}
.prose li{margin-top:8px}
.prose a{color:var(--b45);text-decoration-thickness:1px;text-underline-offset:3px}
.meta{font:600 12px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--onDeep2)}
.lvlfull{background:var(--card);border:1px solid var(--line);margin-top:20px;overflow:hidden}
.lvlfull .bar{height:5px}
.lvlfull .in{padding:24px 26px 26px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:26px}
.lvlfull h2{font-size:26px;margin:0;font-weight:400;color:var(--ink2);letter-spacing:-.02em}
.lvlfull h2 i{font-style:normal;font-weight:700;color:var(--ink)}
.lvlfull .dur{font:600 11.5px var(--mono);letter-spacing:.17em;text-transform:uppercase;color:var(--ink2)}
.lvlfull .quote{margin-top:10px;color:var(--ink);font-size:17px}
.lvlfull ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;color:var(--ink2);font-size:16.5px}
.lvlfull li{padding-left:18px;position:relative}
.lvlfull li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;
  background:var(--b60);border-radius:50%}
.postlist{display:grid;gap:2px;margin-top:8px}
.post{background:var(--card);border:1px solid var(--line);padding:24px 26px;text-decoration:none;display:block}
.post:hover{border-color:var(--b60)}
.post .dt{font:600 11.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink2)}
.post h2{font-size:24px;margin-top:8px}
.post p{margin-top:10px;color:var(--ink2);font-size:17px}
.note{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--b45);
  padding:20px 22px;margin-top:26px;font-size:16.5px;color:var(--ink2)}
.note b{color:var(--ink)}
@media(max-width:760px){.lvlfull .in{grid-template-columns:1fr}}


/* ---- Connolly Works, the parent mark ---------------------------------- */
footer .fin{align-items:flex-start;gap:30px}
.fbrand{display:block;flex:0 0 auto;text-decoration:none}
.fbrand img{display:block;width:196px;height:auto}
.fmeta{display:flex;flex-direction:column;gap:7px;align-items:flex-end;text-align:right;
  margin-left:auto;max-width:56ch}
.fmeta .fcopy{text-transform:none;letter-spacing:.02em;font:400 12.5px/1.6 var(--body);
  color:#5f7a89}
.fmeta .fcopy a{color:#5f7a89;border-bottom:1px solid #24435a}
.phead .plogo{display:block;width:clamp(230px,26vw,330px);height:auto;margin-bottom:26px}
.phead .plogo.small{width:clamp(160px,17vw,200px);margin-bottom:22px}
.maker{background:#eef4f6;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.makerin{display:grid;grid-template-columns:300px 1fr;gap:44px;align-items:center;
  padding-block:46px}
.makerin img{display:block;width:300px;height:auto}
.makerin h2{font:700 24px/1.15 var(--display);letter-spacing:-.02em;color:var(--ink);margin:0 0 12px}
.makerin p{margin:0 0 10px;font-size:16.5px;line-height:1.6;color:var(--ink2);max-width:60ch}
.makerin .makerlinks{display:flex;gap:26px;margin-top:16px;font:600 15px var(--body)}
.makerin .makerlinks a{color:var(--b45);text-decoration:none;border-bottom:1px solid transparent}
.makerin .makerlinks a:hover{border-bottom-color:var(--hot)}
@media(max-width:860px){
  .makerin{grid-template-columns:1fr;gap:24px;padding-block:36px}
  .makerin img{width:230px}
  footer .fin{flex-direction:column}
  .fmeta{align-items:flex-start;text-align:left;margin-left:0}
}

.views dt i{font-style:normal;font-weight:500;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--b45);margin-left:7px}

/* ---- the deployment chooser: "how is your agency built" ----
   Added 16 Sept 2026. The visitor self-identifies before they ever speak to us,
   and the trade term sits beside the plain sentence rather than replacing it —
   an owner who uses the jargon reads the tag, one who does not reads the line. */
.fits{margin-top:30px;border-top:1px solid var(--line)}
.fit{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:26px;
  padding-block:17px;border-bottom:1px solid var(--line)}
.fit .said{font:600 17px/1.45 var(--display);color:var(--b30)}
.fit .term{display:inline-block;font:700 10.5px/1 var(--mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--hot);border:1px solid var(--hot);
  padding:5px 8px;margin-top:11px}
.fit .means{margin:0;color:var(--ink2)}
.fitnote{margin-top:30px;background:var(--card);border:1px solid var(--line);
  border-left:3px solid var(--b60);padding:23px 25px}
.fitnote h3{font-size:19px;color:var(--b30)}
.fitnote p{margin-top:11px;color:var(--ink2)}
@media(max-width:700px){
  .fit{grid-template-columns:1fr;gap:9px}
  .fit .term{margin-top:8px}
}

/* Dark-mode legibility fix, 16 Sept 2026.
   --b30 is #08415c, a dark navy. On the dark --paper (#0e1f2b) it all but
   disappears. This was already true of .sig h3 and .view dt before the chooser
   was added, so the fix covers them too. Same reasoning as the .eyebrow note
   further up: pick the colour against the ground it actually sits on. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .sig h3,
  :root:not([data-theme="light"]) .view dt,
  :root:not([data-theme="light"]) .fit .said,
  :root:not([data-theme="light"]) .fitnote h3{color:var(--b75)}
}
:root[data-theme="dark"] .sig h3,
:root[data-theme="dark"] .view dt,
:root[data-theme="dark"] .fit .said,
:root[data-theme="dark"] .fitnote h3{color:var(--b75)}

/* ---------------------------------------------------------------------------
   The Market Brief, shown on the page rather than described. This is the one
   thing an owner can judge in thirty seconds, so it sits above everything the
   page has to say about itself.
--------------------------------------------------------------------------- */
.briefcard{background:var(--card);border:1px solid var(--line);border-radius:14px;
  overflow:hidden;box-shadow:0 2px 18px rgba(11,29,42,.06)}
.briefhead{display:flex;gap:22px;align-items:flex-end;flex-wrap:wrap;
  padding:22px 26px 18px;border-bottom:1px solid var(--line);background:#fbfdfd}
.briefhead h3{font-family:var(--display);font-size:21px;font-weight:700;margin:2px 0 0;
  color:var(--b30);letter-spacing:-.01em}
.briefstats{display:flex;gap:26px;margin-left:auto;flex-wrap:wrap}
.briefstats div{text-align:left}
.briefstats b{display:block;font-family:var(--display);font-size:24px;font-weight:700;
  line-height:1.05;color:var(--b30)}
.briefstats span{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink2)}
.briefrows{padding:6px 26px 4px}
.brow{display:flex;gap:20px;padding:20px 0;border-bottom:1px solid #eef3f5}
.brow:last-child{border-bottom:0}
.bnum{font-family:var(--display);font-size:40px;font-weight:700;line-height:1;
  color:var(--hot);min-width:74px;text-align:right}
.brow h4{font-family:var(--display);font-size:17px;font-weight:700;margin:0 0 5px;color:var(--ink)}
.brow p{margin:0;font-size:16px;line-height:1.55;color:var(--ink2)}
.brow p b{color:var(--ink)}
.brieffoot{padding:15px 26px 18px;border-top:1px solid var(--line);background:#fbfdfd;
  font-size:14px;color:var(--ink2)}
.brieffoot b{color:var(--ink)}
@media (max-width:640px){
  .bnum{font-size:30px;min-width:52px}
  .brow{gap:14px}
  .briefstats{margin-left:0;gap:18px}
}

/* The three intake doors, one per vertical. */
.starts{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.starts .btn{flex:1 1 240px;text-align:center}

/* The four setup steps carry a duration; stack it under the label so a long
   step name and its duration never collide on one line. */
#start .view dt{display:block}
#start .view dt i{display:block;margin-top:3px}

/* ════════════════════════════════════════════════════════════════════════
   2 Oct 2026 — the hierarchy rework.
   Kevin: "way too long and carrying too much weight of information for
   people to digest... I'm not sure it does a really great job of saying,
   hey, start here, I'll lead you through the process."
   ════════════════════════════════════════════════════════════════════════ */

/* ---- the way in, shown on the page rather than hidden behind a button ----
   Eight doors became one. The steps are printed because a button labelled
   "start here" is a promise; four numbered steps with times on them is the
   thing itself. */
.ways{display:grid;gap:0;margin-top:22px;border:1px solid var(--line);border-radius:6px;
  background:var(--card);overflow:hidden}
.way{display:grid;grid-template-columns:34px minmax(0,1fr);gap:14px;padding:14px 18px;
  border-bottom:1px solid var(--line);align-items:start}
.way:last-child{border-bottom:0}
.way .n{font:600 12px/26px var(--mono);text-align:center;color:#fff;background:var(--b45);
  border-radius:50%;width:26px;height:26px}
.way.done .n{background:var(--ok,#2f7d4f)}
.way h4{margin:0;font:600 15.5px/1.35 var(--display);letter-spacing:-.01em;color:var(--ink)}
.way h4 i{font-style:normal;font-weight:500;font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink3);margin-left:9px;white-space:nowrap}
.way p{margin:4px 0 0;font-size:15px;line-height:1.55;color:var(--ink2)}
.way p a{color:var(--b45);font-weight:600}

/* The one primary action, and the skeptic's door under it rather than beside it. */
.go1{margin-top:26px}
/* The hero is a DARK panel. .go1 carries the one primary action and the two
   lines that explain it, and those lines are the whole point - "eight
   questions, by the fourth you are looking at your own territory". Styled with
   the light-background ink they were almost invisible on the hero, which is the
   worst possible place for the sentence that answers "what happens if I press
   this". The hero's own on-dark colors apply here. */
.hero .go1 .sub,.hero .go1 .alt{color:var(--onDeep2)}
.hero .go1 .alt a{color:var(--b75)}
.hero .go1 .alt b,.hero .go1 .sub b{color:#fff}
.go1 .btn.p{font-size:17px;padding:15px 26px}
/* TWO ACTIONS IN THE HERO since October 9, 2026: the Preflight is the filled
   one and the demo sits beside it, both at hero size. They wrap rather than
   shrink on a phone, so neither loses its tap target. */
.go1 .btnrow{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.go1 .btnrow + .sub{margin-top:16px}
.go1 .btnrow .btn{font-size:17px;padding:15px 26px}
@media(max-width:560px){.go1 .btnrow{display:grid}.go1 .btnrow .btn{text-align:center}}
.go1 .sub{margin:9px 0 0;font-size:14.5px;color:var(--ink2)}
.go1 .alt{margin:13px 0 0;font-size:15px;color:var(--ink2)}
.go1 .alt a{color:var(--b45);font-weight:600}
.go1 .alt b{color:var(--ink)}

/* ---- vertical switch on How It Works ----
   Vertical changes the DATA — which register, which filing, what the roles are
   called. Role changes the SCREEN. They are different kinds of difference, so
   the vertical is a switch and the role is one fork in the middle, and the page
   stays one page. */
.vsw{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 0}
.vsw button{font:600 14px/1 var(--display);color:var(--ink2);background:var(--card);
  border:1px solid var(--line);border-radius:999px;padding:11px 18px;cursor:pointer}
.vsw button:hover{border-color:var(--b60);color:var(--ink)}
.vsw button[aria-selected="true"]{background:var(--b30);border-color:var(--b30);color:#fff}
.vsw button:focus-visible{outline:2px solid var(--b45);outline-offset:2px}
.vnote{margin-top:12px;font-size:14.5px;color:var(--ink3)}
[data-v]{display:none}
[data-v].on{display:block}

/* ---- the desk fork: five shapes, one at a time ---- */
.forks{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 16px}
.forks button{font:500 13.5px/1 inherit;color:var(--ink2);background:#fff;
  border:1px solid var(--line);border-radius:4px;padding:10px 13px;cursor:pointer;text-align:left}
.forks button[aria-selected="true"]{border-color:var(--hot);color:var(--ink);font-weight:600;
  box-shadow:inset 0 -2px 0 var(--hot)}
.forks button:focus-visible{outline:2px solid var(--b45);outline-offset:2px}
[data-fork]{display:none}
[data-fork].on{display:block}
.forkbody{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:20px 22px}
.forkbody .said{margin:0 0 9px;font:italic 400 16px/1.5 var(--display);color:var(--ink2)}
.forkbody p{margin:0;font-size:16px;line-height:1.6;color:var(--ink2)}

/* ---- a compact credibility band, replacing three cards ---- */
.band{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden;
  margin-top:24px}
.band div{background:var(--card);padding:18px 20px}
.band b{display:block;font:600 25px/1.1 var(--display);letter-spacing:-.02em;color:var(--b30)}
.band span{display:block;margin-top:5px;font-size:14px;color:var(--ink2);line-height:1.45}

@media (max-width:640px){
  .way{grid-template-columns:28px minmax(0,1fr);gap:11px;padding:13px 14px}
  .way h4 i{display:block;margin:3px 0 0}
  .go1 .btn.p{width:100%;text-align:center}
}

/* The crops are 1044 and 1388 px wide. Letting them fill a 1160px column
   UPSCALED the Manager Console shot, which both softened the type Kevin asked
   to be able to read and made the section 2.9 screens tall on a page the whole
   point of which was to get shorter. Capped at native-ish width: sharper, and
   about 320px shorter. */
.shot img{max-width:1040px;margin-inline:auto}

/* "...In one list." is the turn in the section head - the three statements run
   flat on purpose so the last three words land. Same treatment the hero gives
   its own turn. */
.sechead h2 em{font-style:normal;color:var(--hot)}

/* ---- the ask (#three) ----
   Kevin, 2 Oct 2026: the three statements set as one paragraph "looks and reads
   like one long run-on sentence". They are a list, so they are set as a list:
   one stem, three lines, and the turn on its own. The screenshot sits beside
   them because the claim and the proof of it belong on the same screen.
   The crop is deliberately two rows and not the whole console - a full console
   at half column width is the illegible strip we already learned about up in
   .shots. The full screen still runs edge to edge in #market directly below. */
.askin{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:46px;align-items:center}
.askcopy h2.askstem{font-size:clamp(23px,2.3vw,28px);margin-top:12px;font-weight:600;
  color:var(--ink2);letter-spacing:-.02em}
.asklist{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:11px}
.asklist li{position:relative;padding-left:27px;font-size:clamp(21px,2.1vw,27px);
  font-weight:600;letter-spacing:-.025em;line-height:1.24}
.asklist li::before{content:"";position:absolute;left:0;top:.46em;width:12px;height:12px;
  border-radius:2px;background:var(--hot)}



.askshot{margin:0}
.askshot img{width:100%;height:auto;display:block;border:1px solid var(--line);
  border-radius:4px;box-shadow:0 18px 44px -30px rgba(8,65,92,.5)}
.askshot figcaption{margin-top:12px;font-size:15px;line-height:1.55;color:var(--ink2)}
@media(max-width:900px){
  .askin{grid-template-columns:1fr;gap:30px}
  
}

/* ---- the week (#week) ----
   Replaced .shots on the home page. Kevin, 2 Oct 2026: the screens section was
   "written kind of cryptically as if there's one person there that might have
   awareness about the tool". A screenshot with a caption assumes you know what
   you are looking at. A day label and a sentence about what just happened does
   not - so the week carries the screens rather than the other way round. */
.week{list-style:none;margin:30px 0 0;padding:0;border-top:1px solid var(--line)}
.wk{display:grid;grid-template-columns:150px minmax(0,1fr);gap:28px;
  padding:26px 0;border-bottom:1px solid var(--line)}
.wkwhen{font:600 14px var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--hot);line-height:1.5;padding-top:3px}
.wkwhen span{display:block;color:var(--ink3);letter-spacing:.06em;font-size:12.5px}
.wkbody h3{font-size:21px;letter-spacing:-.015em;margin:0}
.wkbody p{margin-top:11px;color:var(--ink2);font-size:17px;max-width:68ch}
.wkbody p b{color:var(--ink)}
.wknote{border-left:3px solid var(--line);padding-left:16px;font-size:16px!important}
.wkshot{margin:20px 0 0}
.wkshot img{width:100%;max-width:1040px;height:auto;display:block;border:1px solid var(--line);
  border-radius:4px;box-shadow:0 18px 44px -30px rgba(8,65,92,.5)}
.wkshot figcaption{margin-top:11px;font-size:15px;color:var(--ink3);line-height:1.55;max-width:70ch}
@media(max-width:760px){
  .wk{grid-template-columns:1fr;gap:12px;padding:22px 0}
  .wkwhen span{display:inline;margin-left:8px}
}

/* ---- price strip (#pricing) ----
   The three-plan table moved to pricing.html. What stays is the shape of the
   deal and the number range, because an owner weighing fifteen minutes on the
   form wants the order of magnitude before he starts. */
.pricestrip{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:30px;align-items:center;
  background:var(--card);border:1px solid var(--line);border-left:3px solid var(--hot);
  padding:28px 30px}
.pricestrip h2{font-size:clamp(23px,2.4vw,29px);margin-top:10px}
.pricestrip p{margin-top:12px;color:var(--ink2);font-size:17px;max-width:62ch}
.pricestrip p b{color:var(--ink)}
.pricestrip .btn{white-space:nowrap}
@media(max-width:760px){.pricestrip{grid-template-columns:1fr;gap:20px;padding:24px 22px}}

/* ---- self-serve onboarding (#way) ----
   Kevin, 2 Oct 2026: "make a bigger deal about the self-guided onboarding right
   there." Promoted from a quiet list under the price table to a panel of its
   own, because being able to see your own territory without booking a demo is
   the thing nobody else in the category offers. */
.selfserve{background:var(--card);border:1px solid var(--line);padding:38px 40px 42px}
.selfserve h2{font-size:clamp(25px,2.9vw,35px);margin-top:12px;letter-spacing:-.025em}
.ssled{margin-top:16px;color:var(--ink2);font-size:18px;max-width:66ch}
.ssrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:18px;margin-top:26px}
.ss{border-top:2px solid var(--hot);padding-top:13px}
.ss b{display:block;font:600 18px var(--display);letter-spacing:-.015em;color:var(--ink)}
.ss span{display:block;margin-top:7px;font-size:15.5px;line-height:1.5;color:var(--ink2)}
@media(max-width:760px){.selfserve{padding:28px 22px 32px}}

/* ---- making things pop below the hero ----
   Kevin, 2 Oct 2026: "there's just a lot of gray and blue. Even the font is like
   a darker gray against a lighter gray. Nothing really pops below the hero."
   He is right - every section under the hero was pale paper with white cards and
   gray body copy, so the eye had nothing to land on for 5,000 pixels. Three
   changes: the question-and-answer gets its own treatment (now .shout, further
   down), the stats section becomes a dark band mid-page, and --ink2 is a shade
   darker so the body copy stops dissolving into the paper. */

/* Provenance. Was a 15.5px gray aside that read like a footnote and said three
   things in the negative. Now it is a statement with a rule under the section. */
.prov{margin-top:26px;padding-top:20px;border-top:2px solid var(--line);
  font-size:17px;line-height:1.6;color:var(--ink2);max-width:92ch}
.prov b{color:var(--ink)}

/* A dark section. Breaks the run of pale panels, and the numbers finally carry. */
.sec.dark{background:var(--deep);color:var(--onDeep);padding-block:56px}
.sec.dark .eyebrow{color:var(--b60)}
.sec.dark .sechead h2{color:#fff}
.sec.dark .sechead p{color:var(--onDeep2)}
.sec.dark .band{background:rgba(255,255,255,.1)}
.sec.dark .band div{background:var(--deep)}
.sec.dark .band b{color:var(--hot-lit);font-size:30px}
.sec.dark .band span{color:var(--onDeep2)}
.sec.dark .bridge{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.16);
  color:var(--onDeep)}
.sec.dark .bridge p span{color:var(--hot-lit)}
.sec.dark .note{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.16);
  border-left-color:var(--hot);color:var(--onDeep2)}
.sec.dark .note b{color:#fff}
.sec.dark .note a,.sec.dark .bridge a{color:var(--b75)}

/* .btn.s is the DARK-panel secondary - its text is near-white, so on a light
   card it disappears. Three pages had already patched that inline; these are the
   two light-ground variants, so nobody has to patch it again.
   .btn.d solid navy (reads as a button at a glance), .btn.o outlined. */
.btn.d{background:var(--b30);color:#fff;border-color:var(--b30)}
.btn.d:hover{background:var(--b45);border-color:var(--b45)}
.btn.o{border-color:var(--line);color:var(--ink)}
.btn.o:hover{border-color:var(--b45)}

/* The self-serve panel was a white card on near-white paper - the thing Kevin
   meant by gray on gray. A hot rule across the top makes it an object. */
.selfserve{border-top:4px solid var(--hot)}

/* ---- the shout (#three) ----
   Kevin, 2 Oct 2026: "all of that should really be almost bigger. Like it
   should be unmistakable. Almost make it like a flashing red light or
   something."

   It had been four lines of ordinary type inside a 465px column, which is the
   opposite of unmistakable. Now it breaks the grid and takes the full width, on
   the deep ground, and climbs: the setup, the two questions, then the answer at
   up to 86px in hot orange.

   The flashing red light is literal, and it is borrowed from the product: the
   same pulsing red dot the Manager Console puts beside CALL TODAY. It stops for
   anyone who has asked their system for reduced motion. */
.shout{margin-top:34px;background:var(--deep);padding:clamp(34px,4.4vw,56px) clamp(24px,4vw,54px);
  text-align:center;border-top:4px solid var(--hot)}
.shout p{margin:0}
.sh1{font:400 clamp(20px,2.4vw,30px)/1.3 var(--display);letter-spacing:-.02em;
  color:var(--onDeep2)}
.sh2{margin-top:clamp(12px,1.4vw,18px)!important;
  font:600 clamp(26px,3.6vw,47px)/1.14 var(--display);letter-spacing:-.03em;color:#fff}
.sh3{margin-top:clamp(22px,2.6vw,34px)!important;
  font:700 clamp(38px,6.2vw,86px)/1.04 var(--display);letter-spacing:-.04em;
  color:var(--hot-lit);display:flex;align-items:center;justify-content:center;
  gap:clamp(14px,1.6vw,24px)}
.sh3 .dot{flex:0 0 auto;width:clamp(16px,1.9vw,27px);aspect-ratio:1;border-radius:50%;
  background:#e03a2f;box-shadow:0 0 0 0 rgba(224,58,47,.65);animation:dotpulse 1.9s infinite}
@keyframes dotpulse{
  0%  {box-shadow:0 0 0 0 rgba(224,58,47,.6); opacity:1}
  70% {box-shadow:0 0 0 18px rgba(224,58,47,0); opacity:.85}
  100%{box-shadow:0 0 0 0 rgba(224,58,47,0); opacity:1}
}
@media(prefers-reduced-motion:reduce){.sh3 .dot{animation:none}}
@media(max-width:560px){.sh3{gap:12px}}

/* ---- the regional boards (#built) ----
   October 2, 2026: the footprint went from two regions to five in a day - New
   York downstate, New Jersey with Delaware, and all six New England states. One
   number ("31 territories") no longer tells the story; the story is that the
   Northeast is covered region by region, so each board gets its own tile with
   its own measured counts. Sits on the dark ground with the stats band. */
.regions{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:1px;
  margin-top:30px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.12)}
.rg{background:var(--deep);padding:18px 18px 20px}
.rg h4{margin:0;font:600 15px/1.3 var(--display);letter-spacing:-.01em;color:#fff;
  min-height:2.6em}
.rg b{display:block;margin-top:10px;font:700 30px/1 var(--display);letter-spacing:-.03em;
  color:var(--hot-lit)}
/* the unit rides with the number rather than dropping to its own line */
.rg b i{font:600 14px/1 var(--body);font-style:normal;letter-spacing:0;color:var(--onDeep2);
  margin-left:7px}
.rg span{display:block;margin-top:9px;font-size:13.5px;line-height:1.5;color:var(--onDeep2)}
@media(max-width:620px){.rg h4{min-height:0}}

/* ---- the comparison grid (pricing.html #compare) ----
   A published table of other people's prices, so it is built to be read rather
   than skimmed: our row is marked, the yes/no column carries the whole argument,
   and the footnote markers tie every unpublished figure to its source. Scrolls
   horizontally on a phone rather than crushing eight columns into 390px. */
.cmpwrap{margin-top:30px;overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--line);background:var(--card)}
.cmp{width:100%;min-width:760px;border-collapse:collapse;font-size:15.5px}
.cmp th,.cmp td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);
  vertical-align:top;line-height:1.45}
.cmp thead th{font:600 12.5px/1.35 var(--mono);letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink2);background:var(--paper);border-bottom:2px solid var(--line);
  vertical-align:bottom}
.cmp td i{font-style:normal;color:var(--ink2);font-size:14px}
.cmp .num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.cmp .num.na{color:var(--ink2);font-size:14px}
.cmp tbody tr:last-child td{border-bottom:0}
.cmp tr.us{background:rgba(181,84,31,.07)}
.cmp tr.us td{border-bottom-color:var(--line)}
.cmp tr.us td:first-child{box-shadow:inset 3px 0 0 var(--hot)}
.cmp .yes{color:var(--hot);font-weight:600}
.cmp .no{color:var(--ink2)}
.cmpnote{margin-top:14px;font-size:14.5px;line-height:1.6;color:var(--ink2);max-width:95ch}
.cmpnote b{color:var(--ink)}
@media(max-width:700px){.cmp{font-size:14.5px}.cmp th,.cmp td{padding:12px 13px}}

/* Four tiers rather than six plans: let them sit in one row on a wide screen
   and stack cleanly below it, and keep the nine-region table's numeric columns
   narrow so the region names get the width. */
.plans.tiers{grid-template-columns:repeat(auto-fit,minmax(236px,1fr))}
/* THREE rungs since October 9, 2026 - the state, the region, the country. It
   was briefly five that morning; the market and handful tiles went because a
   count of territories is not a rung of ground. Three fit the row at the
   default track width, so t5 is gone with them.

   The state tile carries a RANGE ($600-$900), and `.amt span` would otherwise
   set its dash in 14px body type. Figures are bottom-aligned across the row so
   the eye reads the three prices on one line whatever the blurb above them
   runs to. */
.plans.tiers .plan{display:flex;flex-direction:column}
.plans.tiers .amt{margin-top:auto;padding-top:18px}
.amt .to{font:inherit;color:var(--ink2);letter-spacing:inherit;display:inline;margin:0 1px}
.amt.rng{font-size:38px}
/* the quoted tile: a word, not a figure, so it sets at prose scale */
.amt.sm{font:700 30px/1.15 var(--display);letter-spacing:-.02em}
.amt.sm span{display:block;margin-top:6px}
/* the state-size table: three rows, so let the label column take the width */
.cmp.stt{min-width:560px}
.cmp.stt td,.cmp.stt th{padding:12px 16px}
.cmp.stt td:nth-child(2){color:var(--ink2);font-size:14.5px}
.cmp.rg9 td,.cmp.rg9 th{padding:12px 14px}
.cmp.rg9 .num{font-variant-numeric:tabular-nums}
.cmp.rg9 td:nth-child(2){color:var(--ink2);font-size:14.5px}

/* ---- the capability matrix (pricing.html #compare, 2nd pass) ----
   Rows are capabilities, columns are tools, so the reader compares down a
   column instead of reading one yes/no verdict per vendor. Our column is tinted
   the whole way down; a dash means "not claimed" and is deliberately quiet. */
.cmp.matrix{min-width:880px}
.cmp.matrix thead th{text-align:center}
.cmp.matrix thead th:first-child{text-align:left}
.cmp.matrix thead th.us{color:var(--hot);border-bottom-color:var(--hot)}
.cmp.matrix td{text-align:center;vertical-align:middle;font-size:17px}
.cmp.matrix td:first-child{text-align:left;font-size:15.5px;line-height:1.45;max-width:34ch}
.cmp.matrix td:first-child b{display:block;color:var(--ink);font-weight:600}
.cmp.matrix td:first-child i{display:block;margin-top:3px;font-style:normal;font-size:13.5px;
  color:var(--ink3,#6a828c);line-height:1.4}
.cmp.matrix td.us{background:rgba(181,84,31,.07)}
.cmp.matrix td.y{color:var(--hot);font-weight:700}
.cmp.matrix td.us.y{color:var(--hot)}
.cmp.matrix tr.prow td{font-size:14px;font-weight:600;color:var(--ink2);border-top:2px solid var(--line)}
.cmp.matrix tr.prow td.us{color:var(--hot)}
.cmp.matrix thead th.us{background:rgba(181,84,31,.07)}

/* The demandPILOT lockup replaces the word in the matrix header. The asset is a
   wide 556x120 horizontal lockup, so it is capped on width and the header cell
   given room to breathe. Two files, not one: the light lockup is drawn in ink
   (#12232b) and vanishes on the dark-mode paper, so each is shown on its own
   ground. The asset's own aria-label reads "Connolly Works LLC" - wrong on the
   demandPILOT mark - which the img alt overrides here. */
.cmp.matrix thead th.us{padding-top:16px;padding-bottom:12px;vertical-align:middle}
.cmp.matrix thead th.us img{display:block;width:100%;max-width:168px;height:auto;margin:0 auto}
.cmp.matrix thead th.us img.drk{display:none}
:root:not([data-theme="light"]){@media (prefers-color-scheme:dark){
  .cmp.matrix thead th.us img.lgt{display:none}
  .cmp.matrix thead th.us img.drk{display:block}
}}
:root[data-theme="dark"] .cmp.matrix thead th.us img.lgt{display:none}
:root[data-theme="dark"] .cmp.matrix thead th.us img.drk{display:block}

/* LIVE EMBEDS - how-it-works.html
   Three real pages from app.connollyworks.com, framed in the page rather than
   photographed. Two problems to solve and one rule.

   Weight. The Manager Console is about half a megabyte and the market page not
   much less, so all three carry loading="lazy": nothing is fetched until the
   reader scrolls near it. A prospect who reads the first two sections and
   leaves pays for none of them.

   Width. These pages are built for a desk, around a 980px map. Dropped into a
   phone-width frame they would simply be clipped, which is worse than a
   picture. So the iframe is always laid out at its own full width and SCALED
   DOWN to whatever room the column has - the page is never reflowed, only made
   smaller, and the wrapper's height follows the scale so nothing is cropped and
   no second scrollbar appears. On a wide screen the scale is 1 and this does
   nothing at all.

   The rule: every embed carries an "open full size" link underneath it, because
   a scaled frame is for judging the product, not for working in it. */
.live{min-width:0}
.live .cap{max-width:72ch;margin-bottom:18px}
.live .cap h3{margin-top:4px;font-size:21px}
.live .cap p{margin-top:9px;color:var(--ink2);font-size:16.5px}
.live .frame{position:relative;width:100%;overflow:hidden;border:1px solid var(--line);
  border-radius:6px;background:#fbfbfa;box-shadow:0 1px 3px rgba(18,22,28,.06)}
.live .frame iframe{width:1280px;height:980px;border:0;display:block;
  transform:scale(var(--s,1));transform-origin:0 0}
.live .out{display:inline-block;margin-top:12px;font:600 15px var(--display);
  color:var(--hot);text-decoration:none;border-bottom:1px solid transparent}
.live .out:hover{border-bottom-color:var(--hot)}
.live .out small{display:none}          /* the note is for the phone button only */
@media (max-width:760px){
  .lives{gap:42px}
  .live .cap h3{font-size:19px}
  /* measured: at 390px a 1280px console scales to 0.27. Not a product, a stamp. */
  .live .frame{display:none}
  .live .out{display:block;margin-top:4px;padding:14px 16px;text-align:center;
    background:var(--b30);color:#fff;border-radius:6px;font-size:16px}
  .live .out:hover{border-bottom-color:transparent}
  .live .out small{display:block;margin-top:3px;font-weight:400;font-size:13px;opacity:.72}
}

/* The quiet aside inside a signal card - a measured figure or a caveat that
   belongs with the claim but must not compete with it. Same name and the same
   job as the .cad the Manager Console uses, so the site and the product read
   the same way. */
.sig .cad{display:block;margin-top:8px;font-size:15px;color:var(--ink3)}

/* SIX STEPS - how-it-works.html
   The page is a numbered sequence and nothing else, so the number is the
   navigation: a reader always knows which of the six they are in and how many
   are left, with no rail, no tabs and no sticky chrome. The number column
   collapses above the text on a phone rather than squeezing the prose into a
   gutter. */
.hiwtop{padding-bottom:30px}
.hiwtop h1{font-size:clamp(30px,4.2vw,48px);margin-top:12px;max-width:25ch}
.hiwlede{margin-top:16px;max-width:62ch;font-size:clamp(17px,1.5vw,20px);color:var(--ink2)}

.steps .step{display:grid;grid-template-columns:64px minmax(0,1fr);gap:22px;
  padding-block:30px;border-top:1px solid var(--line)}
.steps .step:first-child{border-top:0;padding-top:4px}
.sn{font:700 26px/52px var(--display);text-align:center;color:#fff;background:var(--b30);
  border-radius:50%;width:52px;height:52px}
.sb h2{font-size:clamp(21px,2.2vw,27px);margin:6px 0 0}
.sb p{margin-top:11px;font-size:17.5px;line-height:1.6;color:var(--ink2);max-width:66ch}
.sb .eg{margin-top:12px;font-size:15.5px;color:var(--ink3)}
.sb .plain{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:11px;max-width:66ch}
.sb .plain li{font-size:17px;line-height:1.55;color:var(--ink2);
  padding-left:17px;border-left:3px solid var(--line)}
.sb .plain li b{color:var(--ink)}
.sb .live{margin-top:20px}

.hiwmore{padding-bottom:10px}
.hiwmore .view dd a{color:var(--hot);font-weight:600;text-decoration:none;white-space:nowrap}
.hiwmore .view dd a:hover{text-decoration:underline}

@media (max-width:620px){
  .steps .step{grid-template-columns:minmax(0,1fr);gap:0;padding-block:24px}
  .sn{width:42px;height:42px;font:700 21px/42px var(--display);margin-bottom:12px}
  .sb p,.sb .plain li{font-size:16.5px}
}

/* ---- AUTO-PILOT ---------------------------------------------------------
   Kevin asked for it bigger and more prominent and on its own tab. The page
   is four stages, numbered, with every live screen reachable as a card rather
   than buried in a sentence. */
.apthead{padding-bottom:34px}
.apthead .eyebrow{font-size:13px;letter-spacing:.2em;color:var(--hot)}
.apthead h1{font-size:clamp(34px,5vw,58px);margin-top:14px;max-width:17ch;letter-spacing:-.03em}
.aplede{margin-top:20px;max-width:64ch;font-size:clamp(18px,1.7vw,22px);line-height:1.5;color:var(--ink2)}
.apsub{margin-top:13px;max-width:64ch;font-size:16.5px;line-height:1.55;color:var(--ink3)}

.apstage{padding-top:10px}
.stage{display:grid;grid-template-columns:76px minmax(0,1fr);gap:24px;
  padding-block:36px;border-top:1px solid var(--line)}
.stage:first-child{border-top:0}
.stnum{font:700 28px/60px var(--display);text-align:center;color:#fff;background:var(--b30);
  border-radius:50%;width:60px;height:60px}
.stage > .stbody:only-child{grid-column:1/-1}
.stnum.inline{display:inline-block;width:46px;height:46px;font:700 21px/46px var(--display);
  vertical-align:middle;margin-right:14px}
.stbody h2{font-size:clamp(24px,2.7vw,33px);margin:4px 0 0;display:inline-block;vertical-align:middle}
.stled{margin-top:13px;font-size:17.5px;line-height:1.6;color:var(--ink2);max-width:68ch}

.apgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(246px,1fr));gap:14px;margin-top:20px}
.apgrid.two{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.apcard{display:block;text-decoration:none;background:var(--card);border:1px solid var(--line);
  border-top:3px solid var(--b45);border-radius:7px;padding:17px 19px 15px;color:inherit}
.apcard:hover{border-top-color:var(--hot);box-shadow:0 2px 14px rgba(18,22,28,.09)}
.apcard h3{font-size:18px;margin:0;color:var(--b30)}
.apcard p{margin-top:8px;font-size:14.5px;line-height:1.5;color:var(--ink2)}
.apgo{display:inline-block;margin-top:11px;font:600 13.5px/1 inherit;color:var(--hot)}

.aplist{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:10px;max-width:72ch}
.aplist li{font-size:16.5px;line-height:1.55;color:var(--ink2);
  padding-left:17px;border-left:3px solid var(--line)}
.aplist li b{color:var(--ink)}
.apdl{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}

/* The line that sends a reader to Auto-Pilot from any other page. */
.flyown{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--hot);
  border-radius:7px;padding:17px 20px;margin-top:30px;display:flex;gap:16px;
  align-items:center;justify-content:space-between;flex-wrap:wrap}
.flyown p{font:600 17px/1.45 var(--display);letter-spacing:-.01em;margin:0}
.flyown span{display:block;font:400 14.5px/1.5 var(--body);color:var(--ink2);margin-top:4px}

@media(max-width:620px){
  .stage{grid-template-columns:minmax(0,1fr);gap:0}
  .stage > .stnum{margin-bottom:14px}
}

/* ---- CO-PILOT CHAT (assets/copilot.js) ----------------------------------
   The launcher sits above the page but below a full-screen map. The panel is
   a column on a phone and a card on a desktop. */
.cpbtn{position:fixed;right:18px;bottom:18px;z-index:1200;border:0;cursor:pointer;
  background:var(--hot);color:#fff;font:600 14.5px/1 var(--body);
  padding:14px 20px;border-radius:30px;box-shadow:0 4px 18px rgba(18,22,28,.26);
  display:flex;align-items:center;gap:9px}
.cpbtn::before{content:"";width:9px;height:9px;border-radius:50%;background:#fff;opacity:.9}
.cpbtn:hover{background:var(--hot-lit,#c76430)}
.cpbtn.on{background:var(--b30)}

.cppanel{position:fixed;right:18px;bottom:78px;z-index:1200;width:390px;max-width:calc(100vw - 36px);
  height:min(560px,calc(100vh - 110px));background:#fff;border:1px solid var(--line);
  border-radius:12px;box-shadow:0 14px 48px rgba(18,22,28,.26);
  display:none;flex-direction:column;overflow:hidden}
.cppanel.on{display:flex}
.cphead{background:var(--b30);color:#fff;padding:14px 16px;display:flex;
  align-items:center;justify-content:space-between;gap:10px}
.cphead b{font:700 16px/1 var(--display);display:block}
.cphead span{font-size:11.5px;opacity:.72;display:block;margin-top:4px}
.cpx{background:none;border:0;color:#fff;font-size:16px;cursor:pointer;opacity:.75;padding:4px}
.cpx:hover{opacity:1}

.cplog{flex:1;overflow-y:auto;padding:16px;background:var(--card)}
.cpmsg{display:flex;margin-bottom:12px}
.cpme{justify-content:flex-end}
.cpbub{max-width:84%;padding:11px 14px;border-radius:12px;font-size:14.5px;line-height:1.55}
.cpbot .cpbub{background:#fff;border:1px solid var(--line);color:var(--ink);border-top-left-radius:3px}
.cpme .cpbub{background:var(--b30);color:#fff;border-top-right-radius:3px}
.cpbot .cpbub b{color:var(--b30)}
/* block, not inline-block: inline it ran straight on from the last sentence
   with no space, reading as "nothing to post.See the route". */
.cpgo{display:block;margin-top:12px;font:600 13px/1 var(--body);
  color:var(--hot);text-decoration:none}
.cpgo:hover{text-decoration:underline}
/* A miss now offers two ways on, and neither is the only one: asking again and
   emailing Kevin sit beside each other. Kevin, October 3: "email should be a
   choice." Two blocks stacked would read as a ladder with email at the bottom,
   so when both are present they sit on one row. */
.cpacts{display:flex;flex-wrap:wrap;align-items:baseline;gap:18px}
.cpacts .cpgo,.cpacts .cpgoalt{display:inline-block}
.cpgoalt{display:inline-block;margin-top:12px;font:600 13px/1 var(--body);
  background:none;border:0;padding:0;cursor:pointer;color:var(--hot)}
.cpgoalt:hover{text-decoration:underline}
.cpgomail{color:var(--ink2)}

.cpchips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px}
/* ---- contact page ----
   The contact details sit INSIDE the dark .phead block, so these are the only
   rules on this page that are meant to be near-white. Everything below the fold
   is dark ink on paper. Kevin, October 3: "There are white fonts on the contact
   page so the words are illegible" - that was .btn s, the dark-panel secondary,
   used three times on a white page. */
.cinfo{display:flex;flex-wrap:wrap;gap:10px 28px;align-items:baseline;margin-top:24px}
.cinfo a{font:600 19px/1.3 var(--display);color:#fff;text-decoration:none;
  border-bottom:1px solid #2c5568;padding-bottom:2px}
.cinfo a:hover{border-bottom-color:var(--hot)}
.cinfo span{color:var(--onDeep2);font-size:16px}

.cform{max-width:62ch;display:grid;gap:18px}
.cf2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.cform label{display:grid;gap:6px;font:600 14px/1.3 var(--body);color:var(--ink)}
.cform label i{font-style:normal;font-weight:400;color:var(--ink3);font-size:13px}
.cform input,.cform select,.cform textarea{font:400 16px/1.45 var(--body);color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:5px;padding:11px 12px;width:100%}
.cform textarea{resize:vertical;min-height:120px}
.cform input:focus,.cform select:focus,.cform textarea:focus{outline:2px solid var(--b45);
  outline-offset:-1px;border-color:var(--b45)}
.cfgo{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:4px}
.cfnote{margin:0;font-size:14.5px;color:var(--ink2);max-width:46ch}
.cfnote.bad{color:var(--hot)}
.cfnote a{color:var(--hot)}
.cfdone h3{font:700 24px/1.2 var(--display);color:var(--ink)}
.cfdone p{margin-top:12px;font-size:17px;color:var(--ink2);max-width:60ch}
@media(max-width:620px){ .cf2{grid-template-columns:1fr} }

/* Subject heading in Co-PILOT's full menu. Seventy answers in one unlabelled
   wall is a haystack rather than a menu. */
.cpgrp{font:600 11px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink3);margin:4px 0 7px}
.cpchip{font:500 13px/1.3 var(--body);text-align:left;background:#fff;color:var(--ink2);
  border:1px solid var(--line);border-radius:16px;padding:8px 13px;cursor:pointer}
.cpchip:hover{border-color:var(--hot);color:var(--ink)}

.cpask{display:flex;gap:8px;padding:11px;border-top:1px solid var(--line);background:#fff}
.cpask input{flex:1;min-width:0;font:400 14.5px var(--body);padding:10px 12px;
  border:1px solid var(--line);border-radius:7px;color:var(--ink)}
.cpask input:focus{outline:2px solid var(--b45);outline-offset:-1px}
.cpask button{background:var(--b30);color:#fff;border:0;border-radius:7px;
  width:42px;font-size:17px;cursor:pointer}
.cpask button:hover{background:var(--b45)}

@media(max-width:520px){
  .cppanel{right:10px;left:10px;bottom:72px;width:auto;height:min(520px,calc(100vh - 100px))}
  .cpbtn{right:12px;bottom:12px;padding:12px 17px;font-size:14px}
}
@media print{.cpbtn,.cppanel{display:none !important}}
.cpas{display:block;font-size:12.5px;color:var(--ink3);margin-bottom:8px;
  padding-bottom:7px;border-bottom:1px solid var(--line)}
.cpas b{color:var(--ink2) !important;font-weight:600}

/* October 9, 2026 - the homepage rewrite.
   .rowcard draws two Manager Console rows in HTML, from the demonstration
   build's invented names, replacing shot_manager_rows.jpg (which named two
   real nursing homes as short-staffed). .otherv is the "ask about your
   sector" strip; it reuses the .flyown shape with the brand teal. .datanote is
   the small source line that sits beside a claim rather than in the headline. */
.datanote,.pricestrip p.datanote,.sechead p.datanote{margin-top:12px;font-size:13.5px;line-height:1.5;color:var(--ink2);max-width:62ch}
.sec.dark .datanote{color:var(--onDeep2)}
.rowcard{background:var(--card);border:1px solid var(--line);border-left:4px solid #c0392b;
  border-radius:8px;overflow:hidden;font-family:var(--body)}
.rchead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 18px;
  border-bottom:1px solid var(--line)}
.rchead b{font:700 15px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:#c0392b}
.rcdot{width:16px;height:16px;border-radius:50%;background:#c0392b;box-shadow:0 0 0 5px rgba(192,57,43,.18)}
.rcn{color:var(--ink2);font-size:15px}
.rcbtn{margin-left:auto;border:1px solid var(--line);border-radius:7px;padding:7px 12px;
  font-size:14px;color:var(--ink);background:var(--paper)}
.rcrow{display:grid;grid-template-columns:22px 70px minmax(0,1fr);gap:14px;align-items:center;
  padding:16px 18px;border-bottom:1px solid var(--line)}
.rcrow:last-child{border-bottom:0}
.rcbox{width:20px;height:20px;border:2px solid var(--ink2);border-radius:4px}
.rcpct{font:700 34px/1 var(--display);color:#c0392b;text-align:center}
.rcpct small{font-size:18px}
.rcpct i{display:block;font:400 11.5px/1.6 var(--body);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink2);font-style:normal;margin-top:4px}
.rcrow h5{margin:0;font:600 17px/1.3 var(--display);color:var(--ink)}
.rcrow p{margin:5px 0 0;font-size:15px;line-height:1.45;color:var(--ink)}
.rcrow p.rcmeta{color:var(--ink2);font-size:14px}
.otherv{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--b45);
  border-radius:7px;padding:17px 20px;display:flex;gap:16px;
  align-items:center;justify-content:space-between;flex-wrap:wrap}
.otherv p{font:600 17px/1.45 var(--display);letter-spacing:-.01em;margin:0}
.otherv span{display:block;font:400 14.5px/1.5 var(--body);color:var(--ink2);margin-top:4px}
@media(max-width:620px){
  .rcrow{grid-template-columns:20px 54px minmax(0,1fr);gap:10px;padding:14px}
  .rcpct{font-size:26px}
  .rcbtn{margin-left:0}
}

/* October 9, 2026: the See-it-first stage has five cards (a full region was added). Three across, then two. */
.apgrid.five{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:820px){.apgrid.five{grid-template-columns:1fr}}

/* THE TAKING OFF CARD ROW, moved here October 17, 2026.
   It was written out five times - once in each of the five Taking Off pages -
   and two of those five carried the rule without ever using the class. The
   same mistake as every other this week: a fact about something kept
   somewhere other than where that something lives. One copy, in the
   stylesheet all eighteen pages already load. */
.packnav{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.packnav a{display:block;flex:1 1 300px;border:1px solid var(--line,#dfe1e5);border-radius:6px;
 padding:18px 20px;text-decoration:none;background:#fff}
.packnav a:hover{border-color:#08415c}
.packnav b{display:block;font-size:19px;color:#12161c;letter-spacing:-.2px}
.packnav span{display:block;margin-top:5px;font-size:15px;color:#5f6672;line-height:1.45}

/* ===========================================================================
   THE PRINT SHEET - October 17, 2026
   A ONE-PAGER THAT PRINTS TO NINE PAGES IS NOT A ONE-PAGER. The two retired
   PDFs were replaced by the pages themselves, which is right - a page cannot
   go stale in somebody's downloads folder while the product moves - but only
   the Pilot's Manual was ever given a print layout. The owner's guide came
   off the printer at seven pages and the desk guide at nine, both of them
   printing the film players and the closing call to action, both at the
   density of a page read at arm's length rather than one pinned beside a
   screen.
   These rules are the manual's, written once here instead of a fourth time
   in a page, and they apply to any page carrying class="printsheet" on BODY.
   tools/no_long_print.py renders each one and fails the publish if it runs
   over the sheet count the page itself declares.
   =========================================================================== */
@media print{
  body.printsheet{font-size:8.6pt !important;line-height:1.34 !important}
  body.printsheet header.top,body.printsheet footer,body.printsheet .packnav,
  body.printsheet .noprint,body.printsheet .end,body.printsheet .prbar,
  body.printsheet .copilot,body.printsheet #copilot,body.printsheet .cpbtn,
  /* A film does not print. The section that holds them is a screen device and
     on paper it is a page of empty rectangles with a caption under each. */
  body.printsheet .player,body.printsheet section.sec:not(.apstage){display:none !important}
  body.printsheet,body.printsheet section,body.printsheet .sec,
  body.printsheet .sec.apstage,body.printsheet .phead{background:#fff !important}
  body.printsheet .wrap{max-width:none !important;padding:0 !important}
  body.printsheet .phead{color:#12161c !important;padding:0 0 4px !important}
  body.printsheet .phead h1{color:#12161c !important;font-size:17pt !important;
    margin:2px 0 4px !important;line-height:1.08 !important}
  body.printsheet .phead .eyebrow{color:#b5541f !important;margin:0 !important}
  body.printsheet .phead .aplede,body.printsheet .phead .apsub{color:#3a444c !important;
    margin:2px 0 0 !important;font-size:9pt !important;line-height:1.35 !important}
  body.printsheet .sec,body.printsheet .sec.apstage{padding:0 !important;margin:0 !important}
  /* USE THE WHOLE SHEET. On screen these columns are measured for reading at
     arm's length; on paper the same max-widths leave half the page blank. */
  body.printsheet p,body.printsheet .stled,body.printsheet .sechead,
  body.printsheet .aplist,body.printsheet .aplist li,body.printsheet .qbox p,
  body.printsheet .phead .aplede,body.printsheet .phead .apsub{max-width:none !important}
  body.printsheet .stage{gap:7px !important;margin:0 0 7px !important;padding:0 !important;
    border:0 !important;page-break-inside:avoid}
  body.printsheet .stbody{margin-left:0 !important;padding-left:0 !important;
    max-width:none !important;flex:1 1 auto !important}
  body.printsheet .sechead{margin:9px 0 2px !important}
  body.printsheet .sechead h2,body.printsheet .stbody h2{font-size:12pt !important;
    margin:0 0 2px !important;line-height:1.12 !important}
  body.printsheet .sechead .eyebrow{font-size:7pt !important;margin:0 !important}
  body.printsheet .stcost{font-size:7pt !important;margin:0 0 1px !important}
  body.printsheet .stled{margin:0 0 3px !important;font-size:8.6pt !important}
  body.printsheet .stnum{width:17px !important;height:17px !important;font-size:9pt !important;
    line-height:17px !important;margin-top:1px !important}
  body.printsheet .aplist{margin:0 !important;padding-left:0 !important}
  body.printsheet .aplist li{margin:0 0 3px !important;padding-left:9px !important;
    font-size:8.6pt !important;line-height:1.34 !important;border:0 !important}
  body.printsheet .qbox{margin:8px 0 0 !important;padding:7px 10px !important;
    page-break-inside:avoid;background:#f4f7f8 !important;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  body.printsheet .qbox.warn{background:#fdf6ec !important}
  body.printsheet .qbox h3{font-size:9.5pt !important;margin:0 0 3px !important}
  body.printsheet .qbox p{font-size:8.5pt !important;line-height:1.34 !important;
    margin:0 0 4px !important}
  body.printsheet .eg{font-size:8pt !important;margin-top:4px !important}
  /* The three-word spine reads as one line on paper, not three boxes. */
  body.printsheet .spine{display:block !important;margin:5px 0 8px !important;
    font-size:8.6pt !important}
  body.printsheet .spine li{display:inline !important;border:0 !important;
    padding:0 !important;background:none !important}
  body.printsheet .spine li:after{content:'  \00b7  ';color:#9db4bd}
  body.printsheet .spine li:last-child:after{content:''}
  body.printsheet .spine b,body.printsheet .spine span{display:inline !important;
    font-size:8.6pt !important}
  body.printsheet .spine span{margin:0 0 0 4px !important;color:#5f6672 !important}
  body.printsheet a{color:#12161c !important;text-decoration:none !important}
  @page{margin:0.5in 0.55in}
}

/* ===========================================================================
   THE LEFT RAIL ON THE SITE - October 17, 2026
   The same three blocks, the same shape and the same colors as the rail on
   the demonstration, so somebody who crosses from one to the other does not
   have to learn a second thing. Written by tools/site_rail.py into the seven
   Taking Off pages between RAIL:START and RAIL:END; that script doubles as
   the guard that none of them has drifted.
   The pages reflow rather than shrink: .wrap is already capped, so a 272px
   rail simply gives the page a narrower column. The type does not change.
   =========================================================================== */
.dprail{position:fixed;left:0;top:0;bottom:0;width:272px;z-index:60;overflow-y:auto;
  background:#0b1f2c;color:#c6d4dd;border-right:1px solid #16394d;
  font:400 13px/1.5 "Helvetica Neue",Helvetica,Arial,sans-serif}
body.dp-railed{padding-left:272px}
body.dp-railed.dp-rail-shut{padding-left:46px}
body.dp-rail-shut .dprail{width:46px}
body.dp-rail-shut .dpr-body{display:none}
.dpr-head{display:flex;align-items:center;gap:9px;padding:13px 14px;border-bottom:1px solid #16394d}
.dpr-head b{font-size:13.5px;color:#fff;letter-spacing:-.01em}
.dpr-x{margin-left:auto;background:none;border:0;color:#7f9aa8;cursor:pointer;
  font:700 15px/1 Helvetica,Arial,sans-serif;padding:5px 6px;border-radius:5px}
.dpr-x:hover{background:#13334599;color:#fff}
body.dp-rail-shut .dpr-head b{display:none}
body.dp-rail-shut .dpr-x{margin:0 auto}
.dpr-s{padding:15px 14px;border-bottom:1px solid #16394d}
.dpr-k{display:block;font:700 9.5px/1 Helvetica,Arial,sans-serif;letter-spacing:.19em;
  text-transform:uppercase;color:#6f98ab;margin:0 0 9px}
.dpr-you,.dpr-now{font-size:15.5px;font-weight:700;color:#fff;line-height:1.25;margin:0 0 3px}
.dpr-p{margin:0 0 9px;font-size:12.5px;line-height:1.45;color:#9db4c1}
.dpr-sw{font-size:12.5px;color:#9fd3e3;text-decoration:none;font-weight:600}
.dpr-sw:hover{text-decoration:underline}
.dpr-gh{margin:12px 0 5px;font:700 9.5px/1 Helvetica,Arial,sans-serif;letter-spacing:.15em;
  text-transform:uppercase;color:#6f98ab}
.dpr-l{list-style:none;margin:0;padding:0}
.dpr-l li{margin:0 0 1px}
.dpr-l a{display:block;padding:7px 10px;border-radius:7px;text-decoration:none;
  color:#c6d4dd;font-size:13px;line-height:1.3;border-left:3px solid transparent}
.dpr-l a:hover{background:#13334599;color:#fff}
.dpr-l a.on{background:#133345;color:#fff;font-weight:700;border-left-color:#e0762f}
.dpr-l a span{display:block;font-size:11px;color:#8fa8b6;font-weight:400;margin-top:2px;
  line-height:1.35}
.dpr-l a.on span{color:#a9c3d1}
.dpr-go{display:block;padding:9px 11px;border-radius:8px;text-decoration:none;
  background:#133345;color:#fff;font-size:13px;font-weight:600;line-height:1.3}
.dpr-go:hover{background:#17445c}
.dpr-go span{display:block;font-size:11px;font-weight:400;color:#9db4c1;margin-top:2px}
.dpr-foot{padding:14px;font-size:11px;line-height:1.5;color:#7f9aa8}
@media(max-width:1180px){
  .dprail{position:static;width:auto;height:auto;border-right:0;border-bottom:1px solid #16394d}
  body.dp-railed,body.dp-railed.dp-rail-shut{padding-left:0}
  body.dp-rail-shut .dprail{width:auto}
  .dpr-x{display:none}
  body.dp-rail-shut .dpr-body{display:block}
  .dpr-s{border-bottom:0;display:inline-block;vertical-align:top;min-width:250px;max-width:430px}
}
/* A rail is a way around a screen. On paper there is nowhere to go, and the
   print sheets are measured to the page - tools/no_long_print.py would fail
   the publish if this took a side of its own. */
@media print{.dprail{display:none !important}
  body.dp-railed,body.dp-railed.dp-rail-shut{padding-left:0 !important}}

/* ---------------------------------------------------------------- MARKET LAYER
   The public market pages and the home page's one question. Added October 17,
   2026. Everything here uses the existing tokens - no new colors, no new type
   family - because the point of the redesign was fewer things on the page, not
   a second visual system beside the first. */

/* the four counts on a market page */
.mkfig{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}
.mkcard{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:22px 24px}
.mkbig{font-family:var(--display);font-size:40px;font-weight:700;line-height:1;
  letter-spacing:-.03em;color:var(--hot)}
.mkcard:nth-child(n+2) .mkbig{color:var(--b30)}
.mklab{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink3);margin-top:9px}
.mkcard p{margin:9px 0 0;font-size:14.5px;line-height:1.5;color:var(--ink2)}

/* the town table */
.mktw{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.mktw table{border-collapse:collapse;width:100%;min-width:460px;font-size:15px}
.mktw th,.mktw td{padding:9px 16px;text-align:left;border-bottom:1px solid var(--line)}
.mktw th{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);
  background:var(--paper);position:sticky;top:0}
.mktw td.r,.mktw th.r{text-align:right;font-variant-numeric:tabular-nums}
.mktw tbody tr:last-child td{border-bottom:0}

/* the index */
.mkjump{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 26px}
.mkjump a{font-size:13px;font-weight:600;padding:5px 10px;border:1px solid var(--line);
  border-radius:7px;background:var(--card);text-decoration:none}
.mkst{font-family:var(--display);font-size:23px;margin:30px 0 12px;scroll-margin-top:16px}
.mkst span{font-size:13px;font-weight:400;color:var(--ink3);margin-left:8px}
.mkgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(216px,1fr));gap:10px}
.mkt{display:block;background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:13px 15px;text-decoration:none;color:inherit}
.mkt:hover{border-color:var(--b60)}
.mkt b{display:block;font-size:15.5px}
.mkt span{display:block;font-size:13px;color:var(--ink3);margin-top:2px}

/* ---- the home page's one question ---- */
.ask{background:var(--deep);color:var(--onDeep);padding:56px 0 60px}
.ask .wrap{max-width:var(--wrap)}
.ask h1{margin:0 0 16px;font-family:var(--display);font-size:clamp(34px,5.4vw,58px);
  line-height:1.05;font-weight:700;letter-spacing:-.03em;color:#fff;max-width:19ch}
.ask .asksub{margin:0 0 30px;font-size:clamp(17px,2.1vw,20px);line-height:1.5;
  color:var(--onDeep2);max-width:62ch}
.ask .asksub b{color:#fff}
.askpick{display:flex;gap:11px;flex-wrap:wrap;align-items:stretch;max-width:700px}
.askpick select{flex:1 1 300px;min-width:0;font:inherit;font-size:17px;padding:15px 16px;
  border-radius:10px;border:1px solid #2b4d60;background:#12313f;color:#fff}
.askpick button{flex:0 0 auto;font:inherit;font-size:17px;font-weight:700;padding:15px 28px;
  border-radius:10px;border:0;background:var(--hot);color:#fff;cursor:pointer}
.askpick button:hover{background:var(--hot-lit)}
.asknote{margin:14px 0 0;font-size:14.5px;color:var(--onDeep2)}
.asknote a{color:var(--b75)}

/* what it is, said once, under the question */
.said{background:var(--card);border-bottom:1px solid var(--line);padding:40px 0}
.saidin{display:flex;gap:40px;flex-wrap:wrap;align-items:flex-start}
.saidin>.saidmain{flex:999 1 500px;min-width:0}
.saidmain .one{margin:0 0 12px;font-family:var(--display);font-size:clamp(20px,2.6vw,25px);
  line-height:1.35;font-weight:600;letter-spacing:-.015em}
.saidmain p.two{margin:0;font-size:16px;line-height:1.6;color:var(--ink2)}
.saidsrc{flex:1 1 290px;min-width:0;background:var(--paper);border-left:4px solid var(--hot);
  border-radius:0 10px 10px 0;padding:18px 20px}
.saidsrc p{margin:0;font-size:14.5px;line-height:1.55;color:var(--ink2)}

/* the proof strip */
.proof{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}

/* two jobs, one board */
.fork{display:flex;gap:18px;flex-wrap:wrap}
.forkcard{flex:1 1 360px;min-width:0;background:#12313f;border-radius:12px;padding:24px 26px}
.forkcard h3{margin:0 0 6px;font-family:var(--display);font-size:19px;font-weight:700;color:#fff}
.forkcard p{margin:0 0 15px;font-size:15px;line-height:1.55;color:var(--onDeep2)}

@media (max-width:620px){
  .mkcard{padding:18px 18px}
  .mkbig{font-size:34px}
  .askpick select,.askpick button{flex:1 1 100%}
}

/* ------------------------------------------------------- THE GROUND PICKER
   October 17, 2026. A visitor lands on a market page from a search, reads a
   number about Boston, and is then asked for fifteen minutes. The gap was too
   big and nothing in between returned anything. Ticking the towns your
   caregivers actually reach takes ten seconds, asks for nothing, and turns
   the market's number into theirs.

   What it deliberately does NOT do is count short-staffed homes per town.
   Boston has 49 towns with facilities and only 10 hold three or more rated
   nursing homes, so a per-town count would name a building by arithmetic in
   most of them - which is the one thing a public page may never do. The
   staffing figures stay market-wide above the table; the selection says how
   much of that market is theirs. */
.ground{position:sticky;top:0;z-index:5;background:var(--deep);color:var(--onDeep);
  border-radius:12px;padding:16px 20px;margin:0 0 14px;
  display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.ground .gfig{display:flex;gap:22px;flex-wrap:wrap;align-items:baseline}
.ground .gf b{display:block;font-family:var(--display);font-size:25px;font-weight:700;
  line-height:1.05;color:#fff;font-variant-numeric:tabular-nums}
.ground .gf span{font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--onDeep2)}
.ground .gnone{font-size:15px;color:var(--onDeep2);max-width:46ch;line-height:1.45}
.ground .gacts{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.ground .gacts button{font:inherit;font-size:13px;font-weight:600;padding:7px 13px;
  border-radius:7px;border:1px solid #2b4d60;background:#12313f;color:#fff;cursor:pointer}
.ground .gacts button:hover{background:#17455a}
.mktw td.pick,.mktw th.pick{width:34px;text-align:center;padding-right:0}
.mktw td.pick input{width:17px;height:17px;cursor:pointer;accent-color:var(--hot)}
.mktw tr.on td{background:#fdf5ef}
:root:not([data-theme="light"]){@media (prefers-color-scheme:dark){
  .mktw tr.on td{background:#1b3442}
}}
:root[data-theme="dark"] .mktw tr.on td{background:#1b3442}
.gask{margin:18px 0 0;background:var(--card);border:1px solid var(--line);
  border-left:4px solid var(--hot);border-radius:0 12px 12px 0;padding:20px 22px}
.gask h3{margin:0 0 8px;font-family:var(--display);font-size:21px;font-weight:700;
  letter-spacing:-.015em}
.gask p{margin:0 0 15px;font-size:16px;line-height:1.55;color:var(--ink2);max-width:62ch}
@media (max-width:620px){
  .ground{position:static}
  .ground .gacts{margin-left:0}
  .ground .gf b{font-size:21px}
}

/* The one-account example beside the price. Kevin's own numbers, publishing no
   margin assumption - billed revenue and the monthly cost, side by side. */
.oneacct{flex:1 1 320px;min-width:0;background:var(--card);border:1px solid var(--line);
  border-left:4px solid var(--hot);border-radius:0 12px 12px 0;padding:22px 24px}
.oneacct p{margin:0 0 10px;font-size:16.5px;line-height:1.55;color:var(--ink2)}
.oneacct p:last-child{margin-bottom:0}
.oneacct b{color:var(--ink)}

/* ------------------------------------------------- THE QUESTION PATH
   October 18, 2026. The home page is a sequence of five questions and the
   reader should be able to see that it is one, rather than meeting the
   questions one at a time down a long scroll. The strip is the line; the
   numbers beside each heading are where you are on it. */
.qpath{background:var(--card);border-bottom:1px solid var(--line);padding:14px 0}
.qpath p{margin:0;font-size:14.5px;display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline}
.qpath a{text-decoration:none;border-bottom:1px solid transparent;white-space:nowrap}
.qpath a:hover{border-bottom-color:var(--hot)}
.qhead{display:flex;align-items:baseline;gap:14px}
.qhead h2{margin:0}
.qhead .qn{font-family:var(--display);font-size:clamp(30px,4vw,44px);font-weight:700;
  line-height:1;color:var(--hot);flex:0 0 auto}
.sec.dark .qhead .qn{color:var(--b75)}
section[id^="q"]{scroll-margin-top:12px}
@media (max-width:620px){
  .qhead{gap:10px}
  .qpath p{gap:5px 12px;font-size:13.5px}
}

/* ------------------------------------------------- THE PRICING PAGE TOP
   October 18, 2026, to Kevin's pricing-page brief: "On desktop, place a concise
   one-placement economic illustration alongside the pricing cards so cost and
   potential value appear together."

   The page used to make the economic case TWICE in two different arithmetics -
   a nurse aide at $8 an hour of gross profit earning $1,250 a month, and one
   account billing $1,800 a week at about a 26% margin - stacked one under the
   other, so a reader met two numbers for what looked like the same placement.
   There is one illustration now and it sits beside the opening, above the
   cards, which is where a reader doing arithmetic wants it. */
.pricehero{display:flex;gap:34px;align-items:flex-start;flex-wrap:wrap;margin-bottom:6px}
.pricehero>.phtext{flex:1 1 440px;min-width:0}
.pricehero>.oneacct{flex:0 1 400px;margin-top:6px}
.pricehero .sechead h1{margin-top:10px}
.oneacct>.eyebrow{margin-bottom:13px}
/* The arithmetic as a table rather than a paragraph: four lines of working and
   the region price under it, so the comparison is a glance and not a reading. */
table.mini{width:100%;border-collapse:collapse;font-size:14.5px}
table.mini td{padding:8px 0;border-bottom:1px solid var(--line);color:var(--ink2);
  line-height:1.4;vertical-align:baseline}
table.mini td.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;
  font:600 16px var(--mono);color:var(--ink);padding-left:14px}
table.mini tr.tot td{border-bottom:2px solid var(--b45);color:var(--ink);font-weight:600}
table.mini tr.tot td.num{font-size:21px}
table.mini tr.vs td{border-bottom:0}
table.mini tr.vs td.num{color:var(--hot)}
/* The terms a buyer checks before pressing anything, on one line under the
   cards - they used to be step 4 of a numbered path two screens further up. */
.terms{margin-top:22px;font:600 13.5px/1.7 var(--mono);letter-spacing:.02em;color:var(--ink2)}

/* WHAT IS INCLUDED. Its own section since October 18; it had been one sentence
   in a note under the price cards, which is a footnote answering "what am I
   actually paying for". */
.inc{list-style:none;margin:28px 0 0;padding:6px 24px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:0 34px;
  border:1px solid var(--line);background:var(--card);border-radius:6px}
.inc li{padding:14px 0 14px 26px;border-bottom:1px solid var(--line);position:relative;
  font-size:15.5px;line-height:1.5;color:var(--ink2)}
.inc li:before{content:"";position:absolute;left:2px;top:21px;width:9px;height:9px;
  background:var(--b45);border-radius:50%}
.inc li b{color:var(--ink)}

/* THE VENDOR GRID, FOLDED AWAY. The brief: "Keep the simple competitor table
   visible and place the vendor-specific comparison in an expandable detail
   section." Six columns of other companies' names were the first thing a reader
   met in that section, on a page about why to pay us. */
details.vend{margin-top:26px;border:1px solid var(--line);background:var(--card);
  border-radius:6px}
details.vend>summary{cursor:pointer;padding:16px 20px;font:600 16.5px/1.4 var(--display);
  letter-spacing:-.01em;color:var(--b45);list-style:none}
details.vend>summary::-webkit-details-marker{display:none}
details.vend>summary:before{content:"+";font-family:var(--mono);color:var(--hot);
  margin-right:9px;font-weight:700}
details.vend[open]>summary:before{content:"\2212"}
details.vend[open]>summary{border-bottom:1px solid var(--line)}
details.vend>summary:hover{color:var(--b30)}
details.vend .vin{padding:18px 20px 24px}
details.vend .cmpwrap{margin-top:18px}
/* the category table: four columns of words, so it does not need the 760px
   minimum the vendor matrix does */
.cmp.cat{min-width:620px}
.cmp.cat td:not(:first-child){text-align:center;white-space:nowrap}
.cmp.cat thead th:not(:first-child){text-align:center}
@media(max-width:900px){.pricehero>.oneacct{flex:1 1 100%}}
/* the disclaimer inside the panel must not set at the same size as the
   arithmetic above it - .oneacct p would otherwise win over .datanote */
.oneacct p.datanote{font-size:13.5px;line-height:1.5;color:var(--ink3)}