/* Sections below the story: proof numbers, the grouped tool list, Kaireen Motion,
   the comparison, FAQ and the closing call to action. */

/* proof numbers */
.proof{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;border-top:1px solid var(--line-soft);
       border-bottom:1px solid var(--line-soft);padding:36px 0}
.proof div{padding:0 8px}
.proof b{display:block;font-family:var(--mono);font-size:34px;font-weight:700;letter-spacing:-.02em;
         font-variant-numeric:tabular-nums}
.proof span{font-size:14px;color:var(--faint)}
@media (max-width:760px){.proof{grid-template-columns:repeat(2,1fr);row-gap:28px}}

/* tools, grouped the way the panel's own rail groups them */
.groups{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.group{background:var(--sheet);border:1px solid var(--line);border-radius:var(--r-card);padding:20px 18px 12px}
.group h3{font-size:13px;font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--vio-2);
          margin-bottom:12px;font-weight:600}
.group.wide{grid-column:span 2}
.tool{padding:10px 0;border-top:1px solid var(--line-soft)}
.tool:first-of-type{border-top:0}
.tool b{display:block;font-size:15px;font-weight:650}
.tool span{font-size:13.5px;color:var(--faint)}
.tool .free{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--vio-2);
            margin-left:6px;vertical-align:1px}
@media (max-width:1100px){.groups{grid-template-columns:repeat(3,1fr)}.group.wide{grid-column:span 1}}
@media (max-width:640px){.groups{grid-template-columns:1fr}}

/* Kaireen Motion */
.motion-in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:center}
.motion-list{display:grid;grid-template-columns:1fr 1fr;gap:4px 24px;margin-top:28px}
.motion-list div{padding:10px 0;border-top:1px solid var(--line-soft)}
.motion-list b{display:block;font-size:15px;font-weight:650}
.motion-list span{font-size:13.5px;color:var(--faint)}
.motion-cta{margin-top:28px}
.wall{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;padding:22px;border-radius:var(--r-card);
      background:#16161a;border:1px solid #26262c}
.wall-cell{aspect-ratio:1;border-radius:9px;background:#1f1f24;border:1px solid #2e2e36;display:flex;
           align-items:center;justify-content:center;transition:border-color .3s,background .3s,transform .3s var(--ease)}
.wall-cell svg{width:74%;height:74%;overflow:visible}
.wall-cell path{fill:none;stroke:#8a8a94;stroke-width:5;stroke-linecap:round;transition:stroke .3s}
.wall-cell.on{border-color:rgba(139,108,255,.5);background:rgba(139,108,255,.12);transform:translateY(-2px)}
.wall-cell.on path{stroke:#b7a3ff}
@media (max-width:980px){.motion-in{grid-template-columns:1fr;gap:36px}}
@media (max-width:520px){.wall{grid-template-columns:repeat(4,1fr);padding:14px}.motion-list{grid-template-columns:1fr}}

/* do the math */
.replace{display:grid;grid-template-columns:1fr auto 1fr;gap:26px;align-items:center;max-width:860px;margin:0 auto}
.stack{background:var(--sheet);border:1px solid var(--line);border-radius:var(--r-card);padding:26px}
.stack-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:10px 0;
           border-bottom:1px solid var(--line-soft);font-size:14.5px;color:var(--dim)}
.stack-row:last-of-type{border-bottom:0}
.stack-row b{color:var(--ink);font-size:13px;font-family:var(--mono);font-weight:500}
.stack-total{margin-top:14px;color:var(--faint);font-size:13px}
.replace-arrow{color:var(--vio);font-size:26px;line-height:1}
.replace-card{background:var(--sheet);border:1px solid var(--vio);border-radius:var(--r-card);padding:26px;
              box-shadow:0 20px 60px rgba(139,108,255,.13)}
.replace-small{color:var(--dim);font-size:14px;line-height:1.5}
.replace-big{margin:10px 0 8px;font-size:44px;font-weight:760;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.replace-big span{font-size:18px;font-weight:600;color:var(--dim)}
@media (max-width:760px){.replace{grid-template-columns:1fr;gap:16px}.replace-arrow{justify-self:center;transform:rotate(90deg)}}

/* faq */
.faq{max-width:760px;margin:0 auto}
.faq details{border-bottom:1px solid var(--line-soft);padding:4px 0}
.faq summary{cursor:pointer;font-weight:620;font-size:16px;padding:16px 0;list-style:none;
             display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--vio-2);font-size:18px;flex:0 0 auto}
.faq details[open] summary::after{content:"-"}
.faq .a{padding:0 0 18px;color:var(--dim);font-size:15px;max-width:64ch}

/* closing call to action */
.cta{text-align:center;overflow:hidden}
.cta::before{content:"";position:absolute;left:50%;bottom:-320px;width:960px;height:560px;transform:translateX(-50%);
             background:radial-gradient(50% 50% at 50% 50%,rgba(139,108,255,.16),transparent 70%);pointer-events:none}
.cta .wrap{position:relative}
.cta p{color:var(--dim);margin:16px auto 30px;max-width:46ch;font-size:18px}