/* home page: replace big filled panels with line-drawn cards */
.hero,.panel,.fc,.closer,.mq,.tbl,.fr,.fc.k,.panel.g,.panel.k{background:transparent!important;color:#F4F4F4;border:1px solid rgba(255,255,255,.20);border-radius:14px}
.hero{padding:64px 48px}.panel{padding:48px}.closer{padding-bottom:0}
.hero .sub,.panel .tx p,.k .tx p,.fc p,.fc.k p,.sec .lead,.cast .lead,.closer p,.fr span,.list li,.k .list li,.dot,.k .dot,.chat .who,.eyebrow{color:rgba(244,244,244,.6)}
.state{color:rgba(244,244,244,.35)}.state b{color:#F4F4F4}
.stage::before{background:radial-gradient(closest-side,rgba(255,255,255,.10),rgba(255,255,255,0))}
.chat{background:#000;border:1px solid rgba(255,255,255,.20);border-radius:14px}
.chat .me{background:#F4F4F4;color:#111}.chat .ai{background:#292929;color:#F4F4F4}
.card,.k .card{background:#000;color:#F4F4F4;border:1px solid rgba(255,255,255,.20);border-radius:14px}
.cb.l,.k .cb.l{background:#292929;color:#F4F4F4}.cb.r,.k .cb.r{background:#F4F4F4;color:#111}
.it,.k .it{background:transparent;border:1px solid rgba(255,255,255,.20);border-radius:10px}
.sw,.k .sw{background:#F4F4F4}.sw::after,.k .sw::after{background:#111}
.list li::before,.k .list li::before{background:#F4F4F4}
.fr:hover{background:transparent!important;border-color:rgba(255,255,255,.4)}
.chips span{background:#292929;border-radius:10px;color:#F4F4F4}
.sol a,.sol a:hover{background:#292929;border-radius:10px;color:#F4F4F4}
.tbl th,.tbl td{border-bottom-color:rgba(255,255,255,.20)}.tbl th{color:rgba(244,244,244,.6)}
.app{background:#000;border:1px solid rgba(255,255,255,.20);border-radius:10px;color:#F4F4F4}.app i{background:#F4F4F4;color:#111;border-radius:10px}
.price small{color:rgba(244,244,244,.6)}
.closer .btn.w{background:#F4F4F4;color:#111}
.sb.soon img{opacity:.38}
@media (max-width:900px){.hero{padding:32px 20px}.panel{padding:28px 20px}}

/* square wrappers sharing one-pixel lines */
.hero,.panel,.fc,.closer,.mq,.tbl,.fr,.chat,.card,.k .card,.cb,.cb.l,.cb.r,.it,.k .it,.app,.app i,.chat .b,.chat .me,.chat .ai,.chat .row .b{border-radius:0!important}
.panels{gap:0}.panel+.panel{margin-top:-1px}
.gridf{gap:0}.gridf>.fc{margin:0 -1px -1px 0}
.crow{gap:0}.crow>.fr{margin:0 -1px -1px 0}
.hero{margin-top:0}
.sol{gap:0}.sol a{margin-right:-1px}

/* ---- strict grid on the home page: same 1280 wrapper, 12 columns, gutter 16 ----
   Boxes span x 80..1360 at 1440. Inside, the split sits on a column start (hero: col 8 = +756, panels: col 7 = +648)
   and every text block is inset 48px from the line it belongs to (outer line or column start). */
:root{--gut:16px;--inset:48px}
.hero{padding:64px 0;column-gap:0;grid-template-columns:calc((100% + 2px + var(--gut))*7/12 - 1px) minmax(0,1fr)}
.hero>:first-child{margin-left:calc(var(--inset) - 1px);margin-right:var(--inset)}
.hero>.stage{margin-left:var(--inset);margin-right:calc(var(--inset) - 1px)}
.panel{padding:48px 0;column-gap:0;grid-template-columns:calc((100% + 2px + var(--gut))/2 - 1px) minmax(0,1fr)}
.panel:not(.rev)>.tx,.panel.rev>.art{margin-left:calc(var(--inset) - 1px);margin-right:var(--inset)}
.panel:not(.rev)>.art,.panel.rev>.tx{margin-left:var(--inset);margin-right:calc(var(--inset) - 1px)}
.closer{padding-inline:calc(var(--inset) - 1px)}
@media (max-width:900px){
  .hero,.panel{grid-template-columns:minmax(0,1fr);padding-inline:0}
  .hero>*,.hero>.stage,.panel>*,.panel:not(.rev)>.tx,.panel.rev>.art,.panel:not(.rev)>.art,.panel.rev>.tx{margin-inline:calc(20px - 1px)}
  .closer{padding-inline:calc(20px - 1px)}
}

/* soft radius on outer wrappers */
.hero,.closer,.tbl,.mq,.chat,.card,.k .card{border-radius:8px!important}
.panel:first-child{border-radius:8px 8px 0 0!important}.panel:last-child{border-radius:0 0 8px 8px!important}

/* the Mocci face is never covered: card sits below the pebble, not on top of it */
.art{height:auto!important;min-height:0;display:flex;flex-direction:column;gap:24px;align-items:stretch}
.art .pebble,.art .a1,.art .a2,.art .a3,.art .a4{position:relative!important;inset:auto!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;width:min(62%,300px)!important;height:auto;align-self:center;rotate:-6deg}
.panel:nth-child(even) .art .pebble{rotate:6deg}
.art .card,.art .pos-l,.art .pos-r,.art .pos-t{position:relative!important;inset:auto!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;width:100%!important;max-width:none}
.stage{height:auto!important;flex-direction:column;gap:20px;justify-content:center;padding-block:24px}
.tilt{width:min(100%,400px)!important}
.chat{position:relative!important;left:auto!important;bottom:auto!important;width:min(100%,380px)!important;align-self:flex-start}
.refl{display:none}

/* closing pebbles sit fully inside the frame (no bottom bleed) */
.closer{padding-bottom:36px}
.pile{height:clamp(190px,30vw,360px)}
.pile .pebble{bottom:2%}
.pile .p1{width:26%;left:5%;bottom:4%}
.pile .p2{width:22%;left:27%;bottom:1%}
.pile .p3{width:32%;left:34%;bottom:6%}
.pile .p4{width:23%;left:60%;bottom:1%}
.pile .p5{width:24%;left:72%;bottom:4%}
@media(max-width:820px){.pile{height:clamp(110px,32vw,220px);margin-top:28px}}