:root {
    color-scheme:light;
    --ink:#142640;
    --muted:#42546c;
    --paper:#fbfaf5;
    --blue:#204de0;
    --teal:#006d65;
    --coral:#b54231;
    --line:#d4dbdf
}
* {
    box-sizing:border-box
}
body {
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font:17px/1.55 "Avenir Next",sans-serif
}
a {
    color:inherit;
    text-underline-offset:.25em
}
a:focus-visible {
    outline:3px solid var(--teal);
    outline-offset:4px
}
::selection {
    background:#c3eee1;
    color:var(--ink)
}
.wrap {
    width:min(1256px,calc(100% - 112px));
    margin-inline:auto
}
.bar {
    border-bottom:1px solid var(--line)
}
.bar .wrap {
    height:76px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px
}
.brand {
    display:flex;
    align-items:center;
    gap:11px;
    text-decoration:none;
    font-weight:750;
    letter-spacing:-.025em;
    font-size:21px;
    white-space:nowrap
}
.brand svg {
    width:34px;
    height:34px;
    flex:none
}
.nav {
    display:flex;
    align-items:center;
    gap:25px;
    font-size:14px;
    font-weight:650
}
.nav a {
    text-decoration:none;
    white-space:nowrap
}
.nav a:hover,.link:hover {
    text-decoration:underline
}
.btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    background:var(--blue);
    color:white;
    text-decoration:none;
    padding:13px 19px;
    border-radius:8px;
    font-weight:750;
    font-size:15px;
    min-height:46px
}
.btn:hover {
    background:#153bc3
}
.hero {
    padding-top:66px
}
.intro {
    display:grid;
    grid-template-columns:1.48fr 1fr;
    align-items:end;
    gap:52px;
    margin-bottom:40px
}
h1,h2,p,figure {
    margin:0
}
h1,h2 {
    font-family:"Avenir Next",sans-serif;
    font-weight:800;
    letter-spacing:-.038em;
    line-height:.99
}
h1 {
    font-size:clamp(3.35rem,6.1vw,5.65rem);
    text-wrap:balance
}
h1 span {
    color:var(--blue)
}
.intro p {
    max-width:39ch;
    color:var(--muted);
    font-size:20px;
    line-height:1.5
}
.actions {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:12px 20px;
    margin-top:21px
}
.link {
    font-size:14px;
    font-weight:750
}
.arrow {
    font-size:20px;
    line-height:1
}
.route {
    position:relative;
    overflow:hidden;
    background:#e9efff;
    border-radius:16px;
    padding:24px 29px 27px
}
.route figcaption {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    font-size:13px;
    color:#344c76;
    font-weight:700
}
.caption-rule {
    height:1px;
    flex:1;
    background:#afbfeb
}
.track {
    margin:19px 0 0;
    padding:0;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    list-style:none;
    position:relative;
    isolation:isolate
}
.track:before {
    content:"";
    position:absolute;
    z-index:-1;
    inset:54px 10% auto;
    height:4px;
    background:var(--blue);
    border-radius:6px
}
.stop {
    text-align:center;
    padding:0 8px;
    --station:var(--blue);
    --wash:#f8faff
}
.stop:nth-child(2) {
    --station:var(--teal);
    --wash:#e0f7ef
}
.stop:nth-child(3) {
    --station:var(--coral);
    --wash:#ffe9e1
}
.stop:nth-child(4) {
    --station:var(--ink);
    --wash:#e2eafd
}
.station {
    position:relative;
    display:grid;
    place-items:center;
    margin:0 auto 14px;
    width:111px;
    height:111px;
    background:var(--wash);
    border:2px solid var(--station);
    border-radius:50%;
    color:var(--station)
}
.station svg {
    width:58px;
    height:58px
}
.number {
    position:absolute;
    display:grid;
    place-items:center;
    width:26px;
    height:26px;
    top:0;
    right:0;
    border-radius:50%;
    background:var(--station);
    color:white;
    font-size:12px;
    font-weight:800;
    line-height:1;
    font-variant-numeric:tabular-nums
}
.stop h3 {
    margin:0;
    font-size:18px;
    line-height:1.26
}
.stop p {
    margin-top:4px;
    font-size:14px;
    color:var(--muted)
}
.supported {
    display:flex;
    flex-wrap:wrap;
    gap:6px 16px;
    align-items:center;
    margin:0;
    padding:17px 4px 28px;
    color:var(--muted);
    font-size:13px
}
.supported strong {
    color:var(--ink)
}
.next {
    border-top:1px solid var(--line);
    padding:49px 0 55px
}
.next .wrap {
    display:grid;
    grid-template-columns:1.48fr 1fr;
    gap:52px;
    align-items:center
}
.next h2 {
    font-size:clamp(2.2rem,3.8vw,3.6rem);
    text-wrap:balance
}
.next p {
    max-width:37ch;
    color:var(--muted)
}
@media(max-width:1100px) {
    .wrap {
        width:calc(100% - 64px)
    }
    .nav {
        gap:16px
    }
    .intro,.next .wrap {
        gap:32px
    }
}
@media(max-width:850px) {
    .optional {
        display:none
    }
    .intro {
        gap:22px
    }
    .intro p {
        font-size:17px
    }
    .stop h3 {
        font-size:16px
    }
}
@media(max-width:660px) {
    .wrap {
        width:calc(100% - 40px)
    }
    .bar .wrap {
        height:64px;
        gap:14px
    }
    .brand {
        font-size:18px;
        gap:8px
    }
    .brand svg {
        width:28px;
        height:28px
    }
    .nav {
        gap:12px
    }
    .nav .btn {
        display:none
    }
    .nav a {
        padding:10px 0
    }
    .hero {
        padding-top:40px
    }
    .intro {
        display:block;
        margin-bottom:25px
    }
    .intro h1 {
        font-size:clamp(2.6rem,11.3vw,4.3rem);
        text-wrap:initial
    }
    .intro p {
        margin-top:17px;
        font-size:16px
    }
    .actions {
        margin-top:18px;
        gap:10px 15px
    }
    .actions .btn {
        padding-inline:13px;
        font-size:14px
    }
    .actions .link {
        font-size:13px
    }
    .route {
        padding:17px 16px 19px
    }
    .route figcaption {
        font-size:12px
    }
    .track {
        display:grid;
        grid-template-columns:1fr;
        gap:14px;
        margin-top:16px
    }
    .track:before {
        inset:28px auto 28px 27px;
        width:3px;
        height:auto
    }
    .stop {
        display:grid;
        grid-template-columns:58px 1fr;
        gap:13px;
        text-align:left;
        align-items:center;
        padding:0
    }
    .station {
        width:58px;
        height:58px;
        margin:0
    }
    .station svg {
        width:31px;
        height:31px
    }
    .number {
        width:18px;
        height:18px;
        font-size:10px;
        top:-2px;
        right:-3px
    }
    .stop h3 {
        font-size:16px
    }
    .stop p {
        margin-top:2px;
        font-size:12px;
        line-height:1.3
    }
    .supported {
        padding:13px 1px 22px;
        gap:3px 10px;
        font-size:12px
    }
    .next {
        padding:27px 0 35px
    }
    .next .wrap {
        display:block
    }
    .next h2 {
        font-size:2.15rem;
        text-wrap:initial
    }
    .next p {
        margin-top:13px;
        font-size:15px
    }
}
.mobile-menu {
    display:none
}
@media(max-width:660px) {
    .mobile-menu {
        display:block;
        position:relative
    }
    .mobile-menu summary {
        display:grid;
        place-items:center;
        width:40px;
        height:44px;
        cursor:pointer;
        list-style:none
    }
    .mobile-menu summary::-webkit-details-marker {
        display:none
    }
    .mobile-menu summary:focus-visible {
        outline:3px solid var(--teal);
        outline-offset:2px
    }
    .mobile-menu summary svg {
        width:22px;
        height:22px
    }
    .mobile-menu div {
        position:absolute;
        right:0;
        top:100%;
        z-index:2;
        background:var(--paper);
        border:1px solid var(--line);
        padding:8px 16px;
        min-width:180px;
        border-radius:8px
    }
    .mobile-menu a {
        display:block
    }
}
@media(max-width:375px) {
    .brand {
        font-size:16px
    }
    .bar .wrap {
        gap:8px
    }
    .nav {
        gap:5px
    }
}

/* Shared structure and subsequent homepage sections. */
html {
    scroll-padding-top: 95px;
}
.bar {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--paper);
}
.brand img {
    width: 34px;
    height: 34px;
    flex: none;
}
.skip-link {
    position: fixed;
    z-index: 4;
    inset: 8px auto auto 8px;
    transform: translateY(-150%);
    background: var(--paper);
    padding: 8px 16px;
}
.skip-link:focus {
    transform: none;
}
:focus-visible {
    outline: 3px solid var(--teal);
    outline-offset: 4px;
}
.section {
    padding-block: clamp(52px, 7vw, 104px);
}
.section h2,
.inner-page h1 {
    max-width: 20ch;
    font-size: clamp(2.35rem, 4.25vw, 4.3rem);
    line-height: 1.04;
    text-wrap: balance;
}
.section-lede {
    max-width: 57ch;
    margin-top: 18px;
}
.section p,
.section dd,
.inner-page > p {
    color: var(--muted);
}
.section .btn {
    margin-top: 24px;
}
.how,
.faq {
    background: #edf1fb;
}
.steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding-left: 24px;
    margin: 38px 0 0;
    gap: 30px;
}
.steps li {
    padding-left: 6px;
}
.steps li::marker {
    color: var(--blue);
    font-weight: 800;
}
.steps h3,
.cp-plan-grid h3 {
    font-size: 1.25rem;
    margin: 0 0 6px;
    line-height: 1.2;
}
.ideas,
.features,
.cp-plan-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 34px;
    margin: 33px 0 0;
}
.ideas > div,
.features > div,
.sharing > div,
.cp-plan-grid > section {
    padding-block: 20px;
    border-top: 1px solid var(--line);
}
dt {
    font-size: 1.2rem;
    font-weight: 750;
    line-height: 1.3;
}
dd {
    margin: 6px 0 0;
}
.section .closing-line {
    margin-top: 20px;
    font-weight: 750;
    color: var(--ink);
}
.feature-band {
    background: #e4f4ee;
}
.features {
    grid-template-columns: repeat(4, 1fr);
}
.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: clamp(28px, 6vw, 86px);
}
.sharing {
    margin: 0;
}
.sharing > div:first-child dt {
    color: var(--blue);
}
.ownership {
    background: #e9efff;
}
.ownership p + p {
    margin-top: 14px;
}
.pricing-action {
    margin-top: 12px;
}
#pricing > .section-lede + p,
#pricing > .section-lede + .cp-plan-grid {
    margin-top: 28px;
}
.faq details {
    border-top: 1px solid #b6c2da;
    padding: 15px 0;
}
.faq details:last-child {
    border-bottom: 1px solid #b6c2da;
}
.faq summary {
    cursor: pointer;
    font-weight: 700;
}
.faq details p {
    margin: 10px 0 0 18px;
}
.final-cta {
    background: #204de0;
    color: #fff;
}
.final-cta p {
    color: #fff;
}
.final-cta .btn {
    background: #fff;
    color: var(--ink);
}
.final-cta .btn:hover {
    background: #dce7ff;
}
.final-cta :focus-visible {
    outline-color: #fff;
}
.footer {
    padding-block: 46px;
    border-top: 1px solid var(--line);
}
.footer .wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 60px;
}
.footer p {
    color: var(--muted);
    margin-top: 12px;
    max-width: 35ch;
}
.footer nav {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 18px;
    align-content: start;
}
.footer small {
    grid-column: 1 / -1;
    color: var(--muted);
}
.inner-page {
    padding-block: clamp(52px, 8vw, 105px);
    min-height: 55vh;
}
.inner-page > p {
    margin: 18px 0;
    max-width: 62ch;
}
.contact-form {
    max-width: 38rem;
    margin-top: 26px;
    display: grid;
    gap: 17px;
    justify-items: start;
}
.contact-form label {
    width: 100%;
    font-weight: 700;
}
.contact-form input:not([type=hidden]),
.contact-form textarea {
    display: block;
    width: 100%;
    margin-top: 5px;
    border: 1px solid #7789a0;
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-weight: 400;
    padding: 10px 12px;
}
.contact-form textarea {
    resize: vertical;
}
button.btn {
    border: 0;
    cursor: pointer;
    font-family: inherit;
}
.notice {
    border-radius: 8px;
    background: #e4f4ee;
    padding: 12px 16px;
}
.notice.error {
    background: #ffe9e1;
}
@media (max-width: 850px) {
    .mobile-menu {
        display: block;
    }
    .steps,
    .ideas,
    .features,
    .cp-plan-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 661px) and (max-width: 850px) {
    .mobile-menu {
        position: relative;
    }
    .mobile-menu summary {
        display: grid;
        place-items: center;
        width: 40px;
        height: 44px;
        list-style: none;
        cursor: pointer;
    }
    .mobile-menu summary svg {
        width: 22px;
    }
    .mobile-menu div {
        position: absolute;
        right: 0;
        top: 100%;
        min-width: 180px;
        padding: 8px 16px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: var(--paper);
    }
    .mobile-menu a {
        display: block;
        padding: 8px 0;
    }
}
@media (max-width: 660px) {
    .brand img {
        width: 28px;
        height: 28px;
    }
    .split,
    .footer .wrap,
    .steps,
    .ideas,
    .features,
    .cp-plan-grid {
        grid-template-columns: 1fr;
    }
    .steps {
        gap: 15px;
    }
    .ideas,
    .features,
    .cp-plan-grid {
        gap: 0;
    }
}