/* hypercare, round 4 (2026-10-04): the article hangs off a vertical time
   axis, go-live to the quarter. Beside the axis runs a band: ticket volume as
   a hatched envelope and support capacity as solid navy laid over it. Where
   capacity falls short of volume, the hatching left showing is what the
   business absorbs. A marker rides the axis with the reader; when it passes
   week 2 the capacity band snaps away.
   Linked only from article-hypercare.html. */

.hc-body{
  --paper:#f7f5f0; --paper2:#efece4; --ink:#16150f; --ink2:#33312a; --muted:#6b6660;
  --navy:#0e1330; --navy2:#16304F; --red:#e5322d; --red2:#A93A3A; --gold:#B8862F;
  --hair:#d9d3c6;
  --serif:Newsreader,Georgia,serif; --sans:Inter,system-ui,sans-serif;
  --when:8.5rem; --railw:3.6rem; --gap:2.8rem; --body:37rem; --gut:max(16px,4vw);
  --hatch:repeating-linear-gradient(135deg,rgba(169,58,58,.62) 0 1.5px,rgba(169,58,58,.12) 1.5px 6px);
  background:var(--paper);
}
.hc-body ::selection{background:var(--navy2);color:var(--paper);}
.hc-body :focus-visible{outline:2px solid var(--red2);outline-offset:3px;}
.hc{display:block;}

/* ---------- opener ---------- */
.hc .hc-hero{padding:0 var(--gut);background:var(--paper);}
.hc .hc-hero-in,.hc .key{max-width:calc(var(--when) + var(--railw) + var(--gap) + var(--body));margin:0 auto;}
.hc .hc-hero-in{padding:clamp(1.6rem,4vw,2.6rem) 0 0;}
.hc .back-link{display:inline-block;font:500 .85rem/1.4 var(--sans);color:var(--muted);margin-bottom:clamp(2.4rem,6vw,4.4rem);}
.hc .back-link:hover{color:var(--ink);}
.hc .hc-hero h1{font-family:var(--serif);font-weight:400;font-optical-sizing:auto;font-size:clamp(2.6rem,6.6vw,5.4rem);line-height:1;
  letter-spacing:-.03em;color:var(--ink);margin:0 0 1.5rem;max-width:14ch;}
.hc .hc-hero .dek{font:400 clamp(1.2rem,2vw,1.5rem)/1.42 var(--serif);color:var(--ink2);max-width:33em;margin:0 0 1.6rem;}
.hc .article-meta{font:500 .88rem/1.4 var(--sans);color:var(--muted);margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .9rem;border:0;padding:0;}
.hc .article-meta b{color:var(--ink);font-weight:600;}
.hc .article-meta .sep{width:1.1rem;height:1px;background:var(--hair);}
.hc .key{padding:clamp(2.4rem,5vw,3.4rem) 0 clamp(2rem,4vw,2.8rem);display:grid;grid-template-columns:calc(var(--when) + var(--railw) + var(--gap)) minmax(0,var(--body));}
.hc .key-items{grid-column:1;margin:0;display:flex;flex-direction:column;gap:.5rem;font:500 .84rem/1.3 var(--sans);color:var(--ink2);padding-right:1.4rem;}
.hc .kk{display:flex;align-items:center;gap:.55rem;}
.hc .sw{display:inline-block;width:1.6rem;height:.8rem;flex:0 0 auto;}
.hc .sw-cap{background:var(--navy2);}
.hc .sw-vol{width:3px;height:1rem;margin:0 .8rem 0 .7rem;background:var(--red);}
.hc .sw-gap{background:var(--hatch);}
.hc .key-t{grid-column:2;margin:0;font:400 1rem/1.55 var(--serif);color:var(--muted);}

/* ---------- the spine ---------- */
.hc .spine{position:relative;display:block;padding:0 var(--gut) clamp(3rem,6vw,4.5rem);}
.hc .seg{display:grid;grid-template-columns:var(--when) var(--railw) minmax(0,var(--body));max-width:calc(var(--when) + var(--railw) + var(--gap) + var(--body));
  margin:0 auto;padding:0;}
.hc .when{grid-column:1;padding:0 1.1rem 0 0;text-align:right;}
.hc .wl{display:block;font:600 1rem/1.25 var(--sans);color:var(--ink);letter-spacing:-.01em;padding-top:.15rem;}
.hc .wl.sub{font-weight:500;color:var(--muted);font-size:.9rem;margin:0;max-width:none;}
.hc .wn{display:block;font:500 .82rem/1.3 var(--sans);color:var(--red2);margin-top:.2rem;}
.hc .cliff .wl{color:var(--red2);}
.hc .rail{grid-column:2;position:relative;border-right:2px solid var(--ink);}
.hc .rail .vol,.hc .rail .cap,.hc .rail .ved{position:absolute;top:0;bottom:0;right:0;width:100%;}
/* volume: a hatched envelope whose edge slopes from this tick's level to the next */
.hc .rail .vol{background:var(--hatch);clip-path:polygon(calc(100% - var(--v0) * 100%) 0,100% 0,100% 100%,calc(100% - var(--v) * 100%) 100%);}
.hc .rail .cap{background:var(--navy2);transform-origin:100% 50%;transform:scaleX(var(--c));}
.hc .rail .ved{background:var(--red);z-index:1;
  clip-path:polygon(calc(100% - var(--v0) * 100% - 1px) 0,calc(100% - var(--v0) * 100% + 2px) 0,calc(100% - var(--v) * 100% + 2px) 100%,calc(100% - var(--v) * 100% - 1px) 100%);}
.hc .tail .rail{border-right:2px dashed var(--muted);}
/* tick dots on the axis */
.hc .tick .rail::after{content:"";position:absolute;right:-8px;top:.35rem;width:14px;height:14px;box-sizing:border-box;background:var(--paper);border:2px solid var(--ink);border-radius:50% !important;z-index:2;}
.hc .cliff .rail::after{border-color:var(--red2);background:var(--red2);}
.hc .seg:not(.tick) .rail::after{content:"";position:absolute;right:-5px;top:.55rem;width:8px;height:8px;background:var(--muted);border-radius:50% !important;z-index:2;}
.hc .body{grid-column:3;padding:0 0 clamp(3rem,6vw,4.6rem) var(--gap);min-width:0;}
.hc .seg.cyc-seg .body{padding-bottom:2.4rem;}

.hc .body p{font:400 clamp(1.1rem,1.55vw,1.21rem)/1.64 var(--serif);color:var(--ink2);margin:0 0 1.25em;}
.hc .body p.lede{font-size:clamp(1.24rem,2vw,1.42rem);line-height:1.5;color:var(--ink);}
.hc .body > :first-child{margin-top:0;}
.hc .body > :last-child{margin-bottom:0;}
.hc .body h2{font:400 clamp(1.75rem,3.2vw,2.4rem)/1.1 var(--serif);font-optical-sizing:auto;letter-spacing:-.02em;color:var(--ink);margin:clamp(2.6rem,5vw,3.6rem) 0 1rem;}
.hc .body > h2:first-child{margin-top:0;}
.hc .body a{color:var(--navy2);text-decoration:underline;text-decoration-color:var(--hair);text-underline-offset:3px;}
.hc .ri{font-family:var(--sans);font-weight:600;font-size:.92em;color:var(--ink);}
.hc .body p.usual{color:var(--muted);}
.hc .body p.usual .ri{color:var(--muted);}
.hc .sc{font:600 .95rem/1 var(--sans);font-variant-caps:all-small-caps;letter-spacing:.08em;color:var(--red2);margin-right:.35rem;}
.hc .body p.note{font-size:1.06rem;line-height:1.58;padding:1rem 0 0;border-top:1px solid var(--hair);margin-top:1.8rem;}

/* triage: a hairline ledger */
.hc .tri{margin:1.6rem 0 1.8rem;font-family:var(--sans);}
.hc .tr{display:grid;grid-template-columns:9.5rem minmax(0,1fr) minmax(0,1fr);gap:1.1rem;padding:.9rem 0;border-top:1px solid var(--hair);font-size:.9rem;line-height:1.45;color:var(--ink2);}
.hc .tr:last-child{border-bottom:1px solid var(--hair);}
.hc .tr b{font-weight:600;color:var(--ink);}
.hc .tr.th{font-size:.8rem;font-weight:500;color:var(--muted);padding:.4rem 0;border-top:0;}

/* demobilization reasons */
.hc .why{margin:1.6rem 0 2rem;padding:0;}
.hc .why>div{display:grid;grid-template-columns:6.5rem 1fr;gap:1.1rem;padding:.95rem 0;border-top:1px solid var(--hair);}
.hc .why>div:last-child{border-bottom:1px solid var(--hair);}
.hc .why dt{font:600 .95rem/1.5 var(--sans);color:var(--red2);}
.hc .why dd{margin:0;font:400 1.08rem/1.55 var(--serif);color:var(--ink2);}
.hc .body p.punch{font:400 clamp(1.15rem,1.8vw,1.3rem)/1.5 var(--serif);color:var(--muted);margin-top:2rem;}
.hc .body p.punch b{display:block;font-weight:400;font-size:clamp(1.6rem,3vw,2.15rem);line-height:1.18;letter-spacing:-.015em;color:var(--ink);margin-bottom:.6rem;}

/* the cycles */
.hc .cyc p{margin:0;}
.hc .body .cyc p:first-child{font-size:clamp(1.2rem,1.9vw,1.38rem);line-height:1.45;color:var(--ink);}
.hc .body .cyc p.clean{font:500 .92rem/1.45 var(--sans);color:var(--navy2);margin-top:.55rem;}

/* exit criteria: a checklist ledger */
.hc .exit{margin:1.6rem 0 0;}
.hc .xg{display:grid;grid-template-columns:7rem 1fr;gap:1.1rem;padding:1rem 0;border-top:1px solid var(--hair);}
.hc .xg:last-child{border-bottom:1px solid var(--hair);}
.hc .body .xh{font:600 .95rem/1.5 var(--sans);color:var(--ink);margin:0;}
.hc .xg ul{list-style:none;margin:0;padding:0;}
.hc .xg li{position:relative;padding:0 0 .5rem 1.6rem;font:400 1.04rem/1.5 var(--serif);color:var(--ink2);}
.hc .xg li:last-child{padding-bottom:0;}
.hc .xg li::before{content:"";position:absolute;left:0;top:.38em;width:.75em;height:.75em;box-sizing:border-box;border:1.5px solid var(--ink2);}
.hc .body p.comp{font-size:1.05rem;color:var(--muted);margin-top:1.6rem;}

/* the marker */
.hc .hc-marker{display:none;}
.hc .cta-sec{padding:.5rem 0 clamp(3rem,6vw,4.5rem);}

@media screen and (prefers-reduced-motion:no-preference){
  .hc .spine.armed .hc-marker{display:block;position:absolute;left:0;top:0;width:0;height:0;z-index:3;pointer-events:none;will-change:transform;}
  .hc .hc-marker i{position:absolute;left:-11px;top:-11px;width:22px;height:22px;box-sizing:border-box;border-radius:50% !important;background:var(--red);border:4px solid var(--paper);
    box-shadow:0 0 0 2px var(--red) !important;}
  .hc .hc-marker::before{content:"";position:absolute;right:0;top:-1px;height:2px;width:var(--mw,4.8rem);background:var(--red);}
  .hc .spine.armed .rail .cap{transition:transform .38s cubic-bezier(.75,0,.9,.35) calc(var(--k,0) * 55ms);}
  .hc .spine.armed:not(.cut) .seg.cliff .cap,.hc .spine.armed:not(.cut) .seg.cliff ~ .seg .cap{transform:scaleX(1);transition:transform .7s cubic-bezier(.2,.7,.2,1);}
  .hc .spine.armed .cliff .wn{transition:opacity .3s;}
  .hc .spine.armed:not(.cut) .cliff .wn{opacity:0;}
  .hc .spine.armed.cut .cliff .rail::after{animation:hc-ping .9s cubic-bezier(.2,.7,.2,1) 1;}
}
@keyframes hc-ping{0%{transform:scale(1);}35%{transform:scale(1.7);}100%{transform:scale(1);}}

/* ---------- phone and narrow ---------- */
@media (max-width:820px){
  .hc-body{--railw:2.2rem;--gap:1.1rem;}
  .hc .key{grid-template-columns:1fr;gap:1rem;}
  .hc .key-items{grid-column:1;flex-direction:row;flex-wrap:wrap;gap:.5rem 1.1rem;padding:0;}
  .hc .key-t{grid-column:1;}
  .hc .seg{grid-template-columns:var(--railw) minmax(0,1fr);grid-template-areas:"rail when" "rail body";}
  .hc .rail{grid-area:rail;}
  .hc .when{grid-area:when;text-align:left;padding:0 0 .8rem var(--gap);}
  .hc .wl,.hc .wn{display:inline;}
  .hc .wn{margin-left:.5rem;}
  .hc .body{grid-area:body;}
  .hc .tr{grid-template-columns:1fr;gap:.25rem;}
  .hc .tr.th{display:none;}
  /* QA 2026-10-05: with the header row hidden, name the two text cells so they don't run together */
  .hc .tr>span[role=cell]::before{display:block;font:500 .76rem/1.3 var(--sans);color:var(--muted);margin:.45rem 0 .1rem;}
  .hc .tr>span[role=cell]:nth-child(2)::before{content:"What belongs here";}
  .hc .tr>span[role=cell]:nth-child(3)::before{content:"Response";}
  .hc .why>div,.hc .xg{grid-template-columns:1fr;gap:.3rem;}
}

@media print{
  .hc .hc-marker{display:none !important;}
  .hc .rail .cap{transform:scaleX(var(--c)) !important;}
  .hc .rail .vol,.hc .rail .cap,.hc .rail .ved,.hc .sw{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
}

/* ---------- Color 2026-10-09: lead red, navy capacity, green only for "clean" ---------- */
.hc-body{--rtint:#FDF3F3;--green:#2E7D5B;--green2:#1F5E42;--gold2:#8A6413;--blue:#0003cc;}
.hc .tr,.hc .hc-dm i,.hc .seg.cliff,.hc .hc-cy dt{-webkit-print-color-adjust:exact;print-color-adjust:exact;}

/* hero: the legend sits on a faint ruled field, like chart paper */
.hc .hc-hero{background-color:var(--paper);
  background-image:linear-gradient(to bottom,transparent 0,transparent calc(100% - 1px),rgba(169,58,58,.10) calc(100% - 1px)),
    linear-gradient(to right,transparent 0,transparent calc(100% - 1px),rgba(22,48,79,.06) calc(100% - 1px));
  background-size:100% 28px,28px 100%;}

/* triage: each class carries its severity as a colored tick */
.hc .tr b{position:relative;padding-left:.95rem;}
.hc .tr b::before{content:"";position:absolute;left:0;top:.18em;width:4px;height:1.05em;background:var(--sv,transparent);}
.hc .tr.sv1{--sv:var(--red);} .hc .tr.sv1 b{color:var(--red2);}
.hc .tr.sv2{--sv:var(--red2);}
.hc .tr.sv3{--sv:var(--gold);}
.hc .tr.sv4{--sv:#9aa4b2;}
.hc .tr.sv1{background:linear-gradient(90deg,var(--rtint),rgba(253,243,243,0) 70%);}

/* week 2: the cliff segment sits in a full-bleed red tint (border-image paints past the column without widening the page) */
.hc .seg.cliff{border-image:linear-gradient(var(--rtint),var(--rtint)) fill 0 / 0 / clamp(2rem,4vw,2.8rem) 100vw 0;}
.hc .seg.cliff .body{padding-bottom:clamp(3.4rem,6vw,4.8rem);}
.hc .seg.cliff .body h2{color:var(--red2);}
.hc .seg.cliff .why>div{border-color:#ecd2cf;}
.hc .seg.cliff .body p{color:var(--ink);}
.hc .seg.cliff .body p.punch{color:#5d4f4b;}

/* the six weeks after go-live */
.hc .hc-dm{margin:2rem 0 .4rem;padding:0;font-family:var(--sans);}
.hc .hc-dm-ax{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));font:500 .76rem/1 var(--sans);color:#5d4f4b;font-variant-numeric:tabular-nums;}
.hc .hc-dm-ax span{white-space:nowrap;padding:0 0 .45rem;border-left:1px solid #e3c4c1;padding-left:.35rem;}
.hc .hc-dm-tr{display:grid;grid-template-columns:2fr 3fr 2fr;height:26px;}
.hc .hc-dm-tr i{display:block;}
.hc .hc-dm-tr .s-on{background:var(--navy2);}
.hc .hc-dm-tr .s-off{background:repeating-linear-gradient(90deg,#e8d2cf 0 1px,transparent 1px 8px);border-top:1px solid #e3c4c1;border-bottom:1px solid #e3c4c1;}
.hc .hc-dm-tr .s-pay{background:var(--red);background-image:var(--hatch),linear-gradient(var(--red),var(--red));}
.hc .hc-dm-tr .s-pay{background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.35) 0 1.5px,transparent 1.5px 6px);background-color:var(--red);}
.hc .hc-dm-ev{display:grid;grid-template-columns:2fr 3fr 2fr;margin-top:.55rem;}
.hc .body .hc-dm-ev p{margin:0;font:400 .98rem/1.35 var(--serif);color:var(--ink);padding-left:.55rem;border-left:2px solid var(--ink);}
.hc .body .hc-dm-ev b{display:block;font:600 .8rem/1.3 var(--sans);color:var(--ink);}
.hc .body .hc-dm-ev .e2{grid-column:2;border-left-color:var(--navy2);}
.hc .body .hc-dm-ev .e5{grid-column:3;border-left-color:var(--red);}
.hc .body .hc-dm-ev .e5 b{color:var(--red2);}
@media screen and (prefers-reduced-motion:no-preference){
  .hc .hc-dm.armed .hc-dm-tr i{opacity:.22;}
  .hc .hc-dm.armed.on .hc-dm-tr i{opacity:1;transition:opacity .5s ease;}
  .hc .hc-dm.armed.on .hc-dm-tr .s-off{transition-delay:.7s;}
  .hc .hc-dm.armed.on .hc-dm-tr .s-pay{transition-delay:1.5s;}
}

/* cycles: the count that ends hypercare, in red numerals */
.hc .hc-cy{display:flex;gap:0;margin:1.8rem 0 2.4rem;padding:0;}
.hc .hc-cy>div{padding:0 1.6rem;border-left:1px solid var(--hair);}
.hc .hc-cy>div:first-child{padding-left:0;border-left:0;}
.hc .hc-cy dt{font:400 clamp(2.6rem,5vw,3.6rem)/1 var(--serif);color:var(--red2);font-variant-numeric:lining-nums;letter-spacing:-.02em;}
.hc .hc-cy dd{margin:.4rem 0 0;font:500 .86rem/1.3 var(--sans);color:var(--muted);}
.hc .body .cyc p.clean{color:var(--green2);display:flex;gap:.5rem;align-items:baseline;}
.hc .body .cyc p.clean::before{content:"";flex:0 0 auto;width:.55rem;height:.55rem;border-radius:50% !important;background:var(--green);transform:translateY(-.05rem);}

/* exit: the checkboxes take the green they're waiting for */
.hc .xg li::before{border-color:var(--green);}
.hc .body .xh{color:var(--green2);}

@media (max-width:820px){
  .hc .hc-dm-ax{font-size:.72rem;}
  .hc .hc-dm-ax span:nth-child(even){color:transparent;}
  .hc .body .hc-dm-ev p{font-size:.92rem;}
}
@media (max-width:480px){
  .hc .hc-dm-ev{grid-template-columns:1fr;row-gap:.6rem;}
  .hc .body .hc-dm-ev .e2,.hc .body .hc-dm-ev .e5{grid-column:1;}
}

/* QA 2026-10-10 */
/* the Week 2 tint rose in a hard edge 2.8rem above the capacity cut, so two edges sat near each other and didn't line up; the outset now fades in and the tint is solid exactly where the cut is */
.hc .seg.cliff{border-image:linear-gradient(rgba(253,243,243,0) 0,var(--rtint) clamp(2rem,4vw,2.8rem),var(--rtint) 100%) fill 0 / 0 / clamp(2rem,4vw,2.8rem) 100vw 0;}
/* six-week strip on narrow screens: "Go-live" is wider than its week and the full-height Wk 1 tick ran through it; the weeks with hidden labels keep a short tick under the label line instead */
@media (max-width:820px){
  .hc .hc-dm-ax span:nth-child(even){border-left-color:transparent;background:linear-gradient(#e3c4c1,#e3c4c1) 0 100% / 1px .45rem no-repeat;}
}