/* The home page only. Shared pieces — the bar, the footer, the App Store button — are in
   style.css. The page is drawn light whatever the system setting, because its photographs
   and screenshots are. */

body.home { --navy: #091723; --text: #121217; --muted: rgba(9, 23, 35, .6); --soft: #F2F2F7;
            --edge: #E3E5E9; --grey: #5B616B; color-scheme: light; background: #fff; color: var(--text);
            font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif; }
body.home .bar { background: rgba(255, 255, 255, .92); }
body.home .bar .brand, body.home .bar nav a { color: var(--text); }
body.home .bar .store { background: var(--navy); color: #fff; }
.home h1, .home h2, .home h3 { margin: 0; }
.home p { margin: 0; }
.home .wrap { max-width: 1440px; margin: 0 auto; padding: 88px 24px; }
.home .title { font-size: 56px; line-height: 57px; font-weight: 700; letter-spacing: -0.23px; color: #14161A; }
.home .lede { font-size: 18px; line-height: 26px; letter-spacing: -0.44px; color: var(--text); margin: 0; }
.home .link { font-size: 18px; line-height: 26px; letter-spacing: -0.44px; color: var(--text);
              text-decoration: underline; text-underline-offset: 3px; }
.home .card-title { font-size: 25px; line-height: 35px; font-weight: 590; color: var(--navy); }
.home .card-text { font-size: 16px; line-height: 22px; color: var(--muted); }

/* Hero: the photograph is the box; the words sit on its sky. */
.h-hero { max-width: 1440px; margin: 0 auto; padding: 0 24px 24px; }
.h-hero .box { position: relative; min-height: 750px; border-radius: 56px; overflow: hidden;
               background: #8cc7f2 url(/img/hero.png) center / cover no-repeat;
               display: flex; flex-direction: column; justify-content: center; gap: 40px; padding: 72px; }
.h-hero h1 { font-size: 100px; line-height: 90px; font-weight: 860; letter-spacing: -2.32px; color: var(--navy);
             max-width: 680px; }
.h-hero .words { display: grid; gap: 24px; max-width: 680px; }
.h-hero p { font-size: 18px; line-height: 26px; letter-spacing: -0.44px; max-width: 518px; color: var(--text); }
.h-hero .cta { display: inline-flex; align-items: center; justify-content: center; width: 220px; height: 56px;
               border-radius: 100px; background: #fff; color: #111; font-size: 18px; font-weight: 600;
               letter-spacing: -0.43px; text-decoration: none; }

/* Features: a row of cards that runs off the right edge and scrolls. */
.h-features .head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.h-features .head > div:first-child { display: grid; gap: 16px; max-width: 696px; }
.h-features .head .lede { max-width: 583px; }
.h-features .arrows { display: flex; gap: 16px; flex: none; }
.arrow { width: 48px; height: 48px; border-radius: 128px; border: 2px solid var(--navy); background: none;
         display: grid; place-items: center; cursor: pointer; color: var(--navy); padding: 0; }
.arrow svg { width: 24px; height: 24px; }
.arrow:disabled { border-color: rgba(9, 23, 35, .1); color: rgba(9, 23, 35, .3); cursor: default; }
.h-features .row { display: flex; gap: 24px; margin-top: 48px; overflow-x: auto; scroll-snap-type: x mandatory;
                   scrollbar-width: none; padding-right: 24px; }
.h-features .row::-webkit-scrollbar { display: none; }
.h-features .card { background: none; border: 0; padding: 0; border-radius: 0; flex: 0 0 308px; display: grid; gap: 24px; align-content: start; scroll-snap-align: start; }
.h-features .card img { width: 308px; height: 302px; border-radius: 32px; display: block; object-fit: cover; }
.h-features .card div { display: grid; gap: 4px; }
/* Animated carousel cards: the card, and each row of it as its own transparent layer on
   top. The rows come in one after another when home.js adds .shown — the card on screen,
   its turn come. Without the script every row is simply there. */
.h-features .layers { position: relative; width: 308px; height: 302px; border-radius: 32px; overflow: hidden; flex: none; }
.h-features .layers img { position: absolute; inset: 0; }
.home.moving .layers .layer { opacity: 0; transform: translateY(14px); }
.home.moving .layers.shown .layer { animation: layer-in .6s cubic-bezier(.2, .8, .2, 1) both; }
.home.moving .layers.shown .layer:nth-of-type(3) { animation-delay: 1s; }
.home.moving .layers.shown .layer:nth-of-type(4) { animation-delay: 2s; }
.home.moving .layers.shown .layer:nth-of-type(5) { animation-delay: 3s; }
@keyframes layer-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* "Nothing leaves your phone": each button puts its own screen on the phone. */
.h-private .panel { background: #0C2543; border-radius: 64px; padding: 88px 32px; color: #fff; }
.h-private .head { display: grid; gap: 16px; justify-items: center; text-align: center; }
.h-private .title { color: #fff; }
.h-private .head .lede { color: #fff; max-width: 430px; }
.h-private .stage { display: grid; grid-template-columns: 1fr 400px 1fr; gap: 64px; align-items: center; margin-top: 40px; }
.h-private .side { display: grid; gap: 32px; }
.h-private .side.right { justify-items: end; }
.reason { width: 100%; max-width: 400px; display: flex; gap: 8px; align-items: flex-start; text-align: left;
          padding: 16px; border-radius: 16px; border: 1px solid transparent; background: none; color: #fff;
          font: inherit; cursor: pointer; }
.reason span { display: grid; gap: 8px; flex: 1; }
.reason strong { font-size: 22px; line-height: 28px; font-weight: 590; }
.reason small { font-size: 15px; line-height: 22px; color: rgba(255, 255, 255, .6); }
.reason:hover { border-color: rgba(255, 255, 255, .25); }
.reason[aria-pressed="true"] { background: #fff; border-color: #fff; color: var(--navy); }
.reason[aria-pressed="true"] small { color: var(--muted); }
.reason:focus-visible { outline: 3px solid #4BACDD; outline-offset: 2px; }

.phone { position: relative; width: 100%; max-width: 408px; aspect-ratio: 408 / 843; margin: 0 auto;
         border: 6.5px solid #A2B5CE; border-radius: 69px; background: #000; padding: 9px;
         box-shadow: inset 0 0 2.8px rgba(5, 5, 5, .25), 0 30px 60px rgba(0, 0, 0, .35); }
.phone::before, .phone::after { content: ""; position: absolute; width: 4.7px; background: #A2B5CE; border-radius: 1px; }
.phone::before { left: -11px; top: 22%; height: 61px; box-shadow: 0 -80px 0 #A2B5CE, 0 -158px 0 -12px #A2B5CE; }
.phone::after { right: -11px; top: 27%; height: 100px; }
.phone img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top;
             border-radius: 58px; transition: opacity .25s ease; }
/* A new screen fades in on top of the old one, so the phone never goes dark in between. */
.phone img.next { position: absolute; inset: 9px; width: calc(100% - 18px); height: calc(100% - 18px); opacity: 0; transition: opacity .45s ease; }
.phone img.next.in { opacity: 1; }
.phone .island { position: absolute; top: 26px; left: 50%; width: 117px; height: 34px; margin-left: -58.5px;
                 border-radius: 100px; background: #000; }

/* Plans. */
.h-plans { text-align: center; }
.h-plans .head, .h-more .head { display: grid; gap: 16px; justify-items: center; max-width: 784px; margin: 0 auto; }
.h-plans .store.big, .h-more .store.big { margin-top: 48px; }
.plans3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px; text-align: left; }
.plan3 { background: var(--soft); border: 1px solid var(--edge); border-radius: 32px; padding: 32px;
         display: grid; gap: 40px; align-content: start; }
.plan3 .name { display: grid; gap: 20px; }
.plan3 img { width: 80px; height: 80px; border-radius: 20px; }
.plan3 h3 { font-size: 18px; line-height: 28px; font-weight: 700; letter-spacing: -0.41px; color: #14161A; }
.plan3 .price { font-size: 56px; line-height: 53px; font-weight: 700; letter-spacing: -0.23px; color: #14161A; padding-top: 6px; }
.plan3 .price small { font-size: 15px; font-weight: 500; color: var(--grey); letter-spacing: 0; }
.plan3 ul { margin: 12px 0 0; padding: 15px 0 15px 17px; color: var(--grey); font-size: 15px; line-height: 25px;
            letter-spacing: -0.26px; max-width: 251px; }
.plan3 li { margin: 0 0 6px; }

/* A photograph beside the promises. */
.h-split .row { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.h-split .row img { width: 100%; height: auto; aspect-ratio: 696 / 585; object-fit: cover; border-radius: 64px; display: block; }
.h-split .text { padding-left: 56px; display: grid; gap: 48px; }
.h-split .text > div { display: grid; gap: 16px; max-width: 484px; }
.ticks { list-style: none; margin: 0; padding: 0; }
.ticks li { display: flex; gap: 8px; padding: 6.8px 0; margin: 0; font-size: 18px; line-height: 28px; font-weight: 590;
            letter-spacing: -0.43px; color: var(--navy); }
.ticks li::before { content: "✓"; color: #58D878; font-weight: 700; font-size: 17px; width: 16px; flex: none; }

/* More of Pro, on a grey panel. */
.h-more .panel { background: var(--soft); border-radius: 64px; padding: 88px 64px; text-align: center; }
.cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px; text-align: left; }
.cards3 article { display: grid; gap: 24px; align-content: start; }
.cards3 img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 32px; display: block; }
.cards3 article div { display: grid; gap: 4px; }
/* A card from the app laid over the photograph. It rises into place when the photograph
   comes into view, once, in turn with the other moving pieces (home.js adds .shown). Placed in
   percentages of the photograph, so it sits where the design put it at any width. */
.cards3 .pic { position: relative; display: block; }
.cards3 .pic img.over { position: absolute; width: auto; height: auto; aspect-ratio: auto; border-radius: 0;
                        object-fit: contain; filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .25)); }
.over-goals { left: 8.6%; top: 47%; width: 82.8% !important; border-radius: 16px !important; }
.over-pension { left: 29.8%; top: 27.4%; width: 40.2% !important; }
.home.moving .cards3 .pic img.over { opacity: 0; transform: translateY(24px) scale(.94);
                                     transition: opacity .6s ease, transform .8s cubic-bezier(.2, .8, .2, 1); }
.home.moving .cards3 .pic.shown img.over { opacity: 1; transform: none; }

/* Questions. */
.h-faq .inner { max-width: 960px; margin: 0 auto; padding: 0 64px; display: grid; gap: 48px; }
.h-faq h2 { font-size: 39px; line-height: 47px; font-weight: 700; text-align: center; color: var(--navy); }
.h-faq .list { display: grid; gap: 24px; }
.h-faq details { border: 1px solid rgba(9, 23, 35, .1); border-radius: 32px; overflow: hidden;
                 transition: background-color .35s ease, border-color .35s ease; }
.h-faq details[open] { background: #BCDDFF; border-color: #BCDDFF; }
.h-faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px;
                 padding: 24px; cursor: pointer; font-size: 20px; line-height: 24px; font-weight: 590; color: var(--navy); }
.h-faq summary::-webkit-details-marker { display: none; }
.h-faq summary svg { width: 36px; height: 36px; flex: none; color: #083B72; transition: transform .35s ease; }
.h-faq details[open] summary svg { transform: rotate(180deg); color: var(--navy); }
/* Closing: the colour and the chevron go back while the answer folds away, not after. */
.h-faq details[open].closing { background: transparent; border-color: rgba(9, 23, 35, .1); }
.h-faq details[open].closing summary svg { transform: none; color: #083B72; }
.h-faq details p { padding: 0 24px 24px; font-size: 15px; line-height: 25px; letter-spacing: -0.26px; color: var(--navy); }
.h-faq details p a { color: var(--navy); }
.h-faq summary:focus-visible { outline: 3px solid #4BACDD; outline-offset: 2px; border-radius: 32px; }

/* Smaller screens. */
@media (max-width: 1180px) {
    .h-hero h1 { font-size: 80px; line-height: 74px; }
    .h-private .stage { grid-template-columns: 1fr 1fr; gap: 24px; }
    .h-private .phone-col { grid-column: 1 / -1; grid-row: 1; max-width: 340px; width: 100%; margin: 0 auto 16px; }
    .h-private .side.right { justify-items: start; }
    .h-split .text { padding-left: 40px; }
}
@media (max-width: 760px) {
    .home .wrap { padding: 56px 16px; }
    .home .title { font-size: 38px; line-height: 40px; }
    .h-hero { padding: 0 12px 12px; }
    .h-hero .box { min-height: 0; border-radius: 36px; padding: 40px 24px 420px; justify-content: flex-start; gap: 28px;
                   background: #8ec6f1; }
    /* The photograph moves under the words and fades into the sky above it. */
    .h-hero .box::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 470px;
                          background: url(/img/hero.png) 80% 100% / auto 470px no-repeat;
                          -webkit-mask-image: linear-gradient(transparent, #000 22%); mask-image: linear-gradient(transparent, #000 22%); }
    .h-hero .words, .h-hero .cta { position: relative; z-index: 1; }
    .h-hero h1 { font-size: 52px; line-height: 50px; letter-spacing: -1.2px; }
    .h-hero p { font-size: 17px; }
    .h-features .head { flex-direction: column; align-items: flex-start; }
    .h-features .arrows { display: none; }
    .h-features .row { margin-top: 32px; gap: 16px; }
    .h-features .card { flex-basis: 272px; }
    .h-features .card img, .h-features .layers { width: 272px; height: 267px; }
    .h-private .panel { border-radius: 40px; padding: 56px 16px; }
    .h-private .stage { grid-template-columns: 1fr; gap: 12px; }
    .h-private .phone-col { grid-column: auto; grid-row: auto; max-width: 280px; margin: 8px auto 12px; }
    .h-private .side { gap: 8px; }
    .reason strong { font-size: 19px; line-height: 24px; }
    .plans3, .cards3 { grid-template-columns: 1fr; }
    .plan3 { padding: 24px; gap: 24px; }
    .plan3 .price { font-size: 44px; line-height: 44px; }
    .h-split .row { grid-template-columns: 1fr; gap: 32px; }
    .h-split .row img { border-radius: 36px; }
    .h-split .text { padding-left: 0; gap: 28px; }
    .ticks li { font-size: 16px; line-height: 24px; }
    .h-more .panel { border-radius: 40px; padding: 56px 16px; }
    .h-faq .inner { padding: 0; gap: 28px; }
    .h-faq h2 { font-size: 32px; line-height: 38px; }
    .h-faq .list { gap: 12px; }
    .h-faq summary { font-size: 17px; line-height: 22px; padding: 18px 20px; }
    .h-faq summary svg { width: 28px; height: 28px; }
    .h-faq details p { padding: 0 20px 20px; }
}
@media (prefers-reduced-motion: reduce) {
    .phone img, .phone img.next, .h-faq summary svg, .h-faq details { transition: none; }
    html { scroll-behavior: auto; }
}