/* Round 6 (Oct 21, 2026): "What we can do" (round 9: the same card rules also scope the Lab's .lab-can grid), the proof blocks and the sample report. Shared by Home, Services, Websites and SEO. */
.can{padding-top:40px;padding-bottom:120px}
.can-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.can article,.lab-can article{position:relative;overflow:hidden;isolation:isolate;padding:30px 28px 32px;border-radius:var(--r);background:linear-gradient(165deg,#15120f,#0d0b0e 70%);box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .5s;will-change:transform}
.can article.hot,.lab-can article.hot{box-shadow:inset 0 0 0 1px rgba(201,163,94,.45),0 30px 70px rgba(0,0,0,.4)}
.can .lt,.lab-can .lt{position:absolute;left:50%;top:50%;width:460px;height:460px;margin:-230px 0 0 -230px;z-index:0;pointer-events:none;opacity:0;border-radius:50%;background:radial-gradient(circle,rgba(227,198,142,.28) 0%,rgba(201,163,94,.1) 36%,transparent 66%);mix-blend-mode:screen;will-change:transform,opacity}
.can article>*,.lab-can article>*{position:relative;z-index:1}
.can article .mono,.lab-can article .mono{color:var(--gold-ink)}
.can article h3,.lab-can article h3{font-weight:500;font-size:clamp(26px,2.2vw,36px);line-height:1.02;letter-spacing:-.035em;margin:12px 0 18px;max-width:11em}
.can article ul,.lab-can article ul{list-style:none;display:flex;flex-direction:column;gap:9px;color:var(--ink-2);font-size:16.5px}
.can article li,.lab-can article li{position:relative;padding-left:22px}
.can article li::before,.lab-can article li::before{content:"";position:absolute;left:0;top:.5em;width:9px;height:9px;background:var(--gold);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);opacity:.9}

/* proof: a gauge, three rings and the screen-size matrix */
.proof{padding-top:40px;padding-bottom:120px}
.proof-grid{display:grid;grid-template-columns:1.1fr 1.2fr 1.3fr;gap:12px}
.pf{position:relative;padding:30px 28px 26px;border-radius:var(--r);background:var(--page-2);box-shadow:inset 0 0 0 1px var(--line);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:14px;min-height:300px;text-align:center}
.pf>.mono{color:var(--ink-2)}
.gauge{width:min(100%,300px);height:auto;display:block}
.gauge .track,.gauge .arc{fill:none;stroke-width:9;stroke-linecap:round}
.gauge .track{stroke:rgba(242,237,227,.1)}
.gauge .arc{stroke:url(#gg,var(--gold));stroke:var(--gold);stroke-dasharray:1;stroke-dashoffset:.01;transition:stroke-dashoffset .8s cubic-bezier(.2,.8,.2,1);filter:drop-shadow(0 0 14px rgba(201,163,94,.45))}
/* round 8: the finished ring is the default (no JavaScript, reduced motion); proof.js arms the sweep only when it runs, and .on plays it */
.js .gauge-card:not(.on) .arc{stroke-dashoffset:1}
.gauge-card .n{position:absolute;left:0;right:0;top:46%;font-weight:500;font-size:clamp(64px,6vw,96px);line-height:1;letter-spacing:-.05em;color:var(--gold-hi)}
.rings{display:flex;gap:18px;justify-content:center;flex-wrap:wrap}
.ring{position:relative;width:104px;display:flex;flex-direction:column;align-items:center;gap:8px}
.ring svg{width:92px;height:92px;transform:rotate(-90deg)}
.ring .track,.ring .arc{fill:none;stroke-width:6;stroke-linecap:round}
.ring .track{stroke:rgba(242,237,227,.1)}
.ring .arc{stroke:var(--gold);stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset .8s cubic-bezier(.2,.8,.2,1)}   /* round 9: the sweep lands with the 0.8 s count (review r8 non-blocking 8) */
.js .rings-card:not(.on) .ring .arc{stroke-dashoffset:1}
.rings-card.on .ring:nth-child(2) .arc{transition-delay:.05s}
.rings-card.on .ring:nth-child(3) .arc{transition-delay:.1s}
.ring .rn{position:absolute;top:30px;font-weight:500;font-size:28px;letter-spacing:-.04em;color:var(--ink)}
.ring .mono{color:var(--ink-2)}
.matrix{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:center;gap:5px;width:100%;max-width:420px}
.matrix i{display:block;width:calc(var(--w) * .42px);height:calc(var(--h) * .42px);border-radius:2px;box-shadow:inset 0 0 0 1px var(--gold);background:rgba(201,163,94,.5);transition:background .4s,box-shadow .4s;transition-delay:calc(var(--i) * 28ms)}
.js .matrix-card:not(.on) .matrix i{background:transparent;box-shadow:inset 0 0 0 1px rgba(201,163,94,.35)}
.matrix-card .mc{color:var(--gold-hi)}
.proof .note,.report .note{margin-top:22px}

/* the sample report: six cards assemble in 3D as you scroll; the stack leans toward the pointer */
.report{padding-top:40px;padding-bottom:130px}
.rep-stage{perspective:1600px;perspective-origin:50% 30%;overflow:hidden;padding:28px 14px;margin:-28px -14px}
.rep-rig{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);grid-auto-rows:minmax(200px,auto);gap:12px;transform-style:preserve-3d;transform:rotateY(var(--tx,0deg)) rotateX(var(--ty,0deg));transition:transform .1s linear}
.rp{position:relative;padding:20px 22px 22px;border-radius:18px;background:linear-gradient(165deg,#17141a,#0f0d11 70%);box-shadow:inset 0 0 0 1px var(--line),0 30px 70px rgba(0,0,0,.35);display:flex;flex-direction:column;gap:14px;min-width:0;
  --q:clamp(0,calc((var(--p) - var(--i) * .05) / .3),1)}   /* round 7 (B5): every card has settled by p = .55, so the resting grid never overlaps */
.js .rep-stage:not(.vis) .rp{visibility:hidden}
.js .rep-stage .rp{opacity:var(--q);transform:translate3d(calc(var(--sx) * (1 - var(--q))),calc(var(--sy) * (1 - var(--q))),calc(var(--sz) * (1 - var(--q)))) rotateX(calc(var(--rx) * (1 - var(--q))))}
.rp header{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.rp header .mono{color:var(--gold-ink)}
.rp .tag{font-size:13px;color:var(--mute);padding:4px 9px}
.rp .ch{width:100%;height:auto;flex:1;min-height:140px;display:block}
.rp .ch .area{fill:rgba(201,163,94,.12)}
.rp .ch .ln{fill:none;stroke:var(--gold);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 1.6s cubic-bezier(.2,.8,.2,1) .2s}   /* round 8: no vector-effect:non-scaling-stroke. With pathLength="1" it measured the dash in screen pixels, so the lines stopped near month 4 on wide cards */
.rp .ch .ln2{stroke:rgba(242,237,227,.42)}
.js .rep-stage:not(.on) .rp .ch .ln{stroke-dashoffset:1}
.rp .ax,.rp .lg{display:flex;justify-content:space-between;color:var(--mute)}
.rp .lg{justify-content:flex-start;gap:18px}
.rp .lg i{display:inline-block;width:14px;height:2px;margin-right:8px;vertical-align:middle;background:var(--gold)}
.rp .lg i.s2{background:rgba(242,237,227,.42)}
.rp .bars{list-style:none;display:flex;flex-direction:column;gap:10px}
.rp .bars li{display:grid;grid-template-columns:76px 1fr;align-items:center;gap:10px}
.rp .bars li .mono{color:var(--mute)}
.rp .bars b{display:block;height:6px;border-radius:0 4px 4px 0;background:var(--gold);transform-origin:0 50%;transform:none;width:var(--w);transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}
.js .rep-stage:not(.on) .rp .bars b{transform:scaleX(0)}
.rp .bars li:nth-child(2) b{transition-delay:.1s}.rp .bars li:nth-child(3) b{transition-delay:.2s}.rp .bars li:nth-child(4) b{transition-delay:.3s}.rp .bars li:nth-child(5) b{transition-delay:.4s}
.rp .l{display:block;height:8px;border-radius:4px;background:rgba(242,237,227,.16)}
.rp .l1{width:62%;background:rgba(201,163,94,.65);height:10px}.rp .l2{width:88%}.rp .l3{width:76%}.rp .l4{width:54%}.rp .l5{width:68%}
.gres{display:grid;grid-template-columns:28px 1fr;gap:8px 12px;align-items:center}
.gres .fav{width:28px;height:28px;border-radius:50%;background:rgba(201,163,94,.18);display:grid;place-items:center;color:var(--gold);grid-row:span 2}
.gres .fav svg{width:14px;height:14px}
.gres .l{grid-column:2}
.rp .eng{color:var(--mute)}
.ans{display:flex;flex-direction:column;gap:9px;padding:14px;border-radius:12px;background:rgba(242,237,227,.04);box-shadow:inset 0 0 0 1px var(--line)}
.ans .chip{align-self:flex-start;margin-top:4px;padding:5px 10px;border-radius:99px;background:var(--gold);color:#0b0a0c;font-size:13px}
.lh{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px}
.lh .o{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:13px;text-transform:uppercase;color:var(--ink-2)}
.lh .o i{width:30px;height:30px;border-radius:50%;border:3px solid rgba(201,163,94,.3);border-top-color:var(--gold);border-right-color:var(--gold);flex:none}
.ba{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:end;flex:1;min-height:120px}
.ba>div{display:flex;flex-direction:column;align-items:center;gap:8px;height:100%;justify-content:flex-end}
.ba b{display:block;width:100%;max-width:90px;border-radius:4px 4px 0 0;transform-origin:50% 100%;transform:none;transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}
.ba .b1{height:38%;background:rgba(242,237,227,.22)}
.ba .b2{height:92%;background:var(--gold);transition-delay:.15s}
.js .rep-stage:not(.on) .ba b{transform:scaleY(0)}
.ba .mono{color:var(--mute)}

@media (min-width:1600px){
  .rp .ch .ln{stroke-width:1.05}   /* round 8: the line now scales with the card; this keeps it near 2px on big screens (measured 3.5px at 1920 with 1.6) */
}
@media (min-width:2200px){
  .rp .ch .ln{stroke-width:.75}
}
@media (max-width:1100px){
  .can-grid{grid-template-columns:1fr 1fr}
  .proof-grid{grid-template-columns:1fr 1fr}
  .matrix-card{grid-column:1 / -1}
  .rep-rig{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .can{padding-bottom:80px}
  .can-grid{grid-template-columns:1fr}
  .can article,.lab-can article{padding:24px 20px 26px}
  .can .lt,.lab-can .lt{width:320px;height:320px;margin:-160px 0 0 -160px}
  .proof,.report{padding-bottom:80px}
  .proof-grid{grid-template-columns:1fr}
  .pf{min-height:0;padding:24px 18px 22px}
  .gauge-card .n{font-size:64px}
  .matrix i{width:calc(var(--w) * .3px);height:calc(var(--h) * .3px)}
  .rep-rig{grid-template-columns:1fr}
  .rp{--sx:0px!important;--sy:60px!important;--sz:-120px!important;--rx:10deg!important}   /* phones: the cards rise into place; the inline desktop offsets are overridden */
}
@media (prefers-reduced-motion:reduce){
  .gauge .arc,.ring .arc,.matrix i,.rp .ch .ln,.rp .bars b,.ba b{transition:none}
  .js .gauge-card:not(.on) .arc{stroke-dashoffset:.01}
  .js .rings-card:not(.on) .ring .arc{stroke-dashoffset:0}
  .js .matrix-card:not(.on) .matrix i{background:rgba(201,163,94,.5);box-shadow:inset 0 0 0 1px var(--gold)}
  .js .rep-stage .rp{opacity:1;transform:none}
  .rep-rig{transform:none}
}

/* round 8: the Home hero's measured-on-phones link */
.stage .hx .cap a{color:#fff;background:linear-gradient(var(--gold),var(--gold)) 0 100%/100% 1px no-repeat content-box}   /* round 9 (review r8 blocker 2): the shorthand reset background-origin to padding-box, so the 1px line was drawn 13px below the text, through the next line */
.stage .hx .cap a:hover{color:var(--gold-hi)}

/* round 9 (review r8 blocker 4): Home on landscape phones (844x390, 932x430). home.css gives the stage min-height:500px, taller than
   the screen, so the paragraph ran off the bottom and neither hero action showed; the white words also sat on bright stars. Here the
   stage fits the screen, a dark scrim runs behind the words on the left, and the words take a wider column so all of it fits. */
@media (max-height:520px) and (orientation:landscape){
  body.p-home .stage{min-height:0}
  body.p-home .stage::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(10,9,12,.9) 0,rgba(10,9,12,.84) 42%,rgba(10,9,12,.4) 60%,transparent 74%)}
  body.p-home .stage .hx{left:22px;right:36%;bottom:14px}
  body.p-home .stage .hx::before{display:none}
  body.p-home .stage .hx h1{font-size:clamp(26px,3.7vw,36px);line-height:1.02;max-width:none}
  body.p-home .stage .hx .cap{font-size:13.5px;line-height:1.4;margin-top:8px;max-width:none}
  body.p-home .stage .hx .cap a{padding:14px 0}   /* the 44px tap height at 13.5px type */
  body.p-home .stage .hx .cta-row{margin-top:10px}
}