/* Compliant healthcare marketing (2026-10-02): the marketing service page. Carries Rytasha's copy from the four live
   service pages in the V3 look: the homepage gradient and clouds in the hero with an ad-copy check card as the
   signature animation, the four services as a switch of coloured panels (lime, gold, forest, teal) with graded
   photos and accordions, and her four "Why" essays on a teal photo band. Loaded after v3.css and only by this page. */

/* film grain, the same monochrome noise the homepage photo tiles carry; sits on top of a .cm-grain block */
.cm-grain{position:relative;isolation:isolate}
.cm-grain::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;opacity:var(--gr,.55);mix-blend-mode:overlay;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E") 0 0/180px 180px}
@keyframes cmdrift{from{transform:scale(1)}to{transform:scale(1.07) translate(-1.2%,.8%)}}

/* the second line of a heading in mid green; lime on the dark band */
h1 .tone,h2 .tone,h3 .tone{display:block;color:#3F5C3B}

/* ---- 1. hero: her line left, the ad-copy check card right, the sub-service chips gliding along the foot ---- */
.cm-hero{min-height:0;padding-top:calc(64px + clamp(2rem,6.5vh,4.25rem));padding-bottom:0}
.cm-hero>.wrap{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:clamp(2rem,5vw,4.5rem);align-items:center;width:100%}
.cm-htext{display:grid;gap:1.2rem;justify-items:start}
.cm-htext .crumb{margin:0;color:var(--ink2)}
.cm-htext h1{font-size:clamp(2.3rem,4.4vw,3.8rem);line-height:1.03}
.cm-htext .lede{color:var(--ink2);max-width:42ch;line-height:1.62;font-size:clamp(1.03rem,1.3vw,1.16rem)}
.cm-mt{display:inline-flex;align-items:center;gap:.5rem;margin-top:-.25rem;font-size:.92rem;font-weight:500;color:#3F5C3B}
.cm-mt .ic{width:17px;height:17px}
.cm-htext .btn{margin-top:.35rem}
.js .cm-htext>*{animation:rise 1s var(--ease) both}
.js .cm-htext>*:nth-child(2){animation-delay:.08s}.js .cm-htext>*:nth-child(3){animation-delay:.16s}
.js .cm-htext>*:nth-child(4){animation-delay:.22s}.js .cm-htext>*:nth-child(5){animation-delay:.28s}
.cm-marq{margin-top:clamp(1.8rem,5vh,3rem);padding-block:clamp(1.1rem,3vh,1.8rem) clamp(1.8rem,5vh,3rem)}

/* the check card: a frosted card holding a search ad, the two rule checks, a status line and the conversion line */
.cm-check{position:relative;justify-self:end;width:min(468px,100%);display:grid;gap:.8rem;padding:1.15rem 1.2rem 1.45rem;border-radius:26px;overflow:hidden;
  background:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.92);backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4);
  box-shadow:0 28px 60px rgba(14,58,31,.14),0 4px 14px rgba(14,58,31,.05),inset 0 1px 0 #fff;transition:opacity .45s var(--ease)}
.js .cm-check{animation:rise 1.1s var(--ease) .2s both}
.cm-check>*{transition:opacity .4s var(--ease)}
.cm-check.out>*{opacity:0}
.cm-chead{display:flex;align-items:center;gap:.55rem;font-size:.85rem;font-weight:500;color:var(--muted)}
.cm-cico{width:30px;height:30px;border-radius:50%;background:#EEF5DF;color:#3F5C3B;display:grid;place-items:center;flex:none}
.cm-cico .ic{width:15px;height:15px}
/* the ad */
.cm-ad{position:relative;overflow:hidden;padding:.9rem 1.05rem 1rem;border-radius:16px;background:#fff;border:1px solid rgba(34,53,42,.07);box-shadow:0 8px 20px rgba(34,53,42,.06)}
.cm-adtop{display:flex;align-items:center;gap:.45rem;margin-bottom:.4rem;font-size:.76rem;line-height:1.2;color:var(--muted)}
.cm-adtop b{font-weight:600;color:var(--ink2)}
.cm-adtop span::before{content:"";display:inline-block;width:3px;height:3px;margin:0 .45rem 0 0;border-radius:50%;background:currentColor;vertical-align:middle}
.cm-adh{display:grid;font:600 1.13rem/1.32 var(--display);letter-spacing:-.02em;color:#16485A}
.cm-adh>span{grid-area:1/1;transition:opacity .45s var(--ease),transform .55s var(--ease)}
.cm-adh mark{background:none;color:inherit;border-radius:4px;padding:0 .12em;margin:0 -.12em;transition:background .4s,color .4s,box-shadow .4s;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.cm-v0{opacity:0;visibility:hidden}
.cm-v1{color:#1F4A31}
.cm-sk{display:grid;gap:.42rem;margin-top:.65rem}
.cm-sk i{height:7px;border-radius:9px;background:#EDF0EA}
.cm-sk i:first-child{width:94%}.cm-sk i:last-child{width:62%}
.cm-scan{position:absolute;left:0;right:0;top:0;height:2px;opacity:0;pointer-events:none;background:linear-gradient(90deg,transparent,#3F5C3B,transparent);box-shadow:0 0 16px #A8D26D}
@keyframes cmscan{0%{opacity:1;top:0}100%{opacity:0;top:100%}}
/* the two rule checks: a ring that spins while scanning, an amber flag, then a lime tick */
.cm-rules{list-style:none;margin:0;padding:0 .15rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem 1rem}
.cm-rules li{display:flex;align-items:center;gap:.55rem;font-size:.86rem;font-weight:500;line-height:1.25;color:var(--ink2)}
.cm-st{width:24px;height:24px;flex:none}
.cm-st svg{display:block;width:100%;height:100%;overflow:visible}
.cm-st .rg{fill:none;stroke:rgba(34,53,42,.2);stroke-width:2}
.cm-st .arc{fill:none;stroke:#3F5C3B;stroke-width:2;stroke-linecap:round;transform-origin:12px 12px}
.cm-st .fl circle{fill:#FBEFD6;stroke:#E9C77C;stroke-width:1}
.cm-st .fl path{fill:none;stroke:#B8780F;stroke-width:2.4;stroke-linecap:round}
.cm-st .ok circle{fill:#C6E57C}
.cm-st .ok path{fill:none;stroke:#0E3A1F;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.cm-st .rg,.cm-st .arc,.cm-st .fl{opacity:0}
.cm-st .fl,.cm-st .ok{transform-box:fill-box;transform-origin:center;transition:opacity .35s var(--ease),transform .5s cubic-bezier(.3,1.5,.5,1)}
.cm-rules li+li .fl,.cm-rules li+li .ok{transition-delay:.18s}
/* status line: three states share one slot */
.cm-status{display:grid;padding:0 .15rem;font-size:.84rem;line-height:1.3;color:var(--muted)}
.cm-status span{grid-area:1/1;display:flex;align-items:center;gap:.5rem;opacity:0;transition:opacity .35s var(--ease)}
.cm-status span::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.cm-status .s1{color:#A86C0B;font-weight:600}
.cm-status .s2{color:#2F5E3B;font-weight:600;opacity:1}
/* the conversion line: search result to landing page to enquiry */
.cm-conv{display:block;width:100%;height:auto;overflow:visible;margin-top:.15rem}
.cm-conv .g{fill:none;stroke:rgba(34,53,42,.1);stroke-width:1;stroke-dasharray:3 6}
.cm-conv .area{fill:url(#cmFill)}
.cm-conv .trk{fill:none;stroke:rgba(31,74,49,.22);stroke-width:2;stroke-linecap:round;stroke-dasharray:2 6}
.cm-conv .ln{fill:none;stroke:#1F4A31;stroke-width:3;stroke-linecap:round}
.cm-conv .hd{fill:#C6E57C;stroke:#0E3A1F;stroke-width:2;opacity:0}
.cm-conv .nd circle{fill:#fff;stroke:#1F4A31;stroke-width:2.4}
.cm-conv .n3 circle{fill:#C6E57C;stroke:#0E3A1F;stroke-width:2.4}
.cm-conv .n3 path{fill:none;stroke:#0E3A1F;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.cm-conv .nd{transform-box:fill-box;transform-origin:center}
.cm-conv text{font:600 13px var(--sans);fill:var(--ink2);letter-spacing:-.005em}
.cm-conv .t3{fill:#0E3A1F}
.cm-timer{display:none;position:absolute;left:1.25rem;right:1.25rem;bottom:.7rem;height:2px;border-radius:2px;overflow:hidden;background:rgba(34,53,42,.08)}
.cm-timer i{position:absolute;inset:0;background:rgba(31,74,49,.55);transform:scaleX(0);transform-origin:left}

/* animated states (the finished, compliant card is the default without script or with reduced motion):
   .a scanning, .b flagged, .c rewritten and cleared, .d converting */
.js .cm-timer{display:block}
.js .cm-check:not(.c) .cm-v0{opacity:1;visibility:visible}
.js .cm-check:not(.c) .cm-v1{opacity:0;transform:translateY(8px)}
.js .cm-check.c .cm-v0{opacity:0;transform:translateY(-8px)}
.js .cm-check.b mark{background:#FBEFD6;color:#A86C0B;box-shadow:inset 0 -1.5px 0 #B8780F}
.js .cm-check.a:not(.b) .cm-scan{animation:cmscan 1.25s var(--ease) forwards}
.js .cm-check:not(.b):not(.c) .cm-st .rg,.js .cm-check:not(.b):not(.c) .cm-st .arc{opacity:1}
.js .cm-check.a:not(.b) .cm-st .arc{animation:cmspin .85s linear infinite}
.js .cm-check:not(.c) .cm-st .ok{opacity:0;transform:scale(.3)}
.js .cm-check.b:not(.c) .cm-st .fl{opacity:1}
@keyframes cmspin{to{transform:rotate(360deg)}}
.js .cm-check:not(.c) .cm-status .s2{opacity:0}
.js .cm-check:not(.b):not(.c) .cm-status .s0{opacity:1}
.js .cm-check.b:not(.c) .cm-status .s1{opacity:1}
.js .cm-conv .ln{stroke-dasharray:1;stroke-dashoffset:1}
.js .cm-conv .area{opacity:0;transition:opacity .9s var(--ease)}
.js .cm-conv.done .area{opacity:1}
/* before the line reaches them the stops wait as faint rings and the labels are greyed */
.cm-conv .nd circle,.cm-conv .nd path{transition:fill .4s var(--ease),stroke .4s var(--ease),opacity .4s}
.js .cm-conv .nd{transition:transform .55s cubic-bezier(.3,1.6,.5,1)}
.js .cm-conv .nd:not(.on){transform:scale(.72)}
.js .cm-conv .nd:not(.on) circle{fill:rgba(255,255,255,.7);stroke:rgba(31,74,49,.28)}
.js .cm-conv .nd:not(.on) path{opacity:0}
.js .cm-conv text{transition:fill .4s var(--ease),opacity .4s}
.js .cm-conv text:not(.on){opacity:.5}

/* ---- 2. the four services: a switch, then one coloured panel at a time ---- */
.cm-svc{padding-top:clamp(3.25rem,8vh,5rem)}
.cm-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;padding:5px;margin:0 auto clamp(.9rem,2vh,1.2rem);border-radius:22px;
  background:#F1F4EE;border:1px solid rgba(34,53,42,.05)}
.cm-tab{display:flex;align-items:center;gap:.7rem;min-width:0;padding:.55rem .9rem .55rem .55rem;border:0;border-radius:17px;background:transparent;cursor:pointer;text-align:left;
  font:600 .94rem/1.25 var(--sans);color:var(--ink2);-webkit-tap-highlight-color:transparent;transition:background .3s var(--ease),color .3s,box-shadow .3s}
.cm-tab:hover{background:rgba(255,255,255,.7);color:var(--ink)}
.cm-tab[aria-selected="true"]{background:#fff;color:var(--ink);box-shadow:0 8px 22px rgba(34,53,42,.1),0 1px 2px rgba(34,53,42,.05)}
.cm-tico{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--c1);color:var(--c2)}
.cm-tico .ic{width:17px;height:17px}
.cm-tab.lime{--c1:#C6E57C;--c2:#0E3A1F}
.cm-tab.gold{--c1:#F0DB6A;--c2:#4A3F08}
.cm-tab.forest{--c1:#1F4A31;--c2:#C6E57C}
.cm-tab.teal{--c1:#16485A;--c2:#A6D6D8}
.cm-tt{min-width:0}

/* every panel sits in the same grid cell, so the stage keeps the tallest panel's height and switching never moves
   anything below it */
.cm-stage{display:grid}
.cm-panel{grid-area:1/1;display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);gap:1.1rem;padding:1.1rem;border-radius:30px;overflow:hidden;
  --fg:#0E3A1F;--fg2:rgba(14,58,31,.82);--gr:.42;
  opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility 0s linear .5s}
.cm-panel.on{opacity:1;visibility:visible;transition:opacity .5s var(--ease),visibility 0s}
.cm-panel>*{position:relative;z-index:1}
html:not(.js) .cm-stage{gap:1rem}
html:not(.js) .cm-panel{grid-area:auto;opacity:1;visibility:visible}
/* surfaces */
.cm-panel.lime{background:radial-gradient(70% 80% at 100% 0%,#E3F08C 0%,rgba(227,240,140,0) 62%),linear-gradient(212deg,#B9DE72 0%,#C6E57C 28%,#DCEDA4 64%,#EEF5DF 100%);box-shadow:0 26px 60px rgba(63,92,59,.16);--sc:rgba(10,42,22,.82)}
.cm-panel.gold{background:radial-gradient(70% 80% at 100% 0%,#F7E78F 0%,rgba(247,231,143,0) 62%),linear-gradient(212deg,#E2C42E 0%,#EDD45A 26%,#F5E7A0 64%,#FBF4D6 100%);box-shadow:0 26px 60px rgba(120,96,10,.16);--fg2:rgba(14,58,31,.84);--sc:rgba(52,42,4,.8)}
.cm-panel.forest{background:radial-gradient(70% 90% at 86% 0%,#2E6A45 0%,rgba(46,106,69,0) 65%),radial-gradient(60% 80% at 0% 100%,#0F2E1E 0%,rgba(15,46,30,0) 70%),#173D29;box-shadow:0 26px 60px rgba(14,40,24,.24);
  --fg:#fff;--fg2:rgba(255,255,255,.84);--gr:.5;--sc:rgba(6,22,13,.84)}
.cm-panel.teal{background:radial-gradient(70% 90% at 88% 6%,#2F7F97 0%,rgba(47,127,151,0) 62%),radial-gradient(60% 80% at 0% 100%,#0E3C4C 0%,rgba(14,60,76,0) 70%),#1E6577;box-shadow:0 26px 60px rgba(5,32,42,.24);
  --fg:#fff;--fg2:rgba(255,255,255,.86);--gr:.5;--sc:rgba(4,26,34,.84)}
/* left: graded photo with the service name, then her intro */
.cm-pl{display:flex;flex-direction:column;gap:1.05rem;min-width:0}
.cm-pl .cm-ph{flex:1 0 auto}
.cm-ph{overflow:hidden;border-radius:20px;min-height:clamp(190px,27vh,236px);display:flex;align-items:flex-end;padding:1.1rem 1.3rem 1.15rem;--gr:.6;background:#3F5C3B}
.cm-ph .pl{position:absolute;inset:-3%;z-index:-2;background:50% 50%/cover no-repeat}
.cm-ph::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,0) 30%,var(--sc) 100%)}
.cm-ph h3{position:relative;z-index:1;color:#fff;font-size:clamp(1.45rem,2.15vw,1.95rem);line-height:1.06;letter-spacing:-.04em;max-width:17ch;text-shadow:0 2px 18px rgba(0,0,0,.25)}
.cm-panel.lime .pl{background-image:url(img/cm-acq.jpg);background-position:50% 58%}
.cm-panel.gold .pl{background-image:url(img/cm-brand.jpg);background-position:46% 34%}
.cm-panel.forest .pl{background-image:url(img/cm-presc.jpg);background-position:62% 50%}
.cm-panel.teal .pl{background-image:url(img/cm-eco.jpg);background-position:52% 30%}
.js .cm-panel.on .cm-ph .pl{animation:cmdrift 38s ease-in-out infinite alternate}
.cm-intro{padding:0 .45rem .35rem}
.cm-intro p{font-size:.98rem;line-height:1.62;color:var(--fg2)}
.cm-more{display:none}
/* right: her four sub-services as an accordion in a white glass card */
.cm-subs{min-width:0;border-radius:22px;padding:1.1rem 1.35rem .35rem;color:var(--ink);
  background:rgba(255,255,255,.88);border:1px solid rgba(255,255,255,.95);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);
  box-shadow:0 18px 44px rgba(14,40,24,.12),inset 0 1px 0 #fff}
.cm-subl{font-size:.85rem;color:var(--muted);padding:0 0 .7rem;border-bottom:1px solid rgba(34,53,42,.1)}
.cm-item+.cm-item{border-top:1px solid rgba(34,53,42,.08)}
.cm-item h4{margin:0;font-size:inherit;font-weight:inherit}
.cm-q{appearance:none;-webkit-appearance:none;border:0;background:none;margin:0;width:100%;display:flex;align-items:center;gap:.85rem;padding:.7rem .1rem;text-align:left;cursor:pointer;
  font:600 1.04rem/1.25 var(--display);letter-spacing:-.02em;color:var(--ink);border-radius:12px;-webkit-tap-highlight-color:transparent}
.cm-ico{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--i1);color:var(--i2);transition:background .3s,color .3s}
.cm-ico .ic{width:17px;height:17px}
.cm-qt{flex:1;min-width:0}
.cm-chev{width:30px;height:30px;padding:7px;border-radius:50%;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;color:var(--i2);background:rgba(34,53,42,.05);transition:transform .4s var(--ease),background .3s}
.cm-q:hover .cm-chev{background:rgba(34,53,42,.09)}
.cm-q[aria-expanded="true"] .cm-chev{transform:rotate(180deg)}
.cm-q[aria-expanded="true"] .cm-ico{background:var(--o1);color:var(--o2)}
.cm-panel.lime{--i1:#EEF5DF;--i2:#3F5C3B;--o1:#C6E57C;--o2:#0E3A1F}
.cm-panel.gold{--i1:#FBF3CC;--i2:#6F5E0C;--o1:#F0DB6A;--o2:#3D3407}
.cm-panel.forest{--i1:#E5EFE3;--i2:#1F4A31;--o1:#173D29;--o2:#C6E57C}
.cm-panel.teal{--i1:#DDEFF0;--i2:#1E6577;--o1:#16485A;--o2:#A6D6D8}
/* the open row eases to its height; every open row shares the tallest one's height (set by the script) */
.cm-pane{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .5s var(--ease),visibility 0s linear .5s}
.cm-item.open .cm-pane{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .5s var(--ease),visibility 0s}
html:not(.js) .cm-pane{grid-template-rows:1fr;visibility:visible}
/* the four panels are stacked; a hidden panel's open answer must hide with its panel and never catch clicks meant for
   the panel on show (it was blocking the second row of the panels underneath) */
.cm-panel:not(.on){pointer-events:none}
.cm-panel:not(.on) .cm-item.open .cm-pane{visibility:inherit}
.cm-pane>div{min-height:0;overflow:hidden;padding-left:calc(36px + .95rem)}
.cm-pane p{padding:0 .4rem 1rem 0;font-size:.92rem;line-height:1.58;color:var(--muted)}

/* ---- 3. why it matters: her four essays on a rounded teal photo band ---- */
.cm-why{padding-top:clamp(1rem,3vh,2rem)}
.cm-band{overflow:hidden;border-radius:30px;background:#16485A;--gr:.62;padding:clamp(2.2rem,4.4vw,3.5rem);
  display:grid;grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);grid-template-rows:auto auto auto auto auto 1fr;column-gap:clamp(2rem,5vw,4.5rem);
  box-shadow:0 30px 70px rgba(5,32,42,.18)}
.cm-band .pl{position:absolute;inset:-3%;z-index:-2;background:url(img/cm-why.jpg) 50% 50%/cover no-repeat}
.js .cm-band .pl{animation:cmdrift 38s ease-in-out infinite alternate}
.cm-band::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(4,26,34,.88) 0%,rgba(4,26,34,.74) 36%,rgba(4,26,34,.36) 68%,rgba(4,26,34,.44) 100%)}
.cm-band>:not(.pl){position:relative;z-index:1}
.cm-band h2{grid-column:1;grid-row:1;align-self:start;color:#fff;margin-bottom:clamp(1.4rem,3.5vh,2.2rem);text-shadow:0 2px 24px rgba(4,26,34,.35)}
.cm-band h2 .tone{color:#C6E57C}
.cm-eh{grid-column:1;margin:0;font-size:inherit;font-weight:inherit;letter-spacing:0}
.cm-eh:nth-of-type(1){grid-row:2}.cm-eh:nth-of-type(2){grid-row:3}.cm-eh:nth-of-type(3){grid-row:4}.cm-eh:nth-of-type(4){grid-row:5}
.cm-eq{position:relative;appearance:none;-webkit-appearance:none;border:0;background:none;margin:0;width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.85rem .2rem .85rem 1.2rem;text-align:left;cursor:pointer;box-shadow:inset 2px 0 0 rgba(255,255,255,.2);
  font:600 clamp(1.02rem,1.3vw,1.16rem)/1.3 var(--display);letter-spacing:-.02em;color:rgba(255,255,255,.62);-webkit-tap-highlight-color:transparent;transition:color .3s var(--ease)}
.cm-eq::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:#C6E57C;transform:scaleY(0);transform-origin:top;transition:transform .55s var(--ease)}
.cm-eq:hover{color:rgba(255,255,255,.9)}
.cm-eq[aria-expanded="true"]{color:#fff}
.cm-eq[aria-expanded="true"]::before{transform:none}
.cm-eq:focus-visible{outline:2px solid #fff;outline-offset:2px}
.cm-echev{display:none}
/* the essays share the right-hand cell, so the glass panel always has the tallest essay's height */
.cm-ex{grid-column:2;grid-row:1/7;align-self:stretch;padding:clamp(1.6rem,2.6vw,2.3rem) clamp(1.6rem,2.8vw,2.5rem);border-radius:24px;
  background:rgba(255,255,255,.93);border:1px solid rgba(255,255,255,.95);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);
  box-shadow:0 22px 50px rgba(4,26,34,.22),inset 0 1px 0 #fff;
  opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .45s var(--ease),transform .55s var(--ease),visibility 0s linear .45s}
.cm-ex.on{opacity:1;visibility:visible;transform:none;transition:opacity .45s var(--ease) .05s,transform .55s var(--ease) .05s,visibility 0s}
html:not(.js) .cm-band{display:block}
html:not(.js) .cm-ex{opacity:1;visibility:visible;transform:none;margin:.4rem 0 1rem}
.cm-ek{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem;font-size:.85rem;color:var(--muted)}
.cm-ek i{width:9px;height:9px;border-radius:50%;flex:none}
.cm-ek .lime{background:#ABD963}.cm-ek .gold{background:#D9B81E}.cm-ek .forest{background:#1F4A31}.cm-ek .teal{background:#2A8AA3}
.cm-lead{font-size:clamp(1.02rem,1.2vw,1.1rem);line-height:1.62;color:var(--ink)}
.cm-ex p+p{margin-top:1rem;font-size:.95rem;line-height:1.7;color:var(--muted)}

/* ---- tablets ---- */
@media (max-width:1080px){
  .cm-tab{gap:.55rem;padding:.5rem .7rem .5rem .5rem;font-size:.88rem}
  .cm-tico{width:32px;height:32px}
  .cm-band{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
}
/* ---- phones: stacked hero, a two by two switch, panels stacked inside, intros trimmed, essays as an accordion ---- */
@media (max-width:860px){
  .cm-hero{padding-top:calc(64px + 1.6rem)}
  .cm-hero>.wrap{grid-template-columns:1fr;gap:2rem}
  .cm-htext h1{font-size:clamp(2.1rem,9.4vw,3rem)}
  .cm-check{justify-self:stretch;width:100%;padding:1rem 1rem 1.35rem;border-radius:22px}
  .cm-adh{font-size:1.05rem}
  .cm-rules li{font-size:.82rem}
  .cm-conv text{font-size:15px}
  .cm-marq{margin-top:1.2rem}
  .cm-tabs{grid-template-columns:repeat(2,minmax(0,1fr));border-radius:20px}
  .cm-tab{font-size:.84rem;line-height:1.22;padding:.5rem .55rem .5rem .45rem;border-radius:15px}
  .cm-tico{width:30px;height:30px}
  .cm-tico .ic{width:15px;height:15px}
  .cm-panel{grid-template-columns:1fr;gap:.9rem;padding:.7rem;border-radius:24px}
  .cm-ph{min-height:0;aspect-ratio:16/10;padding:1rem 1.1rem;border-radius:18px}
  .cm-ph h3{font-size:1.5rem}
  .cm-intro{padding:0 .4rem;display:grid;justify-items:start;gap:.45rem}
  .cm-intro p{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;font-size:.95rem}
  .cm-intro.open p{display:block}
  .cm-more{display:inline-flex;align-items:center;min-height:36px;padding:0;border:0;background:none;cursor:pointer;font:600 .9rem/1 var(--sans);color:var(--fg);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
  .cm-subs{padding:.9rem 1rem .25rem;border-radius:18px}
  .cm-q{gap:.7rem;font-size:.98rem}
  .cm-pane>div{padding-left:0}
  .cm-pane p{padding-right:0}
  .cm-band{display:block;padding:1.9rem 1.1rem 1.1rem;border-radius:24px}
  .cm-band::before{background:linear-gradient(180deg,rgba(4,26,34,.84) 0%,rgba(4,26,34,.72) 100%)}
  .cm-band h2{margin-bottom:1.1rem}
  .cm-eq{padding:.85rem .1rem .85rem 1rem;font-size:1.02rem}
  .cm-echev{display:block;width:28px;height:28px;padding:6px;border-radius:50%;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;background:rgba(255,255,255,.1);transition:transform .4s var(--ease)}
  .cm-eq[aria-expanded="true"] .cm-echev{transform:rotate(180deg)}
  .cm-ex{display:none;margin:.3rem 0 .9rem;padding:1.3rem 1.15rem;border-radius:18px;transform:none;opacity:1;visibility:visible}
  .cm-ex.on{display:block;animation:rise .5s var(--ease) both}
  .cm-ex p+p{font-size:.93rem}
}
@media (prefers-reduced-motion:reduce){
  .js .cm-htext>*,.js .cm-check,.js .cm-panel.on .cm-ph .pl,.js .cm-band .pl,.cm-ex.on{animation:none!important}
  .cm-panel,.cm-panel.on,.cm-ex,.cm-ex.on,.cm-pane,.cm-item.open .cm-pane,.cm-chev,.cm-echev,.cm-eq::before{transition:none}
  .js .cm-timer{display:none}
}