/* Comparison scenes (the vs and Calendly-alternative pages). Each scene puts the competitor's own published text, read
   on the date it names, beside the OpenCal screen that does the same job. The windows reuse the landing's chrome
   (.sk-bar, .sk-url) and buttons (.sk-btn); the checkbox copies app.css .cb; the sample person is the landing story's
   Maya Chen (public/story-data.js). The page CSP refuses inline styles, so every position is a class. */
.cs{margin:28px 0 8px}
.legal .cs p{margin:0;color:inherit;font-size:inherit;line-height:inherit}
.legal .cs ul,.legal .cs ol{margin:0;padding:0;list-style:none;display:block}
.legal .cs li{margin:0;color:inherit;font-size:inherit;line-height:inherit}
.cs-stage{display:grid;gap:16px;padding:16px;border-radius:16px;background:#f2f3f5;font-size:13px;line-height:1.45;color:#111318}
.cs-n{display:inline-grid;place-items:center;flex:none;width:20px;height:20px;border-radius:50%;background:var(--free);color:#fff;font:600 11px/1 Inter,system-ui,sans-serif;font-variant-numeric:tabular-nums}
.cs-win,.cs-src{min-width:0;border-radius:14px;background:#fff;box-shadow:0 0 0 1px #e6e8ee,0 1px 2px rgba(15,17,20,.04),0 16px 36px -22px rgba(15,17,20,.3);overflow:hidden}
.cs-win>.sk-bar{height:38px;border-radius:0}
.cs-win>.sk-bar>.cs-n{margin-left:auto}
.cs-srch{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px;padding:9px 14px;border-bottom:1px solid #eceef3;background:#fafafb}
.cs-dom{font:12px ui-monospace,SFMono-Regular,Menlo,monospace;color:#4d525b}
.cs-read{font-size:12px;color:var(--faint)}
.cs-q{color:#111318}
.cs-q::before{content:"\201C"}
.cs-q::after{content:"\201D"}
.cs-cb{display:inline-grid;place-items:center;flex:none;width:18px;height:18px;border-radius:6px;border:1.5px solid var(--free);background:#edf2ff}
.cs-cb::after{content:"";width:14px;height:14px;background:url("data:image/svg+xml,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20data-icon-pack%3D%22heroicons%22%20data-ui-icon%3D%22check%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%232f6bff%22%20aria-hidden%3D%22true%22%20data-slot%3D%22icon%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M19.916%204.626a.75.75%200%200%201%20.208%201.04l-9%2013.5a.75.75%200%200%201-1.154.114l-6-6a.75.75%200%200%201%201.06-1.06l5.353%205.353%208.493-12.74a.75.75%200%200%201%201.04-.207Z%22%20clip-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat}
.cs-logo{width:16px;height:16px;flex:none}
.cs-dim{color:var(--faint)}
.legal .cs .cs-key{display:grid;gap:6px;margin-top:16px}
.legal .cs .cs-key li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:1.5;color:var(--dim)}
.cs-key li .cs-n{margin-top:2px}

/* The settings window: the app's sidebar and one section, as on the landing (opencal.link/settings). */
.cs-set{display:grid;grid-template-columns:150px minmax(0,1fr)}
.cs-set>.sk-bar{grid-column:1/-1}
.cs-nav{display:flex;flex-direction:column;gap:2px;padding:14px 10px;border-right:1px solid #eceef3}
.cs-nav span{padding:7px 10px;border-radius:8px;font-size:13px;color:#4d525b}
.cs-nav .is-on{background:#f1f2f4;color:#111318;font-weight:600}
.cs-main{min-width:0;padding:16px 18px 18px}
.cs-main h4{margin:0;font-size:16px;font-weight:600;letter-spacing:-.01em}
.legal .cs p.cs-note{margin-top:4px;font-size:12.5px;color:var(--faint)}
.legal .cs p.cs-grp{margin:14px 0 6px;font-size:11.5px;font-weight:600;color:var(--faint)}
.cs-acct,.cs-crow{display:flex;align-items:center;gap:8px;min-width:0}
.cs-acct{padding:8px 0 6px;font-size:13px}
.cs-acct em{font-style:normal;font-size:12px;color:var(--faint)}
.cs-crow{justify-content:space-between;padding:8px 10px;border-radius:9px;background:#f7f8fa;margin-top:4px}
.cs-crow>span{display:flex;flex-direction:column;min-width:0}
.cs-crow small{font-size:11.5px;color:var(--faint)}
.cs-crow>i{display:flex;align-items:center;gap:8px;font-style:normal}

/* 1. vs Calendly: the pricing page's "Connect calendars" row, then OpenCal's Calendars settings. */
.cs-cly .cs-plans{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(4,minmax(0,1fr));align-items:stretch}
.cs-plans>span{display:flex;flex-direction:column;justify-content:center;gap:2px;padding:10px 12px;border-top:1px solid #f0f1f3}
.cs-plans>.cs-ph{border-top:0;font-weight:600}
.cs-plans>.cs-ph small{font-weight:400;font-size:12px;color:var(--faint)}
.cs-plans>.cs-ph b{font-size:16px}
.cs-plans .cs-rl b{font-size:13px}
.cs-plans .cs-rl small{font-size:12px;color:#4d525b}
.cs-plans .cs-v{flex-direction:row;align-items:center;gap:8px;font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.cs-plans .cs-v.is-mark{background:#eef3ff;box-shadow:inset 0 0 0 1.5px var(--free)}
.cs-cly .cs-set .cs-main{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 18px;align-content:start}
.cs-cly .cs-main>.cs-head{grid-column:1/-1}
.cs-total{grid-column:1/-1;display:flex;align-items:center;gap:8px;margin-top:14px;padding-top:12px;border-top:1px solid #eceef3;font-size:13px}
.cs-free{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;background:#e9f7ef;color:#1d7a46;font-size:12px;font-weight:600}

/* 2. Free plans: Calendly Free's list beside Maya's own OpenCal page. */
.cs-fr .cs-stage{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:start}
.cs-plan{padding:14px 16px 16px}
.cs-plan b.cs-pn{display:block;font-size:17px}
.cs-plan small{display:block;font-size:12.5px;color:var(--faint)}
.legal .cs .cs-plan p.cs-inc{margin:12px 0 6px;font-size:12px;font-weight:600;color:#4d525b}
.cs-plan li{display:flex;align-items:center;gap:8px;padding:7px 0;border-top:1px solid #f0f1f3;font-size:13.5px}
.cs-plan li .cs-n{margin-left:auto}
.cs-plan li.is-mark{color:#1f55e0;font-weight:600}
.cs-own{display:flex;flex-direction:column;gap:14px;padding:16px}
.cs-who{display:flex;align-items:center;gap:10px}
.cs-av{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#e8f0fe;color:#1f55e0;font-size:13px;font-weight:600;flex:none}
.cs-who b{display:block;font-size:15px}
.cs-sub{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12.5px;color:var(--faint)}
.cs-sub img{width:16px;height:16px}
.cs-dock{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:6px;border-radius:12px;background:#15171a;color:#d7dae0;font-size:12.5px}
.cs-dock>span{display:inline-flex;align-items:center;gap:6px}
.cs-pill{padding:3px 9px;border-radius:7px;background:#2b2e34;color:#fff;font-weight:600}
.cs-lk{padding:4px 6px 4px 10px;border-radius:8px;background:#fff;color:#111318;font-weight:600}
.cs-lk i{font-style:normal;margin-left:4px;padding:2px 8px;border-radius:6px;background:#15171a;color:#fff;font-size:11.5px}
.cs-pop{display:flex;gap:10px;align-items:flex-start;padding:12px;border-radius:12px;box-shadow:0 0 0 1px #e6e8ee,0 10px 24px -16px rgba(15,17,20,.35)}
.cs-pop svg{flex:none;margin-top:1px;color:#4d525b}
.cs-pop b{display:block;font-size:13.5px}
.cs-pop small{display:block;font-size:12.5px;color:#4d525b}
.cs-pop .cs-n{margin-left:auto}
.legal .cs p.cs-day{font-size:13px;font-weight:600}
.cs-slots{display:flex;flex-wrap:wrap;gap:8px}

/* 3. Microsoft: Calendly's approval article beside OpenCal's Other calendars section. */
.cs-ms .cs-stage{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:start}
.cs-art{padding:14px 16px 16px;display:flex;flex-direction:column;gap:10px}
.cs-art b.cs-at{font-size:15px;line-height:1.35}
.cs-art blockquote{margin:0;padding:10px 12px;border-radius:10px;background:#f7f8fa;font-size:13.5px;line-height:1.5}
.cs-wall{display:flex;flex-direction:column;gap:6px;padding:12px;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px #e6e8ee}
.cs-wall>span{display:flex;align-items:center;gap:8px;font-size:13px}
.cs-wall>span:first-child{font-weight:600}
.cs-tagx{margin-left:auto;padding:2px 8px;border-radius:999px;background:#fdeedd;color:#9a5a12;font-size:11.5px;font-weight:600;white-space:nowrap}
.cs-orow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;padding:12px 14px;border-radius:12px;box-shadow:inset 0 0 0 1px #e6e8ee}
.cs-orow>span{display:flex;flex-direction:column;gap:2px;min-width:0}
.cs-orow b{font-size:13.5px}
.cs-orow small{font-size:12px;color:var(--faint)}
.cs-orow>i{display:flex;align-items:center;gap:8px;font-style:normal;flex:none}
.cs-orow .sk-btn{height:30px;padding:0 11px;font-size:12.5px;gap:6px}
.cs-orow .sk-btn img{width:14px;height:14px}

/* 4. Multiple calendars: what OpenCal read when the link opened, in two states, and what the link then offers. */
.cs-lims{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 14px}
.cs-lims>span{padding:6px 10px;border-radius:9px;background:#f7f8fa;font-size:13px}
.cs-lims>span.cs-n{padding:0;background:var(--free)}
.cs-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.cs-state{display:flex;flex-direction:column;gap:10px;min-width:0}
.legal .cs p.cs-sh{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600}
.legal .cs .cs-reads{display:grid;gap:4px;padding:10px;border-radius:12px;background:#fff;box-shadow:0 0 0 1px #e6e8ee}
.cs-reads li{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;font-size:13px}
.cs-reads li em{margin-left:auto;font-style:normal;font-size:12px;color:#1d7a46;font-weight:600}
.cs-reads li.is-fail{background:#fff4f4;box-shadow:inset 0 0 0 1px #f3c2c4}
.cs-reads li.is-fail em{color:#b4232a}
.cs-link{display:flex;flex-direction:column;gap:10px;padding:14px}
.cs-empty b{display:block;font-size:14px}
.cs-empty small{display:block;margin-top:4px;font-size:12.5px;color:#4d525b}

/* 5. Cal.com: one screen read, checked for 24 hours, then unavailable until it is read again. */
.cs-cc .cs-line{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);grid-template-areas:"a1 a2" "b1 b2" "c1 c2";padding:14px 16px 16px}
.cs-a1{grid-area:a1}.cs-a2{grid-area:a2}.cs-b1{grid-area:b1}.cs-b2{grid-area:b2}.cs-c1{grid-area:c1}.cs-c2{grid-area:c2}
.cs-cc .cs-tick{display:flex;flex-direction:column;gap:2px;padding:0 10px 10px 0;font-size:12px;color:#4d525b}
.cs-cc .cs-tick b{font-size:13px;color:#111318}
.cs-bar{display:flex;align-items:center;gap:8px;height:34px;padding:0 10px;font-size:12.5px;font-weight:600}
.cs-bar.is-ok{border-radius:9px 0 0 9px;background:#eef3ff;box-shadow:inset 0 0 0 1.5px #b8cbfb;color:#1f55e0}
.cs-bar.is-gone{border-radius:0 9px 9px 0;background:repeating-linear-gradient(135deg,#f2f3f5 0 6px,#fff 6px 12px);box-shadow:inset 0 0 0 1px #dfe2e8;color:#4d525b}
.cs-bar .cs-n{margin-left:auto}
.cs-snap{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:12px 10px 0 0}
.cs-snap .sk-btn{height:30px;padding:0 10px;font-size:12.5px}
.cs-read1{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid #eceef3;font-size:13px}
.cs-read1 img{width:18px;height:18px}
.cs-ok{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;background:#e9f7ef;color:#1d7a46;font-size:12px;font-weight:600}
.cs-read1 .cs-n{margin-left:auto}
.cs-toast{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:9px;background:#15171a;color:#fff;font-size:12.5px}

/* 6. Acuity: plans priced by number of calendars, beside one person's link. */
.cs-ac .cs-stage{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:start}
.cs-lad{padding:12px 16px 14px}
.cs-step{display:grid;grid-template-columns:96px minmax(0,1fr);gap:4px 12px;align-items:center;padding:9px 0;border-top:1px solid #f0f1f3}
.cs-step:first-child{border-top:0}
.cs-step>span:first-child b{display:block;font-size:13.5px}
.cs-step>span:first-child small{font-size:12px;color:#4d525b;font-variant-numeric:tabular-nums}
.cs-cals{display:flex;flex-wrap:wrap;gap:3px;align-items:center}
.cs-cals i{width:12px;height:12px;border-radius:3px;background:#dfe2e8}
.cs-cals em{margin-left:6px;font-style:normal;font-size:12.5px;font-weight:600;white-space:nowrap}
.cs-tip{display:flex;gap:8px;align-items:flex-start;margin-top:8px;padding:10px 12px;border-radius:10px;background:#f7f8fa;font-size:13px}
.cs-one{display:flex;flex-direction:column;gap:12px;padding:16px}
.cs-one .cs-lk{display:inline-flex;align-items:center;gap:8px;padding:6px 6px 6px 12px;background:#15171a;color:#fff;font-size:13px}
.cs-one .cs-lk i{background:#fff;color:#111318}
.legal .cs .cs-feeds{display:grid;gap:8px;padding:10px 12px;border-radius:10px;background:#f7f8fa;box-shadow:inset 0 0 0 1px #eceef3}
.cs-feeds li{display:flex;align-items:center;gap:8px;font-size:13px}
.cs-feeds li small{font-size:12px;color:var(--faint)}
.cs-lkrow{display:flex;align-items:center;gap:8px}
.legal .cs .cs-one p.cs-grp{display:flex;align-items:center;gap:8px;margin:0}

/* 7. Google: one Thursday, checked two ways. Times sit on a 09:00 to 17:00 day; tN is the half hour a block starts on,
   dN its length in half hours. */
.cs-go .cs-gq{display:grid;gap:6px;padding:12px 14px}
.cs-gq>span{display:flex;gap:8px;align-items:flex-start;font-size:13px}
.cs-gq .cs-n{margin-top:1px}
.cs-days{display:grid;grid-template-columns:44px minmax(0,1fr) minmax(0,1fr);gap:0 12px}
.cs-dayh{display:flex;flex-direction:column;gap:2px;padding:0 0 8px;font-size:12.5px}
.cs-dayh b{font-size:13px}
.cs-dayh small{display:flex;align-items:center;gap:6px;color:#4d525b}
.cs-dayh small img{width:14px;height:14px}
.cs-hours,.cs-dcol{position:relative;height:400px}
.cs-dcol{border-radius:10px;background:#fff;box-shadow:inset 0 0 0 1px #e6e8ee}
.cs-hours i{position:absolute;right:0;font-style:normal;font-size:11px;color:var(--faint);transform:translateY(-50%)}
.cs-e{position:absolute;left:6px;right:6px;padding:3px 8px 0;border-radius:6px;overflow:hidden}
.cs-e b{display:block;font-size:12px;line-height:14px}
.cs-e small{display:block;font-size:11px;line-height:13px;color:#4d525b}
.cs-e.is-ghost{background:#fff!important;box-shadow:none!important;outline:1.5px dashed #8fcf9f;outline-offset:-1.5px}
.cs-e.is-ghost b{color:#4d525b}
.cs-e .cs-n{position:absolute;right:6px;top:6px}
.cs-t0{top:0}.cs-t5{top:31.25%}.cs-t6{top:37.5%}.cs-t13{top:81.25%}
.cs-d1{height:calc(6.25% - 2px)}
.cs-e.cs-d1{display:flex;align-items:baseline;gap:8px;white-space:nowrap}
.cs-e.cs-d1 small{overflow:hidden;text-overflow:ellipsis}.cs-d2{height:calc(12.5% - 2px)}
.cs-h9{top:0}.cs-h11{top:25%}.cs-h13{top:50%}.cs-h15{top:75%}.cs-h17{top:100%}

/* 8. YouCanBookMe: Maya's times compared with Sam's busy times on the server, and what Sam then sees. */
.cs-yc .cs-trio{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:16px;align-items:start}
.cs-cmpg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) auto;align-items:stretch}
.cs-cmpg>span{display:flex;align-items:center;padding:9px 12px;border-top:1px solid #f0f1f3;font-size:13px;font-variant-numeric:tabular-nums}
.cs-cmpg>.cs-ch{display:flex;align-items:center;gap:6px;border-top:0;font-size:12px;font-weight:600;color:#4d525b}
.cs-cmpg>.is-cut{color:#a9adb5}
.cs-cmpg>.is-cut s{text-decoration-thickness:1.5px}
.cs-cmpg>.is-keep{font-weight:600}
.cs-cmpg>.cs-bz{color:#1d2230}
.cs-cmpg>.cs-fr2{color:#4d525b}
.cs-cmpg>.cs-no{color:#a9adb5}
.cs-cmpg>.cs-yes{color:var(--free);font-weight:600}
.cs-signed{margin-left:auto;padding:2px 8px;border-radius:6px;background:#e9f7ef;color:#1d7a46;font-size:11.5px;font-weight:600;white-space:nowrap}
.cs-both{display:flex;flex-direction:column;gap:10px;padding:14px}
.cs-both .sk-btn{justify-content:flex-start;gap:8px}
.cs-both .sk-btn .cs-n{margin-left:auto;background:#fff;color:var(--free)}

@media (max-width:900px){
  .cs-ms .cs-stage,.cs-fr .cs-stage,.cs-ac .cs-stage{grid-template-columns:minmax(0,1fr)}
  .cs-yc .cs-trio{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .cs-stage{padding:12px;gap:12px}
  .cs-set{grid-template-columns:minmax(0,1fr)}
  .cs-nav{flex-direction:row;flex-wrap:wrap;padding:8px 10px;border-right:0;border-bottom:1px solid #eceef3}
  .cs-nav span{padding:5px 8px;font-size:12.5px}
  .cs-cly .cs-set .cs-main{grid-template-columns:minmax(0,1fr)}
  /* The pricing row turns into one line per plan: the plan name, its price and its count. */
  .cs-cly .cs-plans{grid-template-columns:minmax(0,1fr)}
  .cs-plans>.cs-ph{display:none}
  .cs-plans>.cs-rl{border-top:0;padding-bottom:4px}
  .cs-plans .cs-v{justify-content:space-between;font-size:14px}
  .cs-plans .cs-v::before{content:attr(data-plan);font-size:13px;font-weight:500;color:#4d525b}
  .cs-plans .cs-v::before{margin-right:auto}
  .cs-pair{grid-template-columns:minmax(0,1fr)}
  .cs-cc .cs-line{grid-template-columns:minmax(0,1fr);grid-template-areas:"a1" "b1" "c1" "a2" "b2" "c2";padding:12px}
  .cs-cc .cs-tick{padding:10px 0 6px}
  .cs-bar.is-ok,.cs-bar.is-gone{border-radius:9px}
  .cs-days{grid-template-columns:34px minmax(0,1fr) minmax(0,1fr);gap:0 8px}
  .cs-e{left:4px;right:4px;padding:3px 5px 0}
  .cs-e small{display:none}
  .cs-e .cs-n{right:3px;top:3px}
  .cs-yc .cs-trio{grid-template-columns:minmax(0,1fr)}
  .cs-step{grid-template-columns:minmax(0,1fr)}
  .cs-yc .cs-win>.sk-bar{height:auto;min-height:38px;flex-wrap:wrap;gap:6px 7px;padding:8px 12px}
  .cs-yc .cs-signed{margin-left:0}
  .cs-orow{flex-direction:column;align-items:flex-start}
  /* Nothing in a scene drops under 12px on a phone. */
  .cs-n{width:22px;height:22px;font-size:12px}
  .cs-hours i,.cs-e b,.cs-crow small,.cs-lk i,.cs-tagx,.cs-signed,.cs-acct em,.cs-dom,.cs-read,.cs-feeds li small,.legal .cs p.cs-grp{font-size:12px}
  .cs-e b{line-height:15px}
}