/* Plans, time check, system pages, first meeting, Byte's tricks and the route. Square ERP look: no radius, few lines. */

/* Byte: bubble without the warning stripe, peek from the sides, confetti */
.buddy__bubble { border-left: 1px solid var(--line); }
.byte-confetti { position: fixed; inset: 0; z-index: 9990; pointer-events: none; }
.byte-peek { position: fixed; z-index: 940; display: flex; align-items: center; gap: 8px; pointer-events: none; }
.byte-peek > * { pointer-events: auto; }
.byte-peek__body { position: relative; flex: none; padding: 0; border: 0; background: none; cursor: pointer; }
.byte-peek__body .byte { display: block; width: 100%; height: 100%; overflow: visible; }
.byte-peek .byte__mouth { d: path("M50 63q10 10 20 0"); }
.byte-peek__fingers, .byte-peek__rope { display: none; position: absolute; }
.byte-peek__say { position: relative; max-width: 240px; padding: 12px 30px 12px 14px; background: #fff; border: 1px solid var(--line); box-shadow: 0 12px 30px rgba(10, 37, 64, .14); color: var(--navy); cursor: pointer; opacity: 0; transform: scale(.9); transition: opacity .2s .25s, transform .25s var(--ease) .25s; }
.byte-peek.is-in .byte-peek__say { opacity: 1; transform: none; }
.byte-peek__say p { margin: 0; font-size: 14.5px; line-height: 1.35; }
.byte-peek__x { position: absolute; top: 2px; right: 2px; width: 26px; height: 26px; border: 0; background: none; color: var(--muted); font-size: 16px; cursor: pointer; }
.byte-peek--right { flex-direction: row-reverse; }

/* Slides in from the side and tilts his head; all of him stays on screen */
.byte-peek--edge { bottom: 30%; }
.byte-peek--edge.byte-peek--left { left: 10px; } .byte-peek--edge.byte-peek--right { right: 10px; }
.byte-peek--edge .byte__torso, .byte-peek--edge .byte__code, .byte-peek--edge .byte__arm, .byte-peek--edge .byte__hand, .byte-peek--edge .byte__shadow,
.byte-peek--rise .byte__torso, .byte-peek--rise .byte__code, .byte-peek--rise .byte__arm, .byte-peek--rise .byte__hand, .byte-peek--rise .byte__shadow { display: none; }
.byte-peek--edge .byte-peek__body { width: 100px; height: 80px; transition: transform .5s cubic-bezier(.3, 1.5, .5, 1); }
.byte-peek--edge.byte-peek--left .byte-peek__body { transform: translateX(-160%); }
.byte-peek--edge.byte-peek--right .byte-peek__body { transform: translateX(160%); }
.byte-peek--edge.byte-peek--left.is-in .byte-peek__body { transform: rotate(10deg); }
.byte-peek--edge.byte-peek--right.is-in .byte-peek__body { transform: rotate(-10deg); }

/* Up from the bottom edge, like over a wall */
.byte-peek--rise { bottom: 0; flex-direction: column-reverse; align-items: center; gap: 6px; }
.byte-peek--rise.byte-peek--left { left: 110px; } .byte-peek--rise.byte-peek--right { right: 150px; }
.byte-peek--rise .byte-peek__body { width: 132px; height: 98px; }
.byte-peek--rise .byte { height: 143px !important; transform: translateY(120%); transition: transform .45s cubic-bezier(.3, 1.4, .5, 1); }
.byte-peek--rise.is-in .byte { transform: none; }

/* Upside down from the top, on his antenna */
.byte-peek--hang { top: 0; flex-direction: column; align-items: center; gap: 8px; }
.byte-peek--hang.byte-peek--left { left: 96px; } .byte-peek--hang.byte-peek--right { right: 96px; }
.byte-peek--hang .byte-peek__body { width: 92px; height: 100px; margin-top: 110px; transform: translateY(-260px); transition: transform .6s cubic-bezier(.3, 1.35, .5, 1); transform-origin: 50% -110px; }
.byte-peek--hang.is-in .byte-peek__body { transform: none; animation: bp-swing 2.6s ease-in-out .6s infinite alternate; }
.byte-peek--hang .byte { transform: rotate(180deg); }
.byte-peek--hang .byte__shadow { display: none; }
.byte-peek--hang .byte-peek__rope { display: block; left: 50%; top: -110px; width: 2px; height: 112px; background: var(--navy); }
@keyframes bp-swing { from { rotate: -4deg; } to { rotate: 4deg; } }

/* Jumps in from the side and waves */
.byte-peek--jump { bottom: 22%; }
.byte-peek--jump.byte-peek--left { left: 18px; } .byte-peek--jump.byte-peek--right { right: 18px; }
.byte-peek--jump .byte-peek__body { width: 96px; height: 104px; opacity: 0; }
.byte-peek--jump.byte-peek--left .byte-peek__body { --from: -220px; } .byte-peek--jump.byte-peek--right .byte-peek__body { --from: 220px; }
.byte-peek--jump.is-in .byte-peek__body { opacity: 1; animation: bp-jump .62s cubic-bezier(.3, .7, .4, 1); }
@keyframes bp-jump { 0% { transform: translate(var(--from), 0) rotate(calc(var(--from) / 12)); } 55% { transform: translate(calc(var(--from) * .2), -70px) rotate(0); } 80% { transform: translate(0, 0) scale(1.08, .92); } 100% { transform: none; } }
.byte-peek--jump.is-in .byte__arm--r, .byte-peek--jump.is-in .byte__hand { animation: byte-wave .35s ease-in-out .7s 6 alternate; }

.byte-peek.is-out { opacity: 0; transition: opacity .35s; }
@media (max-width: 600px) {
	.byte-peek__say { max-width: 170px; padding: 8px 10px; }
	.byte-peek__say p { font-size: 13px; }
	.byte-peek__x { display: none; }
	.byte-peek--edge { bottom: 110px; }
	.byte-peek--edge .byte-peek__body { width: 72px; height: 58px; }
	.byte-peek--rise.byte-peek--left { left: 76px; } .byte-peek--rise.byte-peek--right { right: 90px; }
	.byte-peek--rise .byte-peek__body { width: 88px; height: 66px; }
	.byte-peek--rise .byte { height: 95px !important; }
}
@media (prefers-reduced-motion: reduce) { .byte-peek *, .byte-peek__say { transition: none !important; animation: none !important; } .byte-peek--jump .byte-peek__body { opacity: 1; } }
html.a11y-nomotion .byte-peek * { transition: none !important; animation: none !important; }

/* Hero: tiles are links */
.hn-board a { display: block; height: 100%; color: inherit; }
.hn-board li { padding: 0; }
.hn-board a { padding: 20px; position: relative; }
.hn-board a:hover { outline: 2px solid var(--blue); outline-offset: -2px; }
.hn-board a:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
@media (max-width: 600px) { .hn-board a { padding: 14px; } }

/* Step walk-through */
.gs { --p: 0%; }
.gs__list { position: relative; display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.gs__list li { display: grid; align-content: start; gap: 6px; padding: 18px 16px; background: var(--bg-alt); transition: background-color .3s, transform .3s var(--ease); }
.gs__ic { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 8px; background: #fff; color: var(--blue); transition: background-color .3s, color .3s; }
.gs__ic svg { width: 20px; height: 20px; }
.gs__list b { color: var(--navy); font-size: 16px; line-height: 1.25; transition: color .3s; }
.gs__list small { color: var(--muted); font-size: 14px; line-height: 1.35; transition: color .3s; }
.gs.is-game .gs__list li { opacity: .45; }
.gs.is-game .gs__list li.is-on { opacity: 1; }
.gs.is-game .gs__list li.is-now { background: var(--navy); transform: translateY(-4px); }
.gs.is-game .gs__list li.is-now b { color: #fff; }
.gs.is-game .gs__list li.is-now small { color: #C9D6E6; }
.gs.is-game .gs__list li.is-now .gs__ic { background: var(--blue); color: #fff; }
.gs__bar { display: flex; align-items: center; gap: 20px; margin-top: 20px; }
.gs__track { flex: 1; height: 4px; background: var(--line); display: none; }
.gs.is-game .gs__track { display: block; }
.gs__track i { display: block; height: 100%; width: var(--p); background: var(--blue); transition: width .35s var(--ease); }
@media (max-width: 860px) { .gs__list { grid-template-columns: 1fr; } .gs.is-game .gs__list li:not(.is-on) { display: none; } .gs__list li { padding: 14px; } .gs__bar { position: sticky; bottom: 12px; } }

/* Plans */
.pk-stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 0 20px; padding: 0; list-style: none; background: linear-gradient(90deg, var(--line) 50%, transparent 0) 0 22px / 10px 1px repeat-x; }
.pk-stages li { display: grid; grid-template-columns: 44px 1fr; column-gap: 12px; padding-right: 16px; }
.pk-stages i { grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; background: var(--navy); color: #fff; font: 700 17px var(--font-h); font-style: normal; }
.pk-stages b { align-self: end; padding-top: 0; background: #fff; justify-self: start; padding-inline: 0 8px; color: var(--navy); font-size: 16px; }
.services.pk .pk-stages b { background: var(--bg-alt, #fff); }
.pk-stages span { color: var(--muted); font-size: 14px; line-height: 1.3; }
.pk-free { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(220px, 280px); gap: 28px; align-items: center; margin-bottom: 20px; padding: 28px; background: var(--navy); color: #C9D6E6; }
.pk-free__zero { display: grid; place-items: center; width: 92px; height: 92px; background: var(--blue); color: #fff; font: 700 32px var(--font-h); }
.pk-free h3 { margin: 0 0 6px; color: #fff; font: 700 clamp(21px, 2.1vw, 27px)/1.2 var(--font-h); }
.pk-free p { margin: 0; font-size: 16px; line-height: 1.45; }
.pk-free ul { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 14px 0 0; padding: 0; list-style: none; font-size: 14.5px; color: #fff; }
.pk-free li { display: inline-flex; align-items: center; gap: 7px; }
.pk-free li svg { width: 16px; height: 16px; color: #8DB2F2; }
.pk-free__side { display: grid; gap: 12px; }
.pk-free .svc__more { color: #fff; justify-content: center; }
.pk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.pk-more { margin: 22px 0 0; color: var(--muted); font-size: 15.5px; }
.pk-more a:not(.glow-link) { color: var(--blue); }
.pk-pick { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.pk-pick button { display: inline-flex; align-items: center; gap: 9px; padding: 14px 18px; background: #fff; border: 1px solid var(--line-strong); color: var(--navy); font: 600 15.5px var(--font-b); cursor: pointer; transition: background-color .2s, color .2s, border-color .2s, transform .12s; }
.pk-pick button svg { width: 18px; height: 18px; color: var(--blue); }
.pk-pick button:hover { border-color: var(--blue); }
.pk-pick button:active { transform: scale(.97); }
.pk-pick button[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: #fff; }
.pk-pick button[aria-pressed="true"] svg { color: #fff; }
.pk-pick button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
@media (max-width: 900px) { .pk-grid, .pk-stages { grid-template-columns: 1fr; gap: 12px; } .pk-stages { background: none; } .pk-free { grid-template-columns: 1fr; padding: 20px; } .pk-free__zero { width: 64px; height: 64px; font-size: 22px; } }

/* Comparison */
.pc__scroll { overflow-x: auto; }
.pc__t { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15.5px; }
.pc__t thead th { position: sticky; top: 0; padding: 14px; background: var(--navy); color: #fff; font: 700 16px var(--font-h); text-align: center; }
.pc__group th { padding: 22px 14px 8px; color: var(--blue); font-weight: 700; text-align: left; background: #fff; }
.pc__t tbody tr:not(.pc__group) { border-bottom: 1px solid var(--line); }
.pc__t tbody tr:not(.pc__group):hover { background: var(--bg-alt); }
.pc__t tbody th[scope=row] { padding: 12px 14px; font-weight: 500; text-align: left; }
.pc__t tbody th a { color: var(--navy); }
.pc__t tbody th a:hover { color: var(--blue); text-decoration: underline; }
.pc__t td { width: 19%; padding: 12px 8px; text-align: center; }
.pc-yes { color: var(--blue); } .pc-yes svg { width: 20px; height: 20px; }
.pc-opt { color: var(--muted); font-size: 13.5px; }
.pc-no { color: var(--line-strong); }
.pc__note { margin: 16px 0 0; color: var(--muted); font-size: 14.5px; }

/* A real developer */
.dev-band { padding-block: clamp(24px, 3vw, 40px); }
.dev-band__box { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 26px 28px; background: var(--bg-tint); }
.dev-band__mono { display: grid; place-items: center; width: 72px; height: 72px; background: var(--navy); color: #fff; font: 700 24px var(--font-h); }
.dev-band h2 { margin: 0 0 4px; color: var(--navy); font: 700 clamp(20px, 2vw, 25px)/1.2 var(--font-h); }
.dev-band p { margin: 0; color: var(--text); font-size: 16px; line-height: 1.45; max-width: 60ch; }
.dev-band ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-weight: 600; }
.dev-band li { display: flex; align-items: center; gap: 8px; }
.dev-band li svg { width: 17px; height: 17px; color: var(--blue); }
.dev-band a { color: var(--navy); } .dev-band a:hover { color: var(--blue); }
@media (max-width: 760px) { .dev-band__box { grid-template-columns: 56px 1fr; padding: 20px; } .dev-band__mono { width: 56px; height: 56px; font-size: 19px; } .dev-band ul { grid-column: 1 / -1; } }

/* The route */
.quest { padding-block: clamp(32px, 4vw, 56px); }
.quest .section-head { margin-bottom: 18px; align-items: center; }
.quest__n { margin: 0; color: var(--muted); font-size: 17px; } .quest__n b { color: var(--blue); font: 700 28px var(--font-h); }
.quest__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.quest__list a { position: relative; display: grid; grid-template-columns: 42px 1fr; gap: 12px; align-items: center; height: 100%; padding: 16px; background: var(--bg-alt); color: var(--navy); transition: background-color .2s; }
.quest__list a:hover { background: var(--bg-tint); }
.quest__list i { display: grid; place-items: center; width: 42px; height: 42px; background: #fff; color: var(--blue); } .quest__list i svg { width: 20px; height: 20px; }
.quest__list b { display: block; font-size: 15px; line-height: 1.25; } .quest__list small { color: var(--muted); font-size: 13px; }
.quest__list em { position: absolute; top: 8px; right: 8px; display: none; place-items: center; width: 20px; height: 20px; background: var(--blue); color: #fff; } .quest__list em svg { width: 13px; height: 13px; }
.quest__list .is-done a { background: var(--bg-tint); } .quest__list .is-done em { display: grid; animation: q-pop .35s var(--ease); }
@keyframes q-pop { from { transform: scale(.4); opacity: 0; } }
@media (max-width: 860px) { .quest__list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .quest__list { grid-template-columns: 1fr; } }

/* Time check */
.tc { background: var(--bg-alt); }
.tc__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.tc__byte { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center; margin-top: 22px; }
.tc__bot { display: block; width: 96px; height: 104px; } .tc__bot .byte { width: 100%; height: 100%; }
.tc__byte.is-pop .tc__bot .byte__body-wrap { transform-origin: 60px 120px; animation: byte-bounce .45s var(--ease); }
.tc__byte.is-pop .tc__say { animation: tc-say .28s var(--ease); }
@keyframes tc-say { from { opacity: 0; transform: translateY(6px); } }
.tc__say { position: relative; margin: 0; padding: 14px 16px; background: #fff; color: var(--navy); font-size: 15.5px; line-height: 1.35; }
.tc__card { padding: clamp(20px, 3vw, 32px); background: #fff; min-height: 330px; }
.tc__prog { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; margin-bottom: 22px; }
.tc__prog i { height: 6px; background: var(--line); transition: background-color .25s; }
.tc__prog i.is-on { background: var(--blue); }
.tc__q { margin: 0; padding: 0; border: 0; }
.tc__q.is-in { animation: tc-say .28s var(--ease); }
.tc__q legend { padding: 0; margin-bottom: 18px; color: var(--navy); font: 700 clamp(20px, 2vw, 25px)/1.25 var(--font-h); }
.tc__q legend small { display: block; margin-bottom: 6px; color: var(--muted); font: 600 14px var(--font-b); }
.tc__opts { display: grid; gap: 8px; }
.tc__opt { padding: 15px 18px; background: var(--bg-alt); border: 1px solid transparent; color: var(--navy); font: 600 16px var(--font-b); text-align: left; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s, transform .12s; }
.tc__opt:hover { border-color: var(--blue); background: var(--bg-tint); }
.tc__opt:active { transform: scale(.985); }
.tc__opt:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.tc__opt.is-picked { background: var(--blue); color: #fff; }
.tc__big { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; color: var(--navy); }
.tc__big small { width: 100%; color: var(--muted); font-size: 15px; }
.tc__big b { color: var(--blue); font: 700 clamp(56px, 7vw, 84px)/1 var(--font-h); }
.tc__big span { font: 700 21px var(--font-h); }
.tc__bars { display: grid; gap: 12px; margin: 0 0 14px; padding: 0; list-style: none; font-size: 14.5px; }
.tc__bars li { display: grid; grid-template-columns: 1fr auto auto; gap: 4px 12px; align-items: baseline; }
.tc__bars span { color: var(--navy); font-weight: 600; }
.tc__bars i { grid-column: 1 / -1; grid-row: 2; height: 6px; background: var(--bg-alt); }
.tc__bars em { display: block; height: 100%; width: var(--w); background: var(--blue); animation: tc-bar .8s var(--ease); transform-origin: left; }
@keyframes tc-bar { from { transform: scaleX(0); } }
.tc__bars b { color: var(--muted); font-weight: 600; }
.tc__bars a { color: var(--blue); font-weight: 600; }
.tc__note { margin: 0 0 18px; color: var(--muted); font-size: 13.5px; line-height: 1.4; }
.tc__mail .fd-cta__art, .tc__mail .fd-cta-arrow { display: none !important; }
.tc__mail .fd-cta-wrap { width: 100%; margin: 0; }
.tc__mail .fd-cta { width: 100%; text-align: left; }
.tc__again { margin-top: 12px; padding: 4px 0; border: 0; background: none; color: var(--muted); font: 500 14px var(--font-b); text-decoration: underline; cursor: pointer; }
@media (max-width: 860px) { .tc__grid { grid-template-columns: 1fr; } .tc__byte { grid-template-columns: 62px 1fr; } .tc__bot { width: 62px; height: 68px; } }
@media (prefers-reduced-motion: reduce) { .tc__byte.is-pop *, .tc__q.is-in, .tc__bars em, .quest__list .is-done em { animation: none !important; } }

/* System pages, services */
.sp-hero__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 32px; align-items: center; }
.sp-hero__art { position: relative; display: block; min-height: 220px; background: #fff; overflow: hidden; }
.sp-hero__art .cs-box__art, .sp-hero__art svg { position: absolute; inset: 12%; width: 76%; height: 76%; opacity: 1; }
.sp-compare__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sp-col { padding: 26px; background: var(--bg-alt); }
.sp-col--on { background: var(--navy); }
.sp-col h2 { margin: 0 0 14px; color: var(--navy); font: 700 21px var(--font-h); }
.sp-col--on h2 { color: #fff; }
.sp-col ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; color: var(--muted); font-size: 16px; }
.sp-col li { display: grid; grid-template-columns: 20px 1fr; gap: 8px; }
.sp-col span { color: var(--muted); font-size: 18px; line-height: 1.1; }
.sp-col--on ul { color: #E6EDF6; } .sp-col--on svg { width: 19px; height: 19px; color: #8DB2F2; }
.sp-proof__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px; align-items: center; }
.sp-check { display: grid; gap: 6px; padding: 24px; background: var(--blue); color: #fff; transition: background-color .2s; }
.sp-check:hover { background: var(--blue-dark); color: #fff; }
.sp-check b { font: 700 24px var(--font-h); } .sp-check span { font-size: 15px; }
.sp-check em { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-style: normal; font-weight: 600; } .sp-check svg { width: 16px; height: 16px; }
.sp-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.sp-tiles a { position: relative; display: block; height: 100%; min-height: 136px; padding: 18px; overflow: hidden; background: var(--bg-alt); color: var(--navy); transition: background-color .2s; }
.sp-tiles a:hover { background: var(--bg-tint); }
.sp-tiles b { position: relative; z-index: 1; display: block; font: 700 17px var(--font-h); }
.sp-tiles span { position: relative; z-index: 1; display: block; max-width: 80%; margin-top: 4px; color: var(--muted); font-size: 14px; line-height: 1.3; }
.sp-tiles .cs-art { width: 42%; max-width: 100px; }
.sv-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sv-list a { display: grid; grid-template-columns: 48px minmax(0, 300px) 1fr 20px; gap: 16px; align-items: center; padding: 14px 18px; background: var(--bg-alt); color: var(--navy); transition: background-color .2s; }
.sv-list a:hover { background: var(--bg-tint); }
.sv-list i { display: grid; place-items: center; width: 48px; height: 48px; background: #fff; color: var(--blue); } .sv-list i svg { width: 22px; height: 22px; }
.sv-list b { font: 700 18px var(--font-h); } .sv-list span { color: var(--muted); font-size: 15.5px; } .sv-list > li > a > svg { width: 18px; height: 18px; color: var(--blue); }
.ind-pain { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; padding: 0; list-style: none; }
.ind-pain a { display: grid; grid-template-columns: 1fr 20px; gap: 4px 12px; height: 100%; padding: 20px; background: var(--bg-alt); color: var(--navy); transition: background-color .2s; }
.ind-pain a:hover { background: var(--bg-tint); }
.ind-pain b { font: 700 18px/1.25 var(--font-h); } .ind-pain span { grid-column: 1; color: var(--muted); font-size: 15px; line-height: 1.4; } .ind-pain svg { grid-column: 2; grid-row: 1; width: 18px; height: 18px; color: var(--blue); }
@media (max-width: 860px) { .sp-hero__grid, .sp-compare__grid, .sp-proof__grid, .ind-pain { grid-template-columns: 1fr; } .sp-hero__art { display: none; } .sp-tiles { grid-template-columns: 1fr 1fr; } .sv-list a { grid-template-columns: 40px 1fr 18px; } .sv-list i { width: 40px; height: 40px; } .sv-list span { grid-column: 2; grid-row: 2; } .sv-list > li > a > svg { grid-column: 3; grid-row: 1; } }

/* First meeting and the example plan */
.fm { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.fm__col { padding: 24px; background: var(--bg-alt); }
.fm__col--zero { background: var(--navy); color: #E6EDF6; }
.fm__col h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; color: var(--navy); font: 700 19px var(--font-h); }
.fm__col h3 svg { width: 22px; height: 22px; color: var(--blue); }
.fm__col--zero h3 { color: #fff; } .fm__col--zero h3 span { color: #8DB2F2; }
.fm__col ul { display: grid; gap: 9px; margin: 0; padding: 0 0 0 18px; font-size: 15.5px; line-height: 1.4; }
@media (max-width: 860px) { .fm { grid-template-columns: 1fr; } }
.plan-doc { max-width: 880px; margin-inline: auto; background: #fff; box-shadow: 0 24px 60px rgba(10, 37, 64, .13); scroll-margin-top: 110px; }
.plan-doc__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 10px; padding: 24px 32px; background: var(--navy); color: #C9D6E6; font-size: 14px; }
.plan-doc__head small { display: block; font-size: 14px; color: #8DB2F2; }
.plan-doc__head h3 { margin: 2px 0 0; color: #fff; font: 700 24px var(--font-h); }
.plan-doc__body { display: grid; gap: 26px; padding: 30px 32px 34px; }
.plan-doc h4 { margin: 0 0 10px; color: var(--navy); font: 700 18px var(--font-h); }
.plan-doc ul { display: grid; gap: 7px; margin: 0; padding-left: 18px; font-size: 15.5px; }
.plan-doc__phases { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.plan-doc__phases li { display: grid; gap: 2px; padding: 14px 16px; background: var(--bg-tint); }
.plan-doc__phases b { color: var(--navy); } .plan-doc__phases span { color: var(--muted); font-size: 14.5px; }
.plan-doc__cost p { margin: 0; color: var(--muted); }

/* Portal: what happens next */
.pt-call { display: grid; gap: 18px; margin: 0 0 22px; padding: clamp(18px, 2.5vw, 26px); background: #fff; border: 1px solid var(--line); }
.pt-call__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.pt-call__steps li { display: grid; grid-template-columns: 30px 1fr; gap: 8px; align-items: center; padding: 10px; background: var(--bg-alt); color: var(--muted); font-size: 13.5px; line-height: 1.2; }
.pt-call__steps i { display: grid; place-items: center; width: 30px; height: 30px; background: #fff; color: var(--muted); font: 700 14px var(--font-h); font-style: normal; } .pt-call__steps svg { width: 15px; height: 15px; }
.pt-call__steps b { font-weight: 600; }
.pt-call__steps .is-done i { background: var(--blue); color: #fff; } .pt-call__steps .is-done { color: var(--navy); }
.pt-call__steps .is-now { background: var(--navy); color: #fff; } .pt-call__steps .is-now i { background: var(--blue); color: #fff; }
.pt-call__form h3 { margin: 0 0 4px; color: var(--navy); font: 700 20px var(--font-h); }
.pt-call__form > p { margin: 0 0 14px; color: var(--muted); font-size: 15px; }
.pt-call__days { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; padding: 0; border: 0; }
.pt-call__days label { flex: 1 1 96px; cursor: pointer; }
.pt-call__days input { position: absolute; opacity: 0; }
.pt-call__days label span { display: grid; gap: 1px; height: 100%; padding: 10px 12px; background: var(--bg-alt); border: 1px solid transparent; text-align: center; transition: background-color .15s, border-color .15s, color .15s; }
.pt-call__days label:hover span { border-color: var(--blue); }
.pt-call__days b { color: var(--navy); font-size: 14.5px; } .pt-call__days small { color: var(--muted); font-size: 13px; }
.pt-call__days input:checked + span { background: var(--blue); } .pt-call__days input:checked + span b, .pt-call__days input:checked + span small { color: #fff; }
.pt-call__days input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.pt-call__go { display: flex; flex-wrap: wrap; gap: 8px; }
.pt-call__go label { flex: 1 1 200px; } .pt-call__go input { width: 100%; height: 100%; min-height: 46px; padding: 0 14px; border: 1px solid var(--line-strong); font: 400 16px var(--font-b); }
.pt-call__set { display: grid; grid-template-columns: 26px 1fr; gap: 12px; padding: 16px; background: var(--bg-tint); } .pt-call__set svg { width: 24px; height: 24px; color: var(--blue); }
.pt-call__set p { margin: 0; display: grid; gap: 2px; } .pt-call__set b { color: var(--navy); } .pt-call__set span { color: var(--muted); font-size: 14.5px; }
.pt-call__more summary { color: var(--blue); font-weight: 600; font-size: 15px; cursor: pointer; }
.pt-call__more .fm { margin: 14px 0; }
@media (max-width: 700px) { .pt-call__steps { grid-template-columns: 1fr 1fr; } }

/* About */
.ab-me__grid { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.ab-me__photo { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--bg-tint); }
.ab-me__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.ab-edu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; }
.ab-edu li { display: flex; align-items: center; gap: 14px; padding: 16px; background: var(--bg-alt); }
.ab-edu img { width: 72px; height: 64px; object-fit: contain; background: #fff; padding: 4px; flex: none; }
.ab-edu span { display: grid; gap: 2px; } .ab-edu b { color: var(--navy); font-size: 15.5px; line-height: 1.25; } .ab-edu small { color: var(--muted); font-size: 14px; }
@media (max-width: 760px) { .ab-me__grid, .ab-edu { grid-template-columns: 1fr; } .ab-me__photo { max-width: 280px; } }

/* Case study additions */
.cs-found__list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.cs-found__list li { display: grid; gap: 6px; align-content: start; padding: 16px; background: var(--bg-alt); }
.cs-found__list b { color: var(--blue); font: 700 clamp(26px, 2.8vw, 36px)/1 var(--font-h); } .cs-found__list span { color: var(--navy); font-size: 13.5px; line-height: 1.3; }
.cs-fixes__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); }
.cs-points--open .cs-points__dot { width: 12px; height: 12px; margin: 5px 3px 0; border: 2px solid var(--muted); }
.cs-quote blockquote { margin: 0 auto; max-width: 820px; color: var(--navy); font: 700 clamp(22px, 2.6vw, 32px)/1.3 var(--font-h); }
.cs-quote cite { display: block; margin-top: 12px; color: var(--muted); font: 500 15px var(--font-b); }
.cs-next { padding-block: 0 clamp(24px, 3vw, 40px); }
@media (max-width: 900px) { .cs-found__list { grid-template-columns: 1fr 1fr; } .cs-fixes__grid { grid-template-columns: 1fr; } }

/* Fixes after the first look */
.ab-me, .ab-me .eyebrow, .ab-me h2, .ab-me p { text-align: left; }
.ab-me .section-lead { margin-inline: 0; max-width: 62ch; }
.ab-me .eyebrow { margin-inline: 0; justify-content: flex-start; }
@media (min-width: 1100px) { .footer-cols { grid-template-columns: 1.35fr repeat(3, minmax(0, .8fr)) minmax(0, 1.15fr) !important; gap: 32px; } }

/* One plan (page-plan.php) */
.pl-hero__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 380px); gap: clamp(28px, 5vw, 64px); align-items: start; }
.pl-crumb { margin: 0 0 12px; color: var(--muted); font-size: 14.5px; } .pl-crumb a { color: var(--blue); }
.pl-for__t { margin: 24px 0 0; color: var(--navy); font: 700 18px var(--font-h); }
.pl-price { position: sticky; top: 100px; display: grid; gap: 10px; padding: 26px; background: #fff; box-shadow: 0 22px 54px rgba(10, 37, 64, .13); }
.pl-price__ic { display: grid; place-items: center; width: 48px; height: 48px; background: var(--bg-tint); color: var(--blue); } .pl-price__ic svg { width: 24px; height: 24px; }
.pl-price small { margin-top: 6px; color: var(--muted); font-size: 14.5px; }
.pl-price h2 { margin: 0; color: var(--navy); font: 700 28px var(--font-h); }
.pl-price__v { margin: 4px 0 8px; color: var(--navy); font: 700 34px var(--font-h); } .pl-price__v b { font-size: 21px; } .pl-price__v em { margin-inline: 4px; font: 500 14px var(--font-b); color: var(--muted); font-style: normal; }
.pl-price__call { display: flex; gap: 8px; align-items: center; justify-content: center; margin-top: 4px; color: var(--navy); font-size: 14.5px; font-weight: 600; } .pl-price__call svg { width: 16px; height: 16px; color: var(--blue); }
.pl-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.pl-cards a { display: grid; align-content: start; gap: 6px; height: 100%; padding: 22px; background: var(--bg-alt); color: var(--navy); transition: background-color .2s, transform .2s var(--ease); }
.pl-cards a:hover { background: var(--bg-tint); transform: translateY(-2px); }
.pl-cards a:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.pl-cards i { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 8px; background: #fff; color: var(--blue); } .pl-cards i svg { width: 21px; height: 21px; }
.pl-cards b { font: 700 18px/1.25 var(--font-h); } .pl-cards span { color: var(--muted); font-size: 15px; line-height: 1.4; }
.pl-cards em { display: inline-flex; align-items: center; gap: 7px; margin-top: 8px; color: var(--blue); font-size: 14.5px; font-style: normal; font-weight: 600; } .pl-cards em svg { width: 15px; height: 15px; }
.pl-opt__h { margin-top: clamp(32px, 4vw, 52px); }
.pl-opt .pl-cards a { background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.pl-next { display: grid; grid-template-columns: 1fr 24px; gap: 2px 16px; align-items: center; padding: 26px 28px; background: var(--navy); color: #fff; transition: background-color .2s; }
.pl-next:hover { background: var(--blue); color: #fff; }
.pl-next small { color: #8DB2F2; font-size: 14px; } .pl-next b { font: 700 24px var(--font-h); } .pl-next span { color: #E6EDF6; font-size: 15.5px; } .pl-next svg { grid-column: 2; grid-row: 1 / span 3; width: 22px; height: 22px; }
.pl-next:hover small { color: #fff; }
.pc__t thead th a { color: #fff; } .pc__t thead th a:hover { text-decoration: underline; }
@media (max-width: 860px) { .pl-hero__grid { grid-template-columns: 1fr; } .pl-price { position: static; } }

.pl-cards:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .pl-cards, .pl-cards:has(> :nth-child(4):last-child) { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .pl-cards, .pl-cards:has(> :nth-child(4):last-child) { grid-template-columns: 1fr; } }

/* Byte follows the current step: behind the card with his head over the top, round the side on the first one */
.gs.is-game .gs__list { margin-top: 70px; }
.gs__list > li { position: relative; z-index: 1; }
.gs__bot > em { position: absolute; bottom: calc(100% - 22px); right: calc(100% - 30px); width: max-content; max-width: 260px; padding: 8px 12px; background: var(--navy); color: #fff; font: 500 14px/1.3 var(--font-b); font-style: normal; opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s; }
.gs__bot.is-say > em { opacity: 1; transform: none; }
.gs__bot.is-side > em { right: auto; left: 0; }
.gs__bot { position: absolute; top: 0; left: 0; z-index: 0; width: 88px; height: 95px; transition: transform .5s cubic-bezier(.34, 1.3, .5, 1); pointer-events: none; }
.gs__bot .byte { display: block; width: 100%; height: 100%; overflow: visible; transition: rotate .3s; }
.gs__bot .byte__shadow, .gs__bot .byte__arm, .gs__bot .byte__hand, .gs__bot .byte__torso, .gs__bot .byte__code { display: none; }
.gs__bot .byte__mouth { d: path("M50 63q10 10 20 0"); }
.gs__bot.is-side .byte { rotate: 9deg; }
.gs__bot.is-hop .byte { animation: gs-hop .5s ease-out; }
@keyframes gs-hop { 0% { translate: 0 0; } 45% { translate: 0 -26px; } 100% { translate: 0 0; } }
@media (max-width: 860px) { .gs.is-game .gs__list { margin-top: 40px; } .gs__bot { z-index: 2; width: 56px; height: 60px; } }
@media (max-width: 860px) { .gs__bot .byte__torso, .gs__bot .byte__code { display: none; } }

/* Byte on the cards: all of his head, on the edge of the card or beside it */
.has-perch { position: relative; overflow: visible !important; }
.byte-perch { position: absolute; z-index: 3; padding: 0; border: 0; background: none; cursor: pointer; opacity: 0; transition: opacity .25s, transform .4s cubic-bezier(.34, 1.4, .5, 1); }
.byte-perch.is-in { opacity: 1; transform: none !important; }
.byte-perch__bot { display: block; width: 84px; height: 61px; }
.byte-perch .byte { display: block; width: 84px; height: 91px; overflow: visible; }
.byte-perch .byte__torso, .byte-perch .byte__code, .byte-perch .byte__arm, .byte-perch .byte__hand, .byte-perch .byte__shadow { display: none; }
.byte-perch .byte__mouth { d: path("M50 63q10 10 20 0"); }
.byte-perch--top { bottom: 100%; right: 24px; transform: translateY(18px); }
.byte-perch--left { right: calc(100% + 8px); top: 22px; transform: translateX(26px) rotate(0); }
.byte-perch--right { left: calc(100% + 8px); top: 22px; transform: translateX(-26px); }
.byte-perch--left .byte { rotate: 9deg; } .byte-perch--right .byte { rotate: -9deg; }
.byte-perch:hover .byte { animation: gs-hop .4s ease-out; }
.byte-perch:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.byte-perch > em { position: absolute; bottom: calc(100% + 6px); right: 0; width: max-content; max-width: 240px; padding: 8px 12px; background: var(--navy); color: #fff; font: 500 13.5px/1.3 var(--font-b); font-style: normal; text-align: left; pointer-events: none; }
.byte-perch--left > em { right: auto; left: 0; }
@media (max-width: 600px) {
	.byte-perch--top { right: 12px; }
	.byte-perch__bot { width: 54px; height: 40px; }
	.byte-perch .byte { width: 54px; height: 58px; }
}
@media (prefers-reduced-motion: reduce) { .byte-perch .byte, .byte-perch > em, .gs__bot, .gs__bot .byte { transition: none !important; animation: none !important; } }
html.a11y-nomotion .byte-perch .byte, html.a11y-nomotion .gs__bot, html.a11y-nomotion .gs__bot .byte { transition: none !important; animation: none !important; }

/* While another Byte is on screen, the main one steps away for a moment */
.buddy .buddy__launcher, .buddy .buddy__bubble { transition: opacity .25s, transform .25s; }
.byte-away .buddy:not(.is-open) .buddy__launcher, .byte-away .buddy:not(.is-open) .buddy__bubble { opacity: 0 !important; transform: translateY(16px) !important; pointer-events: none; }

/* Questionnaire results */
.tc__verdict h3 { margin: 0 0 6px; color: var(--navy); font: 700 clamp(24px, 2.4vw, 32px)/1.2 var(--font-h); }
.tc__verdict p { margin: 0 0 12px; color: var(--text); font-size: 16.5px; line-height: 1.45; }
.tc__stepsh { margin: 22px 0 10px; color: var(--navy); font: 700 19px var(--font-h); }
.tc__steps { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: st; }
.tc__steps li { position: relative; padding: 14px 16px 14px 56px; background: var(--bg-alt); color: var(--text); font-size: 15.5px; line-height: 1.4; counter-increment: st; }
.tc__steps li::before { content: counter(st); position: absolute; left: 14px; top: 12px; display: grid; place-items: center; width: 28px; height: 28px; background: var(--navy); color: #fff; font: 700 14px var(--font-h); }
.tc__steps li.is-locked { color: transparent; text-shadow: 0 0 8px rgba(10, 37, 64, .55); user-select: none; }
.tc__unlock { margin-top: 12px; padding: 20px; background: var(--bg-tint); }
.tc__unlock h4 { margin: 0 0 2px; color: var(--navy); font: 700 18px var(--font-h); }
.tc__unlock > p { margin: 0 0 12px; color: var(--muted); font-size: 14.5px; }
.tc__unlock-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tc__unlock-row label { flex: 1 1 220px; } .tc__unlock-row input { width: 100%; height: 48px; padding: 0 14px; border: 1px solid var(--line-strong); background: #fff; font: 400 16px var(--font-b); }
.tc__consent { display: grid; grid-template-columns: 18px 1fr; gap: 8px; margin-top: 12px; color: var(--text); font-size: 13.5px; line-height: 1.4; cursor: pointer; } .tc__consent input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--blue); }
.tc__err { margin: 10px 0 0; color: var(--bad); font-size: 14px; }
.tc__sent { display: flex; gap: 8px; align-items: center; margin: 12px 0 0; padding: 14px 16px; background: var(--bg-tint); color: var(--navy); font-weight: 600; font-size: 15px; } .tc__sent svg { flex: none; width: 18px; height: 18px; color: var(--ok); }
.tc__sent[hidden], .tc__unlock[hidden] { display: none; }
.tc__plan { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); } .tc__plan b { color: var(--navy); font-size: 15.5px; }
.tl__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.tl__list a { display: grid; align-content: start; gap: 6px; height: 100%; padding: 24px; background: var(--bg-alt); color: var(--navy); transition: background-color .2s; } .tl__list a:hover { background: var(--bg-tint); }
.tl__list i { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 8px; background: #fff; color: var(--blue); } .tl__list i svg { width: 22px; height: 22px; }
.tl__list b { font: 700 20px/1.25 var(--font-h); } .tl__list span { color: var(--muted); font-size: 15px; line-height: 1.4; }
.tl__list em { display: inline-flex; gap: 7px; align-items: center; margin-top: 8px; color: var(--blue); font-style: normal; font-weight: 600; font-size: 14.5px; } .tl__list em svg { width: 15px; height: 15px; }
.tl__h { margin-top: clamp(32px, 4vw, 52px); }
.tl__guides { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tl__guides a { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 16px 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); color: var(--navy); font-weight: 600; font-size: 16px; } .tl__guides a:hover { color: var(--blue); } .tl__guides svg { flex: none; width: 17px; height: 17px; color: var(--blue); }

/* Plan cards: name, who for, price, one-time, what's included with room, one main button */
.pk-grid { align-items: stretch; padding-top: 34px; }
.pk-card { position: relative; display: flex; flex-direction: column; scroll-margin-top: 130px; transition: transform .3s var(--ease); }
.pk-card__box { position: relative; display: flex; flex: 1; flex-direction: column; padding: 34px 30px 26px; overflow: hidden; background: #fff; box-shadow: 0 1px 0 var(--line), 0 14px 34px rgba(10, 37, 64, .07); }
.pk-card .cs-art { top: 8px; right: 8px; bottom: auto; width: 34%; max-width: 124px; opacity: .22; }
.pk-card h3 { position: relative; margin: 0; color: var(--navy); font: 700 clamp(26px, 2.2vw, 31px)/1.15 var(--font-h); }
.pk-card__for { position: relative; min-height: 3em; margin: 8px 0 0; max-width: 88%; color: var(--muted); font-size: 15.5px; line-height: 1.45; }
.pk-card__price { margin: 22px 0 0; color: var(--navy); font: 800 clamp(40px, 3.6vw, 52px)/1 var(--font-h); letter-spacing: -.02em; }
.pk-card__price .from { margin-right: 6px; color: var(--muted); font: 500 15px var(--font-b); font-style: normal; letter-spacing: 0; }
.pk-card__price .vat { margin-left: 6px; color: var(--muted); font: 500 14px var(--font-b); font-style: normal; letter-spacing: 0; }
.pk-card__price b { display: block; font-size: clamp(26px, 2.2vw, 31px); line-height: 1.55; }
.pk-card__once { margin: 8px 0 0; color: var(--blue); font-size: 14.5px; font-weight: 600; }
.pk-card h4 { margin: 22px 0 0; padding-top: 20px; border-top: 1px solid var(--line); color: var(--navy); font: 700 15.5px var(--font-b); }
.pk-inc { display: grid; flex: 1; align-content: start; gap: 15px; margin: 16px 0 28px; padding: 0; list-style: none; font-size: 15.5px; line-height: 1.35; }
.pk-inc li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; }
.pk-inc svg { width: 19px; height: 19px; color: var(--blue); }
.pk-inc a { color: var(--text); }
.pk-inc a:hover { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.pk-card__more { margin-top: 14px; color: var(--muted); font-size: 14.5px; font-weight: 600; text-align: center; }
.pk-card__more:hover { color: var(--blue); }
.pk-card--main { margin-top: -34px; background: var(--navy); }
.pk-card__tag { display: block; padding: 8px 12px; color: #fff; font-size: 14px; font-weight: 600; text-align: center; line-height: 18px; }
.pk-card--main .pk-card__box { margin: 0 4px 4px; }
.pk-card.is-reco .pk-card__box { box-shadow: 0 0 0 2px var(--blue), 0 18px 44px rgba(13, 91, 221, .18); }
.pk-card.is-reco { transform: translateY(-4px); }
@media (max-width: 900px) { .pk-grid { padding-top: 0; } .pk-card--main { margin-top: 0; order: -1; } .pk-card__for { min-height: 0; } }
.pk-card__price { display: flex; align-items: baseline; min-height: 56px; }
.pk-card__price b { font-size: 25px; line-height: 56px; letter-spacing: -.01em; white-space: nowrap; }
.pk-card .cs-art { width: 26%; max-width: 92px; opacity: .16; }

/* Back-office demo on the system pages */
.fl__who { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; margin-bottom: 20px; }
.fl__who button { display: grid; gap: 2px; padding: 16px 18px; background: var(--bg-alt); border: 0; color: var(--navy); text-align: left; cursor: pointer; transition: background-color .2s, color .2s; }
.fl__who button:hover { background: var(--bg-tint); }
.fl__who b { font: 700 17px var(--font-h); } .fl__who small { color: var(--muted); font-size: 14px; transition: color .2s; }
.fl__who [aria-selected="true"] { background: var(--navy); color: #fff; } .fl__who [aria-selected="true"] small { color: #C9D6E6; }
.fl__who button:focus-visible, .fl__steps button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.fl__grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 20px; align-items: stretch; }
.fl__steps { display: grid; align-content: start; gap: 6px; margin: 0; padding: 0; list-style: none; }
.fl__steps button { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start; width: 100%; padding: 12px; background: none; border: 0; color: var(--navy); text-align: left; cursor: pointer; transition: background-color .2s; }
.fl__steps button:hover { background: var(--bg-alt); }
.fl__steps i { display: grid; place-items: center; width: 40px; height: 40px; background: var(--bg-alt); color: var(--muted); transition: background-color .25s, color .25s; } .fl__steps i svg { width: 19px; height: 19px; }
.fl__steps b { display: block; font: 700 16px/1.25 var(--font-h); } .fl__steps small { display: block; margin-top: 2px; color: var(--muted); font-size: 14px; line-height: 1.35; }
.fl.is-js .fl__steps button:not(.is-now):not(.is-done) { opacity: .6; }
.fl__steps .is-done i { background: var(--bg-tint); color: var(--blue); }
.fl__steps .is-now { background: var(--bg-tint); } .fl__steps .is-now i { background: var(--blue); color: #fff; }
.bk { display: flex; flex-direction: column; min-height: 400px; background: #fff; box-shadow: 0 26px 60px rgba(10, 37, 64, .16); }
.bk__bar { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; background: var(--navy); } .bk__bar i { width: 9px; height: 9px; background: rgba(255, 255, 255, .28); } .bk__bar small { margin-left: auto; color: #C9D6E6; font-size: 12.5px; }
.bk__body { display: grid; flex: 1; grid-template-columns: 150px minmax(0, 1fr); }
.bk__side { margin: 0; padding: 10px 8px; background: var(--bg-alt); list-style: none; }
.bk__side li { display: flex; align-items: center; gap: 8px; padding: 9px 8px; color: var(--muted); font-size: 13.5px; font-weight: 600; transition: background-color .25s, color .25s; } .bk__side svg { width: 15px; height: 15px; flex: none; }
.bk__side .is-on { background: #fff; color: var(--blue); }
.bk__main { min-width: 0; padding: 20px; }
.bk__screen header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.bk__screen h3 { margin: 0; color: var(--navy); font: 700 19px var(--font-h); }
.bk__screen header em { padding: 5px 10px; background: var(--bg-tint); color: var(--blue); font-size: 13px; font-style: normal; font-weight: 700; }
.bk__screen dl { margin: 6px 0 14px; }
.bk__screen dl div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.bk__screen dt { color: var(--muted); font-size: 14.5px; } .bk__screen dd { margin: 0; color: var(--navy); font-size: 15px; font-weight: 700; }
.bk__toast { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 12px 14px; background: var(--navy); color: #fff; font-size: 14.5px; font-weight: 600; line-height: 1.35; } .bk__toast svg { flex: none; width: 17px; height: 17px; margin-top: 1px; color: #7FE0AE; }
.bk__screen.is-in header { animation: bk-in .3s var(--ease) both; }
.bk__screen.is-in dl div { animation: bk-in .32s var(--ease) both; animation-delay: calc(.1s + var(--i) * .1s); }
.bk__screen.is-in .bk__toast { animation: bk-up .4s var(--ease) .55s both; }
.bk__screen.is-in header em { animation: bk-pop .35s var(--ease) .15s both; }
@keyframes bk-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes bk-up { from { opacity: 0; transform: translateY(14px); } }
@keyframes bk-pop { from { opacity: 0; transform: scale(.8); } }
.fl__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px 24px; margin-top: 20px; }
.fl__benefit { flex: 1 1 340px; margin: 0; color: var(--text); font-size: 16px; line-height: 1.45; } .fl__benefit b { color: var(--blue); }
.wf__panel { padding-top: 4px; } .wf__panel.is-in .wf__list li { animation: bk-in .32s var(--ease) both; animation-delay: calc(var(--i) * .07s); }
.wf__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0 0 20px; padding: 0; list-style: none; }
.wf__list a { display: grid; grid-template-columns: 20px 1fr; gap: 10px; height: 100%; padding: 18px 16px; background: var(--bg-alt); color: var(--navy); transition: background-color .2s; } .wf__list a:hover { background: var(--bg-tint); }
.wf__list svg { width: 18px; height: 18px; margin-top: 1px; color: var(--blue); } .wf__list b { display: block; font: 700 16px/1.25 var(--font-h); } .wf__list small { display: block; margin-top: 3px; color: var(--muted); font-size: 14px; line-height: 1.35; }
@media (max-width: 900px) { .fl__grid { grid-template-columns: 1fr; } .fl__who { grid-auto-flow: row; } .bk__body { grid-template-columns: 1fr; } .bk__side { display: none; } .wf__list { grid-template-columns: 1fr 1fr; } .fl__foot .btn { width: 100%; justify-content: center; } }
@media (max-width: 520px) { .wf__list { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .bk__screen.is-in *, .wf__panel.is-in li { animation: none !important; } }
html.a11y-nomotion .bk__screen.is-in *, html.a11y-nomotion .wf__panel.is-in li { animation: none !important; }
.fl__who [aria-selected="true"]:hover { background: var(--navy); }

/* Back-office demo: a real-looking admin, a cursor that presses the button, a small burst on the click */
.bk { position: relative; overflow: hidden; min-height: 520px; }
.bk__url { margin-left: 10px; color: #C9D6E6; font-size: 12.5px; }
.bk__top { display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 14px; border-bottom: 1px solid var(--line); background: #fff; }
.bk__logo { display: grid; place-items: center; flex: none; width: 30px; height: 30px; background: var(--blue); color: #fff; font: 800 17px var(--font-h); }
.bk__search { display: flex; flex: 1; align-items: center; gap: 8px; min-width: 0; height: 32px; padding: 0 10px; overflow: hidden; background: var(--bg-alt); color: var(--muted); font-size: 13px; white-space: nowrap; } .bk__search svg { flex: none; width: 14px; height: 14px; }
.bk__bell { position: relative; display: grid; place-items: center; flex: none; width: 30px; height: 30px; color: var(--navy); } .bk__bell svg { width: 17px; height: 17px; } .bk__bell em { position: absolute; top: 0; right: -2px; display: grid; place-items: center; width: 15px; height: 15px; background: var(--blue); color: #fff; font-size: 10px; font-style: normal; font-weight: 700; }
.bk__me { display: grid; place-items: center; flex: none; width: 30px; height: 30px; background: var(--navy); color: #fff; font-size: 12px; font-weight: 700; }
.bk__side li { position: relative; } .bk__side li em { margin-left: auto; padding: 1px 6px; background: var(--bg-tint); color: var(--blue); font-size: 11.5px; font-style: normal; font-weight: 700; }
.bk__main { padding: 14px 18px 16px; }
.bk__crumb { margin: 0 0 8px; color: var(--muted); font-size: 12.5px; }
.bk__screen header { padding-bottom: 12px; } .bk__screen h3 { font-size: 18px; } .bk__screen header em { margin-right: auto; }
.bk__act { padding: 8px 12px; background: var(--blue); color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap; transition: transform .12s, background-color .15s; } .bk__act.is-press { transform: scale(.94); background: var(--navy); }
.bk__kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 12px 0 4px; padding: 0; list-style: none; }
.bk__kpis li { padding: 8px 10px; background: var(--bg-alt); } .bk__kpis small { display: block; color: var(--muted); font-size: 12px; line-height: 1.2; } .bk__kpis b { color: var(--navy); font: 700 18px var(--font-h); }
.bk__screen dl { margin: 2px 0 10px; } .bk__screen dl div { padding: 9px 0; } .bk__screen dt { font-size: 13.5px; } .bk__screen dd { font-size: 14px; }
.bk__toast { padding: 9px 12px; font-size: 13.5px; opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .25s; animation: none !important; }
.bk__screen.is-clicked .bk__toast { opacity: 1; transform: none; }
.bk__log { margin-top: 12px; color: var(--muted); font-size: 12.5px; } .bk__log b { color: var(--navy); font-size: 13px; }
.bk__log ul { display: grid; gap: 3px; max-height: 58px; margin: 4px 0 0; padding: 0; overflow: hidden; list-style: none; } .bk__log li { display: flex; gap: 8px; animation: bk-in .25s var(--ease); } .bk__log time { flex: none; color: var(--blue); font-weight: 600; }
.bk__cursor { position: absolute; top: 0; left: 0; z-index: 4; width: 24px; height: 24px; opacity: 0; transform: translate(70%, 80px); transition: transform .85s cubic-bezier(.45, .05, .25, 1), opacity .25s; pointer-events: none; } .bk__cursor.is-on { opacity: 1; }
.bk__spark { position: absolute; z-index: 3; width: 6px; height: 6px; pointer-events: none; animation: bk-spark .5s ease-out both; }
@keyframes bk-spark { to { opacity: 0; transform: translate(var(--x), var(--y)) scale(.4); } }
.bk__body { align-items: stretch; }
@media (max-width: 900px) { .bk { min-height: 0; } .bk__search { display: none; } .bk__top { justify-content: flex-end; } .bk__logo { margin-right: auto; } .bk__act { order: 3; width: 100%; text-align: center; } }
@media (prefers-reduced-motion: reduce) { .bk__cursor { display: none; } .bk__toast { transition: none; } }
html.a11y-nomotion .bk__cursor { display: none; }
.bk__body { grid-template-columns: 178px minmax(0, 1fr); }
.bk__log ul { max-height: 66px; }
@media (max-width: 900px) { .bk__body { grid-template-columns: 1fr; } }

/* Case study: the order video with its stages above it */
.cv__steps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.cv__steps button { display: grid; align-content: start; gap: 4px; width: 100%; height: 100%; padding: 14px 12px; background: var(--bg-alt); border: 0; color: var(--navy); text-align: left; cursor: pointer; transition: background-color .25s, transform .25s var(--ease), color .25s; }
.cv__steps button:hover { background: var(--bg-tint); }
.cv__steps button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.cv__steps i { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 6px; background: #fff; color: var(--blue); transition: background-color .25s, color .25s; } .cv__steps i svg { width: 17px; height: 17px; }
.cv__steps b { font-size: 14.5px; line-height: 1.25; } .cv__steps small { color: var(--muted); font-size: 13px; line-height: 1.3; transition: color .25s; }
.cv__steps .is-done i { background: var(--blue); color: #fff; }
.cv__steps .is-now { background: var(--navy); color: #fff; transform: translateY(-4px); } .cv__steps .is-now small { color: #C9D6E6; } .cv__steps .is-now i { background: var(--blue); color: #fff; }
.cv__steps .is-now:hover { background: var(--navy); }
.cv video { display: block; width: 100%; max-width: 1040px; height: auto; margin: 0 auto; aspect-ratio: 16 / 9; box-shadow: 0 26px 60px rgba(10, 37, 64, .16); }
@media (max-width: 900px) { .cv__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { .cv__steps { grid-template-columns: 1fr 1fr; } .cv__steps small { display: none; } }
/* Old to new */
.cs-change__list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cs-change__list li { display: grid; grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1.2fr); align-items: center; gap: 12px; padding: 14px 18px; background: var(--bg-alt); }
.cs-change__old { color: var(--muted); font-size: 15.5px; line-height: 1.35; }
.cs-change__list i { color: var(--blue); } .cs-change__list i svg { width: 20px; height: 20px; }
.cs-change__new { display: grid; grid-template-columns: 20px 1fr; gap: 8px; color: var(--navy); font-size: 15.5px; font-weight: 600; line-height: 1.35; } .cs-change__new svg { width: 18px; height: 18px; margin-top: 1px; color: var(--ok); }
@media (max-width: 760px) { .cs-change__list li { grid-template-columns: 1fr; gap: 6px; } .cs-change__list i { display: none; } }

/* Steps play by themselves: a thin timer bar instead of a button */
.gs__list > li { cursor: pointer; }
.gs__bar { margin-top: 14px; }
.gs__track { height: 3px; }
.gs__track i { width: 0; transition: none; }
.gs.is-game .gs__list li { opacity: .55; transition: background-color .3s, transform .3s var(--ease), opacity .3s; }
.gs.is-game .gs__list li.is-on { opacity: 1; }
@media (max-width: 860px) { .gs.is-game .gs__list li:not(.is-on) { display: grid; } .gs__bar { position: static; } }

.fl__timer { display: block; height: 3px; margin-top: 16px; background: var(--line); } .fl__timer i { display: block; width: 0; height: 100%; background: var(--blue); }
.fl__foot { margin-top: 14px; }

/* The demo: shop front, admin and email */
.bk.is-front .bk__top, .bk.is-front .bk__side, .bk.is-front .bk__log { display: none; }
.bk.is-front .bk__body { grid-template-columns: 1fr; }
.bk__screen--store .bk__wrap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.bk__pic { position: relative; display: block; aspect-ratio: 1 / 1.05; overflow: hidden; background: var(--bg-alt); }
.bk__pic .cs-art { inset: 18%; width: 64%; max-width: none; height: auto; opacity: .55; }
.bk__screen--store h3 { font-size: 21px; } .bk__screen--store header { border-bottom: 0; padding-bottom: 4px; }
.bk__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 6px; }
.bk__chips span { padding: 8px 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--navy); font-size: 14px; font-weight: 700; transition: background-color .2s, color .2s; }
.bk__chips .is-on { background: var(--navy); color: #fff; box-shadow: none; }
.bk__act--shop { display: block; margin-top: 12px; padding: 13px 16px; text-align: center; font-size: 15px; }
.bk__screen--mail { max-width: 520px; margin-inline: auto; } .bk__from { display: flex; justify-content: space-between; margin: 0 0 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); font-size: 13.5px; color: var(--navy); } .bk__from small { color: var(--muted); }
.bk__screen dl div { transition: background-color .3s, box-shadow .3s; }
.bk__screen dl div.is-hl { background: var(--bg-tint); box-shadow: -10px 0 0 var(--bg-tint), 10px 0 0 var(--bg-tint); }
.bk__screen dd.is-new { color: var(--blue); }
.bk__screen header em.is-new { background: var(--blue); color: #fff; animation: bk-pop .3s var(--ease); }
.bk__screen--store .bk__toast, .bk__screen--mail .bk__toast { margin-top: 14px; }
@media (max-width: 520px) { .bk__screen--store .bk__wrap { grid-template-columns: 1fr; } .bk__pic { display: none; } }
.bk__pic > svg { position: absolute; inset: 10%; width: 80%; height: 80%; }

/* Demo shop front */
.bk__screen--store { position: relative; }
.bk.is-front .bk__main { padding: 0; }
.bk__screen--store .bk__wrap, .bk__screen--store .bk__toast { margin-inline: 18px; }
.bk__screen--mail { padding: 16px 18px; }
.bk__screen--store .bk__wrap { padding-top: 16px; grid-template-columns: minmax(0, .92fr) minmax(0, 1fr); }
.bk__screen--store.is-nopic .bk__wrap { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
.bk__screen--store .bk__toast { margin-bottom: 16px; }
.shop__bar { display: flex; align-items: center; gap: 14px; height: 52px; padding: 0 18px; border-bottom: 1px solid var(--line); background: #fff; }
.shop__logo { color: var(--navy); font: 800 15px var(--font-h); white-space: nowrap; }
.shop__nav { display: flex; gap: 14px; margin-right: auto; color: var(--muted); font-size: 13px; font-weight: 600; } .shop__nav i { font-style: normal; }
.shop__search svg, .shop__icon svg { width: 17px; height: 17px; color: var(--navy); }
.shop__cart { position: relative; display: grid; place-items: center; width: 34px; height: 34px; background: var(--bg-alt); color: var(--navy); transition: transform .2s var(--ease); } .shop__cart svg { width: 18px; height: 18px; }
.shop__cart em { position: absolute; top: -5px; right: -5px; display: grid; place-items: center; min-width: 17px; height: 17px; background: var(--blue); color: #fff; font-size: 11px; font-style: normal; font-weight: 700; }
.shop__cart.is-bump { transform: scale(1.25); }
.shop__gallery { display: grid; gap: 8px; }
.bk__screen--store .bk__pic { aspect-ratio: 1 / 1.05; background: #F4F6F9; }
.bk__pic .tee, .shop__fly .tee { position: absolute; inset: 8%; width: 84%; height: 84%; }
.shop__thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .shop__thumbs i { display: block; padding: 6px; background: #F4F6F9; box-shadow: inset 0 0 0 1px transparent; } .shop__thumbs i.is-on { box-shadow: inset 0 0 0 2px var(--navy); } .shop__thumbs .tee { display: block; width: 100%; height: auto; } .shop__thumbs i:nth-child(2) .tee { transform: scaleX(-1); } .shop__thumbs i:nth-child(3) .tee { transform: scale(1.5) translateY(10%); }
.shop__crumb { width: 100%; margin: 0; color: var(--muted); font-size: 12.5px; }
.shop__price { width: 100%; margin: 2px 0 0; color: var(--navy); font: 800 24px var(--font-h); } .shop__price small { margin-left: 8px; color: var(--ok); font: 600 13px var(--font-b); }
.shop__row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 10px; } .shop__row small { min-width: 62px; color: var(--muted); font-size: 13px; }
.shop__swatches { display: flex; gap: 8px; } .shop__swatches i { display: block; width: 26px; height: 26px; box-shadow: inset 0 0 0 1px var(--line-strong); transition: box-shadow .15s; } .shop__swatches i.is-on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--navy); }
.shop__qty { display: inline-grid; grid-template-columns: 26px 30px 26px; align-items: center; text-align: center; box-shadow: inset 0 0 0 1px var(--line-strong); height: 30px; color: var(--navy); font-size: 14px; } .shop__qty i { font-style: normal; color: var(--muted); }
.shop__stock { margin-left: auto; min-width: 0 !important; }
.shop__perks { display: grid; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; color: var(--muted); font-size: 13px; } .shop__perks li { display: flex; gap: 8px; align-items: center; } .shop__perks svg { width: 15px; height: 15px; color: var(--navy); }
.shop__fly { position: absolute; z-index: 5; display: block; background: #F4F6F9; transform-origin: center; transition: transform .8s cubic-bezier(.5, -.1, .4, 1), opacity .8s; pointer-events: none; }
.shop__drawer { position: absolute; top: 52px; right: 0; bottom: 0; z-index: 4; display: flex; flex-direction: column; gap: 12px; width: min(300px, 86%); padding: 18px; background: #fff; box-shadow: -18px 0 40px rgba(10, 37, 64, .16); transform: translateX(105%); transition: transform .45s var(--ease); }
.shop__drawer.is-open { transform: none; }
.shop__drawer h4 { margin: 0; color: var(--navy); font: 700 17px var(--font-h); }
.shop__line { display: grid; grid-template-columns: 54px 1fr auto; gap: 10px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--line); color: var(--navy); font-size: 14px; } .shop__line small { display: block; color: var(--muted); font-size: 12.5px; }
.shop__mini { display: block; padding: 4px; background: #F4F6F9; --tee: #2F6FE0; } .shop__mini .tee { display: block; width: 100%; height: auto; }
.shop__sum { display: flex; justify-content: space-between; margin: 0; color: var(--navy); font-size: 15px; } .shop__sum b { font: 800 18px var(--font-h); }
.shop__drawer .bk__act--shop { margin-top: 0; }
.shop__paid { display: none; gap: 8px; align-items: center; margin: 0; padding: 10px 12px; background: var(--bg-tint); color: var(--navy); font-size: 14px; font-weight: 700; } .shop__paid svg { width: 16px; height: 16px; color: var(--ok); }
.shop__drawer.is-paid .shop__paid { display: flex; animation: bk-up .3s var(--ease); }
.bk { min-height: 560px; }
@media (max-width: 760px) { .shop__nav, .shop__search { display: none; } .shop__logo { margin-right: auto; } .bk__screen--store .bk__wrap { grid-template-columns: 1fr; } .bk__pic { display: block !important; max-height: 220px; } .shop__thumbs { display: none; } .shop__stock { margin-left: 0; } }

/* Demo scenes */
.bk.is-front .bk__main { padding: 0; }
.sc { position: relative; min-height: 372px; }
.bk.is-front .sc { overflow: hidden; }
.bk__screen .bk__toast { margin-top: 10px; }
.bk.is-front .bk__toast { margin: 0 18px 14px; }
.sc__pad { padding: 14px 18px 16px; }
.pd { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.pd__g { display: grid; gap: 8px; min-width: 0; }
.pd__i { min-width: 0; } .pd__i > small { color: var(--muted); font-size: 12.5px; }
.sc h3 { margin: 2px 0 0; color: var(--navy); font: 700 20px/1.2 var(--font-h); }
.sc h4 { margin: 0 0 8px; color: var(--navy); font: 700 15px var(--font-h); }
.sc .bk__pic { position: relative; display: block; aspect-ratio: 1 / 1.02; overflow: hidden; background: #F4F6F9; }
.sc .bk__pic .tee { position: absolute; inset: 8%; width: 84%; height: 84%; }
.sc .bk__chips { margin: 0; }
.sc .bk__act--shop { margin-top: 12px; }
.ad__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); margin-bottom: 10px; } .ad__head > div:first-child { margin-right: auto; } .ad__head small { color: var(--muted); font-size: 12.5px; }
.ad__head > div:first-child + .pill { margin-right: 0; }
.pill { display: inline-block; padding: 5px 10px; background: var(--bg-tint); color: var(--blue); font-size: 12.5px; font-style: normal; font-weight: 700; white-space: nowrap; transition: background-color .25s, color .25s; } .pill.is-new { background: var(--blue); color: #fff; }
.ad__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.card { display: grid; align-content: start; gap: 5px; padding: 12px; background: var(--bg-alt); color: var(--text); font-size: 13.5px; transition: box-shadow .3s; } .card > small { color: var(--muted); font-size: 12px; } .card > b { color: var(--navy); font-size: 14.5px; }
.card.is-hlc { box-shadow: inset 0 0 0 2px var(--blue); }
.sc dl { margin: 0; } .sc dl div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; padding: 7px 0; border-bottom: 1px solid var(--line); } .sc dt { color: var(--muted); font-size: 13px; } .sc dd { margin: 0; color: var(--navy); font-size: 13.5px; font-weight: 700; } .sc dd.is-new { color: var(--blue); }
.is-pulse { animation: sc-pulse .5s var(--ease); display: inline-block; } @keyframes sc-pulse { 40% { transform: scale(1.22); color: var(--blue); } }
.tb { width: 100%; border-collapse: collapse; font-size: 13.5px; color: var(--text); } .tb th { padding: 7px 8px; color: var(--muted); font-size: 12px; font-weight: 600; text-align: left; border-bottom: 1px solid var(--line); } .tb td { padding: 8px; border-bottom: 1px solid var(--line); transition: background-color .3s; }
.tb tr.is-hl td { background: var(--bg-tint); } .tb__th { display: inline-block; width: 26px; height: 26px; margin-right: 8px; vertical-align: middle; } .tb__th .tee { width: 100%; height: 100%; display: block; }
.tb__new { opacity: 0; transform: translateY(-8px); transition: opacity .35s, transform .35s var(--ease); display: table-row; } .tb__new.is-in { opacity: 1; transform: none; }
.tb--tier td, .tb--tier th { padding: 10px; }
.sc__note { margin: 8px 0 0; padding: 7px 10px; background: var(--bg-alt); color: var(--muted); font-size: 12.5px; opacity: 0; transition: opacity .3s; } .sc__note.is-in { opacity: 1; }
.inp { display: inline-block; min-width: 96px; min-height: 32px; padding: 6px 10px; box-shadow: inset 0 0 0 1px var(--line-strong); background: #fff; color: var(--navy); font-size: 14px; font-weight: 700; } .inp--s { min-width: 64px; } .inp--w { flex: 1; min-width: 150px; }
.filechip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); color: var(--navy); font-size: 12.5px; font-weight: 600; width: fit-content; } .filechip svg { width: 14px; height: 14px; color: var(--blue); }
.barcode { display: block; height: 30px; background: repeating-linear-gradient(90deg, #0A2540 0 2px, transparent 2px 4px, #0A2540 4px 7px, transparent 7px 9px); } .lines { display: block; height: 30px; background: repeating-linear-gradient(180deg, #B9C6D6 0 3px, transparent 3px 9px); }
.vouch { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; opacity: 0; transform: translateY(12px); transition: opacity .35s, transform .35s var(--ease); } .vouch.is-in { opacity: 1; transform: none; }
.vouch__card { display: grid; gap: 4px; padding: 10px 12px; background: #fff; box-shadow: 0 8px 20px rgba(10, 37, 64, .14); font-size: 12.5px; color: var(--muted); } .vouch__card b { color: var(--navy); font-size: 14px; }
.ml { max-width: 500px; margin: 0 auto; padding: 18px; color: var(--text); font-size: 14px; line-height: 1.4; } .ml__h { display: flex; justify-content: space-between; margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--navy); } .ml__h small { color: var(--muted); } .ml p { margin: 8px 0; }
.ml__d { margin-top: 8px !important; }
[data-c="a"].is-gone { display: none; }
.trk { display: none; max-width: 480px; margin: 0 auto; padding: 18px; } .trk.is-show { display: block; animation: bk-in .3s var(--ease); } .trk > small { color: var(--muted); font-size: 13px; }
.trk ol { display: grid; gap: 4px; margin: 16px 0 0; padding: 0; list-style: none; } .trk li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--bg-alt); color: var(--muted); font-size: 14px; font-weight: 600; transition: background-color .3s, color .3s; } .trk li i { display: grid; place-items: center; width: 26px; height: 26px; background: #fff; } .trk li svg { width: 14px; height: 14px; } .trk li.is-on { background: var(--bg-tint); color: var(--navy); } .trk li.is-on i { background: var(--blue); color: #fff; }
.shop__paid.is-show { display: flex; margin-top: 10px; animation: bk-up .3s var(--ease); }
.drop { position: relative; display: grid; place-items: center; min-height: 92px; margin: 10px 0; box-shadow: inset 0 0 0 2px var(--line-strong); color: var(--muted); font-size: 13.5px; transition: background-color .2s, box-shadow .2s; } .drop span { display: inline-flex; gap: 8px; align-items: center; } .drop svg { width: 16px; height: 16px; } .drop.is-over { background: var(--bg-tint); box-shadow: inset 0 0 0 2px var(--blue); }
.drop__file { position: absolute; inset: 8px; display: grid; gap: 6px; align-content: center; padding: 8px 10px; background: #fff; color: var(--navy); font-size: 13.5px; opacity: 0; transition: opacity .25s; } .drop__file.is-in { opacity: 1; } .bar { display: block; height: 5px; background: var(--line); } .bar em { display: block; width: 0; height: 100%; background: var(--blue); transition: width .9s linear; } .bar em.is-full { width: 100%; }
.card--pv { opacity: 0; transition: opacity .35s; } .card--pv.is-in { opacity: 1; } .logo-pv { display: grid; place-items: center; height: 90px; background: #fff; color: var(--blue); font: 800 20px var(--font-h); } .filechip.is-row { width: 100%; }
.kb { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .kb__c { display: grid; align-content: start; gap: 8px; min-height: 220px; padding: 8px; background: var(--bg-alt); font-size: 12.5px; color: var(--navy); }
.kb__k { display: grid; gap: 4px; padding: 8px; background: #fff; box-shadow: 0 6px 14px rgba(10, 37, 64, .1); font-weight: 700; font-size: 13.5px; transition: transform .7s cubic-bezier(.45, .05, .25, 1); z-index: 1; position: relative; } .kb__k small { color: var(--muted); font-weight: 500; font-size: 12px; } .kb__k.is-dim { opacity: .75; } .kb__k.is-moved { transform: translateX(calc(100% + 24px)) translateY(64px); }
.vers { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; } .vers__c { display: grid; gap: 3px; padding: 12px; background: var(--bg-alt); color: var(--muted); font-size: 13px; box-shadow: inset 0 0 0 2px transparent; transition: box-shadow .2s, background-color .2s; } .vers__c b, .vers__c strong { color: var(--navy); } .vers__c.is-on { box-shadow: inset 0 0 0 2px var(--blue); background: var(--bg-tint); }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin: 4px 0; } .cal i { display: block; height: 16px; background: #fff; transition: background-color .2s; } .cal i.is-on { background: var(--blue); }
s.is-strike, .shop__price s { text-decoration-color: transparent; transition: text-decoration-color .3s; } .shop__price s.is-strike { text-decoration-color: currentColor; color: var(--muted); font-size: 17px; font-weight: 600; } .shop__price span { color: var(--blue); }
.pic__tag { position: absolute; top: 8px; left: 8px; padding: 4px 8px; background: var(--blue); color: #fff; font-size: 13px; font-style: normal; font-weight: 700; opacity: 0; transform: scale(.7); transition: opacity .25s, transform .25s var(--ease); } .pic__tag.is-in { opacity: 1; transform: none; }
.shop__qty--w { grid-template-columns: 32px 50px 32px; } .big { font-size: 22px; }
.sum { padding: 12px; background: var(--bg-alt); }
.radios { display: grid; gap: 6px; margin-top: 12px; } .radios span { padding: 10px 12px; background: var(--bg-alt); color: var(--navy); font-size: 14px; font-weight: 600; box-shadow: inset 0 0 0 2px transparent; transition: box-shadow .2s; } .radios .is-on { box-shadow: inset 0 0 0 2px var(--blue); background: var(--bg-tint); }
.paysheet { position: absolute; right: 0; bottom: 0; left: 0; z-index: 3; display: grid; justify-items: center; gap: 4px; padding: 20px; background: #0A2540; color: #fff; transform: translateY(105%); transition: transform .4s var(--ease); } .paysheet.is-open { transform: none; } .paysheet small { color: #C9D6E6; } .paysheet i { display: grid; place-items: center; width: 42px; height: 42px; margin-top: 6px; background: var(--ok); opacity: 0; transform: scale(.5); transition: opacity .2s, transform .3s var(--ease); } .paysheet i.is-in { opacity: 1; transform: none; } .paysheet svg { width: 22px; height: 22px; } .paysheet span { opacity: 0; font-weight: 700; } .paysheet span.is-in { opacity: 1; }
.pl { display: grid; gap: 14px; margin-top: 8px; } .pl > div { display: grid; grid-template-columns: 100px 1fr 60px; gap: 10px; align-items: center; color: var(--navy); font-size: 13.5px; } .pl i { display: block; height: 20px; background: var(--bg-alt); } .pl em { display: block; width: 0; height: 100%; background: var(--blue); transition: width .6s var(--ease); } .pl em.is-full { width: 100%; } .pl i.c { width: 66%; } .pl i.c em { background: #9DB4CF; } .pl i.g { width: 34%; } .pl i.g em { background: var(--ok); } .pl__t b { color: var(--ok); }
.ch { display: flex; align-items: flex-end; gap: 8px; height: 140px; margin: 6px 0 10px; padding: 8px; background: var(--bg-alt); } .ch i { flex: 1; height: 8%; background: var(--blue); transition: height .6s var(--ease); } .ch.is-full i { height: var(--h); }
.geo { display: flex; gap: 10px; align-items: center; margin-top: 12px; padding: 10px 12px; background: var(--navy); color: #fff; opacity: 0; transform: translateY(10px); transition: opacity .3s, transform .3s var(--ease); } .geo.is-in { opacity: 1; transform: none; } .geo i { flex: none; color: #8DB2F2; } .geo svg { width: 20px; height: 20px; display: block; } .geo b { display: block; font-size: 14px; } .geo small { color: #C9D6E6; font-size: 12.5px; } .geo--top { position: absolute; left: 18px; right: 18px; bottom: 14px; margin: 0; z-index: 2; }
.lang { position: absolute; left: 50%; bottom: 16px; z-index: 3; display: grid; justify-items: center; gap: 8px; width: min(340px, 90%); padding: 16px; background: #fff; box-shadow: 0 18px 40px rgba(10, 37, 64, .25); color: var(--navy); text-align: center; opacity: 0; transform: translate(-50%, 14px); transition: opacity .3s, transform .3s var(--ease); pointer-events: none; } .lang.is-in { opacity: 1; transform: translate(-50%, 0); } .lang small { color: var(--muted); }
.ax__p { margin: 8px 0 0; color: var(--text); font-size: 14px; transition: font-size .3s; } .ax__btn { position: absolute; left: 12px; bottom: 12px; z-index: 3; display: grid; place-items: center; width: 40px; height: 40px; background: var(--navy); color: #fff; } .ax__btn svg { width: 20px; height: 20px; }
.ax { position: absolute; left: 12px; bottom: 58px; z-index: 3; display: grid; gap: 4px; width: 210px; padding: 12px; background: #fff; box-shadow: 0 16px 36px rgba(10, 37, 64, .25); color: var(--navy); font-size: 13px; opacity: 0; transform: translateY(10px); transition: opacity .25s, transform .25s var(--ease); pointer-events: none; } .ax.is-open { opacity: 1; transform: none; } .ax span { padding: 7px 8px; background: var(--bg-alt); font-weight: 600; transition: background-color .2s, color .2s; } .ax span.is-on { background: var(--blue); color: #fff; }
.ax-big h3 { font-size: 27px; } .ax-big .shop__price { font-size: 30px; } .ax-big .ax__p { font-size: 18px; line-height: 1.4; }
.ax-hc { background: #000; color: #fff; } .ax-hc .shop__bar { background: #000; border-color: #fff; } .ax-hc .shop__logo, .ax-hc h3, .ax-hc .shop__price, .ax-hc .ax__p { color: #FFE14D; } .ax-hc .shop__nav { color: #fff; } .ax-hc .bk__pic { background: #222; }
.sc [data-c="pg"] h3, .sc [data-c="pg"] .shop__price { transition: font-size .3s, color .3s; }
.shop__drawer { top: 52px; }
.bk__act.is-press, [data-c].is-press { transform: scale(.95); }
@media (max-width: 760px) { .pd, .ad__cols, .vouch { grid-template-columns: 1fr; } .sc .bk__pic { max-height: 190px; aspect-ratio: auto; height: 190px; } .kb__c { min-height: 180px; } .tb th:nth-child(n+3), .tb td:nth-child(n+4) { display: none; } .kb__k.is-moved { transform: translateX(calc(100% + 20px)) translateY(64px); } }
/* Drawings sit on the page, no white box around them */
.sp-hero__art { background: none; }
.cs-box--art { background: none !important; box-shadow: none !important; outline: 0 !important; border: 0 !important; }
.shop__thumbs i { overflow: hidden; }

/* Audit fixes */
.aff-tier.aff-tier--up { background: var(--blue); }
.mobile-nav__close { position: absolute; top: 14px; right: 16px; z-index: 2; width: 46px; height: 46px; border: 1px solid var(--line-strong); background: #fff; cursor: pointer; }
.mobile-nav__close span { position: absolute; left: 12px; right: 12px; top: 22px; height: 2px; background: var(--navy); } .mobile-nav__close span:first-child { transform: rotate(45deg); } .mobile-nav__close span:last-child { transform: rotate(-45deg); }
.mobile-nav__close:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.pk-free { scroll-margin-top: 130px; transition: box-shadow .3s; } .pk-free.is-reco { box-shadow: 0 0 0 3px var(--blue), 0 18px 44px rgba(13, 91, 221, .25); }
h3.is-pulse { display: block; }

/* Plan block: an example of the plan itself */
.fd-plan { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.fd-plan li { display: flex; align-items: flex-start; gap: 12px; padding: 14px; background: #fff; }
.fd-plan i { display: grid; place-items: center; flex: none; width: 26px; height: 26px; background: var(--navy); color: #fff; font: 700 13px var(--font-num); font-style: normal; }
.fd-plan span { display: grid; gap: 2px; min-width: 0; }
.fd-plan b { color: var(--navy); font-size: 15px; }
.fd-plan small { color: var(--muted, #4A5B72); font-size: 13px; line-height: 1.4; }
.fd-plan__sum { display: flex; align-items: baseline; gap: 10px; margin: 0; padding: 4px 2px; }
.fd-plan__sum span { margin-right: auto; font-size: 13px; color: var(--muted, #4A5B72); }
.fd-plan__sum b { font: 700 18px var(--font-num); color: var(--navy); }
.fd-plan__sum small { font-size: 12.5px; color: var(--muted, #4A5B72); }