/* "For the grown-ups" (see grownups-scroll.js) */
.sec-calm main.illo > section.grownups.gs { overflow: visible !important; padding-block: 0 !important; }
.sec-calm section.grownups.gs .obj, .gs .spark { display: none !important; }
.gs .wrap { width: var(--colw) !important; max-width: none !important; padding-inline: 0 !important; height: 100%; }
.gs .gu { height: 100%; max-width: none !important; display: block !important; }
.gs-pin { position: sticky; top: 0; height: 100vh; display: grid; grid-template-columns: 1fr 1fr; gap: 88px; align-items: center; padding-top: 72px; box-sizing: border-box; }
.gs-stage { position: relative; height: min(76vh, 700px); border-radius: 32px; background: radial-gradient(90% 80% at 50% 30%, #E4EFEC 0%, #D3E6E1 100%); display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.gs-phone { width: min(300px, 62%); margin-bottom: -60px; background: #22272E; border-radius: 46px; padding: 11px; box-shadow: 0 40px 70px -34px rgba(20,50,50,.55); }
.gs-screen { position: relative; aspect-ratio: 780 / 1688; border-radius: 36px; overflow: hidden; background: #E9E0D0; }
.gs-screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; transition: opacity .5s; }
.gs-screen img.on { opacity: 1; }
.gs-stk { position: absolute; width: 92px; right: 9%; top: 11%; transform: rotate(10deg); filter: drop-shadow(0 10px 14px rgba(30,40,40,.2)); }
.gs-side .head { text-align: left !important; align-items: flex-start !important; justify-items: start !important; margin: 0 0 28px !important; }
.gs-side .head h2, .gs-side .head p { text-align: left !important; margin-left: 0 !important; }
.gs-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(31,42,43,.12); }
.gs-step { position: relative; display: grid; grid-template-columns: 36px 44px 1fr; column-gap: 14px; align-items: center; padding: 16px 0; border-bottom: 1px solid rgba(31,42,43,.12); cursor: pointer; }
.gs-n { font: 500 12px/1 "Outfit", sans-serif; letter-spacing: .14em; color: #9AA5A5; }
.gs-step .ico.ill, .gs-step .ico.ill svg { width: 44px !important; height: 44px !important; margin: 0 !important; }
.gs-step h3 { font: 400 22px/1.2 p22-mackinac-pro, "Fraunces", Georgia, serif !important; color: #8E9A9A !important; margin: 0 !important; transition: color .3s; }
.gs-step p { font-size: 16px !important; line-height: 1.5 !important; color: #4A5656 !important; margin: 0 !important; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .5s, opacity .4s, margin .4s; }
.gs-step > div { grid-column: 3; }
.gs-step.on .gs-n { color: var(--rust); }
.gs-step.on h3 { color: var(--teal) !important; }
.gs-step.on p { max-height: 120px; opacity: 1; margin-top: 6px !important; }
.gs-step .ico.ill { filter: grayscale(.7) opacity(.6); transition: filter .3s; }
.gs-step.on .ico.ill { filter: none; }
.gs-bar { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--rust); display: none; }
.gs-step.on .gs-bar { display: block; }
.gs-step .more { color: var(--rust); font-weight: 600; }
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  .sec-calm main.illo > section.grownups.gs { padding-block: 80px !important; height: auto !important; }
  .gs-pin { position: static; height: auto; padding-top: 0; }
  .gs-bar { display: none !important; }
}
@media (max-width: 900px) {
  .gs-pin { grid-template-columns: 1fr; gap: 28px; }
  .gs-stage { height: 420px; order: 2; } .gs-phone { width: 200px; margin-bottom: -40px; border-radius: 32px; padding: 8px; } .gs-screen { border-radius: 25px; }
  .gs-side { order: 1; }
}
.gs-stk { right: 7%; top: 7%; width: 84px; }

/* ---------- layouts to compare: ?gu=1..4 ---------- */
.gs-big, .gs-seg { display: none; }
.gs-big.in > * { animation: gbIn .5s cubic-bezier(.2,.7,.2,1) both; }
.gs-big.in > *:nth-child(2) { animation-delay: .04s; } .gs-big.in > *:nth-child(3) { animation-delay: .08s; } .gs-big.in > *:nth-child(4) { animation-delay: .12s; }
@keyframes gbIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.gs-big h3 { font: 400 40px/1.1 p22-mackinac-pro, "Fraunces", Georgia, serif; color: var(--teal); margin: 0; }
.gs-big p { font-size: 19px; line-height: 1.55; color: #4A5656; margin: 0; max-width: 26em; }
.gs-big p .more { color: var(--rust); font-weight: 600; }
.gb-n { font: 500 13px/1 "Outfit", sans-serif; letter-spacing: .14em; color: var(--rust); }
.gb-n em { font-style: normal; color: #9AA5A5; }
.gb-ico svg { width: 76px; height: 76px; display: block; }
.gb-next { font: 500 14px/1 "Outfit", sans-serif; color: #8E9A9A; }
.gs-seg span { position: relative; flex: 1; height: 3px; border-radius: 3px; background: rgba(31,42,43,.12); overflow: hidden; }
.gs-seg span i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--rust); }
.gs-seg span.done i { width: 100% !important; } .gs-seg span:not(.now):not(.done) i { width: 0 !important; }

/* 1. Spotlight: one point at a time, big, with a counter */
.gv-1 .gs-list { display: none; }
.gv-1 .gs-big { display: grid; gap: 16px; justify-items: start; min-height: 330px; align-content: start; padding-top: 8px; }
.gv-1 .gs-seg { display: flex; gap: 8px; margin: 0 0 32px; max-width: 420px; }

/* 2. Stories: segments on top, big point, the five titles as small chips below */
.gv-2 .gs-seg { display: flex; gap: 8px; margin: 0 0 36px; }
.gv-2 .gs-big { display: grid; gap: 14px; justify-items: start; min-height: 260px; align-content: start; }
.gv-2 .gs-big .gb-n, .gv-2 .gs-big .gb-next { display: none; }
.gv-2 .gs-big .gb-ico svg { width: 60px; height: 60px; }
.gv-2 .gs-list { display: flex; flex-wrap: wrap; gap: 8px; border: 0; margin-top: 28px; }
.gv-2 .gs-step { display: inline-flex; padding: 9px 14px; border: 1px solid rgba(31,42,43,.14); border-radius: 99px; gap: 0; }
.gv-2 .gs-step > :not(div), .gv-2 .gs-step p, .gv-2 .gs-step .ico { display: none !important; }
.gv-2 .gs-step h3 { font: 500 14px/1 "Outfit", sans-serif !important; color: #4A5656 !important; }
.gv-2 .gs-step.on { background: var(--teal); border-color: var(--teal); }
.gv-2 .gs-step.on h3 { color: #fff !important; }

/* 3. Around the phone: heading on top, the phone in the middle, the points on both sides */
.gv-3 .gs-pin { grid-template-columns: 1fr 360px 1fr; grid-template-rows: auto 1fr; gap: 0 56px; align-items: center; padding-top: 100px; }
.gv-3 .gs-side { display: contents; }
.gv-3 .gs-side .head { grid-column: 1 / -1; grid-row: 1; text-align: center !important; justify-items: center !important; align-items: center !important; margin: 0 0 24px !important; }
.gv-3 .gs-side .head h2, .gv-3 .gs-side .head p { text-align: center !important; margin-inline: auto !important; }
.gv-3 .gs-stage { grid-column: 2; grid-row: 2; height: min(62vh, 560px); }
.gv-3 .gs-stk { width: 64px; right: 4%; top: 5%; }
.gv-3 .gs-list { display: contents; }
.gv-3 .gs-step { grid-template-columns: 44px 1fr; border: 0; padding: 14px 0; }
.gv-3 .gs-n { display: none; }
.gv-3 .gs-step:nth-child(-n+2) { grid-column: 1; } .gv-3 .gs-step:nth-child(n+3) { grid-column: 3; }
.gv-3 .gs-step:nth-child(1) { grid-row: 2; align-self: start; margin-top: 12%; } .gv-3 .gs-step:nth-child(2) { grid-row: 2; align-self: end; margin-bottom: 18%; }
.gv-3 .gs-step:nth-child(3) { grid-row: 2; align-self: start; margin-top: 6%; } .gv-3 .gs-step:nth-child(4) { grid-row: 2; align-self: center; } .gv-3 .gs-step:nth-child(5) { grid-row: 2; align-self: end; margin-bottom: 10%; }
.gv-3 .gs-step:nth-child(-n+2) { text-align: right; grid-template-columns: 1fr 44px; } .gv-3 .gs-step:nth-child(-n+2) > div { grid-column: 1; grid-row: 1; } .gv-3 .gs-step:nth-child(-n+2) .ico { grid-column: 2; }
.gv-3 .gs-step:nth-child(-n+2) p { margin-left: auto !important; }
.gv-3 .gs-step > div { grid-column: 2; }
.gv-3 .gs-bar { display: none !important; }

/* 4. A card: the point in focus on a white card, a next line under it */
.gv-4 .gs-stage { background: #EDE3D3; }
.gv-4 .gs-list { display: none; }
.gv-4 .gs-seg { display: flex; gap: 6px; margin: 0 0 18px; max-width: 240px; }
.gv-4 .gs-big { display: grid; grid-template-columns: 76px 1fr; column-gap: 24px; row-gap: 10px; align-content: start; background: #fff; border-radius: 26px; padding: 34px 36px; box-shadow: 0 30px 60px -40px rgba(31,42,43,.35); min-height: 240px; }
.gv-4 .gs-big .gb-ico { grid-row: 1 / span 3; }
.gv-4 .gs-big .gb-next { grid-column: 2; margin-top: 10px; }
.gv-4 .gs-big h3 { font-size: 34px; }
@media (max-width: 900px) { .gv-1 .gs-list, .gv-4 .gs-list { display: block; } .gv-1 .gs-big, .gv-4 .gs-big, .gv-2 .gs-big, .gs-seg { display: none !important; } .gv-3 .gs-pin { display: grid; grid-template-columns: 1fr; } .gv-3 .gs-side, .gv-3 .gs-list { display: block; } }
.gv-3 .gs-pin { padding-top: 120px; padding-bottom: 40px; grid-template-rows: auto minmax(0, 1fr); }
.gv-3 .gs-stage { height: min(56vh, 500px); align-self: center; }
.gv-3 .gs-side .head { margin-bottom: 8px !important; }
.gv-3 .gs-side .head h2 { font-size: clamp(40px, 4.4vw, 64px) !important; }
.gv-3 .gs-side .head { justify-self: stretch; width: auto !important; max-width: none !important; display: grid !important; justify-items: center !important; }

/* ---------- chosen (default): Spotlight, heading centred above, words left, phone right ---------- */
.gv-final .gs-list { display: none; }
.gv-final .gs-pin { grid-template-columns: 1fr 1fr; grid-template-rows: auto minmax(0, 1fr); gap: 0 88px; padding-top: 110px; padding-bottom: 36px; align-items: center; }
.gv-final .gs-pin > .head { grid-column: 1 / -1; grid-row: 1; width: auto !important; max-width: none !important; display: grid !important; justify-items: center !important; text-align: center !important; margin: 0 0 32px !important; gap: 14px !important; }
.gv-final .gs-pin > .head h2, .gv-final .gs-pin > .head p { text-align: center !important; margin-inline: auto !important; }
.gv-final .gs-pin > .head h2 { font-size: clamp(40px, 4.4vw, 64px) !important; }
.gv-final .gs-side { grid-column: 1; grid-row: 2; }
.gv-final .gs-stage { grid-column: 2; grid-row: 2; height: min(58vh, 540px); align-self: center; }
.gv-final .gs-big { display: grid; gap: 16px; justify-items: start; min-height: 300px; align-content: start; }
.gv-final .gs-seg { display: flex; gap: 8px; margin: 0 0 32px; max-width: 420px; }
@media (max-width: 900px) {
  .gv-final .gs-pin { grid-template-columns: 1fr; padding-top: 0; }
  .gv-final .gs-side, .gv-final .gs-stage { grid-column: 1; grid-row: auto; }
  .gv-final .gs-list { display: block; } .gv-final .gs-big, .gv-final .gs-seg { display: none !important; }
}
/* the phone rises from the panel's bottom edge, with its top always showing */
.gv-final .gs-stage { height: min(60vh, 560px); }
.gv-final .gs-phone { width: auto; height: calc(100% + 30px); aspect-ratio: 324 / 698; margin-bottom: -70px; }
.gv-final .gs-screen { height: 100%; aspect-ratio: auto; }
/* the words fill the panel's height: progress on its top edge, the point on its bottom edge */
.gv-final .gs-pin { align-items: stretch; }
.gv-final .gs-side { align-self: center; height: min(60vh, 560px); display: flex; flex-direction: column; justify-content: space-between; max-width: 500px; }
.gv-final .gs-seg { margin: 0; max-width: none; width: 100%; padding-top: 2px; }
.gv-final .gs-big { min-height: 0; gap: 14px; }
.gv-final .gs-big .gb-ico svg { width: 64px; height: 64px; }
.gv-final .gs-big h3 { font-size: 44px; }
.gv-final .gs-big .gb-next { margin-top: 10px; padding-top: 18px; border-top: 1px solid rgba(31,42,43,.12); width: 100%; }
.gv-final .gs-stage { align-self: center; }
/* one big mint card holding the words, the progress and the phone */
.gv-final .gs-pin::before { content: ""; grid-column: 1 / -1; grid-row: 2; align-self: center; height: min(60vh, 560px); border-radius: 32px; background: radial-gradient(70% 90% at 75% 40%, #E4EFEC 0%, #D6E8E3 100%); z-index: 0; }
.gv-final .gs-pin { gap: 0 40px; }
.gv-final .gs-side { position: relative; z-index: 1; padding: 52px 0 48px 56px; box-sizing: border-box; max-width: 560px; }
.gv-final .gs-stage { position: relative; z-index: 1; background: none; border-radius: 0 32px 32px 0; }
.gv-final .gs-big .gb-next { border-top-color: rgba(31,42,43,.14); }
.gv-final .gs-seg span { background: rgba(31,42,43,.14); }
/* close-up: a bigger phone, cut by the card's bottom edge; more room on the left */
.gv-final .gs-stage { overflow: hidden; align-items: flex-start; }
.gv-final .gs-phone { height: auto; width: min(400px, 78%); aspect-ratio: 324 / 698; margin: 56px 0 0; border-radius: 56px; padding: 13px; }
.gv-final .gs-screen { border-radius: 44px; }
.gv-final .gs-side { padding: 72px 24px 64px 80px; max-width: 600px; }
/* a tablet instead of the phone: a close-up, cut by the card's right and bottom edges */
.gv-final .gs-stage { justify-content: flex-start; }
.gv-final .gs-phone { width: 128%; max-width: none; aspect-ratio: 1770 / 1230; height: auto; margin: 64px 0 0 8px; border-radius: 40px; padding: 16px; flex: none; }
.gv-final .gs-screen { aspect-ratio: auto; height: auto; border-radius: 26px; }
.gv-final .gs-screen { aspect-ratio: 1770 / 1230; }
.gv-final .gs-screen img { object-position: left top; }
.sec-calm section.grownups.gs { background: #fff !important; }
.gv-final .gs-phone { width: 118%; }
.gv-final .gs-phone { width: 142%; }
.gv-final .gs-phone { width: 112%; margin-top: 72px; }
/* a tablet standing upright: the app's notes fill its screen; its top lines up with the progress lines */
.gv-final .gs-stage { justify-content: center; }
.gv-final .gs-phone { width: min(440px, 80%); aspect-ratio: 1230 / 1770; margin: 72px 0 0; border-radius: 38px; padding: 14px; }
.gv-final .gs-screen { aspect-ratio: 1230 / 1770; border-radius: 26px; }
.gv-final .gs-screen img { object-position: center top; }

/* ---------- other ways to show the app: ?gs=1..4 ---------- */
[class*="ga-"] .gs-stage { align-items: center; justify-content: center; }
.ga-cards { position: relative; width: 84%; height: 82%; }
.ga-cards img { position: absolute; left: 50%; top: 50%; width: 100%; max-height: 100%; object-fit: contain; border-radius: 22px; box-shadow: 0 30px 60px -28px rgba(20,50,50,.45), 0 0 0 1px rgba(31,42,43,.05); opacity: 0; transform: translate(-50%, -46%) rotate(-2deg) scale(.97); transition: opacity .5s, transform .6s cubic-bezier(.2,.7,.2,1); }
.ga-cards img.on { opacity: 1; transform: translate(-50%, -50%) rotate(-1.5deg); }
/* 2: a deck, the next cards peeking behind */
.ga-2 .ga-cards img { opacity: 1; transform: translate(-50%, -50%) translate(26px, 22px) rotate(3deg) scale(.94); z-index: 1; }
.ga-2 .ga-cards img.on { transform: translate(-50%, -50%) rotate(-1.5deg); z-index: 3; }
.ga-2 .ga-cards img.on + img { z-index: 2; transform: translate(-50%, -50%) translate(14px, 12px) rotate(1deg) scale(.97); }
.ga-2 .ga-cards img.past { opacity: 0; transform: translate(-50%, -50%) translate(-60px, -30px) rotate(-8deg) scale(.95); }
/* 3: a real hand holding the tablet */
.ga-3 .gs-stage { overflow: hidden; border-radius: 0 32px 32px 0; }
.ga-photo { position: absolute; inset: 0; }
.ga-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 40% center; opacity: 0; transition: opacity .6s; }
.ga-photo img.on { opacity: 1; }
.ga-3 .gs-pin::before { background: #1F5E61 !important; }
.ga-3 .gs-big h3 { color: #FBF2E4 !important; } .ga-3 .gs-big p { color: rgba(251,242,228,.85) !important; } .ga-3 .gs-seg span { background: rgba(251,242,228,.2) !important; }
.ga-3 .gb-n em { color: rgba(251,242,228,.5); }
/* 4: the tablet softly behind, the card popping out of it */
.ga-pop { position: relative; width: 92%; height: 80%; }
.ga-tab { position: absolute; right: -14%; top: 4%; width: 112%; aspect-ratio: 1770 / 1230; background: #22272E; border-radius: 30px; padding: 12px; opacity: .55; filter: saturate(.7); }
.ga-tab img { position: absolute; inset: 12px; width: calc(100% - 24px); height: calc(100% - 24px); object-fit: cover; border-radius: 20px; opacity: 0; transition: opacity .5s; }
.ga-tab img.on { opacity: 1; }
.ga-pop .ga-cards { position: absolute; left: 0; top: 18%; width: 88%; height: 76%; }
.ga-pop .ga-cards img { transform: translate(-50%, -50%) scale(.96); }
.ga-pop .ga-cards img.on { transform: translate(-50%, -50%) rotate(0); }
/* cards: the app card's own rounded shape (transparent corners), one shadow that follows it */
.ga-cards img { width: auto !important; height: auto !important; max-width: 100%; max-height: 100%; border-radius: 0 !important; box-shadow: none !important; filter: drop-shadow(0 24px 36px rgba(20,50,50,.22)); }
/* 2: one card in front, two plain sheets of the same size behind it; the cards themselves swap */
.ga-2 .ga-cards img, .ga-2 .ga-cards img.past, .ga-2 .ga-cards img.on + img { opacity: 0; transform: translate(-50%, -48%) scale(.98); z-index: 2; }
.ga-2 .ga-cards img.on { opacity: 1; transform: translate(-50%, -50%); z-index: 3; }
.ga-sheet { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; transition: width .45s, height .45s; }
.ga-sheet::before, .ga-sheet::after { content: ""; position: absolute; inset: 0; background: #fff; border-radius: 26px; box-shadow: 0 18px 30px -18px rgba(20,50,50,.3); }
.ga-sheet::before { transform: translate(22px, 18px) rotate(3deg); opacity: .7; }
.ga-sheet::after { transform: translate(11px, 9px) rotate(1.5deg); opacity: .9; }
/* 5: the stack */
.ga-stack { position: relative; width: 82%; height: 84%; }
.ga-sc { position: absolute; left: 50%; top: 50%; width: 100%; aspect-ratio: 1068 / 940; max-height: 100%; background: #fff; border-radius: 26px; overflow: hidden; box-shadow: 0 26px 44px -26px rgba(20,50,50,.4), 0 0 0 1px rgba(31,42,43,.04); transition: transform .75s cubic-bezier(.5,0,.2,1), opacity .6s; will-change: transform; }
.ga-sc img { display: block; width: 100%; height: auto; }
@media (prefers-reduced-motion: reduce) { .ga-sc { transition: opacity .3s; } }
/* heading scrolls by; the card holds still and gets the whole screen */
.sec-calm main.illo > section.grownups.gs { padding-top: clamp(88px, 9vw, 136px) !important; height: auto !important; }
.gs .gu > .head { display: grid !important; justify-items: center !important; text-align: center !important; margin: 0 auto 8px !important; gap: 14px !important; }
.gs .gu > .head h2, .gs .gu > .head p { text-align: center !important; margin-inline: auto !important; }
.gv-final .gs-pin { grid-template-rows: 1fr; padding-top: 104px; padding-bottom: 28px; }
.gv-final .gs-pin::before { grid-row: 1; height: calc(100vh - 132px); max-height: 760px; }
.gv-final .gs-side, .gv-final .gs-stage { grid-row: 1; }
.gv-final .gs-side { height: calc(100vh - 132px); max-height: 760px; padding: 84px 24px 76px 88px; }
.gv-final .gs-stage { height: calc(100vh - 132px); max-height: 760px; }
.ga-stack { width: 76%; height: 72%; }
/* a little shorter, centred in the space under the header */
.gv-final .gs-pin { align-content: center; padding-top: 96px; padding-bottom: 24px; }
.gv-final .gs-pin::before, .gv-final .gs-side, .gv-final .gs-stage { height: min(calc(100vh - 200px), 620px); max-height: none; align-self: center; }
.gv-final .gs-side { padding: 64px 24px 60px 88px; }
.ga-stack { height: 76%; }
/* the card starts right under the header line instead of centring in the screen (less gap under the heading) */
.gv-final .gs-pin { align-content: start !important; align-items: start !important; padding-top: 100px !important; }
.gv-final .gs-pin::before, .gv-final .gs-side, .gv-final .gs-stage { align-self: start !important; }
.gs .gu > .head { margin-bottom: 0 !important; }
/* the stack: each app card at its own height, two plain sheets behind that follow its size */
.ga-sc { aspect-ratio: auto !important; height: auto !important; background: none !important; box-shadow: none !important; overflow: visible !important; border-radius: 0 !important; top: 46% !important; }
.ga-sc img { border-radius: 26px; filter: drop-shadow(0 22px 34px rgba(20,50,50,.22)); }
.ga-backs { position: absolute; z-index: 1; transform: rotate(-1deg); transition: width .5s, height .5s, top .5s, left .5s; pointer-events: none; }
.ga-backs i { position: absolute; inset: 0; background: #fff; border-radius: 26px; box-shadow: 0 16px 28px -18px rgba(20,50,50,.3); }
.ga-backs i:first-child { transform: translate(24px, 20px) rotate(3.5deg); opacity: .65; }
.ga-backs i:last-child { transform: translate(12px, 10px) rotate(1.8deg); opacity: .9; }
.ga-backs { opacity: 0; transition: width .5s, height .5s, top .5s, left .5s, opacity .3s; } .ga-backs[style*="width"] { opacity: 1; }

/* ---------- phones: no holding still; the points as a list you tap, the card stack under it ---------- */
@media (max-width: 900px) {
  .sec-calm main.illo > section.grownups.gs { padding-block: 72px !important; }
  .gs-track { height: auto !important; }
  .gs .gs-pin, .gv-final .gs-pin { display: block !important; position: static !important; height: auto !important; padding: 0 !important; }
  .gv-final .gs-pin::before { display: none !important; }
  .gs .gu > .head { margin-bottom: 28px !important; }
  .gv-final .gs-side { height: auto !important; padding: 0 !important; max-width: none !important; display: block !important; }
  .gv-final .gs-big, .gv-final .gs-seg { display: none !important; }
  .gv-final .gs-list { display: block !important; border-top: 1px solid rgba(31,42,43,.12); }
  .gs-step { display: grid !important; grid-template-columns: 26px 40px 1fr !important; column-gap: 12px !important; padding: 16px 0 !important; min-height: 0 !important; opacity: 1 !important; }
  .gs-step .ico.ill, .gs-step .ico.ill svg { width: 40px !important; height: 40px !important; }
  .gs-step h3 { font-size: 19px !important; }
  .gs-step.on p { max-height: 200px; }
  .gv-final .gs-stage { display: flex !important; height: 420px !important; margin-top: 24px; border-radius: 26px; background: #DCEBE7 !important; align-items: center; justify-content: center; }
  .ga-stack { width: 86%; height: 84%; }
}
/* the held area is only as tall as the card (not the whole screen), so nothing is left empty under it */
@media (min-width: 901px) {
.gv-final .gs-pin { height: calc(min(100vh - 200px, 620px) + 124px) !important; padding-top: 100px !important; padding-bottom: 24px !important; }
}
/* the stack shows the real next cards behind, tops aligned, each at its own height */
.ga-backs { display: none !important; }
.ga-sc { top: 12% !important; transform-origin: 50% 0; }

/* the stack: equal square cards, the app's card centred inside each */
.ga-stack { width: auto !important; height: 84% !important; aspect-ratio: 1 / 1; }
.ga-sc { top: 0 !important; width: 100% !important; height: 100% !important; aspect-ratio: 1 / 1 !important; background: #fff !important; border-radius: 30px !important; overflow: hidden !important; box-shadow: 0 26px 44px -26px rgba(20,50,50,.4), 0 0 0 1px rgba(31,42,43,.05) !important; display: flex !important; align-items: center; justify-content: center; }
.ga-sc img { width: auto !important; height: auto !important; max-width: 86% !important; max-height: 86% !important; border-radius: 20px !important; filter: none !important; }