/* The download card of the entry pages, common/includes/downloadables/downloadCard: the deck on top, the format pills, one
   button and the lines that say where the user stands. It sits on the light download section of main.css, in the main
   section and in the copies inside the content alike, and carries everything itself. The pills are the period toggle of
   the pro page: one grey track, the chosen format lifts to white. Behaviour in javascripts/common/download-card.js */

/* The section heading over the card, a step under the page's h2 */
.dlc-heading{font-size:40px;line-height:1.15}

.dlc{position:relative;width:100%;max-width:640px;margin:0 auto;padding:48px 40px 40px;border-radius:32px;background:var(--color-white);color:var(--color-dark);text-align:center;box-shadow:0 1px 2px rgba(18,18,18,.04),0 24px 48px -32px rgba(18,18,18,.18);font-family:"Inter",-apple-system,system-ui,"Segoe UI",Roboto,sans-serif}
.dlc__live{display:flex;flex-direction:column;align-items:stretch;max-width:560px;margin:0 auto}

/* The deck: a 16:9 cover with two slides stacked behind it, peeking out at the top */
.dlc__deck{position:relative;width:100%;aspect-ratio:16/9;margin:30px 0 24px}
.dlc__slide{position:absolute;inset:0;border-radius:16px;box-shadow:0 10px 30px -14px rgba(18,18,18,.35)}
.dlc__slide--back{transform:translateY(-36px) scale(.88);background:linear-gradient(135deg,#B9D6F3,#E3EEF9)}
.dlc__slide--mid{transform:translateY(-18px) scale(.94);background:linear-gradient(135deg,#5A9EE0,#A9CDEF)}
.dlc__slide{overflow:hidden}
.dlc__slide img{display:block;width:100%;height:100%;object-fit:cover}
.dlc__cover{background:var(--color-light)}

.dlc__title{margin:0;font-family:"Manrope","Inter",sans-serif;font-size:26px;line-height:32px;font-weight:800;letter-spacing:-.015em;text-wrap:balance}
.dlc__meta{margin:6px 0 0;font-size:15px;line-height:22px;color:var(--color-secondary)}
.dlc__meta b{font-weight:600;color:var(--color-dark)}

/* Formats: one pill track, the chosen format lifts to white */
.dlc__formats{display:flex;gap:4px;width:100%;margin:28px 0 0;padding:4px;border-radius:100px;background:var(--color-light)}
.dlc__fmt{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 8px;border:0;border-radius:100px;background:transparent;font:inherit;font-size:15px;font-weight:500;line-height:1;color:var(--color-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;transition:background .2s cubic-bezier(.2,.7,.2,1),color .2s cubic-bezier(.2,.7,.2,1),box-shadow .2s cubic-bezier(.2,.7,.2,1)}
.dlc__fmt:hover{color:var(--color-dark)}
.dlc__fmt[aria-pressed="true"],.dlc__fmt--got{background:var(--color-white);color:var(--color-dark);font-weight:600;box-shadow:0 1px 2px rgba(18,18,18,.08),0 4px 12px -6px rgba(18,18,18,.12)}
.dlc__fmt--got{color:var(--color-success)}
.dlc__fmt:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
.dlc__fmt-icon{flex:none;width:20px;height:20px;border-radius:5px;object-fit:contain}
/* one format alone: a flat grey pill that states it, nothing in it to press */
.dlc__formats--only{align-items:center;justify-content:center;gap:8px;height:52px;font-size:15px;font-weight:500;color:var(--color-secondary)}
.dlc__formats--only .dlc__fmt-icon{margin-left:4px}

/* The one decision */
.dlc__action{margin-top:28px}
.dlc__lead{margin:0 0 14px;font-size:15px;line-height:22px;color:var(--color-secondary);text-wrap:balance}
.dlc__lead b{color:var(--color-dark);font-weight:600}
.dlc__btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;height:56px;padding:0 28px;border:0;border-radius:28px;background:var(--color-primary);color:var(--color-white);font:inherit;font-size:17px;font-weight:600;line-height:1;white-space:nowrap;text-decoration:none;cursor:pointer;transition:background .18s,transform .18s cubic-bezier(.2,.7,.2,1)}
.dlc__btn:hover{background:var(--color-primary-dark);color:var(--color-white);text-decoration:none}
.dlc__btn:active{transform:scale(.985)}
.dlc__btn:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
.dlc__btn .hgi{font-size:22px;line-height:1}
/* a charged button that went once, main.js keeps the second click, see download-charged */
.dlc__btn[aria-disabled="true"]{opacity:.6;cursor:default}
.dlc__sub{margin:12px 0 0;font-size:14px;line-height:20px;color:#767676;text-wrap:balance}
.dlc__sub a{color:var(--color-primary-dark);font-weight:500;text-decoration:none}
.dlc__sub a:hover{text-decoration:underline}
.dlc__danger{color:var(--color-danger);font-weight:600}
/* every link to the credits tab in the card: bold, underlined, blue */
/* main.css takes the underline off every link with !important, so it comes back the same way */
.dlc .dlc__credits{color:var(--color-primary);font-weight:700;text-decoration:underline !important;text-underline-offset:2px}
.dlc .dlc__credits:hover{color:var(--color-primary-dark)}

/* A kit: the files of the chosen format, one blue button each */
.dlc__files{display:flex;flex-direction:column;gap:10px}

/* Allowance: one quiet line */
.dlc__meter{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:22px;padding-top:20px;border-top:1px solid var(--color-gray-light);font-size:14px;line-height:20px;color:var(--color-secondary)}
.dlc__meter b{color:var(--color-dark);font-weight:600;white-space:nowrap}
.dlc__meter a{color:var(--color-primary-dark);font-weight:500;text-decoration:none;white-space:nowrap}
.dlc__meter a:hover{text-decoration:underline}
.dlc__meter--text{text-align:center;color:#767676}
.dlc__meter--text a{white-space:normal}

/* Done: the download started, every other format is free now */
.dlc__done{text-align:center}
.dlc__check{display:grid;place-items:center;width:56px;height:56px;margin:0 auto 14px;border-radius:50%;background:var(--color-success-lightest);color:var(--color-success)}
.dlc__done-title{margin:0;font-family:"Manrope","Inter",sans-serif;font-size:22px;line-height:28px;font-weight:800;letter-spacing:-.015em;text-wrap:balance;overflow-wrap:anywhere}
.dlc__done-sub{margin:6px 0 0;font-size:15px;line-height:22px;color:var(--color-secondary)}
.dlc__done-formats{margin-top:20px}
.dlc__done-more{margin-top:18px}

@media (max-width:1000px){ .dlc__fmt{font-size:14px;gap:6px} }

@media (max-width:560px){
  .dlc-heading{font-size:30px}
  .dlc{padding:24px 20px;border-radius:24px}
  .dlc__deck{margin-top:18px}
  .dlc__title{font-size:22px;line-height:28px}
  /* stacked: the pills keep their height, a flex basis of zero would fold them in a column */
  .dlc__formats{flex-direction:column;border-radius:24px}
  .dlc__fmt{flex:0 0 auto;width:100%}
  .dlc__btn{white-space:normal;height:auto;min-height:56px;padding:12px 20px;line-height:1.3}
  .dlc__meter{flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){ .dlc *{transition:none!important} }


/* The download dialog (common/includes/downloadables/downloadModal): the sheet of the design, a 28px card over the page
   blurred white, the X as a grey disc, the offer as a quiet grey block with the yellow button. Opened by download-card.js */
.dlm{position:fixed;inset:0;z-index:999999;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(255,255,255,.75);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity .25s cubic-bezier(.2,.7,.2,1)}
.dlm[hidden]{display:none}
.dlm--open{opacity:1}
.dlm__card{position:relative;width:min(520px,100%);max-height:calc(100vh - 32px);overflow-y:auto;padding:32px;border-radius:28px;background:var(--color-white);color:var(--color-dark);text-align:center;box-shadow:0 2px 6px rgba(18,18,18,.06),0 32px 64px -24px rgba(18,18,18,.25);font-family:"Inter",-apple-system,system-ui,"Segoe UI",Roboto,sans-serif;transform:translateY(12px);transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.dlm--open .dlm__card{transform:none}
.dlm__card:focus{outline:none}
.dlm__close{position:absolute;top:14px;right:14px;display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:var(--color-light);color:var(--color-dark);cursor:pointer}
.dlm__close:hover{background:#ECEDF1}
.dlm__close:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
.dlm__illo{display:block;width:124px;height:auto;margin:0 auto 20px}
.dlm__title{margin:0;padding:0 24px;font-family:"Manrope","Inter",sans-serif;font-size:22px;line-height:30px;font-weight:800;letter-spacing:-.015em;text-wrap:balance}
.dlm__name{display:block;margin-top:4px;color:var(--color-primary-dark)}
.dlm__sub{margin:14px 0 0;font-size:15px;line-height:22px;color:var(--color-secondary);text-wrap:balance}
.dlm__sub--tight{margin-top:16px}
.dlm__sub b{color:var(--color-dark);font-weight:600}
/* the sign-up: Google's own button, "or", the work email and the blue button, as on the design */
.dlm__form{margin-top:28px}
/* the ghost pill of the design around the landing pages' Google button */
.dlm__google .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;height:52px;padding:0 28px;border:0;border-radius:28px;background:var(--color-light);color:var(--color-dark);font-size:16px;font-weight:600;line-height:1;white-space:nowrap}
.dlm__google .btn:hover{background:#ECEDF1;color:var(--color-dark)}
.dlm__google .btn svg{flex:none;width:22px;height:22px}
.dlm__or{display:flex;align-items:center;gap:12px;margin:18px 0 12px;font-size:13px;color:#767676}
.dlm__or::before,.dlm__or::after{content:"";flex:1;height:1px;background:var(--color-gray-light)}
.dlm__input{display:block;width:100%;height:52px;padding:0 22px;border:1.5px solid var(--color-gray-light);border-radius:100px;background:var(--color-white);font:inherit;font-size:16px;color:var(--color-dark);-webkit-appearance:none;appearance:none}
.dlm__input::placeholder{color:#767676}
.dlm__input:focus{border-color:var(--color-primary);outline:0}
.dlm__input.is-invalid{border-color:var(--color-danger)}
.dlm__btn.dlm__btn--blue{margin-top:10px;background:var(--color-primary);color:var(--color-white)}
.dlm__btn.dlm__btn--blue:hover{background:var(--color-primary-dark);color:var(--color-white)}
/* the reassurances of the credits face */
.dlm__how{list-style:none;margin:20px 0 0;padding:18px 0 0;border-top:1px solid var(--color-gray-light);display:flex;flex-direction:column;gap:10px;text-align:left}
.dlm__how li{display:flex;gap:10px;font-size:14.5px;line-height:21px;color:var(--color-secondary)}
.dlm__how li b{color:var(--color-dark);font-weight:600}
.dlm__how svg{flex:none;width:18px;height:18px;margin-top:1.5px;color:var(--color-success)}
.dlm__how + .dlm__btn{margin-top:20px}
.dlm__foot{margin:16px 0 0;font-size:13px;line-height:19px;color:#767676}
.dlm__foot a{color:var(--color-primary-dark);font-weight:500;text-decoration:none}
.dlm__foot a:hover{text-decoration:underline}
/* the offer: price, one button, two reassurances, one quiet block */
.dlm__offer{margin-top:28px;padding:24px;border-radius:24px;background:var(--color-light)}
.dlm__price{display:flex;align-items:baseline;justify-content:center;gap:6px;margin:0;font-size:15px;color:var(--color-secondary)}
.dlm__from{font-size:14px;font-weight:500}
.dlm__price b{font-family:"Manrope","Inter",sans-serif;font-size:40px;line-height:44px;font-weight:800;letter-spacing:-.03em;color:var(--color-dark)}
.dlm__btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;height:52px;margin-top:16px;padding:0 28px;border:0;border-radius:28px;background:#FFA000;color:var(--color-dark);font:inherit;font-size:16px;font-weight:600;line-height:1;white-space:nowrap;text-decoration:none;cursor:pointer;transition:background .18s,transform .18s cubic-bezier(.2,.7,.2,1)}
.dlm__btn:hover{background:#F39600;color:var(--color-dark);text-decoration:none}
.dlm__btn:active{transform:scale(.985)}
.dlm__btn:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
.dlm__btn .hgi{font-size:20px;line-height:1}
.dlm__offer .dlm__btn:first-child{margin-top:0}
.dlm__offer-foot{margin:14px 0 0;font-size:13px;line-height:18px;color:#767676}
/* The page behind stays put while the dialog is up */
html.dlm-lock{overflow:hidden}

@media (max-width:560px){
  .dlm__card{padding:28px 20px}
  .dlm__title{padding:0 12px;font-size:20px;line-height:26px}
  .dlm__btn{white-space:normal;height:auto;min-height:52px;padding:12px 20px;line-height:1.3}
}