/* PuppLit v2 sections, shared by every page: the homepage's statement, work, rows, clients, plans and call, plus the
   blocks the inner pages are built with (v-*). */

/* ---------- the statement ---------- */
.say { background: var(--paper); padding: 10vh var(--gutter) 18vh; }
.say-lines { font-family: var(--display); font-weight: 800; font-size: 14.5vw; line-height: .92; letter-spacing: -.01em; }
.say-lines .ln { display: block; overflow: hidden; padding-bottom: .04em; }
.say-lines .ln > span { display: block; will-change: transform; }
.say-note { margin-top: 7vh; max-width: 40ch; font-size: 19px; color: var(--slate); }
@media (min-width: 1024px) {
  .say { padding: 12vh var(--gutter) 22vh; }
  .say-lines { font-size: 9.4vw; }
  .say-lines .ln:nth-child(even) { padding-left: 14vw; }
  .say-note { margin-left: 14vw; font-size: 21px; }
}

/* ---------- work: stacked full screens ---------- */
.work { background: var(--night); color: var(--paper); }
.work-head { padding: 18vh var(--gutter) 10vh; }
.work-head h2 { font-family: var(--display); font-weight: 800; font-size: 13vw; line-height: .92; max-width: 11ch; }
.work-head p { margin-top: 22px; max-width: 44ch; color: #c9c3e6; font-size: 18px; }
.case { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--case-bg, #000); }
.case-media { position: absolute; inset: 0; }
.case-media video, .case-media img { width: 100%; height: 100%; object-fit: cover; }
.case::after { content: ""; position: absolute; inset: 28% 0 0; background: linear-gradient(to bottom, rgba(10, 6, 24, 0), rgba(10, 6, 24, .72) 45%, rgba(10, 6, 24, .94)); pointer-events: none; }
.case-copy { position: absolute; z-index: 1; left: var(--gutter); right: var(--gutter); bottom: 6vh; }
.case-copy h3 { font-family: var(--display); font-weight: 800; font-size: 15vw; line-height: .88; letter-spacing: -.005em; }
.case-place { margin-top: 10px; font-weight: 700; color: var(--bulb); }
.case-copy p + p { margin-top: 6px; max-width: 46ch; color: #e6e2f6; }
.case-copy .link { display: inline-block; margin-top: 14px; }
.case-hook .case-media video { object-position: 50% 30%; }
@media (min-width: 1024px) {
  .work-head { display: grid; grid-template-columns: 1.3fr 1fr; gap: 4vw; align-items: end; padding: 22vh var(--gutter) 14vh; }
  .work-head h2 { font-size: 8.6vw; }
  .case::after { inset: 40% 0 0; background: linear-gradient(to bottom, rgba(10, 6, 24, 0), rgba(10, 6, 24, .88)); }
  .case-copy { bottom: 8vh; right: auto; width: min(76vw, 1180px); }
  .case-copy h3 { font-size: 6.6vw; }
  .case-copy p + p { font-size: 19px; }
  /* a portrait screen stands on the right, the words on the left */
  .case-hook .case-media { left: 50%; }
  .case-hook .case-media video { object-fit: contain; object-position: 50% 50%; }
  .case-hook::after { inset: 0 50% 0 0; background: none; }
  .case-hook .case-copy { width: 42vw; bottom: auto; top: 50%; transform: translateY(-50%); }
}

/* ---------- where we help ---------- */
.help { background: var(--paper); padding: 18vh var(--gutter) 14vh; }
.help h2 { font-family: var(--display); font-weight: 800; font-size: 12vw; line-height: .92; max-width: 12ch; margin-bottom: 7vh; }
.help-list { border-top: 2px solid var(--night); }
.help-list > li { border-bottom: 2px solid var(--night); }
.help-row { width: 100%; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 16px; padding: 20px 0; text-align: left; }
.help-name { font-family: var(--display); font-weight: 800; font-size: 11vw; line-height: .95; }
.help-short { grid-column: 1; color: var(--slate); font-size: 16px; }
.help-plus { grid-column: 2; grid-row: 1 / span 2; width: 44px; height: 44px; border-radius: 50%; background: var(--chalk); position: relative; transition: background-color .2s ease, transform .3s ease; }
.help-plus::before, .help-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 2px; margin: -1px 0 0 -8px; background: var(--night); }
.help-plus::after { transform: rotate(90deg); transition: transform .3s ease; }
.help-row[aria-expanded="true"] .help-plus { background: var(--bulb); }
.help-row[aria-expanded="true"] .help-plus::after { transform: rotate(0deg); }
.help-row:hover .help-name { color: var(--violet); }
.help-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s ease; }
.help-more > div { overflow: hidden; }
.help-more p { max-width: 52ch; font-size: 18px; padding-top: 2px; }
.help-more .link { display: inline-block; margin: 12px 0 26px; }
.help-row[aria-expanded="true"] + .help-more { grid-template-rows: 1fr; }
@media (min-width: 1024px) {
  .help { display: grid; grid-template-columns: 1fr 1.5fr; gap: 5vw; align-items: start; }
  .help h2 { font-size: 6.4vw; position: sticky; top: calc(var(--bar-h) + 6vh); }
  .help-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; padding: 24px 0; }
  .help-name { font-size: 4.6vw; }
  .help-short { grid-column: 2; grid-row: 1; font-size: 17px; }
  .help-plus { grid-column: 3; grid-row: 1; }
}

/* ---------- clients ---------- */
.clients { background: var(--chalk); padding: 16vh var(--gutter); }
.clients h2 { font-size: 17px; font-weight: 700; color: var(--slate); margin-bottom: 4vh; max-width: 40ch; }
.client-names { font-family: var(--display); font-weight: 800; font-size: 10.5vw; line-height: 1.02; }
.client-names li { display: inline; }
.client-names a { text-decoration: none; }
.client-names a:hover { color: var(--violet); }
.client-names li:not(:last-child)::after { content: "\00a0/"; color: var(--haze); }
.platforms-h { margin-top: 10vh; font-size: 15px; font-weight: 700; color: var(--slate); }
.platforms { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 22px 34px; }
.platforms img { height: 26px; width: auto; }
.platforms .pf-word { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: 19px; color: #6e6a80; }
.platforms .pf-word svg { width: 22px; height: 22px; }
@media (min-width: 1024px) { .client-names { font-size: 5.6vw; } .clients h2 { font-size: 19px; } .platforms { gap: 26px 52px; } .platforms img { height: 30px; } }

/* ---------- plans ---------- */
.plans { background: var(--paper); padding: 16vh var(--gutter); }
.plans h2 { font-family: var(--display); font-weight: 800; font-size: 12vw; line-height: .92; max-width: 13ch; }
.plans-intro { margin-top: 18px; max-width: 46ch; color: var(--slate); }
.plan-list { margin-top: 7vh; border-top: 2px solid var(--night); }
.plan-list .plan { display: grid; gap: 6px 24px; padding: 26px 0; border-bottom: 2px solid var(--night); }
.plan-list .plan h3 { font-family: var(--display); font-weight: 800; font-size: 44px; line-height: 1; }
.plan-list .plan-price { font-family: var(--display); font-weight: 700; font-size: 34px; line-height: 1; }
.plan-list .plan-price small { font-family: var(--text); font-size: 15px; font-weight: 600; color: var(--slate); }
.plan-list .plan p { color: var(--slate); max-width: 40ch; }
.plan-list .plan .btn { justify-self: start; margin-top: 10px; }
.plan-list .plan.featured { background: var(--night); color: var(--paper); margin: 0 calc(var(--gutter) * -1); padding: 26px var(--gutter); }
.plan-list .plan.featured p, .plan-list .plan.featured .plan-price small { color: #c9c3e6; }
.plans-more { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 14px 28px; }
@media (min-width: 1024px) {
  .plans h2 { font-size: 6.4vw; }
  .plan-list .plan { grid-template-columns: 1.1fr 1fr 1.6fr auto; align-items: center; padding: 30px 0; }
  .plan-list .plan h3 { font-size: 4vw; }
  .plan-list .plan-price { font-size: 3vw; }
  .plan-list .plan .btn { margin-top: 0; justify-self: end; }
}

/* ---------- the call ---------- */
.call { background: var(--violet); color: var(--paper); padding: 18vh var(--gutter) 16vh; position: relative; overflow: hidden; }
.call h2 { font-family: var(--display); font-weight: 800; font-size: 14vw; line-height: .9; max-width: 11ch; }
.call > p { margin-top: 24px; max-width: 44ch; font-size: 19px; color: #ece8ff; }
.call .btn { margin-top: 34px; min-height: 58px; padding: 0 30px; font-size: 18px; }
.call-steps { margin-top: 9vh; display: grid; gap: 18px; counter-reset: s; max-width: 980px; }
.call-steps li { counter-increment: s; display: grid; grid-template-columns: auto 1fr; gap: 0 14px; }
.call-steps li::before { content: counter(s); grid-row: span 2; font-family: var(--display); font-weight: 800; font-size: 46px; line-height: .9; color: var(--bulb); }
.call-steps b { font-size: 19px; }
.call-steps span { color: #ece8ff; }
.call-note { margin-top: 6vh; font-weight: 600; }
@media (min-width: 1024px) {
  .call h2 { font-size: 8.4vw; }
  .call-steps { grid-template-columns: repeat(3, 1fr); gap: 3vw; }
}

@media (prefers-reduced-motion: reduce) { .case { position: relative; } .say-lines .ln > span { transform: none !important; } }

/* ---------- inner-page blocks ---------- */
.v-sec { padding: 14vh var(--gutter); background: var(--paper); color: var(--night); }
.v-sec.v-chalk { background: var(--chalk); }
.v-sec.v-night { background: var(--night); color: var(--paper); }
.v-h { font-family: var(--display); font-weight: 800; font-size: 12vw; line-height: .92; letter-spacing: -.005em; max-width: 15ch; margin: 0; }
.v-lead { margin-top: 18px; max-width: 48ch; font-size: 18px; line-height: 1.5; color: var(--slate); }
.v-night .v-lead { color: #c9c3e6; }
.v-actions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; }
@media (min-width: 1024px) { .v-h { font-size: 6.2vw; } .v-lead { font-size: 20px; } }

/* rows: a title and its words, ruled like the homepage lists */
.v-rows { margin-top: 7vh; border-top: 2px solid currentColor; }
.v-row { padding: 22px 0 26px; border-bottom: 2px solid currentColor; display: grid; gap: 8px 4vw; }
.v-row h3 { font-family: var(--display); font-weight: 800; font-size: 9vw; line-height: .95; margin: 0; }
.v-row p { margin: 0; color: var(--slate); max-width: 54ch; font-size: 17px; line-height: 1.5; }
.v-night .v-row p { color: #c9c3e6; }
.v-row .link { margin-top: 10px; display: inline-block; }
@media (min-width: 1024px) {
  .v-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: baseline; padding: 28px 0 32px; }
  .v-row h3 { font-size: 3vw; }
  .v-row p { font-size: 18px; }
}

/* big numbers */
.v-stats { margin-top: 7vh; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 20px; }
.v-stat b { display: block; font-family: var(--display); font-weight: 800; font-size: 15vw; line-height: .9; color: var(--violet); }
.v-night .v-stat b { color: var(--bulb); }
.v-stat span { display: block; margin-top: 8px; color: var(--slate); font-size: 15px; max-width: 24ch; }
.v-night .v-stat span { color: #c9c3e6; }
@media (min-width: 1024px) { .v-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } .v-stat b { font-size: 5.4vw; } .v-stat span { font-size: 17px; } }

/* steps, only for real sequences */
.v-steps { margin: 7vh 0 0; padding: 0; list-style: none; display: grid; gap: 28px; counter-reset: st; }
.v-steps li { counter-increment: st; display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; }
.v-steps li::before { content: counter(st); grid-row: span 2; font-family: var(--display); font-weight: 800; font-size: 58px; line-height: .85; color: var(--violet); }
.v-night .v-steps li::before { color: var(--bulb); }
.v-steps b { font-size: 20px; }
.v-steps span { color: var(--slate); line-height: 1.5; }
.v-night .v-steps span { color: #c9c3e6; }
@media (min-width: 1024px) { .v-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3vw; } }

/* links to other pages: name, what it is, price */
.v-links { margin-top: 7vh; border-top: 2px solid var(--night); }
.v-links a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; padding: 22px 0; border-bottom: 2px solid var(--night); text-decoration: none; color: var(--night); }
.v-links strong { font-family: var(--display); font-weight: 800; font-size: 9vw; line-height: .95; }
.v-links .d { grid-column: 1; color: var(--slate); font-size: 16px; line-height: 1.45; }
.v-links .pr { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-weight: 700; white-space: nowrap; }
.v-links a:hover strong { color: var(--violet); }
@media (min-width: 1024px) {
  .v-links a { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto; align-items: center; padding: 26px 0; }
  .v-links strong { font-size: 3vw; }
  .v-links .d { grid-column: 2; grid-row: 1; font-size: 17px; }
  .v-links .pr { grid-column: 3; grid-row: 1; }
}

/* everything included, and the price block */
.v-buy { margin-top: 7vh; display: grid; }
.v-checks { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.v-checks li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-size: 17px; line-height: 1.45; }
.v-checks li::before { content: ""; width: 12px; height: 7px; margin: 6px 0 0 4px; border-left: 3px solid var(--violet); border-bottom: 3px solid var(--violet); transform: rotate(-45deg); }
.v-price { background: var(--night); color: var(--paper); padding: 30px var(--gutter); margin: 36px calc(var(--gutter) * -1) 0; }
.v-price .nm { font-weight: 700; color: #c9c3e6; }
.v-price .big { font-family: var(--display); font-weight: 800; font-size: 20vw; line-height: .9; margin-top: 6px; }
.v-price .big small { font-family: var(--text); font-size: 17px; font-weight: 600; color: #c9c3e6; }
.v-price p { color: #c9c3e6; margin: 10px 0 0; }
.v-price .btn { margin-top: 18px; width: 100%; }
.v-price .btn + .btn { margin-top: 10px; }
.btn-line-light { color: var(--paper); box-shadow: inset 0 0 0 1.5px rgba(248, 247, 252, .7); }
.btn-line-light:hover { background: rgba(248, 247, 252, .1); }
@media (min-width: 1024px) {
  .v-buy { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 5vw; align-items: start; }
  .v-checks { grid-template-columns: 1fr 1fr; gap: 18px 30px; }
  .v-price { margin: 0; padding: 36px; border-radius: 8px; }
  .v-price .big { font-size: 6vw; }
}

/* questions: the homepage's opening rows with the question in the text face */
.help-q .help-name { font-family: var(--text); font-weight: 700; font-size: 19px; line-height: 1.3; }
.help-q .help-more p { color: var(--slate); }
@media (min-width: 1024px) { .help-q .help-row { grid-template-columns: minmax(0, 1fr) auto; } .help-q .help-name { font-size: 21px; } .help-q .help-plus { grid-column: 2; } }

/* the clients page: one ruled row per client */
.v-clients { margin-top: 7vh; border-top: 2px solid var(--night); }
.v-client { display: grid; gap: 14px 4vw; padding: 30px 0 34px; border-bottom: 2px solid var(--night); scroll-margin-top: calc(var(--bar-h) + 16px); }
.v-client .logo-tile { width: 128px; height: 96px; background: #fff; border-radius: 8px; display: grid; place-items: center; padding: 10px; box-shadow: inset 0 0 0 1px rgba(21, 12, 46, .1); }
.v-client .logo-tile.dark { background: #111; }
.v-client .logo-tile img { max-width: 100%; max-height: 74px; width: auto; height: auto; object-fit: contain; }
.v-client .logo-tile .word { font-family: var(--display); font-weight: 800; font-size: 22px; line-height: 1; text-align: center; }
.v-client h3 { font-family: var(--display); font-weight: 800; font-size: 10vw; line-height: .92; margin: 0; }
.v-client .where { color: var(--violet); font-weight: 700; margin: 8px 0 0; }
.v-client p { color: var(--slate); max-width: 56ch; margin: 0; line-height: 1.5; }
.v-client .tags { margin-top: 12px; font-size: 14px; font-weight: 700; color: var(--night); }
.v-client .link { display: inline-block; margin-top: 12px; }
@media (min-width: 1024px) {
  .v-client { grid-template-columns: 140px minmax(0, 1fr) minmax(0, 1.25fr); align-items: start; }
  .v-client h3 { font-size: 3.2vw; }
}

/* split: heading on one side, words or a picture on the other */
.v-split { display: grid; gap: 6vh 5vw; }
.v-split img { width: 100%; height: auto; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(21, 12, 46, .1); }
@media (min-width: 1024px) { .v-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; } }

/* inner pages: the homepage sections sit full width under the old fixed containers */
.v-sec .help-list { margin-top: 7vh; }
/* the outlined buttons keep their line on the old pages too (an older rule clears every button's shadow) */
.btn.btn-line { box-shadow: inset 0 0 0 1.5px currentColor; }
.btn.btn-line-light { box-shadow: inset 0 0 0 1.5px rgba(248, 247, 252, .7); color: var(--paper); }
.call .v-actions { margin-top: 34px; }
.call .v-actions .btn { margin-top: 0; }

/* plans with a monthly / annual switch (pricing and the industry pages) */
.v-toggle { margin-top: 5vh; display: inline-flex; gap: 2px; background: var(--chalk); border-radius: 999px; padding: 4px; }
.v-toggle button { min-height: 42px; padding: 0 18px; border-radius: 999px; font-weight: 700; font-size: 15px; color: var(--night); }
.v-toggle button.active { background: var(--night); color: var(--paper); }
.v-toggle .save { margin-left: 6px; color: var(--violet); }
.v-toggle button.active .save { color: var(--bulb); }
.v-plans { margin-top: 5vh; display: grid; border-top: 2px solid var(--night); }
.v-plan { display: grid; gap: 10px; align-content: start; padding: 28px 0 34px; border-bottom: 2px solid var(--night); }
.v-plan .tag { justify-self: start; background: var(--bulb); color: var(--night); font-weight: 700; font-size: 13px; padding: 4px 10px; border-radius: 4px; }
.v-plan h3 { font-family: var(--display); font-weight: 800; font-size: 13vw; line-height: .9; margin: 0; }
.v-plan .for { color: var(--slate); margin: 0; }
.v-plan .price { font-family: var(--display); font-weight: 800; font-size: 16vw; line-height: .9; margin-top: 8px; }
.v-plan .price small { font-family: var(--text); font-size: 16px; font-weight: 600; color: var(--slate); }
.v-plan .setup { color: var(--slate); font-size: 15px; margin: 0; }
.v-plan .v-checks { margin-top: 10px; gap: 10px; }
.v-plan .v-checks li { font-size: 16px; }
.v-plan .v-checks li.dim { color: var(--slate); text-decoration: line-through; text-decoration-thickness: 1px; }
.v-plan .v-checks li.dim::before { border-color: #b8b3cc; }
.v-plan .v-checks .group { grid-template-columns: 1fr; font-weight: 700; font-size: 14px; color: var(--slate); margin-top: 6px; }
.v-plan .v-checks .group::before { display: none; }
.v-plan .btn { justify-self: start; margin-top: 16px; }
.v-plan.featured { background: var(--night); color: var(--paper); margin: 0 calc(var(--gutter) * -1); padding: 30px var(--gutter) 36px; border-bottom-color: var(--night); }
.v-plan.featured .for, .v-plan.featured .setup, .v-plan.featured .price small, .v-plan.featured .v-checks .group { color: #c9c3e6; }
.v-plan.featured .v-checks li::before { border-color: var(--bulb); }
.v-plan.featured .v-checks li.dim { color: #9d97bd; }
@media (min-width: 1024px) {
  .v-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 2.4vw; border-top: 0; align-items: stretch; }
  .v-plan { border-top: 2px solid var(--night); border-bottom: 0; padding: 28px 0 0; }
  .v-plan.featured { margin: 0; padding: 28px 26px 30px; border-radius: 0 0 8px 8px; }
  .v-plan h3 { font-size: 3.4vw; }
  .v-plan .price { font-size: 4.6vw; }
  .v-plan .btn { justify-self: stretch; }
}