/* What the pages drawn by the server need on top of theme.css (design/saas-landing-web, copied as it is):
   - the font family picked in Theme options (theme-options.css, --tuetran-font-family) over the one of the drawing;
   - the logo height of Theme options, which the generic rule `.site-logo img` of theme-options.css would otherwise set at its own size;
   - a block with one screenshot only (is-single), the icons of «More features» drawn inline, the copy button as a real button;
   - the links typed in the copyright box, the errors of the demo request form, the plain text of a Page without blocks;
   - the place of the floating buttons of the floating-widget package above the bottom bar of phones (variables only, rule of dev/04). */

.page { font-family: var(--tuetran-font-family, 'Be Vietnam Pro', system-ui, -apple-system, sans-serif); }

.site-logo .site-logo-image { width: auto; height: var(--tuetran-logo-height, 30px); }
.site-logo .site-logo-image.is-small { width: 28px; height: 28px; }

.shot-pair.is-single { padding: 0; }
.shot-pair.is-single .shot-desktop { width: 100%; }
.shot-pair.is-single .shot-phone { position: relative; right: auto; bottom: auto; width: min(100%, 280px); margin: 0 auto; }

.more-feature-icon:has(svg)::before { display: none; }
.more-feature-icon svg { width: 22px; height: 22px; flex-shrink: 0; }

button.demo-account-copy { background: transparent; font-family: inherit; line-height: 1; cursor: pointer; }
button.demo-account-copy[data-copied] { border-color: currentColor; }

.site-footer-note a { color: #FFFFFF; text-decoration: none; font-weight: 600; }

.request-error { display: flex; flex-direction: column; gap: 4px; padding: 12px 16px; border: 1px solid var(--danger, #C0362C); border-radius: var(--radius-field, 11px); color: var(--danger, #C0362C); font-size: 14px; font-weight: 500; line-height: 1.5; }

.saas-prose { font-size: 16px; line-height: 1.7; color: var(--text, #172948); }
.saas-prose p, .saas-prose ul, .saas-prose ol { margin: 0 0 16px; }
.saas-prose a { color: var(--action-text, #1D4ED8); }

:root { --fab-edge-x: 24px; --fab-edge-y: calc(24px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 900px) {
  :root { --fab-edge-x: 16px; --fab-edge-y: calc(48px + 48px + env(safe-area-inset-bottom, 0px)); }
}

/* The cookie notice of the cookie-consent package (partials/cookie-consent): a card of the drawing at the corner the floating buttons leave
   free, above the bottom bar of phones and clear of the floating buttons' column */
.cookie-consent { position: fixed; left: var(--fab-edge-x); bottom: var(--fab-edge-y); z-index: 60; max-width: 440px; display: flex; flex-direction: column; gap: 12px; padding: 16px 20px; background: var(--surface, #FFFFFF); color: var(--text, #172948); border: 1px solid var(--border-strong, #E3E7ED); border-radius: var(--tt-radius-card, 18px); }
.cookie-consent[hidden] { display: none; }
.cookie-consent-text { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text-2, #565E6D); }
.cookie-consent-accept { align-self: flex-start; min-height: 44px; padding: 0 20px; border: 0; border-radius: var(--tt-radius-btn, 11px); background: var(--action-fill, #1D4ED8); color: var(--action-on, #FFFFFF); font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.cookie-consent-accept:hover { background: var(--action-hover, #1E3A8A); }
.cookie-consent-accept:focus-visible { outline: 3px solid var(--focus, rgba(29,78,216,0.22)); outline-offset: 2px; }
@media (max-width: 900px) {
  .cookie-consent { right: calc(var(--fab-edge-x) + 64px); max-width: none; }
}