/* Styles shared by the solution pages (templates/solutions/*.html), under
   the sol- prefix: the rules every page has the same, and the parts only
   some pages use. Each page keeps its own rules (colours, sample documents,
   sheet columns) in an inline <style> after this file. */
/* Hero: the homepage .home grid, the tile illustration in the second column.
   The tiles have no intrinsic size, so the column must give them one (on
   phones the hero centres its items, which would shrink it to nothing). */
.sol-hero .home__image { display: block; width: 100%; }
/* Hero demo, drawn to the demo / uploading / uploaded SVGs. A grey square, a
   white drop zone inset by 40/470 of its width with a 4/4 dashed outline (an
   SVG background, as CSS dashes can't be set). data-state on the root
   switches the zone's layers: idle (the prompt; also while the PDF is being
   dragged in), uploading (bar and percentage, set by the script), done (the
   apps). Inside the zone, sizes are in cqw of the zone (390 in the SVGs), so
   the whole thing scales down on phones. */
.sol-demo { aspect-ratio: 1; background: #f8f8fa; border: 1px solid #ebebef; border-radius: 0.25rem; display: grid; padding: 8.3%; position: relative; }
.sol-demo__drop { background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='.5' y='.5' width='calc(100%25 - 1px)' height='calc(100%25 - 1px)' rx='3.5' fill='none' stroke='black' stroke-dasharray='4 4'/%3E%3C/svg%3E"); border-radius: 0.25rem; container-type: size; cursor: pointer; display: grid; min-height: 0; position: relative; transition: background-color .2s; }
.sol-demo__drop.is-over { background: #f3f8fe url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='.5' y='.5' width='calc(100%25 - 1px)' height='calc(100%25 - 1px)' rx='3.5' fill='none' stroke='%231f83f2' stroke-dasharray='4 4'/%3E%3C/svg%3E"); }
/* Keyboard focus on the hidden file input rings the whole zone (a click on
   "Watch a demo" focuses the button, which keeps its own ring, so no
   :focus-within here). */
.sol-demo__drop:has(.sol-demo__input:focus-visible) { outline: 2px solid #1f83f2; outline-offset: 2px; }
.sol-demo:not([data-state="idle"]) .sol-demo__drop { cursor: default; }
.sol-demo__idle, .sol-demo__uploading, .sol-demo__result { grid-area: 1 / 1; min-height: 0; opacity: 0; transition: opacity .3s, visibility 0s .3s; visibility: hidden; }
.sol-demo[data-state="idle"] .sol-demo__idle, .sol-demo[data-state="dragging"] .sol-demo__idle,
.sol-demo[data-state="uploading"] .sol-demo__uploading, .sol-demo[data-state="done"] .sol-demo__result { opacity: 1; transition: opacity .3s; visibility: visible; }
.sol-demo[data-state="dragging"] .sol-demo__idle { pointer-events: none; }
/* Idle (demo.svg). */
.sol-demo__idle { align-items: center; display: flex; flex-direction: column; justify-content: center; text-align: center; }
.sol-demo__cloud { color: #000; display: block; margin-bottom: 0.875rem; }
.sol-demo__label { color: #000; cursor: pointer; font-size: 0.875rem; line-height: 1.43; }
.sol-demo__or { color: #000; font-size: 0.875rem; line-height: 1.43; margin: 0.75rem 0 1rem; }
.sol-demo__watch { align-items: center; background: #ebebef; border: 0; border-radius: 0.25rem; color: #000; cursor: pointer; display: inline-flex; font: inherit; font-size: 0.875rem; font-weight: 600; gap: 0.5rem; height: 2rem; padding: 0 0.9375rem 0 0.8125rem; transition: background-color .2s; }
.sol-demo__watch:hover { background: #dedee4; }
.sol-demo__watch svg { display: block; flex-shrink: 0; overflow: visible; }
.sol-demo__input { height: 1px; opacity: 0; overflow: hidden; position: absolute; width: 1px; }
/* Uploading (uploading.svg): the label, then a 310x30 bar with the
   percentage centred on it, white once the fill is under it. */
.sol-demo__uploading { align-items: center; display: flex; flex-direction: column; justify-content: center; }
.sol-demo__uploading > span:first-child { color: #000; font-size: 0.875rem; }
.sol-demo__bar { background: #ebebef; border-radius: 0.25rem; height: max(1.5rem, 7.7cqw); margin-top: 7.2cqw; overflow: hidden; position: relative; width: 79.5cqw; }
.sol-demo__bar i { background: #1f83f2; display: block; height: 100%; width: 0; }
.sol-demo__bar b { align-items: center; color: #2a2c2d; display: flex; font-size: 0.875rem; font-weight: 600; inset: 0; justify-content: center; position: absolute; }
.sol-demo__bar.is-past b { color: #fff; }
/* Done (uploaded.svg): each app is a 100x100 white tile with a green tick
   and its name under it, alone in the middle. The next one takes its place
   once it has faded out (its entrance waits for the exit). */
.sol-demo__result { position: relative; transition: opacity .35s, visibility 0s .35s; }
.sol-demo.is-finished .sol-demo__result { opacity: 0; visibility: hidden; }
.sol-demo__tile { align-items: center; background: #fff; border: 1px solid #ebebef; border-radius: 0.25rem; display: flex; height: 25.4cqw; justify-content: center; left: 37.3cqw; opacity: 0; position: absolute; top: 28.6cqw; transform: scale(.9); transition: opacity .3s, transform .3s; width: 25.4cqw; }
.sol-demo__tile img, .sol-demo__tile svg { height: auto; width: 44%; }
.sol-demo__check { aspect-ratio: 1; background: #3ab54a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5L10.5 16L17 8.5' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; border: 2px solid #fff; border-radius: 50%; position: absolute; right: -9%; top: -9%; transform: scale(0); transition: transform .2s; width: 24%; }
.sol-demo__cap { left: 0; opacity: 0; position: absolute; right: 0; text-align: center; top: 58.5cqw; transform: translateY(0.375rem); transition: opacity .3s, transform .3s; }
.sol-demo__cap b { color: #000; display: block; font-size: 1rem; font-weight: 600; line-height: 1.5; }
.sol-demo__app.is-center .sol-demo__tile { opacity: 1; transform: none; transition-delay: .35s; }
.sol-demo__app.is-center .sol-demo__check { transform: none; transition: transform .35s cubic-bezier(.3, 1.6, .5, 1) .8s; }
.sol-demo__app.is-center .sol-demo__cap { opacity: 1; transform: none; transition-delay: .5s; }
/* Last screen (last screen.svg, a 390 zone): 60x60 tiles at y 40 joined by
   thin lines, then the slogan, the CTA, the note at the foot. */
.sol-demo__end { grid-area: 1 / 1; opacity: 0; position: relative; transition: opacity .5s, visibility 0s .5s; visibility: hidden; }
.sol-demo.is-finished .sol-demo__end { opacity: 1; transition: opacity .2s .3s; visibility: visible; }
/* Its entrance, in order: each app pops in with the line leading to it
   drawing first, then the slogan rises, the CTA pops, the note fades in. */
.sol-demo.is-finished .sol-demo__mini i { animation: sol-demo-pop .5s cubic-bezier(.3, 1.5, .5, 1) both; }
.sol-demo.is-finished .sol-demo__mini + .sol-demo__mini::before { animation: sol-demo-draw .3s ease-out both; transform-origin: left; }
.sol-demo.is-finished .sol-demo__mini:nth-child(1) > * { animation-delay: .4s; }
.sol-demo.is-finished .sol-demo__mini:nth-child(2)::before { animation-delay: .7s; }
.sol-demo.is-finished .sol-demo__mini:nth-child(2) > * { animation-delay: .9s; }
.sol-demo.is-finished .sol-demo__mini:nth-child(3)::before { animation-delay: 1.2s; }
.sol-demo.is-finished .sol-demo__mini:nth-child(3) > * { animation-delay: 1.4s; }
@keyframes sol-demo-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes sol-demo-rise { from { opacity: 0; transform: translateY(0.625rem); } to { opacity: 1; transform: none; } }
@keyframes sol-demo-draw { from { transform: scaleX(0); } to { transform: none; } }
@keyframes sol-demo-cta { from { opacity: 0; transform: translateX(-50%) scale(.85); } to { opacity: 1; transform: translateX(-50%); } }
@keyframes sol-demo-fade { from { opacity: 0; } to { opacity: 1; } }
.sol-demo__flow { display: flex; justify-content: center; padding-top: 10.4cqw; }
.sol-demo__mini i { align-items: center; background: #fff; border: 1px solid #ebebef; border-radius: 0.25rem; display: flex; height: 15.4cqw; justify-content: center; width: 15.4cqw; }
.sol-demo__mini img, .sol-demo__mini svg { height: 20px; width: auto; }
/* The Sheets mark is wider than the others, so it sits a touch lower. */
.sol-demo__mini:nth-child(2) img { height: 18px; }
/* The AI mark is square and dense; a touch smaller reads the same size.
   It carries the brand gradient of the footer motto (yellow, green, blue,
   purple), drawn diagonally. */
.sol-demo__tile--ai svg { color: #000; width: 36%; }
.sol-demo__mini--ai svg { color: #000; height: 18px; }
/* The Gmail mark is wide and low, like the Sheets one. */
.sol-demo__tile--mail svg { width: 40%; }
.sol-demo__mini--mail svg { height: 17px; }
.sol-demo .sol-demo__slogan { color: #000; font-size: 1.125rem; font-weight: 600; line-height: 1.55; margin: 0; position: absolute; text-align: center; top: 38.5cqw; width: 100%; }
.sol-demo__end .sol-demo__cta { left: 50%; position: absolute; top: 58.7cqw; transform: translateX(-50%); white-space: nowrap; }
.sol-demo .sol-demo__note { bottom: 4.6cqw; color: #898989; font-size: 0.8125rem; left: 0; margin: 0; position: absolute; right: 0; text-align: center; }
.sol-demo__again { background: none; border: 0; color: #1f83f2; cursor: pointer; font: inherit; padding: 0; }
.sol-demo__again:hover { text-decoration: underline; }
/* The dragged files (the page's sample documents as file icons, with a
   count badge as in a multi-file drag) and the pointer carrying them, on
   top of the whole square so they can come in from its grey edge. */
.sol-demo__ghost { left: 50%; margin-left: -7.5%; opacity: 0; pointer-events: none; position: absolute; top: 40%; width: 15%; z-index: 2; }
.sol-demo[data-state="dragging"] .sol-demo__ghost { animation: sol-demo-drag 1.9s cubic-bezier(.45, .05, .25, 1) both; }
.sol-demo__pdf { aspect-ratio: 64 / 80; background: #fff; border: 1px solid #e3e3e8; border-radius: 0.25rem; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16); display: flex; flex-direction: column; gap: 7%; padding: 14% 12%; position: relative; }
/* Folded corner. */
.sol-demo__pdf::after { background: linear-gradient(225deg, #f8f8fa 50%, #e3e3e8 50%); border-bottom-left-radius: 0.1875rem; content: ''; height: 22%; position: absolute; right: -1px; top: -1px; width: 28%; }
.sol-demo__pdf b { align-self: flex-start; background: #e5252a; border-radius: 0.1875rem; color: #fff; font-size: 0.5625rem; font-weight: 700; line-height: 1; margin-bottom: 8%; padding: 0.1875rem 0.25rem; }
.sol-demo__pdf i { background: #e3e3e8; border-radius: 1px; display: block; height: 0.1875rem; }
.sol-demo__pdf i:nth-of-type(2) { width: 80%; }
.sol-demo__pdf i:nth-of-type(3) { width: 90%; }
.sol-demo__pdf i:nth-of-type(4) { width: 60%; }
.sol-demo__pdf i:nth-of-type(5) { align-self: flex-end; background: #c9c9d1; margin-top: 6%; width: 40%; }
.sol-demo__img b { background: #1f83f2; }
.sol-demo__img svg { display: block; margin-top: 4%; width: 100%; }
.sol-demo__count { align-items: center; background: #1f83f2; border: 2px solid #fff; border-radius: 50%; box-sizing: content-box; color: #fff; display: flex; font-size: 0.6875rem; font-weight: 700; height: 1.25rem; justify-content: center; position: absolute; right: -16%; top: -12%; width: 1.25rem; }
.sol-demo__pointer { bottom: -22%; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.2)); position: absolute; right: -14%; width: 36%; }
@keyframes sol-demo-drag {
  0% { opacity: 0; transform: translate(170%, 150%) rotate(10deg); }
  12% { opacity: 1; }
  62% { transform: translate(0, 0) rotate(-4deg); }
  76% { opacity: 1; transform: translate(0, 0) rotate(-4deg); }
  100% { opacity: 0; transform: translate(0, 12%) rotate(-4deg) scale(.4); }
}
.sol-demo__live { height: 1px; margin: 0; overflow: hidden; position: absolute; width: 1px; }
/* Phones: smaller type to match the smaller zone. */
@media (max-width: 479px) {
  .sol-demo__cap b { font-size: 0.875rem; }
  .sol-demo .sol-demo__slogan { font-size: 0.9375rem; }
  .sol-demo .sol-demo__note { font-size: 0.6875rem; }
}
@media (prefers-reduced-motion: reduce) {
  .sol-demo *, .sol-demo *::after { animation: none !important; transition: none !important; }
}
.sol-hero.home { padding-bottom: 11rem; padding-top: 5rem; }
.subpage.sol-top { padding-top: 0; }
.sol-hero .home__buttons { gap: 0.5rem; }
.sol-hero .home__buttons .btn { line-height: 1.25rem; }
.sol-section-header { padding-top: 11rem; }
.sol-section-header--wide { padding-top: 14rem; }
/* Templates open the block after the quote band; as a first child their
   header has no padding of its own, so the block carries the space. */
.subpage.sol-after-quote { overflow-x: clip; padding-top: 8.5rem; }
/* Custom forms: a longer line of text than the homepage's, so a wider
   column for it. */
.sol-forms .subpage__header-par { max-width: 38rem; }
/* Form builder demo: settings on the left (real controls), the form they
   shape on the right. The script copies the choices onto the root: the
   form's background (--reb-bg) with the label colour that reads on it
   (--reb-text), the uploader theme (data-theme), the Send button that
   stands out on it (data-send) and the label alignment (data-align). Send
   is blue, white on the green, blue and purple forms, black on the yellow
   one and yellow on the Dark theme. Sizes
   are in px, taken from the design's SVG. */
/* Settings and form share one white box with the steppers' frame line,
   split in half: the settings padded on the left, the form's grey panel
   filling the right half to the box's edges. */
.sol-builder { --reb-bg: #141414; --reb-text: #fff; background: #fff; border: 1px solid #ebebef; border-radius: 0.25rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 4rem; overflow: hidden; }
/* 56px from the box's outer edge on the left, 51px to the first label's
   line box on top (the box's 1px line counts). */
.sol-builder__controls { padding: 50px 56px 56px 55px; }
.sol-builder__group { border: 0; margin: 0; min-width: 0; padding: 0; }
.sol-builder__group + .sol-builder__group { margin-top: 43px; }
.sol-builder .sol-builder__legend { color: #898989; display: block; font-size: 12px; font-weight: 400; line-height: 18px; margin: 0 0 19px; padding: 0; text-transform: uppercase; }
.sol-builder__sr { clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
/* Colour and alignment choices: 40px tiles with a 1px line, black for the
   chosen one. A colour tile holds a 16px dot, an alignment tile its icon. */
.sol-builder__choices { display: flex; flex-wrap: wrap; gap: 12px; }
/* Colour: its label and tiles on one line, to keep the box low. */
.sol-builder__inline { align-items: center; display: flex; flex-wrap: wrap; gap: 12px 24px; }
.sol-builder .sol-builder__inline .sol-builder__legend { margin: 0; }
.sol-builder__choice { cursor: pointer; display: block; position: relative; }
.sol-builder__tile { align-items: center; background: #fff; border: 1px solid #ebebef; border-radius: 10px; box-sizing: border-box; color: #000; display: flex; height: 40px; justify-content: center; transition: border-color .2s; width: 40px; }
.sol-builder__tile--dot::before { background: var(--c); border-radius: 50%; content: ''; height: 16px; width: 16px; }
.sol-builder__tile svg { display: block; }
.sol-builder__choice:hover .sol-builder__tile { border-color: #c9c9d1; }
.sol-builder__choice input:checked + .sol-builder__tile { border-color: #000; }
.sol-builder__choice input:focus-visible + .sol-builder__tile { outline: 2px solid #1f83f2; outline-offset: 2px; }
/* Field palette: one chip per field type, dragged onto the form (or
   clicked to add it at the end). Chips are buttons, so keyboard users add
   fields too. touch-action: none lets a finger drag them instead of
   scrolling the page. */
.sol-builder__palette { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Under the palette: how to use it, then the way to the form builder page
   in the templates' "Use template" link style. */
.sol-builder .sol-builder__hint { color: #898989; font-size: 14px; line-height: 22px; margin: 24px 0 0; }
.sol-builder__more { margin-top: 2.5rem; }
.sol-builder__chip { align-items: center; background: #fff; border: 1px solid #ebebef; border-radius: 10px; color: #000; cursor: grab; display: flex; font: inherit; font-size: 14px; font-weight: 400; gap: 16px; height: 40px; line-height: 1; padding: 0 19px; text-align: left; touch-action: none; transition: border-color .2s, opacity .2s; -webkit-user-select: none; user-select: none; }
.sol-builder__chip:hover { border-color: #c9c9d1; }
.sol-builder__chip:focus-visible { outline: 2px solid #1f83f2; outline-offset: 2px; }
/* Icons sit left in a 16px slot, so every label starts 52px in. */
.sol-builder__chip-icon { color: #000; display: flex; flex-shrink: 0; width: 16px; }
.sol-builder__chip-icon svg { display: block; max-height: 16px; max-width: 16px; }
.sol-builder__chip:disabled { cursor: not-allowed; opacity: 0.45; }
.sol-builder__chip:disabled:hover { border-color: #ebebef; }
/* While dragging: a copy of the chip follows the pointer and a line in the
   form shows where the field will land. */
.sol-builder__ghost { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); left: 0; margin: 0; pointer-events: none; position: fixed; top: 0; z-index: 1000; }
.sol-builder.is-dragging, .sol-builder.is-dragging * { cursor: grabbing; }
.sol-builder__stage { position: relative; transition: box-shadow .2s; }
.sol-builder__stage.is-target { box-shadow: inset 0 0 0 2px #1f83f2, inset 0 0 0 4px #fff; }
.sol-builder__rows { position: relative; }
.sol-builder__line { background: #1f83f2; border-radius: 2px; box-shadow: 0 0 0 2px #fff; display: none; height: 3px; left: 0; pointer-events: none; position: absolute; right: 0; transform: translateY(-50%); }
.sol-builder__line.is-on { display: block; }
/* The preview: the uploader's own look and sizes (measured off the real
   one, in px so the site's smaller root font on narrow screens doesn't
   shrink it): a light grey panel, 48px fields, the
   208px upload area with its 32px Add files / Add folders buttons and the
   48px Send button under it. */
/* The panel keeps the default form's height (so the box never grows) and
   scrolls once fields are added. */
.sol-builder__stage { background: var(--reb-bg); box-sizing: border-box; color: var(--reb-text); font-size: 15px; height: 528px; overflow-y: auto; overscroll-behavior: contain; padding: 48px 80px; scrollbar-color: #c9c9d1 transparent; scrollbar-width: thin; transition: background-color .25s, color .25s, box-shadow .2s; }
.sol-builder__stage::-webkit-scrollbar { width: 8px; }
.sol-builder__stage::-webkit-scrollbar-thumb { background: #c9c9d1; border: 2px solid transparent; border-radius: 4px; background-clip: padding-box; }
/* Fields fold in and out (grid rows 0fr <-> 1fr), so nothing jumps. */
.sol-builder__row { display: grid; grid-template-rows: 1fr; margin-bottom: 24px; opacity: 1; transition: grid-template-rows .3s ease, opacity .25s ease, margin .3s ease; }
.sol-builder__row > div { min-height: 0; overflow: hidden; }
.sol-builder__row.is-off { grid-template-rows: 0fr; margin-bottom: 0; opacity: 0; }
.sol-builder__head { align-items: center; display: flex; gap: 8px; margin-bottom: 8px; }
.sol-builder__head .sol-builder__label { flex: 1; margin-bottom: 0; min-width: 0; }
/* Remove a field: shown on hover or focus, always on touch screens. */
.sol-builder__remove { align-items: center; background: none; border: 0; border-radius: 50%; color: inherit; cursor: pointer; display: flex; flex-shrink: 0; height: 24px; justify-content: center; opacity: 0; padding: 0; transition: opacity .2s, background-color .2s, color .2s; width: 24px; }
.sol-builder__row:hover .sol-builder__remove, .sol-builder__remove:focus-visible { opacity: 0.6; }
.sol-builder__remove:hover { background: rgba(128, 128, 128, 0.2); opacity: 1; }
.sol-builder__remove:focus-visible { outline: 2px solid #1f83f2; }
/* Editable texts look like plain text: no box, no ring, just the text
   cursor on hover and a caret in the accent colour while typing. */
.sol-builder [data-edit] { caret-color: currentColor; cursor: text; outline: none; }
.sol-builder__options { display: flex; flex-direction: column; gap: 10px; }
.sol-builder__option { align-items: center; display: flex; gap: 10px; line-height: 22px; }
.sol-builder__option i { background: #fff; border: 1px solid #c9c9d1; border-radius: 3px; flex-shrink: 0; height: 18px; width: 18px; }
/* Black is the uploader's Dark theme (.uploader--onepage.uploader--dark in
   upload.scss): a #141414 card and white text, fields and the drop zone on
   #1d1d1d with #4c4d50 lines. The grey Add files / Add folders buttons keep
   their look there too; Send takes Dark's yellow gradient with black text. */
.sol-builder[data-theme="dark"] .sol-builder__input, .sol-builder[data-theme="dark"] .sol-builder__option i { background: #1d1d1d; border-color: #4c4d50; }
.sol-builder[data-theme="dark"] .sol-builder__drop { background: #1d1d1d url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3e%3crect width='100%25' height='100%25' fill='none' rx='4' ry='4' stroke='%234C4D50' stroke-width='2' stroke-dasharray='4 4'/%3e%3c/svg%3e"); color: #fff; }
.sol-builder[data-theme="dark"] .sol-builder__drop svg { color: #fff; }
.sol-builder[data-send="yellow"] .sol-builder__send { background: linear-gradient(135deg, #ffdc84, #f5bd2c); color: #000; }
.sol-builder[data-send="white"] .sol-builder__send { background: #fff; color: #000; }
.sol-builder[data-send="black"] .sol-builder__send { background: #000; color: #fff; }
.sol-builder__option--radio i { border-radius: 50%; }
.sol-builder__label { color: inherit; display: block; font-size: 15px; line-height: 22px; margin-bottom: 8px; overflow-wrap: anywhere; text-align: left; }
.sol-builder[data-align="center"] .sol-builder__label { text-align: center; }
.sol-builder[data-align="right"] .sol-builder__label { text-align: right; }
.sol-builder__input { align-items: center; background: #fff; border: 1px solid #e3e3e8; border-radius: 4px; display: flex; height: 48px; padding: 0 16px; }
.sol-builder__input--area { height: 96px; }
.sol-builder__input svg { display: block; flex-shrink: 0; margin-left: auto; }
.sol-builder__drop { align-items: center; background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3e%3crect width='100%25' height='100%25' fill='none' rx='4' ry='4' stroke='%23CCCCCC' stroke-width='2' stroke-dasharray='4 4'/%3e%3c/svg%3e"); border-radius: 4px; color: #000; display: flex; flex-direction: column; font-size: 15px; height: 208px; justify-content: center; line-height: 22px; text-align: center; }
.sol-builder__drop svg { color: #000; display: block; }
.sol-builder__drop > span { margin-top: 12px; }
.sol-builder__drop-buttons { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 22px; }
.sol-builder__drop-buttons span { background: #ebebef; border-radius: 4px; color: #000; font-size: 15px; font-weight: 600; line-height: 32px; text-align: center; width: 106px; }
.sol-builder__send { background: #1f83f2; border-radius: 4px; color: #fff; display: table; font-size: 15px; font-weight: 600; line-height: 48px; margin: 40px auto 0; padding: 0 24px; }
.sol-logos { gap: 2rem; padding-bottom: 0; padding-top: 0; }
.sol-logos p { font-size: 1.125rem; font-weight: 600; }
.sol-logos small { font-size: inherit; }
/* Outlined card shared by Problem and Security; the yellow bar shares its
   outline, so the card clips its own corners. */
.sol-card { background: #fff; border: 1px solid #000; border-radius: 0.25rem; margin-top: 4rem; overflow: hidden; }
.sol-card__grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.sol-card__grid--4 { grid-template-columns: repeat(4, 1fr); }
.sol-card__item { padding: 2.5rem 2.5rem 4rem; }
.sol-card__grid--4 .sol-card__item { padding: 2.5rem 2rem 2rem; }
.sol-card__item + .sol-card__item { border-left: 1px solid #000; }
.sol-card__item p { margin: 0; }
.sol-card__heading { font-size: 1.25rem; font-weight: 600; margin: 0 0 1rem; }
/* Problem: bare icons well above the heading, and the yellow bar on the
   same three-column grid — the message over two columns, the CTA in the third. */
.sol-problem .sol-card__item { padding: 2.5rem; }
.sol-problem__icon { color: #000; display: flex; height: 1.5rem; margin-bottom: 5rem; transition: color .2s; }
.sol-problem .sol-card__item:hover .sol-problem__icon { color: #1f83f2; }
.sol-problem__icon svg { overflow: visible; }
.sol-problem__bar { background: #f0e790; border-top: 1px solid #000; display: grid; grid-template-columns: 2fr 1fr; }
.sol-problem__bar-main { padding: 2.5rem; }
.sol-problem__bar-main svg { display: block; margin-bottom: 2rem; overflow: visible; }
.sol-problem__bar-title { color: #000; font-size: 1.5rem; font-weight: 600; margin: 0; }
.sol-problem .sol-problem__bar-main p { color: #000; margin: 0; }
.sol-problem__bar-cta { align-items: center; border-left: 1px solid #000; display: flex; justify-content: center; padding: 2.5rem; }
/* Hovering the yellow bar turns its black button blue (the button itself
   darkens on its own hover, as the site's blue buttons do). */
.sol-problem__bar .btn { transition: background-color .2s; }
.sol-problem__bar:hover .btn { background: #1f83f2; }
.sol-problem__bar .btn:hover { background: #0060df; }
.sol-cases__icon { align-items: flex-start; color: #000; display: flex; height: 1.625rem; margin-bottom: 5rem; transition: color .2s; }
.sol-cases__icon svg { display: block; overflow: visible; }
.sol-cases__cta { align-items: center; background: #f0e790; display: flex; justify-content: center; }
.sol-cases__cta .btn { transition: background-color .2s; }
.sol-cases__cta:hover .btn { background: #1f83f2; }
.sol-cases__cta .btn:hover { background: #0060df; }
/* Security: bare outline icons well above the heading, smaller text. */
.sol-security__icon { align-items: flex-start; color: #000; display: flex; height: 1.75rem; margin-bottom: 5.25rem; transition: color .2s; }
.sol-security .sol-card__item:hover .sol-security__icon { color: #1f83f2; }
.sol-security__icon svg { display: block; overflow: visible; }
.sol-security .sol-card__heading { font-weight: 600; line-height: 1.5; margin-bottom: 0.875rem; }
.sol-security .sol-card__item p { color: #2a2c2d; font-size: 0.875rem; line-height: 1.7; }
/* Under the Security card: the DPA, one line and a link, centred. */
.sol-security-dpa { align-items: center; display: flex; flex-direction: column; gap: 1rem; margin-top: 4rem; text-align: center; }
.sol-security-dpa p { color: #2a2c2d; line-height: 1.75; margin: 0; max-width: 36rem; }
.sol-security-dpa p a { color: inherit; text-decoration: underline; }
.sol-security-dpa .sol-apps__link { align-self: center; color: #000; text-decoration: none; }
/* How it works: three steps in a row. Their outer lines run the full browser
   width (pseudo-elements, clipped by the page wrapper like the processing
   tabs); the numbered top row is 5rem tall, the note and CTA sit below. */
.sol-how { margin-top: 4.5rem; }
.sol-how__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; position: relative; }
.sol-how__steps::before, .sol-how__steps::after { border-top: 1px solid #ebebef; content: ''; left: calc(50% - 50vw); pointer-events: none; position: absolute; width: 100vw; z-index: 1; }
.sol-how__steps::before { border-bottom: 1px solid #ebebef; box-sizing: border-box; height: 5rem; top: 0; }
.sol-how__steps::after { bottom: 0; }
.sol-how__step { background: #fff; border-left: 1px solid #ebebef; }
.sol-how__step:last-child { border-right: 1px solid #ebebef; }
.sol-how__top { align-items: center; display: flex; height: 5rem; justify-content: space-between; padding: 0 2.5rem; }
.sol-how__num { align-items: center; background: #000; border-radius: 0.375rem; color: #fff; display: flex; font-size: 0.875rem; font-weight: 700; height: 1.75rem; justify-content: center; transition: background-color .2s; width: 1.75rem; }
.sol-how__step:hover .sol-how__num { background: #1f83f2; }
.sol-how__arrow { color: #7b8aa4; display: flex; }
.sol-arrow { display: block; flex-shrink: 0; }
.sol-how__body { padding: 2.5rem 2.5rem 2.5rem; }
.sol-how__heading { font-size: 1.125rem; font-weight: 600; line-height: 1.5; margin: 0 0 1rem; }
.sol-how .sol-how__body p { color: #2a2c2d; font-size: 1rem; line-height: 1.75; margin: 0; }
.sol-how__cta { align-items: center; display: flex; flex-direction: column; gap: 2rem; margin-top: 5.5rem; text-align: center; }
.sol-how .sol-how__note { color: #000; font-size: 1.125rem; font-weight: 600; line-height: 1.55; margin: 0; }
/* Stepper: features on the left, an illustration on the right that steps
   through them on a timer (the /pohoda "chytrá tabulka" behaviour). The bar
   along the frame's top fills over one step, then the next feature activates. */
.sol-stepper { align-items: center; display: grid; gap: 2rem 8rem; grid-template-columns: minmax(0, 1fr) minmax(0, 41.875rem); margin-top: 4rem; }
.sol-stepper__feature + .sol-stepper__feature { margin-top: 4rem; }
.sol-stepper__head { align-items: center; display: flex; gap: 0.75rem; }
.sol-stepper__icon { align-items: center; color: #000; display: flex; flex-shrink: 0; height: 1.25rem; justify-content: center; transition: color .25s; width: 1.25rem; }
.sol-stepper__icon svg { display: block; overflow: visible; }
.sol-stepper__feature.is-active .sol-stepper__icon { color: #1f83f2; }
.sol-stepper__heading { font-size: 1.25rem; font-weight: 600; margin: 0; }
.sol-stepper__heading button { background: none; border: 0; color: #000; cursor: pointer; font: inherit; padding: 0; text-align: left; }
.sol-stepper .sol-stepper__feature p { color: #2a2c2d; font-size: 1rem; margin: 1rem 0 0; max-width: 18.5rem; }
/* Panels share one grid cell, so the frame is as tall as the tallest of
   them and nothing jumps as they change; the inactive ones are only hidden. */
.sol-stepper__frame { aspect-ratio: 670 / 546; background: #f8f8fa; border: 1px solid #ebebef; border-radius: 0.25rem; container-type: inline-size; display: grid; overflow: hidden; position: relative; }
.sol-stepper__panel { align-items: center; display: flex; grid-area: 1 / 1; justify-content: center; }
/* Fade through: the outgoing panel fades out first, then the next one
   fades in with its picture rising slightly, so two never overlap. */
.sol-stepper__panel { transition: opacity .35s ease .25s, visibility 0s .25s; }
.sol-stepper__panel[hidden] { display: flex; opacity: 0; transition: opacity .25s ease, visibility 0s .25s; visibility: hidden; }
.sol-stepper__panel > * { transition: transform .5s cubic-bezier(.2, .8, .2, 1) .25s; }
.sol-stepper__panel[hidden] > * { transform: translateY(1rem); transition: transform 0s .25s; }
.sol-stepper__panel--dark { background: #000; }
.sol-stepper__panel .sol-ill { width: 100%; }
/* Illustrations drawn in HTML/CSS instead of exported SVGs (crisp at any
   pixel density, no clipped filter shadows). Each is a 670×546 canvas laid
   out in the design's own coordinates: --u is one design pixel, scaled to
   the width of the frame (the container) around it. */
.sol-ill { --u: calc(100cqw / 670); aspect-ratio: 670 / 546; overflow: hidden; position: relative; }
.sol-ill > * { position: absolute; }
/* Step 1: a browser window with the upload page. */
.sol-browser { background: #fff; border: 1px solid #ebebef; border-radius: calc(34 * var(--u)) 0 0 0; box-shadow: 0 0 calc(30 * var(--u)) rgba(0, 0, 0, 0.07); color: #000; height: calc(483 * var(--u)); left: calc(64 * var(--u)); top: calc(64 * var(--u)); width: calc(620 * var(--u)); }
.sol-browser > * { position: absolute; }
.sol-browser__bar { border-bottom: 1px solid #ebebef; height: calc(76 * var(--u)); left: 0; right: 0; top: 0; }
.sol-browser__dot { border-radius: 50%; height: calc(14 * var(--u)); top: calc(31 * var(--u)); width: calc(14 * var(--u)); }
.sol-browser__url { border: 1px solid #ebebef; border-radius: calc(22 * var(--u)); color: #2a2c2d; font-size: calc(16 * var(--u)); height: calc(44 * var(--u)); left: calc(118 * var(--u)); line-height: calc(42 * var(--u)); padding-left: calc(24 * var(--u)); top: calc(16 * var(--u)); width: calc(530 * var(--u)); white-space: nowrap; }
.sol-browser__drop { align-items: center; background: #f8f8fa; border: 1px dashed #dcdcdc; border-radius: calc(4 * var(--u)); display: flex; flex-direction: column; font-size: calc(14 * var(--u)); height: calc(240 * var(--u)); left: calc(167 * var(--u)); line-height: 1; padding-top: calc(46 * var(--u)); top: calc(205 * var(--u)); width: calc(474 * var(--u)); }
.sol-browser__drop svg { display: block; height: calc(38.67 * var(--u)); width: calc(38.67 * var(--u)); }
.sol-browser__drop span { margin-top: calc(17 * var(--u)); white-space: nowrap; }
.sol-browser__drop .sol-browser__btn { align-items: center; background: #1f83f2; border-radius: calc(4 * var(--u)); color: #fff; display: flex; font-weight: 600; height: calc(37 * var(--u)); justify-content: center; margin-top: calc(30 * var(--u)); width: calc(106 * var(--u)); }
/* Step 3: the embed code on black. */
.sol-code { color: #fff; font-size: calc(14 * var(--u)); }
.sol-code__tab { align-items: center; background: #141414; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: calc(4 * var(--u)); display: flex; gap: calc(13 * var(--u)); height: calc(50 * var(--u)); left: calc(50 * var(--u)); padding-left: calc(24 * var(--u)); top: calc(50 * var(--u)); width: calc(156 * var(--u)); }
.sol-code__tab svg { display: block; height: calc(16 * var(--u)); width: calc(21 * var(--u)); }
.sol-ill .sol-code__src { background: none; border: 0; border-radius: 0; color: #fff; font: inherit; font-size: calc(16 * var(--u)); left: calc(50 * var(--u)); line-height: calc(26 * var(--u)); margin: 0; overflow: visible; padding: 0; top: calc(132 * var(--u)); white-space: pre; }
.sol-code__p { color: #808080; }
.sol-code__t { color: #3db4ff; }
.sol-code__a { color: #9cdcfe; }
.sol-code__v { color: #ffe836; }
/* Add it to your website: the embed code is typed out, line by line. */
.sol-code__line { display: block; width: max-content; }
.is-playing .sol-code__line { animation: sol-code-type var(--d) steps(var(--n), end) var(--t) both; }
.is-playing .sol-code__foot { animation: sol-code-foot .4s ease 3.65s both; }
@keyframes sol-code-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes sol-code-foot { from { opacity: 0; } to { opacity: 1; } }
.sol-code__foot { align-items: center; color: #808080; display: flex; gap: calc(16 * var(--u)); left: calc(50 * var(--u)); top: calc(464 * var(--u)); white-space: nowrap; }
.sol-code__btn { align-items: center; background: #1f83f2; border-radius: calc(4 * var(--u)); color: #fff; display: flex; font-weight: 600; height: calc(32 * var(--u)); justify-content: center; width: calc(98 * var(--u)); }
.sol-stepper__progress { height: 4px; left: 0; overflow: hidden; position: absolute; top: 0; width: 100%; }
.sol-stepper__progress-fill { background: #898989; height: 100%; transform: scaleX(0); transform-origin: left center; width: 100%; }
/* "New email -> ... -> notified" flow. */
.sol-flow { align-items: center; display: flex; flex-direction: column; width: 100%; }
.sol-flow__pill { align-items: center; background: linear-gradient(111deg, #393b3e, #2d2e31); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 1.375rem; color: #fff; display: flex; font-size: 0.875rem; font-weight: 600; gap: 0.75rem; height: 2.75rem; justify-content: center; width: 10.625rem; }
.sol-flow__pill svg { display: block; flex-shrink: 0; }
.sol-flow__node { align-items: center; background: #fff; border: 1px solid #ebebef; border-radius: 2.5rem; color: #000; display: flex; font-size: 1.125rem; font-weight: 600; height: 4.125rem; justify-content: center; position: relative; width: min(25rem, 80%); }
.sol-flow__node img { height: 1.625rem; left: 2rem; object-fit: contain; position: absolute; top: 50%; transform: translateY(-50%); width: 1.875rem; }
.sol-flow__arrow { display: block; height: 2.5rem; margin: -1px 0; overflow: visible; position: relative; width: 0.9375rem; }
/* Share a link: the link is typed, the page loads, a visitor drags a
   document in and the uploader shows its progress, then its success screen.
   One 7s clock, restarted (.is-playing) each time the panel comes up; at
   rest the panel shows the last frame. */
@property --sol-p { inherits: false; initial-value: 0; syntax: '<integer>'; }
.sol-type::after { background: #2a2c2d; content: ''; height: calc(18 * var(--u)); opacity: 0; position: absolute; right: 0; top: calc(12 * var(--u)); width: calc(1.5 * var(--u)); }
.sol-share .sol-browser__drop > :not(.sol-up) { opacity: 0; }
.sol-up { align-items: center; color: #000; display: flex; flex-direction: column; font-size: calc(14 * var(--u)); inset: 0; justify-content: center; line-height: 1.2; position: absolute; }
.sol-browser__drop .sol-up span { margin: 0; }
.sol-up--progress { opacity: 0; }
.sol-browser__drop .sol-up .sol-up__bar { background: #fff; border-radius: calc(4 * var(--u)); display: block; height: calc(28 * var(--u)); margin: calc(18 * var(--u)) 0 calc(40 * var(--u)); overflow: hidden; width: calc(330 * var(--u)); }
.sol-up__fill { background: #1f83f2; border-radius: calc(4 * var(--u)); color: #fff; counter-reset: p var(--sol-p); display: block; height: 100%; line-height: calc(28 * var(--u)); overflow: hidden; text-align: center; width: 100%; }
.sol-up__fill::after { content: counter(p) '%'; }
.sol-up__title { align-items: center; display: flex; font-size: calc(15 * var(--u)); font-weight: 700; gap: calc(10 * var(--u)); }
.sol-up__title svg { display: block; height: calc(24 * var(--u)); width: calc(24 * var(--u)); }
.sol-browser__drop .sol-up .sol-up__size { color: #1f83f2; font-size: calc(12 * var(--u)); margin-left: auto; }
.sol-up__list svg { color: #3ab54a; display: block; height: calc(14 * var(--u)); width: calc(14 * var(--u)); }
.sol-drag { left: 0; top: 0; transform: translate(calc(610 * var(--u)), calc(480 * var(--u))); }
.sol-drag > * { position: absolute; }
.sol-drag__file { align-items: center; background: #fff; border-radius: calc(6 * var(--u)); box-shadow: 0 calc(8 * var(--u)) calc(20 * var(--u)) rgba(0, 0, 0, 0.18); color: #000; display: flex; font-size: calc(14 * var(--u)); font-weight: 600; gap: calc(10 * var(--u)); height: calc(44 * var(--u)); left: calc(-170 * var(--u)); opacity: 0; padding: 0 calc(14 * var(--u)); top: calc(10 * var(--u)); white-space: nowrap; }
.sol-drag__pdf { background: #f12f2f; border-radius: calc(4 * var(--u)); color: #fff; font-size: calc(10 * var(--u)); font-weight: 400; height: calc(22 * var(--u)); line-height: calc(22 * var(--u)); text-align: center; width: calc(25 * var(--u)); }
.sol-drag .sol-drive__cursor { left: calc(-2 * var(--u)); top: calc(-2 * var(--u)); }
.is-playing .sol-type { animation: sol-share-type 7s .3s both; }
.is-playing .sol-type::after { animation: sol-share-caret 7s .3s step-end both; }
.is-playing .sol-share .sol-browser__title { animation: sol-share-load 7s .3s both; }
.is-playing .sol-share .sol-browser__drop { animation: sol-share-load 7s .3s both, sol-share-over 7s .3s both; }
.is-playing .sol-share .sol-browser__drop > :not(.sol-up) { animation: sol-share-hint 7s .3s both; }
.is-playing .sol-up--progress { animation: sol-share-progress 7s .3s both; }
.is-playing .sol-up__fill { animation: sol-share-fill 7s .3s both; }
.is-playing .sol-up--done { animation: sol-share-done 7s .3s both; }
.is-playing .sol-drag { animation: sol-share-drag 7s .3s both; }
.is-playing .sol-drag__file { animation: sol-share-file 7s .3s both; }
@keyframes sol-share-caret { 0%, 26% { opacity: 1; } 28% { opacity: 0; } 30% { opacity: 1; } 32%, 100% { opacity: 0; } }
@keyframes sol-share-load { 0%, 27% { opacity: 0; transform: translateY(calc(8 * var(--u))); } 33%, 100% { opacity: 1; transform: none; } }
@keyframes sol-share-over { 0%, 44% { background-color: #f8f8fa; border-color: #dcdcdc; } 48%, 56% { background-color: #eef5fe; border-color: #1f83f2; } 60%, 100% { background-color: #f8f8fa; border-color: #dcdcdc; } }
@keyframes sol-share-hint { 0%, 54% { opacity: 1; } 58%, 100% { opacity: 0; } }
@keyframes sol-share-progress { 0%, 57% { opacity: 0; } 60%, 80% { opacity: 1; } 83%, 100% { opacity: 0; } }
@keyframes sol-share-fill { 0%, 60% { --sol-p: 0; width: 0; animation-timing-function: ease-in-out; } 79%, 100% { --sol-p: 100; width: 100%; } }
@keyframes sol-share-done { 0%, 83% { opacity: 0; transform: translateY(calc(8 * var(--u))); } 88%, 100% { opacity: 1; transform: none; } }
@keyframes sol-share-drag {
  0%, 33% { transform: translate(calc(730 * var(--u)), calc(640 * var(--u))); animation-timing-function: cubic-bezier(.3, 0, .2, 1); }
  50%, 55% { transform: translate(calc(540 * var(--u)), calc(400 * var(--u))); animation-timing-function: ease-in-out; }
  70%, 100% { transform: translate(calc(610 * var(--u)), calc(480 * var(--u))); }
}
@keyframes sol-share-file { 0%, 47% { opacity: 1; transform: rotate(-4deg); } 51%, 54% { opacity: 1; transform: none; } 58%, 100% { opacity: 0; transform: scale(.6); } }
/* Forward by email: the steps start dimmed and the arrows hidden; a black
   line draws each arrow, splits around the next step and joins again below
   it, lighting the steps up as it reaches them. The outlines fade at the
   end and the drawn arrows stay. */
@property --sol-a { inherits: false; initial-value: 0deg; syntax: '<angle>'; }
.sol-flow__pill { position: relative; }
.sol-flow__pill::before, .sol-flow__node::before { --sol-a: 0deg; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; background: conic-gradient(#000 0deg var(--sol-a), transparent var(--sol-a) calc(360deg - var(--sol-a)), #000 calc(360deg - var(--sol-a))); border-radius: inherit; content: ''; inset: -1px; mask-composite: exclude; opacity: 0; padding: 2px; pointer-events: none; position: absolute; }
.sol-flow__node::before { padding: 1px; }
.sol-flow__run { opacity: 0; }
.is-playing .sol-flow > * { animation: sol-flow-on .4s ease both; }
.is-playing .sol-flow > ::before { animation: sol-flow-ring .5s ease-in-out both, sol-flow-clear .6s ease both; }
.is-playing .sol-flow > .sol-flow__arrow { animation: none; }
.is-playing .sol-flow__arrow path:first-child { opacity: 0; }
.is-playing .sol-flow .sol-flow__run { animation: sol-flow-draw .4s linear both; opacity: 1; }
.is-playing .sol-flow > :nth-child(1) { animation-delay: 0.4s; }
.is-playing .sol-flow > :nth-child(1)::before { animation-delay: 0.4s, 7s; animation-duration: 0.45s, .6s; }
.is-playing .sol-flow > :nth-child(2) { animation-delay: 0.85s; }
.is-playing .sol-flow > :nth-child(2) .sol-flow__run { animation-delay: 0.85s; }
.is-playing .sol-flow > :nth-child(3) { animation-delay: 1.25s; }
.is-playing .sol-flow > :nth-child(3)::before { animation-delay: 1.25s, 7s; animation-duration: 1.0s, .6s; }
.is-playing .sol-flow > :nth-child(4) { animation-delay: 2.25s; }
.is-playing .sol-flow > :nth-child(4) .sol-flow__run { animation-delay: 2.25s; }
.is-playing .sol-flow > :nth-child(5) { animation-delay: 2.65s; }
.is-playing .sol-flow > :nth-child(5)::before { animation-delay: 2.65s, 7s; animation-duration: 1.0s, .6s; }
.is-playing .sol-flow > :nth-child(6) { animation-delay: 3.65s; }
.is-playing .sol-flow > :nth-child(6) .sol-flow__run { animation-delay: 3.65s; }
.is-playing .sol-flow > :nth-child(7) { animation-delay: 4.05s; }
.is-playing .sol-flow > :nth-child(7)::before { animation-delay: 4.05s, 7s; animation-duration: 1.0s, .6s; }
.is-playing .sol-flow > :nth-child(8) { animation-delay: 5.05s; }
.is-playing .sol-flow > :nth-child(8) .sol-flow__run { animation-delay: 5.05s; }
.is-playing .sol-flow > :nth-child(9) { animation-delay: 5.45s; }
.is-playing .sol-flow > :nth-child(9)::before { animation-delay: 5.45s, 7s; animation-duration: 0.45s, .6s; }
@keyframes sol-flow-on { from { opacity: 0.25; } to { opacity: 1; } }
@keyframes sol-flow-ring { from { --sol-a: 0deg; } to { --sol-a: 180deg; } }
@keyframes sol-flow-draw { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
@keyframes sol-flow-clear { from { opacity: 1; } to { opacity: 0; } }
/* Organized in Google Drive: a Drive window (folders, then a shared file
   with teammates' pointers) and notification cards. */
.sol-drive__logo { height: calc(30.7 * var(--u)); left: calc(39 * var(--u)); top: calc(38.5 * var(--u)); width: calc(33.4 * var(--u)); }
.sol-drive__search { border: 1px solid #ebebef; border-radius: calc(22 * var(--u)); color: #898989; font-size: calc(16 * var(--u)); height: calc(44 * var(--u)); left: calc(117 * var(--u)); line-height: calc(42 * var(--u)); padding-left: calc(23 * var(--u)); top: calc(32 * var(--u)); width: calc(530 * var(--u)); white-space: nowrap; }
.sol-drive__path { align-items: center; display: flex; font-size: calc(20 * var(--u)); font-weight: 600; gap: calc(16.75 * var(--u)); left: calc(39 * var(--u)); line-height: 1; top: calc(120.2 * var(--u)); white-space: nowrap; }
.sol-drive__path svg { display: block; height: calc(12.1 * var(--u)); width: calc(7.1 * var(--u)); }
.sol-drive__row { align-items: center; background: #f0f4f9; border-radius: calc(12 * var(--u)); display: flex; font-size: calc(16 * var(--u)); font-weight: 600; height: calc(60 * var(--u)); left: calc(39 * var(--u)); line-height: 1; padding: 0 calc(24 * var(--u)); width: calc(360 * var(--u)); }
.sol-drive__row > svg:first-child { display: block; flex-shrink: 0; height: calc(20 * var(--u)); margin-right: calc(20.5 * var(--u)); width: calc(25 * var(--u)); }
.sol-drive__more { display: block; flex-shrink: 0; height: calc(16 * var(--u)); margin-left: auto; width: calc(4 * var(--u)); }
.sol-drive__file { background: #f0f4f9; border-radius: calc(12 * var(--u)); height: calc(240 * var(--u)); left: calc(39 * var(--u)); top: calc(184 * var(--u)); width: calc(240 * var(--u)); }
.sol-drive__file > * { position: absolute; }
.sol-drive__pdf { background: #f12f2f; border-radius: calc(4 * var(--u)); color: #fff; font-size: calc(10 * var(--u)); height: calc(22 * var(--u)); left: calc(18 * var(--u)); line-height: calc(22 * var(--u)); text-align: center; top: calc(19 * var(--u)); width: calc(25 * var(--u)); }
.sol-drive__name { font-size: calc(16 * var(--u)); font-weight: 600; left: calc(59 * var(--u)); line-height: 1; top: calc(22 * var(--u)); }
.sol-drive__file .sol-drive__more { left: calc(218 * var(--u)); top: calc(22 * var(--u)); }
.sol-drive__user { border: calc(3 * var(--u)) solid #fff; border-radius: calc(22 * var(--u)); color: #fff; font-size: calc(16 * var(--u)); font-weight: 700; height: calc(44 * var(--u)); line-height: calc(38 * var(--u)); padding-left: calc(20 * var(--u)); white-space: nowrap; }
.sol-drive__user img { border-radius: 50%; height: calc(38 * var(--u)); position: absolute; right: 0; top: 0; width: calc(38 * var(--u)); }
.sol-drive__cursor { filter: drop-shadow(0 calc(4 * var(--u)) calc(8 * var(--u)) rgba(0, 0, 0, 0.15)); height: calc(34 * var(--u)); overflow: visible; width: calc(23 * var(--u)); }
.sol-drive__crumb { align-items: center; display: flex; gap: inherit; }
.sol-drive__rows { inset: 0; }
.sol-drive__rows > * { position: absolute; }
.sol-drive__rows--1, .sol-drive__rows--2 { opacity: 0; }
.sol-drive__new { background: #1f83f2; border-radius: calc(12 * var(--u)); color: #fff; font-size: calc(12 * var(--u)); height: calc(24 * var(--u)); line-height: calc(24 * var(--u)); margin-left: auto; padding: 0 calc(10 * var(--u)); }
.sol-drive__new + .sol-drive__more { margin-left: calc(16 * var(--u)); }
/* Automatic folders: from My Drive, a pointer opens the page's folders two
   levels down. Everything runs on one 5s clock, restarted (.is-playing)
   whenever the panel comes up; without it the panel rests on the last frame. */
.sol-nav__cursor { left: 0; top: 0; transform: translate(calc(430 * var(--u)), calc(420 * var(--u))); transform-origin: 0 0; }
.sol-nav__ripple { background: #1f83f2; border-radius: 50%; height: calc(24 * var(--u)); left: calc(308 * var(--u)); opacity: 0; top: calc(272 * var(--u)); width: calc(24 * var(--u)); }
/* Starts 1.2s in, so the folder walk isn't half over by the time the frame
   has scrolled fully into view. */
.is-playing .sol-nav__cursor { animation: sol-nav-cursor 5s 1.2s both; }
.is-playing .sol-nav__ripple { animation: sol-nav-ripple 5s 1.2s linear both; }
.is-playing .sol-drive__rows--1 { animation: sol-nav-level1 5s 1.2s both; }
.is-playing .sol-drive__rows--2 { animation: sol-nav-level2 5s 1.2s both; }
.is-playing .sol-drive__rows--3 { animation: sol-nav-level3 5s 1.2s both; }
.is-playing .sol-drive__rows--1 .sol-drive__row--hit { animation: sol-nav-hit1 5s 1.2s both; }
.is-playing .sol-drive__rows--2 .sol-drive__row--hit { animation: sol-nav-hit2 5s 1.2s both; }
.is-playing .sol-drive__new { animation: sol-nav-new .5s 6.2s both; }
@keyframes sol-nav-cursor {
  0% { transform: translate(calc(520 * var(--u)), calc(450 * var(--u))); animation-timing-function: cubic-bezier(.5, 0, .2, 1); }
  25% { transform: translate(calc(318 * var(--u)), calc(282 * var(--u))); animation-timing-function: ease-in-out; }
  28% { transform: translate(calc(318 * var(--u)), calc(282 * var(--u))) scale(0.85); animation-timing-function: ease-in-out; }
  31% { transform: translate(calc(318 * var(--u)), calc(282 * var(--u))); animation-timing-function: ease-in-out; }
  65% { transform: translate(calc(318 * var(--u)), calc(282 * var(--u))); animation-timing-function: ease-in-out; }
  68% { transform: translate(calc(318 * var(--u)), calc(282 * var(--u))) scale(0.85); animation-timing-function: ease-in-out; }
  71% { transform: translate(calc(318 * var(--u)), calc(282 * var(--u))); }
  78% { transform: translate(calc(318 * var(--u)), calc(282 * var(--u))); animation-timing-function: cubic-bezier(.5, 0, .2, 1); }
  95%, 100% { transform: translate(calc(430 * var(--u)), calc(420 * var(--u))); }
}
@keyframes sol-nav-ripple {
  0%, 27.9% { opacity: 0; transform: scale(.3); }
  28% { opacity: .4; transform: scale(.3); }
  38%, 67.9% { opacity: 0; transform: scale(2.6); }
  68% { opacity: .4; transform: scale(.3); }
  78%, 100% { opacity: 0; transform: scale(2.6); }
}
@keyframes sol-nav-crumb2 { 0%, 33% { opacity: 0; transform: translateX(calc(-10 * var(--u))); } 38%, 100% { opacity: 1; transform: none; } }
@keyframes sol-nav-crumb3 { 0%, 73% { opacity: 0; transform: translateX(calc(-10 * var(--u))); } 78%, 100% { opacity: 1; transform: none; } }
@keyframes sol-nav-level1 { 0%, 32% { opacity: 1; } 35%, 100% { opacity: 0; } }
@keyframes sol-nav-level2 { 0%, 33% { opacity: 0; transform: translateY(calc(12 * var(--u))); } 38%, 72% { opacity: 1; transform: none; } 75%, 100% { opacity: 0; } }
@keyframes sol-nav-level3 { 0%, 73% { opacity: 0; transform: translateY(calc(12 * var(--u))); } 78%, 100% { opacity: 1; transform: none; } }
@keyframes sol-nav-hit1 { 0%, 20% { background: #f0f4f9; } 25%, 100% { background: #dfe7f2; } }
@keyframes sol-nav-hit2 { 0%, 60% { background: #f0f4f9; } 65%, 100% { background: #dfe7f2; } }
@keyframes sol-nav-new { 0% { opacity: 0; transform: scale(.4); } 60% { opacity: 1; transform: scale(1.15); } 100% { opacity: 1; transform: none; } }
/* Teammates: each pointer and its name tag drift together, every pair on
   its own path and tempo, like other people working in the same folder. */
.sol-drive__mate { animation: sol-mate 7s ease-in-out infinite; inset: 0; }
.sol-drive__mate > * { position: absolute; }
.sol-stepper__panel[hidden] .sol-drive__mate { animation-play-state: paused; }
@keyframes sol-mate {
  0%, 100% { transform: translate(0, 0); }
  30% { transform: translate(calc(var(--mx) * var(--u)), calc(var(--my) * var(--u))); }
  65% { transform: translate(calc(var(--my) * -0.6 * var(--u)), calc(var(--mx) * 0.5 * var(--u))); }
}
@media (prefers-reduced-motion: reduce) { .sol-drive__mate { animation: none; } .sol-stepper__panel, .sol-stepper__panel > * { transition: none; } }
.sol-notice { background: #fff; border: 1px solid #000; border-radius: calc(8 * var(--u)); color: #2a2c2d; height: calc(124 * var(--u)); width: calc(446 * var(--u)); }
.sol-notice > * { position: absolute; }
.sol-notice__tag { align-items: center; color: #000; display: flex; font-weight: 700; font-size: calc(14 * var(--u)); gap: calc(12.5 * var(--u)); height: calc(20 * var(--u)); left: calc(23 * var(--u)); letter-spacing: 0.1em; line-height: 1; text-transform: uppercase; top: calc(23 * var(--u)); }
.sol-notice__tag svg { display: block; height: calc(20 * var(--u)); }
.sol-notice__tag .sol-notice__gmail { height: calc(18 * var(--u)); }
/* Notifications: the cards come in one by one, like messages arriving. */
.is-playing .sol-notices .sol-notice { animation: sol-notice-in .6s cubic-bezier(.2, .8, .2, 1) both; }
.is-playing .sol-notices .sol-notice:nth-child(1) { animation-delay: .4s; }
.is-playing .sol-notices .sol-notice:nth-child(2) { animation-delay: 1.4s; }
.is-playing .sol-notices .sol-notice:nth-child(3) { animation-delay: 2.4s; }
@keyframes sol-notice-in { from { opacity: 0; transform: translateY(calc(24 * var(--u))) scale(.96); } to { opacity: 1; transform: none; } }
.sol-notice .sol-notice__text { font-size: calc(16 * var(--u)); left: calc(23 * var(--u)); line-height: 1; margin: 0; top: calc(73 * var(--u)); white-space: nowrap; }
.sol-notice__text u { text-decoration-thickness: calc(0.8 * var(--u)); text-underline-offset: calc(1.7 * var(--u)); }
/* Automatic processing: a stepper again, on tabs (from the HR page). One
   story across the three steps: an application is read into the sheet, two
   more columns are extracted from every application, and the sheet is
   sorted and filtered down to the applicant who fits. The root's
   data-step-index drives the sheet; the left side shows the application,
   the prompts, then the sort, the filters and the result. */
.sol-ai { margin-top: 4rem; }
.sol-ai__tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); isolation: isolate; padding: 1px 0; position: relative; }
.sol-ai__tabs::before { background: #f8f8fa; border-bottom: 1px solid #ebebef; border-top: 1px solid #ebebef; bottom: 0; content: ''; left: calc(50% - 50vw); position: absolute; top: 0; width: 100vw; z-index: -1; }
.sol-ai__band { border-image: conic-gradient(#f8f8fa 0 0) fill 0 / 0 / 0 100vw; padding-bottom: 6.5rem; }
.sol-ai__tab { background: #f8f8fa; border-left: 1px solid #ebebef; position: relative; transition: background-color .25s; }
.sol-ai__tab:last-child { border-right: 1px solid #ebebef; }
.sol-ai__tab.is-active, .sol-ai__tab:hover { background: #fff; }
.sol-ai__tab button { background: none; border: 0; color: #000; cursor: pointer; font: inherit; font-size: 1.25rem; font-weight: 500; padding: 1.875rem 2rem; text-align: left; width: 100%; }
/* The window's shadow may spill sideways and up, but the window is cut off at
   the bottom of the frame. */
.sol-ai__frame { clip-path: inset(-3rem -100vmax 0); height: 32.5rem; padding: 5rem 0 1px; position: relative; }
.sol-ai__frame::after { border-bottom: 1px solid #ebebef; bottom: 0; content: ''; left: calc(50% - 50vw); position: absolute; width: 100vw; }
/* The window takes 90% of the screen (never less than the column), centred
   on it; the document keeps half the column, the sheet gets all the rest. */
.sol-ai__window { --doc: min(582px, calc((100% - 6px) / 2)); background: #fff; border: 1px solid #ebebef; border-bottom: 0; border-radius: 1.25rem 1.25rem 0 0; box-shadow: 0 0 30px rgba(0, 0, 0, 0.07); display: grid; grid-template-columns: var(--doc) 6px minmax(0, 1fr); height: 100%; overflow: hidden; position: relative; margin-left: calc((100% - max(100%, 90vw)) / 2); width: max(100%, 90vw); }
.sol-ai__docs { container-type: inline-size; display: grid; min-height: 0; overflow: hidden; }
.sol-ai__docs .sol-ai__doc { align-items: stretch; flex-direction: column; justify-content: flex-start; }
/* The yellow divider doubles as the scanner: it sweeps across the
   application and back while it is read. */
.sol-ai__beam { background: #ffd059; bottom: 0; left: var(--doc); position: absolute; top: 0; width: 6px; z-index: 1; }
@keyframes sol-ai-beam { 0%, 100% { left: var(--doc); } 50% { left: 1rem; } }
/* The sample document is laid out on a 600px canvas: --d is one canvas pixel,
   so the whole page fits the document column. */
.sol-ai__doc { --d: calc(100cqw / 600); color: #333; }
.sol-sig { color: #1b3a6b; font-family: 'Segoe Script', 'Brush Script MT', 'Snell Roundhand', cursive; font-size: calc(17 * var(--d)); line-height: 1; }
/* The sample document as a PDF: its key details on a tinted bar (each page
   sets the colours), then labelled fields in two columns, and a signature. */
.sol-app { font-size: calc(10 * var(--d)); line-height: calc(14 * var(--d)); padding: calc(28 * var(--d)) calc(32 * var(--d)) 0; }
.sol-app__head { align-items: center; display: flex; justify-content: space-between; }
.sol-app__brand { align-items: center; color: #111; display: flex; font-size: calc(13 * var(--d)); font-weight: 600; gap: calc(9 * var(--d)); }
.sol-app__property b { color: #111; font-size: calc(11.5 * var(--d)); font-weight: 600; }
.sol-app__grid { display: grid; gap: 0 calc(24 * var(--d)); grid-template-columns: 1fr 1fr; }
.sol-app__field { border-bottom: 1px solid #ededed; padding: calc(7 * var(--d)) 0 calc(5 * var(--d)); }
.sol-app__field--wide { grid-column: 1 / -1; }
.sol-app__field b { color: #111; font-size: calc(11 * var(--d)); font-weight: 500; }
.sol-app__sign { display: grid; gap: calc(24 * var(--d)); grid-template-columns: 1fr 1fr; margin-top: calc(18 * var(--d)); }
.sol-app__sign > div { border-bottom: 1px solid #999; display: flex; flex-direction: column; justify-content: flex-end; min-height: calc(30 * var(--d)); padding-bottom: calc(3 * var(--d)); }
.sol-app__sign small { color: #777; font-size: calc(8 * var(--d)); margin-top: calc(4 * var(--d)); order: 2; }
/* Columns: the prompts behind the two new columns, as set up in Document AI.
   The fields come in one after the other and their prompts are revealed
   line by line (--l lines over --t, from --s). */
.sol-prompt, .sol-short { font-size: calc(12 * var(--d)); line-height: 1.5; padding: calc(40 * var(--d)) calc(44 * var(--d)) 0; }
.sol-ai__doc--center .sol-prompt { padding-bottom: calc(40 * var(--d)); }
.sol-short__card { background: #fff; border: 1px solid #e3e3e8; border-radius: calc(10 * var(--d)); box-shadow: 0 calc(4 * var(--d)) calc(14 * var(--d)) rgba(0, 0, 0, 0.06); padding: calc(18 * var(--d)) calc(20 * var(--d)) calc(20 * var(--d)); }
.sol-short__card + .sol-short__card { margin-top: calc(16 * var(--d)); }
/* The instructions box of the Document AI prompt: dark, an INSTRUCTIONS
   label in the site's blue-purple-gold gradient, the send button on the
   right. */
.sol-prompt__text { align-items: center; background: linear-gradient(111deg, #393b3e, #2d2e31); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: calc(10 * var(--d)); display: grid; gap: calc(28 * var(--d)); grid-template-columns: minmax(0, 1fr) auto; padding: calc(28 * var(--d)) calc(26 * var(--d)) calc(30 * var(--d)) calc(32 * var(--d)); }
.sol-prompt__text > span:first-child { display: block; }
.sol-prompt__label-ai { background: linear-gradient(90deg, #1f83f2, #ca4aae, #f5bd2c); -webkit-background-clip: text; background-clip: text; display: block; font-size: calc(12 * var(--d)); font-weight: 700; letter-spacing: 0.06em; margin-bottom: 1rem; text-transform: uppercase; width: max-content; -webkit-text-fill-color: transparent; }
.sol-prompt__words { color: #fff; display: block; font-size: 1rem; line-height: 1.6; }
.sol-prompt__send { align-items: center; align-self: end; background: #fff; border-radius: 50%; display: flex; height: 32px; justify-content: center; width: 32px; }
.sol-prompt__send svg { display: block; height: 16px; width: 16px; }
.sol-prompt__words + .sol-prompt__words { margin-top: 1rem; }
.sol-prompt__col { font-weight: 700; }
/* Step 2 plays as one timeline: the box comes in and its paragraphs are
   typed letter by letter, one after the other (--c is the letter's index,
   --s the paragraph's start, --v the time per letter). The sheet's new
   columns follow the same clock (see the sheet). At rest everything shows. */
.is-playing .sol-prompt__text { animation: sol-panel-in .45s cubic-bezier(.2, .8, .2, 1) var(--b) both; }
.is-playing .sol-prompt__words > span { animation: sol-char .01s linear both; animation-delay: calc(var(--s) + var(--c) * var(--v)); }
@keyframes sol-char { from { opacity: 0; } to { opacity: 1; } }
@keyframes sol-panel-in { from { opacity: 0; transform: translateY(calc(16 * var(--d))); } to { opacity: 1; transform: none; } }
/* Compare: the sheet's sort and filters, then the rows that pass. */
.sol-short__rule { align-items: center; display: flex; gap: calc(8 * var(--d)); }
.sol-short__rule + .sol-short__rule { border-top: 1px solid #ebebef; margin-top: calc(12 * var(--d)); padding-top: calc(12 * var(--d)); }
.sol-short__rule > span:first-child { color: #898989; width: calc(64 * var(--d)); }
.sol-short__chip { background: #f8f8fa; border: 1px solid #e3e3e8; border-radius: calc(4 * var(--d)); color: #000; font-weight: 600; padding: calc(3 * var(--d)) calc(10 * var(--d)); }
.sol-short__head { align-items: baseline; display: flex; justify-content: space-between; margin-bottom: calc(10 * var(--d)); }
.sol-short__head b { color: #000; font-size: calc(15 * var(--d)); font-weight: 600; }
.sol-short__head span { color: #898989; }
.sol-short__person { align-items: center; display: flex; gap: calc(12 * var(--d)); padding: calc(8 * var(--d)) 0; }
.sol-short__person + .sol-short__person { border-top: 1px solid #ebebef; }
.sol-short__avatar { align-items: center; border-radius: 50%; color: #fff; display: flex; flex-shrink: 0; font-size: calc(11 * var(--d)); font-weight: 700; height: calc(32 * var(--d)); justify-content: center; width: calc(32 * var(--d)); }
.sol-short__person b { color: #000; display: block; font-weight: 600; }
.sol-short__person small { color: #898989; display: block; font-size: calc(10.5 * var(--d)); }
.sol-short__person .sol-flag { margin-left: auto; white-space: nowrap; }
.is-playing .sol-short__rule { animation: sol-panel-in .45s cubic-bezier(.2, .8, .2, 1) both; }
.is-playing .sol-short__rule:nth-child(2) { animation-delay: .5s; }
.is-playing .sol-short__card--list { animation: sol-panel-in .5s cubic-bezier(.2, .8, .2, 1) 1.7s both; }
.is-playing .sol-short__person { animation: sol-panel-in .4s ease both; }
.is-playing .sol-short__person:nth-of-type(1) { animation-delay: 2.1s; }
.is-playing .sol-short__person:nth-of-type(2) { animation-delay: 2.3s; }
.is-playing .sol-short__person:nth-of-type(3) { animation-delay: 2.5s; }
/* Badge for a Yes/No column (green for Yes) and the result's key value. */
.sol-flag { background: #ebebef; border-radius: 1rem; color: #2a2c2d; display: inline-block; font-weight: 700; line-height: 1.6; min-width: 2.75em; padding: 0 0.6em; text-align: center; }
.sol-flag--yes { background: #dcf5e3; color: #127a35; }
/* The sheet. */
.sol-ai__sheet { min-width: 0; overflow: hidden; position: relative; }
/* The sheet scrolls sideways: drag it with the mouse, swipe it on touch. */
.sol-ai__grid { cursor: grab; overflow-x: auto; padding-right: 42px; scrollbar-width: none; }
.sol-ai__grid::-webkit-scrollbar { display: none; }
.sol-ai__grid.is-dragging { cursor: grabbing; }
.sol-ai__bar { align-items: center; display: flex; height: 93px; padding: 0 0 0 42px; }
.sol-ai__bar img { display: block; height: 19.6px; width: 26.9px; }
.sol-ai__bar i { align-self: center; background: #dcdcdc; height: 26px; margin: 0 28px; width: 1px; }
.sol-ai__export { align-items: center; color: #000; display: flex; font-size: 14px; font-weight: 600; gap: 9px; }
.sol-ai__export svg { display: block; height: 14px; width: 13px; }
.sol-ai__hint { align-items: center; color: #898989; display: flex; font-size: 14px; font-weight: 400; gap: 10px; margin-left: auto; padding-right: 32px; position: relative; white-space: nowrap; z-index: 3; }
.sol-ai__hint svg { display: block; flex-shrink: 0; }
.sol-ai__hint-touch, .sol-ai__hint-short { display: none; }
@media (hover: none) and (pointer: coarse) {
  .sol-ai__hint-mouse { display: none; }
  .sol-ai__hint-touch { display: inline; }
}
/* Narrow screens: the short form, so the hint still fits beside Export. */
@media (max-width: 767px) {
  .sol-ai__hint { gap: 8px; padding-right: 1rem; }
  .sol-ai__hint-long { display: none; }
  .sol-ai__hint-short { display: inline; }
}
/* The sheet: rows of fixed-width cells, so whole rows can move when the
   sheet is sorted. The row numbers sit in their own column on top and stay
   put, as in Google Sheets. Pets and Parking start collapsed and open up
   when their prompts are typed. */
.sol-sheet { --row: 37px; color: #2a2c2d; font-size: 14px; margin-left: 42px; position: relative; user-select: none; white-space: nowrap; width: max-content; }
.sol-sheet__row { background: #fff; display: flex; height: var(--row); position: relative; }
.sol-sheet__row > * { align-items: center; border-bottom: 1px solid #dcdcdc; border-right: 1px solid #dcdcdc; box-sizing: border-box; display: flex; flex: none; overflow: hidden; padding: 0 14px; text-overflow: ellipsis; }
.sol-sheet__row > :first-child { padding: 0; width: 48px; }
.sol-sheet__row--head > * { background: #f8f8fa; border-top: 1px solid #dcdcdc; font-weight: 700; }
.sol-sheet__nums { left: 0; position: absolute; top: 0; width: 48px; z-index: 2; }
.sol-sheet__nums span { align-items: center; background: #f8f8fa; border: 1px solid #dcdcdc; border-top: 0; box-sizing: border-box; display: flex; font-size: 12px; height: var(--row); justify-content: center; }
.sol-sheet__nums span:first-child { border-top: 1px solid #dcdcdc; border-top-left-radius: 4px; }
/* Read: the new document's row fills in cell by cell. */
.is-live[data-step-index="0"] .sol-sheet__row--new > :not(:first-child) { animation: sol-ai-row 3s ease 2.6s forwards; }
@keyframes sol-sheet-new { from { background-color: #eef5fe; } to { background-color: #fff; } }
@keyframes sol-sheet-new-head { from { background-color: #dbeafe; } to { background-color: #f8f8fa; } }
/* Compare: rows sort by the page's key column (each moves by its rank minus
   its place), then the ones the filters keep turn green. */
.sol-sheet__row[style] { transition: transform .9s cubic-bezier(.6, 0, .2, 1); }
.sol-sheet__row--top { z-index: 1; }
[data-step-index="2"] .sol-sheet__row[style] { transform: translateY(calc((var(--rank) - var(--pos)) * var(--row))); transition-delay: .9s; }
.sol-sheet__row--top > * { transition: background-color .4s; }
@keyframes sol-ai-row { from { background-color: #e6f8eb; } to { background-color: #fff; } }
@keyframes sol-ai-cell { from { opacity: 0; } to { opacity: 1; } }
.sol-ai__foot { align-items: center; display: flex; flex-direction: column; gap: 2rem; margin-top: 5rem; text-align: center; }
.sol-ai__foot p { color: #000; font-size: 1.125rem; font-weight: 600; margin: 0; max-width: 32rem; }
/* Testimonial band: label, quote and author centred, then one outlined box
   split into two stats. Yellow is the site's button yellow. */
.sol-quote { background: #2a2c2d; color: #fff; padding: 9rem 0 8.5rem; }
.sol-quote__container { align-items: center; display: flex; flex-direction: column; margin: 0 auto; max-width: 48.5rem; text-align: center; width: 90vw; }
.sol-quote__label { color: #ffd059; font-size: 0.875rem; font-weight: 700; letter-spacing: 1.2px; margin: 0; text-transform: uppercase; }
.sol-quote figure { align-items: center; display: flex; flex-direction: column; margin: 0; }
.sol-quote__text { color: #fff; font-size: 2.375rem; font-weight: 600; line-height: 1.2; margin: 1rem 0 2.5rem; }
.sol-quote .review__author { color: #fff; line-height: 1.6; padding-left: 4rem; }
.sol-quote .review__author-photo { border: 2px solid #fff; box-sizing: border-box; }
.sol-quote .review__author a { color: inherit; text-decoration: none; }
.sol-quote .review__author a:hover { text-decoration: underline; }
.sol-quote__stats { border: 1px solid #5a5c5d; border-radius: 0.25rem; display: grid; overflow: hidden; grid-template-columns: repeat(2, 1fr); margin: 4rem 0 0; max-width: 35.5rem; width: 100%; }
.sol-quote__stat { padding: 1.875rem 1.5rem; transition: background-color .2s; }
.sol-quote__stat:hover { background: #353738; }
.sol-quote__stat + .sol-quote__stat { border-left: 1px solid #5a5c5d; }
.sol-quote__stat dt { color: #e6e6e6; font-size: 1rem; }
.sol-quote__stat dd { color: #ffd059; font-size: 1.5rem; font-weight: 600; margin: 0.5rem 0 0; }
/* Templates: three outlined cards, the sheet columns as yellow chips. The
   description grows, so labels, chips and links line up across a row. */
/* One sideways-scrolling row in the homepage features' style: fixed-width
   cards starting at the container's left edge, the row itself bleeding to
   both window edges (margin out, padding back in) so the next card already
   shows past the container. The round arrows (the homepage's .tns-controls
   look) sit over each end; one disappears at its end. Cards snap
   to the container edge; touch and trackpads scroll the row directly. The
   block around it clips the bleed (.sol-after-quote). The inset is spelled
   out from the container (90vw, at most 1170px): in scroll-padding a % would
   be of the row's own width. */
.sol-tpl-wrap { margin-top: 4rem; position: relative; }
.sol-tpl { --inset: calc(50vw - min(45vw, 585px)); display: flex; gap: 1.5rem; margin-inline: calc(50% - 50vw); overflow-x: auto; overscroll-behavior-x: contain; padding-inline: var(--inset); scroll-padding-inline: var(--inset); scroll-snap-type: x mandatory; scrollbar-width: none; }
/* On a side that can still scroll, the outermost card fades out: clear at
   its outer edge, solid from its middle (a card only peeking in fades across
   its visible part). The stops (--l0/--l1 from the left edge, --r0/--r1 from
   the right) follow the cards as they move; the script sets them. It's a
   mask, so nothing is laid over the page's textured background. */
@media (min-width: 768px) {
  .sol-tpl { --l0: 0px; --l1: 0px; --r0: 0px; --r1: 0px; -webkit-mask-image: linear-gradient(90deg, transparent var(--l0), #000 var(--l1), #000 calc(100% - var(--r1)), transparent calc(100% - var(--r0))); mask-image: linear-gradient(90deg, transparent var(--l0), #000 var(--l1), #000 calc(100% - var(--r1)), transparent calc(100% - var(--r0))); }
}
/* Wide screens start on the middle card (the script scrolls there), with
   cards showing on both sides, so cards snap to the centre instead. */
@media (min-width: 1600px) {
  .sol-tpl { scroll-padding-inline: 0; }
  .sol-tpl .sol-tpl__card { scroll-snap-align: center; }
}
.sol-tpl::-webkit-scrollbar { display: none; }
.sol-tpl__card { background: #fff; border: 1px solid #000; border-radius: 0.25rem; display: flex; flex: 0 0 22.5rem; flex-direction: column; padding: 2rem; scroll-snap-align: start; transition: background-color .2s; }
.sol-tpl__nav { align-items: center; background: none; border: 0; bottom: 0; color: #000; cursor: pointer; display: flex; justify-content: center; padding: 0.5rem; position: absolute; right: calc(50% - 50vw); top: 0; width: 230px; z-index: 2; }
.sol-tpl__nav::before { align-items: center; background: #fff; border-radius: 50%; content: "\2192"; display: flex; filter: drop-shadow(0 0 1.25rem rgba(0, 0, 0, 0.1)); font: 2rem "icons"; height: 4.375rem; justify-content: center; width: 4.375rem; }
.sol-tpl__nav:hover { color: #1f83f2; }
.sol-tpl__prev { left: calc(50% - 50vw); right: auto; transform: scaleX(-1); }
.sol-tpl__nav:disabled { display: none; }
.sol-tpl__heading { color: #000; font-size: 1.25rem; font-weight: 600; line-height: 1.375; margin: 0 0 1rem; transition: color .2s; }
.sol-tpl__card:hover .sol-tpl__heading, .sol-tpl__card:focus-within .sol-tpl__heading { color: #1f83f2; }
.sol-tpl__card:hover, .sol-tpl__card:focus-within { background: #f8f8fa; }
.sol-tpl__card:hover .sol-tpl__cols li:not(.sol-tpl__more), .sol-tpl__card:focus-within .sol-tpl__cols li:not(.sol-tpl__more) { background: #fff; }
.sol-tpl .sol-tpl__card p { color: #2a2c2d; flex-grow: 1; font-size: 1rem; line-height: 1.75; margin: 0 0 2.75rem; }
.sol-tpl .sol-tpl__card .sol-tpl__label { color: rgba(0, 0, 0, .5); flex-grow: 0; font-size: 0.75rem; letter-spacing: 0.5px; line-height: 1.25; margin: 0 0 1rem; text-transform: uppercase; }
.sol-tpl__cols { align-items: center; display: flex; flex-wrap: wrap; gap: 0.5rem 0.375rem; list-style: none; margin: 0 0 2.75rem; padding: 0; position: relative; }
.sol-tpl__cols li { background: #f7f7f9; border: 1px solid #e6e6ea; border-radius: 1rem; color: #000; font-size: 0.875rem; line-height: 1.5; padding: 0.25rem 0.875rem; transition: background-color .2s; }
.sol-tpl__cols li[hidden] { display: none; }
.sol-tpl__cols .sol-tpl__more { background: none; border: 0; padding: 0; }
.sol-tpl__all { background: none; border: 0; color: rgba(0, 0, 0, .55); cursor: help; font: inherit; padding: 0.25rem; text-decoration: underline dotted; text-underline-offset: 3px; }
/* The full list sits above the chips, as wide as they are, so it never
   leaves the card whichever end of the row "Show all" lands on. */
.sol-tpl__tip { background: #000; border-radius: 0.25rem; bottom: calc(100% + 0.5rem); color: #fff; font-size: 0.875rem; left: 0; line-height: 1.6; opacity: 0; padding: 0.75rem 1rem; pointer-events: none; position: absolute; right: 0; transition: opacity .2s, visibility 0s .2s; visibility: hidden; z-index: 2; }
.sol-tpl__more:hover .sol-tpl__tip, .sol-tpl__all:focus + .sol-tpl__tip { opacity: 1; transition: opacity .2s; visibility: visible; }
/* Integrations: two outlined cards, the yellow "next" card under them, as
   tall as they are (rows share one height; stacked on phones, each card
   keeps its own). */
.sol-apps { display: grid; gap: 1.5rem; grid-auto-rows: 1fr; grid-template-columns: repeat(2, 1fr); margin-top: 4rem; }
.sol-apps__card { background: #fff; border: 1px solid #000; border-radius: 0.25rem; display: flex; flex-direction: column; padding: 2rem 2.5rem; }
.sol-apps__card--next { background: #f0e790; }
.sol-apps .sol-apps__card p { color: #2a2c2d; flex-grow: 1; font-size: 1rem; line-height: 1.75; margin: 0 0 2rem; }
.sol-apps__head, .sol-apps__card > .sol-apps__heading { margin-bottom: 1rem; }
.sol-apps__head { align-items: center; display: flex; gap: 0.75rem; }
.sol-apps__heading { font-size: 1.25rem; font-weight: 600; line-height: 1.5; margin: 0; }
.sol-apps .sol-apps__card--next p { margin-bottom: 1.5rem; }
.sol-apps__link { align-items: center; align-self: start; color: #000; display: inline-flex; font-weight: 600; gap: 0.625rem; }
.sol-apps__link:hover { color: #000; text-decoration: none; }
.sol-apps__link .sol-arrow { color: #1f83f2; transition: transform .25s; }
.sol-apps__link:hover .sol-arrow { transform: translateX(4px); }
.sol-apps__card .btn { align-self: start; }
/* Pricing: the /pohoda cards, a credit pack each. */
.sol-price { display: grid; gap: 2rem; grid-template-columns: repeat(4, 1fr); margin-top: 4rem; }
.sol-price__box { align-items: center; background: #fff; border: 1px solid #000; border-radius: 0.25rem; display: flex; flex-direction: column; min-height: 22rem; padding: 2.5rem 2rem; position: relative; text-align: center; }
.sol-price__box--best { background: #f0e790; }
.sol-price__badge { background: #f0e790; border-radius: 0.25rem; font-size: 1.25rem; font-weight: 500; line-height: 1.3; margin: 0; padding: 0.25rem 0.625rem; }
.sol-price__box--best .sol-price__badge { background: #fff; }
.sol-price .sol-price__amount { color: #000; font-size: 2.5rem; font-weight: 700; line-height: 1.2; margin: 2.5rem 0 0; }
.sol-price .sol-price__unit { color: #2a2c2d; font-size: 1.25rem; line-height: 1.25; margin: 0; }
.sol-price .sol-price__total { color: #2a2c2d; font-size: 0.875rem; margin: auto 0 0; padding-top: 2rem; }
.sol-price__box .btn { margin-top: 1rem; min-height: 2.5rem; width: 100%; }
.sol-price__ribbon { background: #000; border-radius: 0.25rem; color: #fff; font-size: 0.875rem; font-weight: 600; left: 50%; line-height: 1.4; padding: 0.1875rem 1rem; position: absolute; text-transform: uppercase; top: 0; transform: translate(-50%, -50%); white-space: nowrap; }
#pricing .subpage__header-par { line-height: 1.75; max-width: 28rem; }
.sol-price__note { color: #2a2c2d; line-height: 1.75; margin: 4rem auto 0; max-width: 49rem; text-align: center; }
.sol-price__note p { margin: 0 0 1rem; }
.sol-faq h3 { font-size: inherit; font-weight: inherit; margin: 0; }
.sol-faq { margin: 0 auto; max-width: 770px; padding: 4rem 0 7rem; width: 100%; }
/* Closing band: centred title, line of text and two buttons on the quote
   band's grey, with the site's gold gradient button. */
.sol-foot { background: #2a2c2d; padding: 8.5rem 0; }
.sol-foot .lp-foot__container { display: flex; flex-direction: column; gap: 1rem; text-align: center; }
.sol-foot p { color: #fff; line-height: 1.75; margin: 0; max-width: 30rem; }
.sol-foot__buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-top: 1.25rem; }
.sol-btn-gold { background: linear-gradient(110deg, #ffdc84, #ffc738); color: #000; }
.sol-btn-gold:hover, .sol-btn-gold:focus { background: linear-gradient(110deg, #ffd059, #f5b400); color: #000; }
.sol-btn-outline { background: transparent; border: 1px solid #ffc738; color: #fff; }
.sol-btn-outline:hover, .sol-btn-outline:focus { background: #ffc738; color: #000; }
@media (max-width: 991px) {
  .sol-stepper { gap: 2rem 3rem; }
  .sol-card__grid--4, .sol-price { grid-template-columns: repeat(2, 1fr); }
  .sol-card__grid--4 .sol-card__item:nth-child(3) { border-left: 0; }
  .sol-card__grid--4 .sol-card__item:nth-child(n+3) { border-top: 1px solid #000; }
  .sol-tpl__card { flex-basis: 20rem; }
  .sol-tpl__nav { width: 7.5rem; }
  .sol-tpl__nav::before { font-size: 1.5rem; height: 3.5rem; width: 3.5rem; }
}