/* handlepilot.com/carousel-maker. Sits on /site/landing.css (header, buttons,
   FAQ, closing band, footer); everything here is this page's own. */

.cm-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,420px);gap:72px;align-items:center;padding-block:64px 40px}
.cm-crumbs{display:block;text-transform:uppercase}
.cm-crumbs a{color:inherit;border-bottom:1px solid #c9c9c9}
.cm-crumbs a:hover,.cm-crumbs a:focus-visible{color:var(--ink);border-color:currentColor}
.cm-hero h1{margin-top:20px;font-size:clamp(42px,4.6vw,62px);line-height:1.08;letter-spacing:-.05em;max-width:640px}
.cm-lede{margin-top:24px;max-width:560px;font-size:19px;font-weight:500;line-height:1.6;color:#262626}
.cm-cta{margin-top:30px}
.cm-cta p{margin-top:13px;font-size:13px;color:#616161}

/* The style switcher. Radio buttons pick the deck (CSS :has does it with no
   script); each deck is a scroll-snap strip, so it swipes by itself.
   carousel-maker.js adds the arrows, the count and the dots. */
.cm-demo{width:100%;max-width:420px;justify-self:end;padding:18px;border-radius:26px;background:#fff;box-shadow:0 1px 2px #0000000a,0 18px 40px #1f386812}
.cm-demo-head{font-size:13px;font-weight:600;letter-spacing:-.01em}
.cm-styles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:12px 0 0;padding:0;border:0;min-width:0}
.cm-styles label{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;cursor:pointer;font-size:11px;font-weight:600;line-height:1.25;text-align:center;color:#515151}
.cm-thumb{display:block;width:100%;aspect-ratio:4/5;border-radius:8px;background:#eee center/cover no-repeat;box-shadow:0 0 0 1px #0000001a;transition:box-shadow .2s,transform .2s}
.cm-styles label:hover .cm-thumb{transform:translateY(-2px)}
.cm-styles input:checked+label{color:var(--ink)}
.cm-styles input:checked+label .cm-thumb{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--ink)}
.cm-styles input:focus-visible+label .cm-thumb{outline:3px solid var(--blue);outline-offset:5px}

.cm-bar{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:16px;font-size:12px;font-weight:600;color:#515151}
.cm-count{color:var(--ink);font-variant-numeric:tabular-nums}
.cm-viewer{position:relative;margin-top:16px}
.cm-js .cm-viewer{margin-top:8px}
.cm-deck{display:none}
.cm-deck[data-active]{display:block}
/* By position, so the styles can change without touching this: radio n shows deck n. */
@supports selector(:has(*)){
  .cm-demo:has(.cm-styles input:nth-of-type(1):checked) .cm-deck:nth-child(1),
  .cm-demo:has(.cm-styles input:nth-of-type(2):checked) .cm-deck:nth-child(2),
  .cm-demo:has(.cm-styles input:nth-of-type(3):checked) .cm-deck:nth-child(3),
  .cm-demo:has(.cm-styles input:nth-of-type(4):checked) .cm-deck:nth-child(4),
  .cm-demo:has(.cm-styles input:nth-of-type(5):checked) .cm-deck:nth-child(5),
  .cm-demo:has(.cm-styles input:nth-of-type(6):checked) .cm-deck:nth-child(6){display:block}
}
@supports not selector(:has(*)){.cm-deck:first-child{display:block}}
.cm-track{display:flex;margin:0;padding:0;list-style:none;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;border-radius:14px;background:#eeeeec;box-shadow:0 0 0 1px var(--line);scrollbar-width:thin}
.cm-track:focus-visible{outline:3px solid var(--blue);outline-offset:4px}
.cm-slide{flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always}
.cm-slide img{width:100%;height:auto;aspect-ratio:4/5}
.cm-js .cm-track{scrollbar-width:none}
.cm-js .cm-track::-webkit-scrollbar{display:none}
@media(prefers-reduced-motion:no-preference){.cm-track{scroll-behavior:smooth}}

.cm-nav{display:flex;align-items:center;justify-content:center;gap:16px;min-height:36px;margin-top:10px}
.cm-arrow{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px var(--line),0 1px 3px #0000000f;color:var(--ink)}
.cm-arrow:hover{box-shadow:0 0 0 1px #c9c9c9,0 2px 6px #00000014}
.cm-arrow:disabled{opacity:.35;cursor:default;box-shadow:0 0 0 1px var(--line)}
.cm-arrow .icon{width:18px;height:18px}
.cm-dots{display:flex;justify-content:center;gap:6px}
.cm-dots span{width:6px;height:6px;border-radius:50%;background:#c9c9c9;transition:background .2s}
.cm-dots span[data-on]{background:var(--blue)}

.cm-demo-note{margin-top:12px;font-size:12.5px;line-height:1.6;color:#616161}
.cm-outline{margin-top:10px;border-radius:12px;background:#f6f7f5;box-shadow:none}
.cm-outline summary{min-height:0;padding:10px 14px;font-size:13px;letter-spacing:-.01em}
.cm-outline summary::after{content:"+";font-size:18px;font-weight:400;color:#777;line-height:1;transition:transform .2s}
.cm-outline[open] summary::after{transform:rotate(45deg)}
.cm-outline>p{padding:0 14px 12px;font-size:13px;line-height:1.65;color:#454545}

/* The sections */
.cm-section{padding-top:104px}
.cm-section .section-heading h2{font-size:44px}
.cm-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:52px 0 0;padding:0;list-style:none}
.cm-steps li{padding:28px;border-radius:22px;background:#fff;box-shadow:0 2px 4px #00000005}
.cm-step-num{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--green);font-size:15px;font-weight:600}
.cm-steps h3{margin-top:18px;font-size:21px}
.cm-steps p,.cm-voice p,.cm-compare p{margin-top:10px;font-size:15.5px;line-height:1.75;color:#454545}
.cm-steps a,.cm-compare a,.cm-voice a{color:var(--ink);text-decoration:underline;text-decoration-color:#9fb8e8;text-underline-offset:3px}
.cm-steps a:hover{color:#2465d6}
.cm-voice{display:flex;gap:20px;align-items:flex-start;max-width:780px;margin:24px auto 0;padding:26px 30px;border-radius:22px;background:#edf3e8}
.cm-voice h3{font-size:19px}
.cm-voice-icon{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:#fff;color:#4c7d38;box-shadow:0 2px 6px #26331710}
.cm-voice-icon .icon{width:26px;height:26px;stroke-width:1.9}
.cm-voice-sources{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;padding:0;list-style:none}
.cm-voice-sources li{display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 10px;border-radius:99px;background:#fff;font-size:14px;font-weight:600;line-height:1.3;color:var(--ink);box-shadow:0 1px 2px #0000000a}
.cm-voice-sources .icon{width:17px;height:17px;color:#4c7d38}

.cm-table{max-width:860px;margin:48px auto 0;overflow-x:auto;border-radius:22px;background:#fff;box-shadow:0 2px 4px #00000005}
.cm-table table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5}
.cm-table th,.cm-table td{padding:15px 20px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.cm-table tbody tr:last-child th,.cm-table tbody tr:last-child td{border-bottom:0}
.cm-table thead th{font-size:13px;font-weight:600;color:#515151;background:#fafafa}
.cm-table tbody th{font-weight:600;color:var(--ink)}
.cm-table td{color:#454545}
.cm-table td:last-child,.cm-table thead th:last-child{background:#f3f7ff}
.cm-small{max-width:860px;margin:16px auto 0;text-align:center;font-size:13px;line-height:1.6;color:#616161}

.cm-compare{max-width:780px;margin:44px auto 0;padding:30px 34px;border-radius:22px;background:#fff;box-shadow:0 2px 4px #00000005}
.cm-compare p:first-child{margin-top:0}
.cm-compare p+p{margin-top:16px}

.cm-author{display:flex;gap:20px;align-items:flex-start;margin-top:48px;padding:24px;border-radius:18px;background:#fff}
.cm-author .author-photo{flex-shrink:0;width:64px;height:64px;border-radius:50%;object-fit:cover}
.cm-author h3{margin-top:6px;font-size:19px}
.cm-author p:not(.eyebrow){margin-top:6px;font-size:15px;line-height:1.7;color:#454545}
.cm-updated{margin-top:14px;text-align:center;font-size:12px;color:#6b6b6b}

.cm-video{max-width:420px;margin:40px auto 0}
.cm-video video{width:100%;height:auto;border-radius:18px;background:#e9e9e7}
.cm-video figcaption{margin-top:10px;text-align:center;font-size:13px;color:#616161}

@media(max-width:1000px){
  .cm-hero{grid-template-columns:minmax(0,1fr);gap:40px;padding-block:44px 24px}
  .cm-demo{justify-self:center}
  .cm-steps{grid-template-columns:minmax(0,1fr);max-width:620px;margin-inline:auto}
}
@media(max-width:650px){
  .cm-hero{padding-block:30px 8px;gap:30px}
  .cm-hero h1{margin-top:16px;font-size:clamp(34px,9.2vw,44px);line-height:1.1}
  .cm-lede{margin-top:18px;font-size:16px;line-height:1.65}
  .cm-cta{margin-top:24px}
  .cm-cta .button{font-size:17px;min-height:56px;padding:16px 25px}
  .cm-demo{padding:14px;border-radius:22px}
  .cm-styles{gap:6px}
  .cm-styles label{font-size:10px}
  .cm-section{padding-top:72px}
  .cm-section .section-heading h2{font-size:clamp(28px,7.6vw,34px)}
  .cm-steps{margin-top:34px;gap:14px}
  .cm-steps li{padding:22px}
  .cm-steps h3{font-size:19px}
  .cm-voice,.cm-compare{padding:22px}
  .cm-voice{gap:14px}
  .cm-voice-icon{width:44px;height:44px;border-radius:14px}
  .cm-voice-sources li{font-size:13px}
  .cm-table{margin-top:32px;border-radius:18px}
  .cm-table table{font-size:13.5px}
  .cm-table th,.cm-table td{padding:12px 12px}
  .cm-compare{margin-top:30px}
  .cm-author{flex-direction:column;gap:14px;padding:20px}
}
@media(prefers-reduced-motion:reduce){
  .cm-thumb,.cm-dots span,.cm-outline summary::after{transition:none}
  .cm-styles label:hover .cm-thumb{transform:none}
}
.cm-also th[scope=rowgroup]{padding-top:18px;border-top:1px solid var(--line);font-size:13px;font-weight:600;color:#515151;background:#fafafa}