/* Supported connections and a real Google Calendar appointment schedule. */
.api-section{background:#fff;border-block:1px solid var(--line)}
.api-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:22px;row-gap:0}
.api-card{display:grid;grid-template-rows:subgrid;grid-row:span 4;min-width:0;padding:30px;border:1px solid var(--line);border-top:3px solid var(--purple);border-radius:12px;background:#faf9fd}
.api-label{font-size:10px;letter-spacing:.1em;font-weight:700;color:var(--purple-dark)}
.api-card h3{font-size:27px;margin:20px 0;line-height:1.15}
.api-card>p:not(.api-label){color:#555965;font-size:14px;line-height:1.8}
.api-card .check-list{display:grid;grid-template-rows:repeat(4,minmax(0,1fr));row-gap:10px;padding-top:22px;margin-top:24px;border-top:1px solid #dfdaeb}
.api-card .check-list li{margin:0}
.api-card .api-note{margin-top:auto;padding-top:15px;font-size:12px!important}
.api-followup{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:28px}
.api-followup p{font-size:14px;color:#555965}
.booking-section{background:#f1eef8;border-block:1px solid #e1daef}
.booking-layout{display:grid;grid-template-columns:minmax(260px,.72fr) minmax(0,1.6fr);gap:24px;align-items:start}
.setup-help{background:var(--navy);color:#fff;padding:32px;border-radius:14px}
.booking-duration{display:block;font-size:10px;font-weight:650;letter-spacing:.1em;color:#c9b9fb}
.setup-help h3{font-size:29px;line-height:1.2;margin:20px 0}
.setup-help>p{font-size:14px;line-height:1.8;color:#d1d6e0}
.setup-help-steps{list-style:none;margin:28px 0;padding:0;counter-reset:setup}
.setup-help-steps li{position:relative;padding:20px 0 20px 36px;border-top:1px solid #41495d;counter-increment:setup}
.setup-help-steps li::before{content:counter(setup,decimal-leading-zero);position:absolute;left:0;top:20px;font-size:12px;color:#c9b9fb;font-weight:650}
.setup-help-steps strong{display:block;font-size:14px;font-weight:600}
.setup-help-steps span{display:block;color:#c5cbd7;font-size:13px;line-height:1.75;margin-top:7px}
.booking-hours{border-top:1px solid #41495d;padding-top:20px}
.booking-hours h4{font-size:13px;margin:0 0 15px;font-weight:600}
.booking-hours dl{margin:0;font-size:12px;line-height:1.7}
.booking-hours dl>div+div{margin-top:9px}
.booking-hours dt{color:#c5cbd7}
.booking-hours dd{margin:0;font-weight:550}
.booking-hours p{font-size:12px;line-height:1.75;color:#c5cbd7;margin-top:20px}
.booking-calendar{min-width:0;background:white;border:1px solid #ded8e9;border-radius:14px;overflow:hidden}
.booking-calendar-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:22px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.booking-calendar-heading h3{font-size:20px;line-height:1.3}
.booking-calendar-heading .button{font-size:12px}
.booking-calendar iframe{display:block;width:100%;height:800px;border:0;background:#fff}
@media(min-width:901px) and (max-width:1160px){#site-nav{gap:16px}.site-header .brand-full-name{max-width:240px}}
@media(max-width:1050px){.booking-layout{grid-template-columns:1fr}.setup-help{display:grid;grid-template-columns:1fr 1fr;column-gap:34px}.booking-duration,.setup-help h3,.setup-help>p{grid-column:1}.setup-help-steps{grid-column:2;grid-row:1/5;margin:0}.booking-hours{grid-column:1/-1;margin-top:10px}.booking-hours dl{display:flex;gap:40px}.booking-hours dl>div+div{margin-top:0}.booking-hours p{margin-top:12px}.booking-calendar iframe{height:760px}}
@media(max-width:760px){.api-grid{grid-template-columns:1fr;row-gap:18px}.api-card{display:block;grid-row:auto;padding:25px}.api-card .check-list li{margin:0}
.api-card .api-note{padding-top:5px}.api-followup{align-items:flex-start;flex-direction:column;gap:15px}.booking-layout{gap:18px}.booking-calendar-heading{padding:20px}.booking-calendar iframe{height:860px}}
@media(max-width:520px){.setup-help{display:block;padding:25px}.setup-help h3{font-size:28px}.setup-help-steps{margin:25px 0 0}.booking-hours{margin-top:12px}.booking-hours dl{display:block}.booking-hours dl>div+div{margin-top:9px}.booking-calendar-heading{display:block;padding:20px 16px}.booking-calendar-heading .button{margin-top:14px}.booking-calendar iframe{height:920px}.booking-section>.container{width:calc(100% - 24px)}}
