:root {
--primary: #1E73D8;
--secondary: #6A2FD8;
--accent: #2EA6F7;
--text: #111827;
--subtitle: #7A7A7A;
--background: #FFFFFF;
--background-soft: #F8FAFC;
--border: #E5E7EB;
--shadow: 0 20px 60px rgba(17, 24, 39, 0.08);
--shadow-soft: 0 10px 30px rgba(17, 24, 39, 0.06);
--gradient-main: linear-gradient(135deg, #2EA6F7, #1E73D8, #6A2FD8);
--gradient-button: linear-gradient(135deg, #2EA6F7, #6A2FD8);
--container: 1180px;
--radius-xl: 28px;
--radius-lg: 24px;
--radius-md: 16px;
--radius-sm: 12px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* L'attribut hidden doit toujours gagner, même quand un composant définit
son propre display (grid/flex), sinon des blocs vides apparaissent. */
[hidden] {
display: none !important;
}
img,
picture,
video,
canvas,
svg {
max-width: 100%;
}
/* Public product navigation and feature bridge used across marketing pages. */
.public-product-nav {
position: relative;
z-index: 3;
margin: clamp(18px, 3vw, 30px) 0;
}
.public-product-nav__inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 10px;
width: min(1120px, calc(100% - 32px));
margin-inline: auto;
padding: 10px;
border: 1px solid rgba(244, 223, 174, 0.16);
border-radius: 22px;
background:
linear-gradient(135deg, rgba(244, 223, 174, 0.08), rgba(114, 146, 255, 0.05)),
rgba(8, 12, 24, 0.72);
box-shadow: 0 22px 70px rgba(0, 0, 0, 0.22);
backdrop-filter: blur(16px);
}
.public-product-nav a {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 0 16px;
border: 1px solid rgba(148, 163, 184, 0.16);
border-radius: 999px;
color: rgba(226, 232, 240, 0.86);
font-weight: 900;
text-decoration: none;
background: rgba(15, 23, 42, 0.72);
}
.public-product-nav a:hover,
.public-product-nav a:focus-visible,
.public-product-nav a.is-active {
color: #fff7df;
border-color: rgba(244, 223, 174, 0.42);
background: rgba(244, 223, 174, 0.1);
}
.public-feature-bridge {
padding-block: clamp(34px, 5vw, 70px);
}
.public-feature-bridge__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
margin-top: 20px;
}
.public-feature-bridge article {
padding: 20px;
border: 1px solid rgba(244, 223, 174, 0.16);
border-radius: 20px;
background:
radial-gradient(circle at top left, rgba(244, 223, 174, 0.08), transparent 12rem),
rgba(12, 18, 32, 0.78);
}
.public-feature-bridge span {
display: inline-flex;
margin-bottom: 12px;
color: rgba(244, 223, 174, 0.88);
font-size: 0.76rem;
font-weight: 950;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.public-feature-bridge strong {
display: block;
color: #f8fafc;
font-size: 1.05rem;
line-height: 1.2;
}
.public-feature-bridge p {
margin: 8px 0 0;
color: rgba(226, 232, 240, 0.72);
line-height: 1.5;
}
@media (max-width: 980px) {
.public-feature-bridge__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 720px) {
html,
body {
max-width: 100%;
overflow-x: hidden;
}
body.landing-page :is(.container, .home-gateway-shell, .live-demo-shell, .demo-booking-shell, .home-studio-suite, .live-demo-page, .live-demo-personalizer, .live-demo-phone, .voice-panel) {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin-left: auto !important;
margin-right: auto !important;
box-sizing: border-box !important;
}
body.landing-page :is(section, article, div, form, nav, ul, li, fieldset) {
min-width: 0;
}
body.landing-page :is(h1, h2, h3, p, strong, span, small, a, button, label, input, textarea) {
max-width: 100%;
overflow-wrap: anywhere;
}
body.landing-page :is(input, textarea, select, button, .btn) {
min-width: 0;
max-width: 100%;
}
.public-product-nav__inner,
body.vertical-page:not(.home-gateway-page) .vertical-page-nav__inner {
width: calc(100% - 24px) !important;
justify-content: flex-start !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
scrollbar-width: none;
}
.public-product-nav__inner::-webkit-scrollbar,
body.vertical-page:not(.home-gateway-page) .vertical-page-nav__inner::-webkit-scrollbar {
display: none;
}
.public-product-nav a,
body.vertical-page:not(.home-gateway-page) .vertical-page-nav__inner a {
flex: 0 0 auto;
white-space: nowrap;
}
.public-feature-bridge__grid {
grid-template-columns: 1fr;
}
body.live-demo-body .live-demo-page {
padding-inline: 0 !important;
overflow: hidden;
}
body.live-demo-body .live-demo-shell {
padding-inline: 12px !important;
gap: 18px !important;
}
body.live-demo-body .live-demo-personalizer,
body.live-demo-body .live-demo-phone,
body.live-demo-body .voice-panel,
body.home-gateway-page .home-studio-test-suite,
body.home-gateway-page .home-studio-live {
padding: 16px !important;
border-radius: 20px !important;
}
body.live-demo-body .live-demo-personalizer {
grid-template-columns: 1fr !important;
}
body.live-demo-body .live-demo-personalizer__copy h1 {
font-size: clamp(2.05rem, 9vw, 2.75rem) !important;
line-height: 1.02 !important;
}
body.live-demo-body .live-demo-business-search form,
body.home-gateway-page .home-gateway-search form {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 10px !important;
}
body.live-demo-body .live-demo-business-search input,
body.live-demo-body .live-demo-business-search button,
body.home-gateway-page .home-gateway-search input,
body.home-gateway-page .home-gateway-search button {
width: 100% !important;
}
body.home-gateway-page .home-studio-test-layout,
body.home-gateway-page .home-studio-live__grid {
grid-template-columns: 1fr !important;
}
body.home-gateway-page .home-studio-test-card--number {
text-align: center !important;
align-content: center !important;
justify-items: center !important;
gap: 16px !important;
}
body.home-gateway-page .home-studio-test-card--number > a,
body.home-gateway-page .home-studio-test-card--number > a.is-empty {
display: inline-flex !important;
width: auto !important;
max-width: 100% !important;
min-height: 46px !important;
padding: 10px 18px !important;
font-size: clamp(1.05rem, 6.2vw, 1.9rem) !important;
line-height: 1 !important;
white-space: nowrap !important;
word-break: keep-all !important;
overflow-wrap: normal !important;
}
body.home-gateway-page .home-studio-test-card--number > a.is-empty {
font-size: 0.9rem !important;
line-height: 1.1 !important;
padding-inline: 14px !important;
}
body.home-gateway-page .home-studio-test-call,
body.home-gateway-page .home-studio-test-call fieldset {
width: 100% !important;
}
body.home-gateway-page .home-studio-test-call label {
text-align: left !important;
}
body.home-gateway-page .home-studio-live__head {
grid-template-columns: 1fr !important;
text-align: left !important;
}
body.home-gateway-page .home-studio-live__head strong {
display: -webkit-box !important;
-webkit-line-clamp: 4 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
font-size: clamp(1.28rem, 7vw, 1.8rem) !important;
line-height: 1.12 !important;
}
body.home-gateway-page .home-studio-live__head em {
width: fit-content !important;
min-width: 72px !important;
min-height: 42px !important;
padding-inline: 14px !important;
white-space: nowrap !important;
justify-self: start !important;
}
body.home-gateway-page .home-studio-live__section-head {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 10px !important;
text-align: center !important;
}
body.home-gateway-page .home-studio-live__section-head > span {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
flex-wrap: nowrap !important;
width: 100% !important;
white-space: normal !important;
}
body.home-gateway-page .home-studio-live__section-head strong {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex: 0 0 auto !important;
min-width: 34px !important;
height: 34px !important;
padding: 0 10px !important;
white-space: nowrap !important;
word-break: keep-all !important;
overflow-wrap: normal !important;
}
body.home-gateway-page .home-studio-live__section-head button {
width: 100% !important;
min-height: 42px !important;
}
body.home-gateway-page .home-studio-source-panel,
body.home-gateway-page .home-gateway-source-card,
body.home-gateway-page .home-gateway-source-fallback {
min-width: 0 !important;
}
body.home-gateway-page .home-gateway-source-fallback {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 12px !important;
}
}
@media (max-width: 420px) {
body.live-demo-body .live-demo-shell,
body.home-gateway-page .home-gateway-shell {
padding-inline: 10px !important;
}
body.live-demo-body .live-demo-personalizer,
body.live-demo-body .live-demo-phone,
body.live-demo-body .voice-panel,
body.home-gateway-page .home-studio-test-suite,
body.home-gateway-page .home-studio-live {
padding: 14px !important;
}
body.home-gateway-page .home-studio-test-card--number > a {
font-size: clamp(1.2rem, 7.4vw, 1.62rem) !important;
letter-spacing: -0.01em !important;
}
}
/* Verticalized public experiences */
.vertical-page .site-main {
overflow: hidden;
}
.vertical-hero {
position: relative;
padding: clamp(3rem, 5.8vw, 5.5rem) 0 clamp(2.2rem, 4.5vw, 4rem);
}
.vertical-hero--ready {
padding-top: clamp(2.8rem, 5.4vw, 5rem);
}
.vertical-hero--ready::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
radial-gradient(circle at 18% 12%, rgba(94, 234, 212, .14), transparent 32%),
radial-gradient(circle at 92% 8%, rgba(59, 130, 246, .16), transparent 34%),
linear-gradient(180deg, rgba(15, 23, 42, .92), rgba(8, 16, 31, .98));
}
.vertical-hero__grid {
display: grid;
grid-template-columns: minmax(0, .92fr) minmax(360px, .72fr);
gap: clamp(1.5rem, 4vw, 4rem);
align-items: start;
}
.vertical-hero__copy {
display: grid;
gap: 1.1rem;
}
.vertical-hero__copy h1 {
max-width: 14.5ch;
margin: 0;
font-size: clamp(2.8rem, 5.4vw, 5.35rem);
line-height: .94;
letter-spacing: 0;
}
.vertical-hero--ready .vertical-hero__copy h1 {
max-width: 13.5ch;
font-size: clamp(2.7rem, 5vw, 5rem);
}
.vertical-hero--compact .vertical-hero__copy h1 {
max-width: 18ch;
font-size: clamp(2.45rem, 3.8vw, 3.85rem);
line-height: .98;
}
.vertical-hero__copy p {
max-width: 62ch;
margin: 0;
color: rgba(226, 232, 240, .78);
font-size: clamp(1.02rem, 1.5vw, 1.22rem);
line-height: 1.6;
}
.vertical-hero__ready-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: .75rem;
max-width: 860px;
}
.vertical-hero__ready-grid article {
display: grid;
gap: .35rem;
min-width: 0;
padding: .95rem 1rem;
border: 1px solid rgba(125, 211, 252, .18);
border-radius: 8px;
background:
linear-gradient(135deg, rgba(15, 23, 42, .48), rgba(15, 23, 42, .2)),
rgba(255, 255, 255, .06);
}
.vertical-hero__ready-grid span {
color: #7dd3fc;
font-size: .72rem;
font-weight: 900;
letter-spacing: .06em;
text-transform: uppercase;
}
.vertical-hero__ready-grid strong {
min-width: 0;
color: #f8fafc;
font-size: .98rem;
line-height: 1.25;
}
.vertical-hero__actions,
.vertical-proof-strip,
.vertical-live-card__top,
.vertical-ready-panel__summary,
.vertical-picker form,
.vertical-business-results,
.vertical-live-card__dashboard,
.vertical-dashboard-preview,
.vertical-integrations-grid,
.vertical-comparison,
.vertical-pricing-grid,
.vertical-calculator {
display: grid;
gap: 1rem;
}
.vertical-hero__actions {
grid-template-columns: repeat(3, max-content);
align-items: center;
margin-top: .4rem;
}
.vertical-proof-strip {
grid-template-columns: repeat(3, minmax(0, 1fr));
max-width: 760px;
}
.vertical-proof-strip span {
padding: .75rem .9rem;
border: 1px solid rgba(148, 163, 184, .18);
border-radius: 8px;
background: rgba(255, 255, 255, .055);
color: rgba(226, 232, 240, .86);
font-weight: 800;
}
.vertical-live-card,
.vertical-page-summary,
.vertical-picker,
.vertical-integration-panel,
.vertical-roi-card,
.vertical-transcript,
.vertical-calculator__grid,
.vertical-dashboard-preview--large article {
border: 1px solid rgba(148, 163, 184, .16);
border-radius: 8px;
background:
linear-gradient(135deg, rgba(37, 99, 235, .12), rgba(20, 184, 166, .075)),
rgba(15, 23, 42, .82);
box-shadow: 0 24px 70px rgba(2, 6, 23, .28);
}
.vertical-live-card,
.vertical-page-summary,
.vertical-picker,
.vertical-integration-panel,
.vertical-roi-card,
.vertical-transcript,
.vertical-calculator__grid,
.vertical-dashboard-preview--large article,
.vertical-signature__copy,
.vertical-signature-board {
color: #f8fafc;
}
.vertical-live-card h1,
.vertical-live-card h2,
.vertical-live-card h3,
.vertical-live-card strong,
.vertical-page-summary strong,
.vertical-picker h2,
.vertical-integration-panel h2,
.vertical-roi-card strong,
.vertical-transcript b,
.vertical-dashboard-preview--large strong,
.vertical-signature__copy h2 {
color: #f8fafc;
}
.vertical-live-card {
display: grid;
gap: 1rem;
padding: clamp(1rem, 2vw, 1.35rem);
}
.vertical-ready-panel {
gap: 1rem;
padding: clamp(1rem, 2vw, 1.4rem);
background:
linear-gradient(135deg, rgba(21, 94, 117, .22), rgba(37, 99, 235, .1)),
rgba(15, 23, 42, .88);
box-shadow:
0 32px 90px rgba(2, 6, 23, .34),
inset 0 1px 0 rgba(255, 255, 255, .06);
}
.vertical-ready-panel__header {
display: flex;
justify-content: space-between;
gap: 1rem;
align-items: flex-start;
padding-bottom: .95rem;
border-bottom: 1px solid rgba(148, 163, 184, .14);
}
.vertical-ready-panel__header div {
display: grid;
min-width: 0;
gap: .3rem;
}
.vertical-ready-panel__header strong {
min-width: 0;
font-size: clamp(1.35rem, 2.5vw, 2.05rem);
line-height: 1.05;
}
.vertical-ready-panel__header small {
color: rgba(226, 232, 240, .72);
line-height: 1.45;
}
.vertical-ready-panel__status,
.vertical-ready-panel__badge,
.vertical-ready-panel__summary span,
.vertical-ready-panel__context > span,
.vertical-ready-panel__outcome > span {
width: fit-content;
color: #99f6e4;
font-size: .72rem;
font-weight: 900;
letter-spacing: .07em;
text-transform: uppercase;
}
.vertical-ready-panel__status {
position: relative;
padding-left: 1rem;
}
.vertical-ready-panel__status::before {
content: "";
position: absolute;
top: 50%;
left: 0;
width: .52rem;
height: .52rem;
border-radius: 999px;
background: #34d399;
box-shadow: 0 0 0 6px rgba(52, 211, 153, .12);
transform: translateY(-50%);
}
.vertical-ready-panel__badge {
flex: 0 0 auto;
padding: .48rem .7rem;
border: 1px solid rgba(125, 211, 252, .2);
border-radius: 999px;
background: rgba(14, 165, 233, .1);
}
.vertical-ready-panel__summary {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.vertical-ready-panel__summary article,
.vertical-ready-panel__context,
.vertical-ready-panel__outcome {
display: grid;
gap: .7rem;
min-width: 0;
padding: 1rem;
border: 1px solid rgba(148, 163, 184, .16);
border-radius: 8px;
background: rgba(255, 255, 255, .055);
}
.vertical-ready-panel__summary strong,
.vertical-ready-panel__outcome strong {
font-size: 1.04rem;
line-height: 1.25;
}
.vertical-ready-panel__summary p,
.vertical-ready-panel__outcome p {
margin: 0;
color: rgba(226, 232, 240, .74);
line-height: 1.5;
}
.vertical-ready-panel__context ul {
display: grid;
gap: .55rem;
margin: 0;
padding: 0;
list-style: none;
}
.vertical-ready-panel__context li {
display: grid;
grid-template-columns: minmax(82px, .28fr) minmax(0, 1fr);
gap: .8rem;
align-items: start;
padding: .62rem .7rem;
border-radius: 8px;
background: rgba(2, 6, 23, .22);
}
.vertical-ready-panel__context li strong {
color: rgba(226, 232, 240, .82);
font-size: .82rem;
}
.vertical-ready-panel__context li span {
min-width: 0;
overflow-wrap: anywhere;
color: #f8fafc;
font-weight: 800;
line-height: 1.35;
}
.vertical-live-card__top {
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
}
.vertical-live-card__top > span {
width: .72rem;
height: .72rem;
border-radius: 999px;
background: #5eead4;
box-shadow: 0 0 0 6px rgba(94, 234, 212, .12);
}
.vertical-live-card__top strong,
.vertical-live-card__top small {
min-width: 0;
}
.vertical-live-card__top small,
.vertical-page-summary p,
.vertical-live-card__dialog p,
.vertical-integration-panel p,
.vertical-picker__copy p {
color: rgba(226, 232, 240, .76);
line-height: 1.55;
}
.vertical-live-card__dialog {
display: grid;
gap: .7rem;
}
.vertical-live-card__dialog p,
.vertical-transcript p {
margin: 0;
padding: .9rem 1rem;
border-radius: 8px;
background: rgba(255, 255, 255, .055);
}
.vertical-live-card__dashboard,
.vertical-dashboard-preview {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
}
.vertical-live-card__dashboard article,
.vertical-dashboard-preview article,
.vertical-integrations-grid article,
.vertical-comparison article,
.vertical-pricing-grid article {
display: grid;
gap: .78rem;
padding: 1.25rem 1.35rem;
border: 1px solid rgba(148, 163, 184, .16);
border-radius: 8px;
background: rgba(255, 255, 255, .045);
}
.vertical-live-card__dashboard span,
.vertical-dashboard-preview span,
.vertical-integrations-grid span,
.vertical-comparison span,
.vertical-page-summary span,
.vertical-roi-card span {
color: #7dd3fc;
font-size: .75rem;
font-weight: 900;
letter-spacing: .06em;
text-transform: uppercase;
}
.vertical-picker {
grid-template-columns: minmax(0, .8fr) minmax(340px, 1fr);
align-items: start;
padding: clamp(1.1rem, 2.4vw, 1.8rem);
}
.vertical-start-section {
padding: clamp(1rem, 3vw, 2rem) 0;
}
.vertical-start {
display: grid;
grid-template-columns: minmax(0, .64fr) minmax(0, 1fr);
gap: clamp(1rem, 2.4vw, 1.6rem);
align-items: start;
}
.vertical-start__copy {
display: grid;
gap: .75rem;
}
.vertical-start__copy h2 {
max-width: 13ch;
margin: 0;
color: #f8fafc;
font-size: clamp(2rem, 4vw, 4rem);
line-height: .98;
}
.vertical-start__copy p {
margin: 0;
color: rgba(226, 232, 240, .76);
line-height: 1.6;
}
.vertical-start__actions {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: .8rem;
}
.vertical-start__actions a {
display: grid;
gap: .45rem;
min-height: 178px;
padding: 1rem;
border: 1px solid rgba(148, 163, 184, .16);
border-radius: 8px;
background:
linear-gradient(135deg, var(--vertical-accent-soft, rgba(20, 184, 166, .1)), rgba(255, 255, 255, .035)),
rgba(15, 23, 42, .78);
color: inherit;
text-decoration: none;
box-shadow: 0 18px 48px rgba(2, 6, 23, .2);
}
.vertical-start__actions a:hover,
.vertical-start__actions a:focus-visible {
border-color: var(--vertical-accent-line, rgba(94, 234, 212, .38));
background:
linear-gradient(135deg, var(--vertical-accent-soft, rgba(20, 184, 166, .14)), rgba(255, 255, 255, .06)),
rgba(15, 23, 42, .88);
}
.vertical-start__actions span {
display: inline-grid;
width: 34px;
height: 34px;
place-items: center;
border: 1px solid var(--vertical-accent-line, rgba(94, 234, 212, .28));
border-radius: 8px;
background: var(--vertical-accent-soft, rgba(20, 184, 166, .1));
color: var(--vertical-accent, #5eead4);
font-size: .72rem;
font-weight: 950;
}
.vertical-start__actions strong {
color: #f8fafc;
font-size: 1.05rem;
line-height: 1.2;
}
.vertical-start__actions small {
color: rgba(226, 232, 240, .72);
font-size: .9rem;
line-height: 1.45;
}
.vertical-start__change {
width: fit-content;
color: #bfdbfe;
font-weight: 850;
text-decoration: none;
}
.vertical-start__change:hover,
.vertical-start__change:focus-visible {
color: #f8fafc;
text-decoration: underline;
}
.vertical-picker__copy h2,
.vertical-integration-panel h2,
.vertical-page-summary strong {
margin: 0;
font-size: clamp(1.6rem, 2.4vw, 2.4rem);
line-height: 1.05;
}
.vertical-picker__business {
display: grid;
gap: .8rem;
}
.vertical-picker form {
grid-template-columns: minmax(0, 1fr) max-content;
}
.vertical-picker input,
.vertical-calculator input {
width: 100%;
min-height: 52px;
border: 1px solid rgba(148, 163, 184, .2);
border-radius: 8px;
background: rgba(15, 23, 42, .72);
color: #f8fafc;
padding: 0 .9rem;
font: inherit;
}
.vertical-business-results {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.vertical-business-result {
display: grid;
gap: .35rem;
min-height: 112px;
padding: .9rem;
border: 1px solid rgba(148, 163, 184, .18);
border-radius: 8px;
background: rgba(255, 255, 255, .05);
color: #f8fafc;
text-align: left;
cursor: pointer;
}
.vertical-business-result:hover {
border-color: rgba(94, 234, 212, .44);
background: rgba(20, 184, 166, .08);
}
.vertical-business-result span,
.vertical-business-result small {
color: rgba(226, 232, 240, .72);
}
.vertical-split {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(340px, .72fr);
gap: 1.2rem;
align-items: start;
}
.vertical-integration-panel,
.vertical-page-summary,
.vertical-roi-card {
display: grid;
gap: 1rem;
padding: 1.2rem;
}
.vertical-integration-panel div,
.vertical-integrations-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.vertical-integration-panel a {
display: grid;
gap: .25rem;
padding: .85rem;
border: 1px solid rgba(148, 163, 184, .16);
border-radius: 8px;
color: inherit;
text-decoration: none;
background: rgba(255, 255, 255, .04);
}
.vertical-integrations-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.vertical-comparison {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.vertical-comparison .is-featured {
border-color: rgba(94, 234, 212, .34);
background: rgba(20, 184, 166, .1);
}
.vertical-pricing-grid,
.vertical-calculator {
grid-template-columns: minmax(0, 1fr) minmax(340px, .65fr);
align-items: start;
}
.vertical-calculator__grid {
padding: 1.1rem;
}
.vertical-calculator__grid label {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(132px, 0.42fr);
gap: .8rem;
align-items: center;
color: rgba(226, 232, 240, .84);
font-weight: 800;
}
.vertical-calculator input,
.vertical-calculator select {
width: 100%;
min-width: 0;
}
.vertical-calculator output {
display: grid;
gap: .35rem;
padding: 1rem;
border-radius: 8px;
background: rgba(94, 234, 212, .09);
}
.vertical-calculator output strong {
font-size: clamp(2rem, 3vw, 3rem);
}
.vertical-choice-card > span,
.nav-vertical-mark {
display: inline-grid;
place-items: center;
width: 38px;
height: 38px;
border: 1px solid rgba(94, 234, 212, .28);
border-radius: 8px;
background: rgba(20, 184, 166, .12);
color: #5eead4;
font-size: .72rem;
font-weight: 950;
}
body[data-theme="light"] .vertical-proof-strip span,
body[data-theme="light"] .vertical-choice-card {
background: rgba(255, 255, 255, .76);
color: #0f172a;
}
.vertical-funnel {
padding-top: clamp(1.6rem, 4vw, 3.5rem);
}
.vertical-funnel__shell {
display: grid;
grid-template-columns: minmax(0, 0.68fr) minmax(420px, 1fr);
gap: clamp(1rem, 2.4vw, 1.6rem);
align-items: start;
}
.vertical-funnel__head,
.vertical-funnel__next,
.vertical-funnel__steps article {
border: 1px solid rgba(148, 163, 184, .16);
border-radius: 8px;
background:
linear-gradient(135deg, var(--vertical-accent-soft, rgba(20, 184, 166, .1)), rgba(15, 23, 42, .36)),
rgba(15, 23, 42, .78);
box-shadow: 0 22px 62px rgba(2, 6, 23, .22);
}
.vertical-funnel__head {
display: grid;
gap: .9rem;
padding: clamp(1.1rem, 2.6vw, 1.8rem);
}
.vertical-funnel__head h2 {
max-width: 13ch;
margin: 0;
color: #f8fafc;
font-size: clamp(2rem, 4vw, 4rem);
line-height: .98;
}
.vertical-funnel__head p,
.vertical-funnel__steps p,
.vertical-funnel__next p {
margin: 0;
color: rgba(226, 232, 240, .76);
line-height: 1.55;
}
.vertical-funnel__steps {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: .85rem;
}
.vertical-funnel__steps article {
display: grid;
gap: .55rem;
min-height: 174px;
padding: 1rem;
}
.vertical-funnel__steps article span,
.vertical-funnel__next > span {
color: var(--vertical-accent, #5eead4);
font-size: .76rem;
font-weight: 950;
letter-spacing: .06em;
text-transform: uppercase;
}
.vertical-funnel__steps h3,
.vertical-funnel__next h3 {
margin: 0;
color: #f8fafc;
line-height: 1.1;
}
.vertical-funnel__next {
display: grid;
gap: .75rem;
grid-column: 2;
padding: 1rem;
border-color: var(--vertical-accent-line, rgba(94, 234, 212, .28));
background:
linear-gradient(135deg, var(--vertical-accent-soft, rgba(94, 234, 212, .12)), rgba(59, 130, 246, .08)),
rgba(15, 23, 42, .82);
}
.vertical-funnel__next .btn {
justify-content: center;
}
.vertical-page--restaurant {
--vertical-accent: #5eead4;
--vertical-accent-soft: rgba(20, 184, 166, .14);
--vertical-accent-line: rgba(94, 234, 212, .34);
}
.vertical-page--hotel {
--vertical-accent: #f4d38d;
--vertical-accent-soft: rgba(244, 211, 141, .14);
--vertical-accent-line: rgba(244, 211, 141, .34);
}
.vertical-page--artisan {
--vertical-accent: #38bdf8;
--vertical-accent-soft: rgba(56, 189, 248, .12);
--vertical-accent-line: rgba(56, 189, 248, .3);
}
.vertical-page--commerce {
--vertical-accent: #c084fc;
--vertical-accent-soft: rgba(192, 132, 252, .11);
--vertical-accent-line: rgba(192, 132, 252, .3);
}
.vertical-page--services {
--vertical-accent: #34d399;
--vertical-accent-soft: rgba(52, 211, 153, .12);
--vertical-accent-line: rgba(52, 211, 153, .32);
}
.vertical-signature {
position: relative;
padding-top: clamp(2rem, 5vw, 4.5rem);
}
.vertical-signature__grid {
display: grid;
grid-template-columns: minmax(0, .78fr) minmax(360px, .72fr);
gap: clamp(1.1rem, 3vw, 2rem);
align-items: stretch;
}
.vertical-signature__copy,
.vertical-signature-board {
border: 1px solid rgba(148, 163, 184, .16);
border-radius: 8px;
background:
linear-gradient(135deg, var(--vertical-accent-soft), rgba(15, 23, 42, .28)),
rgba(15, 23, 42, .78);
box-shadow: 0 24px 70px rgba(2, 6, 23, .26);
}
.vertical-signature__copy {
display: grid;
align-content: center;
gap: 1rem;
padding: clamp(1.2rem, 3vw, 2rem);
}
.vertical-signature__copy h2 {
max-width: 12ch;
margin: 0;
font-size: clamp(2.2rem, 4.5vw, 4.6rem);
line-height: .95;
}
.vertical-signature__copy p {
max-width: 64ch;
color: rgba(226, 232, 240, .78);
line-height: 1.6;
}
.vertical-signature__bullets,
.vertical-signature-tools,
.restaurant-floor-board__tables,
.hotel-reception-board__lanes,
.commerce-stock-board__shelves,
.services-agenda-board__slots {
display: grid;
gap: .7rem;
}
.vertical-signature__bullets {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.vertical-signature__bullets span,
.vertical-signature-tools span {
min-width: 0;
border: 1px solid rgba(148, 163, 184, .16);
border-radius: 999px;
background: rgba(255, 255, 255, .055);
color: rgba(248, 250, 252, .9);
font-size: .86rem;
font-weight: 850;
}
.vertical-signature__bullets span {
padding: .72rem .85rem;
}
.vertical-signature-board {
display: grid;
gap: 1rem;
min-height: 430px;
padding: clamp(1rem, 2vw, 1.3rem);
}
.vertical-signature-board strong,
.vertical-signature-board h3 {
color: #f8fafc;
}
.vertical-signature-board article {
display: grid;
gap: .4rem;
padding: .9rem;
border: 1px solid rgba(148, 163, 184, .16);
border-left: 4px solid var(--vertical-accent);
border-radius: 8px;
background: rgba(15, 23, 42, .48);
}
.vertical-signature-board article span,
.vertical-signature-board article small {
color: rgba(226, 232, 240, .7);
}
.vertical-signature-board article p {
margin: 0;
color: rgba(226, 232, 240, .78);
line-height: 1.45;
}
.vertical-signature-tools {
grid-template-columns: repeat(3, minmax(0, 1fr));
align-self: end;
}
.vertical-signature-tools span {
display: grid;
min-height: 42px;
place-items: center;
padding: .55rem .65rem;
text-align: center;
}
.restaurant-floor-board__header,
.hotel-reception-board__header,
.artisan-dispatch-board__header,
.commerce-stock-board__header,
.services-agenda-board__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: .75rem;
padding-bottom: .8rem;
border-bottom: 1px solid rgba(148, 163, 184, .16);
}
.restaurant-floor-board__header span,
.hotel-reception-board__header span,
.artisan-dispatch-board__header span,
.commerce-stock-board__header span,
.services-agenda-board__header span {
color: var(--vertical-accent);
font-weight: 900;
}
.restaurant-floor-board__tables {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.restaurant-floor-board__tables span {
display: grid;
min-height: 76px;
place-items: center;
border: 1px solid rgba(148, 163, 184, .16);
border-radius: 8px;
background: rgba(255, 255, 255, .05);
color: #f8fafc;
font-size: 1.4rem;
font-weight: 950;
}
.restaurant-floor-board__tables .is-booked {
background: rgba(34, 197, 94, .12);
border-color: rgba(34, 197, 94, .3);
}
.restaurant-floor-board__tables .is-alert {
background: rgba(249, 115, 22, .13);
border-color: rgba(249, 115, 22, .34);
}
.hotel-reception-board__lanes {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.hotel-reception-board__lanes article,
.services-agenda-board__slots article {
min-height: 130px;
border-left-color: var(--vertical-accent);
}
.artisan-dispatch-board {
align-content: start;
}
.artisan-dispatch-board article.is-urgent {
background: rgba(239, 68, 68, .12);
border-color: rgba(248, 113, 113, .28);
border-left-color: #f87171;
}
.commerce-stock-board__shelves {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.commerce-stock-board__shelves span {
display: grid;
min-height: 74px;
place-items: center;
border: 1px solid rgba(148, 163, 184, .16);
border-radius: 8px;
background: rgba(255, 255, 255, .05);
color: rgba(248, 250, 252, .9);
font-weight: 900;
text-align: center;
}
.commerce-stock-board__shelves .is-check {
border-color: rgba(52, 211, 153, .32);
background: rgba(52, 211, 153, .1);
}
.commerce-stock-board__shelves .is-alert {
border-color: var(--vertical-accent-line);
background: var(--vertical-accent-soft);
}
.services-agenda-board__slots {
grid-template-columns: 1fr;
}
.services-agenda-board__slots article {
grid-template-columns: 72px minmax(0, 1fr);
align-items: center;
}
.services-agenda-board__slots article span {
color: var(--vertical-accent);
font-weight: 950;
}
.services-agenda-board__slots .is-open {
background: rgba(52, 211, 153, .12);
border-color: rgba(52, 211, 153, .3);
}
@media (max-width: 1040px) {
.vertical-hero__grid,
.vertical-picker,
.vertical-start,
.vertical-split,
.vertical-pricing-grid,
.vertical-calculator,
.vertical-signature__grid,
.vertical-funnel__shell {
grid-template-columns: 1fr;
}
.vertical-funnel__next {
grid-column: auto;
}
.vertical-integrations-grid,
.vertical-start__actions,
.vertical-choice-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 720px) {
html.app-mobile-shell body.vertical-page .site-main {
padding-bottom: calc(112px + env(safe-area-inset-bottom));
}
.vertical-page .home-section,
.vertical-page .home-cta,
.vertical-signature,
.vertical-picker-section {
padding-top: 1.05rem;
padding-bottom: 1.05rem;
}
.vertical-hero {
padding: 1.25rem 0 1rem;
}
.vertical-hero--ready {
padding-top: 1.2rem;
}
.vertical-hero__grid {
gap: .9rem;
}
.vertical-hero__copy {
gap: .72rem;
}
.vertical-hero__actions,
.vertical-proof-strip,
.vertical-hero__ready-grid,
.vertical-ready-panel__summary,
.vertical-live-card__dashboard,
.vertical-dashboard-preview,
.vertical-business-results,
.vertical-integrations-grid,
.vertical-comparison,
.vertical-choice-grid,
.vertical-start,
.vertical-start__actions,
.vertical-funnel__steps,
.vertical-signature__bullets,
.vertical-signature-tools,
.hotel-reception-board__lanes,
.commerce-stock-board__shelves {
grid-template-columns: 1fr;
}
.vertical-picker form,
.vertical-calculator__grid label {
grid-template-columns: 1fr;
}
.vertical-hero__copy h1 {
max-width: 100%;
font-size: clamp(2.25rem, 10vw, 3.2rem);
line-height: .96;
}
.vertical-hero__copy p {
font-size: .96rem;
line-height: 1.48;
}
.vertical-hero__ready-grid {
gap: .48rem;
}
.vertical-hero__ready-grid article {
grid-template-columns: 78px minmax(0, 1fr);
align-items: center;
padding: .58rem .66rem;
}
.vertical-hero__ready-grid span {
font-size: .67rem;
}
.vertical-hero__ready-grid strong {
font-size: .9rem;
}
.vertical-hero__actions {
gap: .55rem;
margin-top: 0;
}
.vertical-hero__actions .btn {
width: 100%;
min-height: 44px;
padding: .68rem .78rem;
font-size: .9rem;
}
.vertical-proof-strip {
gap: .45rem;
}
.vertical-proof-strip span {
padding: .54rem .62rem;
font-size: .78rem;
line-height: 1.25;
}
.vertical-ready-panel {
gap: .65rem;
padding: .72rem;
box-shadow: 0 16px 44px rgba(2, 6, 23, .22);
}
.vertical-ready-panel__header {
display: grid;
gap: .45rem;
padding-bottom: .62rem;
}
.vertical-ready-panel__header strong {
font-size: 1.22rem;
}
.vertical-ready-panel__header small {
font-size: .88rem;
}
.vertical-ready-panel__badge {
display: none;
}
.vertical-ready-panel__summary {
gap: .55rem;
}
.vertical-ready-panel__summary article,
.vertical-ready-panel__context,
.vertical-ready-panel__outcome {
gap: .42rem;
padding: .7rem;
}
.vertical-ready-panel__summary span,
.vertical-ready-panel__context > span,
.vertical-ready-panel__outcome > span {
font-size: .66rem;
}
.vertical-ready-panel__summary strong,
.vertical-ready-panel__outcome strong {
font-size: .95rem;
}
.vertical-ready-panel__summary p,
.vertical-ready-panel__outcome p {
font-size: .88rem;
line-height: 1.42;
}
.vertical-ready-panel__context ul {
gap: .35rem;
}
.vertical-ready-panel__context li {
grid-template-columns: 78px minmax(0, 1fr);
gap: .45rem;
padding: .45rem .52rem;
}
.vertical-ready-panel__context li strong,
.vertical-ready-panel__context li span {
font-size: .82rem;
}
.vertical-start {
gap: .85rem;
}
.vertical-start__copy {
gap: .55rem;
}
.vertical-start__copy h2 {
max-width: 100%;
font-size: clamp(1.7rem, 8vw, 2.35rem);
line-height: 1.04;
}
.vertical-start__copy p {
font-size: .94rem;
line-height: 1.48;
}
.vertical-start__actions {
gap: .55rem;
}
.vertical-start__actions a {
grid-template-columns: 36px minmax(0, 1fr);
min-height: 0;
gap: .25rem .7rem;
padding: .78rem;
box-shadow: 0 12px 34px rgba(2, 6, 23, .16);
}
.vertical-start__actions span {
grid-row: span 2;
}
.vertical-start__actions small {
font-size: .82rem;
line-height: 1.35;
}
.vertical-start__change {
font-size: .9rem;
}
.vertical-funnel {
padding-top: .8rem;
}
.vertical-funnel__shell {
gap: .65rem;
}
.vertical-funnel__head,
.vertical-funnel__next,
.vertical-funnel__steps article {
box-shadow: 0 14px 36px rgba(2, 6, 23, .18);
}
.vertical-funnel__head,
.vertical-funnel__next {
padding: .82rem;
}
.vertical-funnel__head h2 {
max-width: 100%;
font-size: clamp(1.65rem, 8vw, 2.2rem);
line-height: 1.04;
}
.vertical-funnel__head p,
.vertical-funnel__steps p,
.vertical-funnel__next p {
font-size: .88rem;
line-height: 1.42;
}
.vertical-funnel__steps {
gap: .5rem;
}
.vertical-funnel__steps article {
grid-template-columns: 34px minmax(0, 1fr);
gap: .18rem .62rem;
min-height: 0;
padding: .72rem;
}
.vertical-funnel__steps article span {
grid-row: span 2;
width: 32px;
height: 32px;
font-size: .76rem;
}
.vertical-funnel__steps h3,
.vertical-funnel__next h3 {
font-size: 1rem;
line-height: 1.2;
}
.vertical-funnel__steps p {
grid-column: 2;
}
.vertical-funnel__next .btn {
width: 100%;
min-height: 44px;
}
.vertical-signature__grid {
gap: .75rem;
}
.vertical-signature__copy,
.vertical-signature-board {
padding: .86rem;
min-height: 0;
}
.vertical-signature__copy h2 {
max-width: 100%;
font-size: clamp(1.75rem, 8.5vw, 2.45rem);
line-height: 1.04;
}
.vertical-signature__copy p,
.vertical-signature-board article p {
font-size: .92rem;
line-height: 1.45;
}
.vertical-signature__bullets {
gap: .42rem;
}
.vertical-signature__bullets span,
.vertical-signature-tools span {
min-height: 36px;
padding: .48rem .58rem;
font-size: .78rem;
}
.restaurant-floor-board__tables {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: .45rem;
}
.restaurant-floor-board__tables span,
.commerce-stock-board__shelves span {
min-height: 52px;
}
.vertical-signature-board article {
padding: .68rem;
}
.home-steps--process {
gap: .65rem;
}
.home-steps--process article,
.vertical-faq-grid article,
.vertical-integration-panel {
padding: .85rem;
}
.vertical-split {
gap: .75rem;
}
.vertical-integration-panel {
gap: .7rem;
}
.vertical-integration-panel div {
grid-template-columns: 1fr;
gap: .48rem;
}
.vertical-integration-panel a {
padding: .65rem .7rem;
}
.vertical-page .home-section__head {
gap: .45rem;
}
.vertical-page .home-section__head h2,
.home-cta__card h2 {
font-size: clamp(1.75rem, 8.5vw, 2.45rem);
line-height: 1.04;
}
.vertical-page .home-section__head p,
.home-cta__card p {
font-size: .94rem;
line-height: 1.48;
}
.home-cta__card {
gap: .85rem;
padding: 1rem;
}
.home-cta__actions {
grid-template-columns: 1fr;
width: 100%;
}
.home-cta__actions .btn {
width: 100%;
min-height: 44px;
}
}
input,
select,
textarea,
button {
font: inherit;
min-width: 0;
}
html {
scroll-behavior: smooth;
}
body {
font-family: "Inter", sans-serif;
display: flex;
flex-direction: column;
min-height: 100vh;
background: var(--background);
color: var(--text);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
:where(
.container,
.site-main,
.nav,
.menu,
.legal-card,
.home-use-grid > *,
.home-faq-grid > *,
.home-demo-grid > *,
.home-steps > *,
.home-split > *,
.dashboard-page,
.crm-page,
.sms-page,
.email-dashboard-page,
.calendar-page,
.capacity-page,
.contacts-page,
.billing-page,
.test-agent-page,
.import-page,
.admin-number-page,
.admin-platform,
.admin-batch-page
) {
min-width: 0;
}
:where(
.legal-card,
.home-use-grid,
.home-faq-grid,
.home-demo-grid,
.home-steps,
.home-split,
.home-cta__card,
.dashboard-page,
.crm-page,
.sms-page,
.email-dashboard-page,
.calendar-page,
.capacity-page,
.contacts-page,
.billing-page,
.test-agent-page,
.import-page,
.admin-number-page,
.admin-platform,
.admin-batch-page
) {
overflow-wrap: anywhere;
}
.site-main {
flex: 1 0 auto;
}
.human-contact-modal-open {
overflow: hidden;
}
.human-contact-modal[hidden],
.demo-booking-modal[hidden] {
display: none !important;
}
.human-contact-modal {
position: fixed;
inset: 0;
z-index: 1500;
display: grid;
place-items: center;
padding: 20px;
}
.human-contact-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(2, 6, 23, 0.72);
backdrop-filter: blur(10px);
}
.human-contact-modal__dialog {
position: relative;
z-index: 1;
width: min(680px, 100%);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 28px;
background: linear-gradient(180deg, rgba(8, 17, 31, 0.96), rgba(15, 23, 42, 0.94));
box-shadow: 0 28px 80px rgba(0, 0, 0, 0.34);
opacity: 0;
transform: translateY(18px) scale(0.98);
transition: opacity 180ms ease, transform 180ms ease;
}
.human-contact-modal.is-visible .human-contact-modal__dialog {
opacity: 1;
transform: translateY(0) scale(1);
}
.human-contact-modal__close {
position: absolute;
top: 16px;
right: 16px;
z-index: 2;
width: 40px;
height: 40px;
border: 0;
border-radius: 999px;
background: rgba(255, 255, 255, 0.08);
color: #f8fafc;
font-size: 1.5rem;
cursor: pointer;
}
.human-contact-modal__content {
display: grid;
gap: 16px;
padding: clamp(24px, 4vw, 36px);
}
.human-contact-modal__eyebrow,
.site-footer__title {
color: #7dd3fc;
font-size: 0.74rem;
font-weight: 900;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.human-contact-modal__content h2 {
color: #f8fafc;
font-size: clamp(1.7rem, 3vw, 2.4rem);
line-height: 1.1;
}
.human-contact-modal__content > p,
.human-contact-form__note,
.site-footer__pitch,
.site-footer__meta {
color: rgba(226, 232, 240, 0.76);
}
.human-contact-form {
display: grid;
gap: 16px;
}
.human-contact-form__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.human-contact-form label {
display: grid;
gap: 8px;
}
.human-contact-form label span {
color: #f8fafc;
font-size: 0.84rem;
font-weight: 800;
}
.human-contact-form :is(input, textarea) {
width: 100%;
border: 1px solid rgba(148, 163, 184, 0.22);
border-radius: 14px;
background: rgba(15, 23, 42, 0.7);
color: #f8fafc;
padding: 13px 14px;
font: inherit;
}
.human-contact-form textarea {
min-height: 128px;
resize: vertical;
}
.human-contact-form :is(input, textarea):focus {
outline: none;
border-color: rgba(125, 211, 252, 0.48);
box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.12);
}
.human-contact-form__footer,
.human-contact-form__actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
}
.human-contact-form__note {
margin: 0;
font-size: 0.9rem;
}
.human-contact-form__note a,
.site-footer__contact-link,
.site-footer__meta a {
color: #f8fafc;
font-weight: 800;
text-decoration: none;
}
.human-contact-form__status {
min-height: 22px;
margin: 0;
font-size: 0.9rem;
font-weight: 700;
}
.human-contact-form__status[data-state="pending"] {
color: #bae6fd;
}
.human-contact-form__status[data-state="success"] {
color: #86efac;
}
.human-contact-form__status[data-state="error"] {
color: #fca5a5;
}
.site-footer {
position: relative;
border-top: 1px solid rgba(255, 255, 255, 0.08);
background:
radial-gradient(circle at top left, rgba(56, 189, 248, 0.16), transparent 28rem),
linear-gradient(180deg, #040814 0%, #08101f 100%);
color: rgba(226, 232, 240, 0.78);
}
.site-footer__inner {
display: grid;
grid-template-columns: minmax(240px, 0.9fr) minmax(0, 1.6fr);
gap: 28px;
padding: 40px 0 24px;
}
.site-footer__brand-block {
display: grid;
align-content: start;
gap: 14px;
}
.site-footer__brand {
display: inline-flex;
align-items: center;
gap: 12px;
width: fit-content;
color: #f8fafc;
}
.site-footer__logo {
display: block;
width: auto;
height: clamp(42px, 4.8vw, 50px);
max-width: none;
filter: drop-shadow(0 12px 24px rgba(18, 107, 255, 0.12));
}
.site-footer__mark {
display: inline-grid;
width: 40px;
height: 40px;
place-items: center;
overflow: hidden;
border-radius: 14px;
background: #f8fbff;
box-shadow: 0 12px 22px rgba(30, 115, 216, 0.22);
}
.site-footer__mark img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.site-footer__word {
color: inherit;
font-size: 1.04rem;
font-weight: 900;
line-height: 1;
}
.site-footer__word span {
color: #2ea6f7;
}
.site-footer__pitch {
max-width: 320px;
margin: 0;
font-size: 0.95rem;
line-height: 1.6;
}
.site-footer__contact-link {
width: fit-content;
}
.site-footer__links {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 20px;
}
.site-footer__column {
display: grid;
align-content: start;
gap: 12px;
}
.site-footer__column nav {
display: grid;
gap: 10px;
}
.site-footer a {
color: rgba(226, 232, 240, 0.78);
font-size: 0.94rem;
font-weight: 700;
text-decoration: none;
}
.site-footer a:hover,
.site-footer a:focus-visible {
color: #ffffff;
}
/* Footer compact sur les pages applicatives : dans l'app, l'utilisateur n'a
pas besoin des quatre colonnes marketing. On garde la marque, le CTA
support et la ligne de contact. */
body.app-footer-compact .site-footer__links,
body.app-footer-compact .site-footer__pitch,
body.app-footer-compact .site-footer__cta-link {
display: none !important;
}
body.app-footer-compact .site-footer {
overflow: visible;
}
body.app-footer-compact .site-footer__inner {
grid-template-columns: minmax(0, auto) minmax(0, 1fr);
align-items: center;
gap: 18px;
padding: 20px 18px 16px;
box-sizing: border-box;
}
body.app-footer-compact .site-footer__brand-block {
grid-auto-flow: column;
align-items: center;
gap: 18px;
}
body.app-footer-compact .site-footer__brand,
body.app-footer-compact .site-footer__meta a {
display: inline-flex;
align-items: center;
min-height: 44px;
}
body.app-footer-compact .site-footer__logo {
height: 32px !important;
}
body.app-footer-compact .site-footer__meta {
margin: 0;
padding-top: 0;
border-top: 0;
grid-column: auto;
justify-self: end;
text-align: right;
}
@media (max-width: 760px) {
body.app-footer-compact .site-footer__inner {
grid-template-columns: minmax(0, 1fr);
justify-items: start;
gap: 12px;
padding-bottom: 22px;
}
body.app-footer-compact .site-footer__meta {
justify-self: start;
text-align: left;
min-height: 44px;
}
}
.site-footer__meta {
grid-column: 1 / -1;
margin: 4px 0 0;
padding-top: 18px;
border-top: 1px solid rgba(148, 163, 184, 0.14);
font-size: 0.86rem;
font-weight: 650;
}
.legal-page {
background:
radial-gradient(circle at top left, rgba(46, 166, 247, 0.22), transparent 34rem),
linear-gradient(180deg, #06111f 0%, #050b18 46%, #08111f 100%);
color: #f8fafc;
}
.legal-hero {
padding: clamp(64px, 10vw, 112px) 0 34px;
}
.legal-hero__card {
display: grid;
max-width: 920px;
gap: 18px;
padding: clamp(28px, 5vw, 54px);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 32px;
background: rgba(8, 17, 31, 0.78);
box-shadow: 0 28px 90px rgba(0, 0, 0, 0.34);
}
.legal-hero h1 {
max-width: 760px;
color: #ffffff;
font-size: clamp(2.35rem, 6vw, 4.6rem);
line-height: 0.96;
letter-spacing: -0.06em;
}
.legal-hero p {
max-width: 720px;
color: rgba(248, 250, 252, 0.72);
font-size: 1.08rem;
font-weight: 700;
}
.legal-updated {
color: rgba(148, 163, 184, 0.86) !important;
font-size: 0.92rem !important;
}
.legal-section {
padding: 26px 0 clamp(72px, 10vw, 120px);
}
.legal-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
.legal-grid--support {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.legal-grid--three {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.legal-card {
display: flex;
min-height: 250px;
flex-direction: column;
align-items: flex-start;
gap: 14px;
padding: 24px;
border: 1px solid rgba(255, 255, 255, 0.11);
border-radius: 24px;
background: rgba(15, 23, 42, 0.72);
}
.legal-card--highlight {
background: linear-gradient(135deg, rgba(30, 115, 216, 0.34), rgba(46, 166, 247, 0.14));
}
.legal-card h2 {
color: #ffffff;
font-size: 1.2rem;
line-height: 1.15;
}
.legal-card p {
color: rgba(248, 250, 252, 0.72);
font-size: 0.96rem;
font-weight: 650;
}
.landing-refresh :where(.legal-card, .home-use-grid article, .home-demo-grid article, .home-steps article) {
min-width: 0;
}
.landing-refresh :where(.legal-card .btn, .marketing-inline-actions .btn) {
max-width: 100%;
white-space: normal !important;
text-align: center;
overflow-wrap: anywhere;
}
.legal-card ul {
display: grid;
gap: 8px;
margin: 0;
padding-left: 1.1rem;
color: rgba(248, 250, 252, 0.72);
font-size: 0.96rem;
font-weight: 650;
}
.legal-card li {
color: inherit;
}
.legal-card .btn {
margin-top: auto;
}
@media (max-width: 900px) {
.legal-grid,
.legal-grid--support,
.legal-grid--three {
grid-template-columns: 1fr;
}
.legal-card {
min-height: auto;
}
}
@media (max-width: 720px) {
.human-contact-modal {
padding: 12px;
}
.human-contact-form__grid,
.human-contact-form__footer,
.human-contact-form__actions,
.site-footer__inner,
.site-footer__links {
grid-template-columns: 1fr;
}
.human-contact-form__footer,
.human-contact-form__actions {
align-items: stretch;
}
.site-footer__inner {
gap: 24px;
}
.legal-hero {
padding-top: 44px;
}
.legal-hero__card {
border-radius: 24px;
}
}
@media (max-width: 760px) {
body.marketing-page .legal-hero {
padding: 18px 0 18px;
}
body.marketing-page .legal-hero__card {
gap: 12px;
padding: 20px;
border-radius: 8px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.035)),
rgba(12, 20, 38, 0.82);
box-shadow: 0 18px 48px rgba(2, 6, 23, 0.30);
}
body.marketing-page .legal-hero h1 {
max-width: 100%;
font-size: clamp(1.92rem, 8vw, 2.42rem);
line-height: 1.04;
letter-spacing: 0;
text-wrap: balance;
}
body.marketing-page .legal-hero p {
font-size: 0.94rem;
font-weight: 650;
line-height: 1.42;
}
body.marketing-page .legal-hero .home-hero__actions {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
margin-top: 4px;
margin-bottom: 0;
}
body.marketing-page .legal-hero .home-hero__actions .btn:first-child {
grid-column: 1 / -1;
}
body.marketing-page .legal-hero .home-hero__actions .btn {
width: 100%;
min-height: 44px;
padding: 0.68rem 0.72rem;
font-size: 0.88rem;
}
}
/* App-like mobile bottom navigation for authenticated product pages. */
@media (max-width: 1024px) and (hover: none), (max-width: 1024px) and (pointer: coarse) {
body:has(:is(.dashboard-page, .crm-page, .sms-page, .email-dashboard-page, .contacts-page, .calendar-page, .capacity-page, .import-page, .billing-page, .test-agent-page, .admin-number-page, .admin-platform, .admin-batch-page)) {
padding-bottom: calc(108px + env(safe-area-inset-bottom));
}
body:has(:is(.dashboard-page, .crm-page, .sms-page, .email-dashboard-page, .contacts-page, .calendar-page, .capacity-page, .import-page, .billing-page, .test-agent-page, .admin-number-page, .admin-platform, .admin-batch-page)) main {
padding-bottom: calc(20px + env(safe-area-inset-bottom));
}
body:has(:is(.dashboard-page, .crm-page, .sms-page, .email-dashboard-page, .contacts-page, .calendar-page, .capacity-page, .import-page, .billing-page, .test-agent-page, .admin-number-page, .admin-platform, .admin-batch-page)) .site-header {
padding: 0;
}
body:has(:is(.dashboard-page, .crm-page, .sms-page, .email-dashboard-page, .contacts-page, .calendar-page, .capacity-page, .import-page, .billing-page, .test-agent-page, .admin-number-page, .admin-platform, .admin-batch-page)) .nav {
width: min(100% - 20px, var(--container));
min-height: 62px;
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 8px 0;
}
body:has(:is(.dashboard-page, .crm-page, .sms-page, .email-dashboard-page, .contacts-page, .calendar-page, .capacity-page, .import-page, .billing-page, .test-agent-page, .admin-number-page, .admin-platform, .admin-batch-page)) .logo-wrap {
min-width: 0;
}
body:has(:is(.dashboard-page, .crm-page, .sms-page, .email-dashboard-page, .contacts-page, .calendar-page, .capacity-page, .import-page, .billing-page, .test-agent-page, .admin-number-page, .admin-platform, .admin-batch-page)) .logo-wordmark {
font-size: 0.94rem;
}
body:has(:is(.dashboard-page, .crm-page, .sms-page, .email-dashboard-page, .contacts-page, .calendar-page, .capacity-page, .import-page, .billing-page, .test-agent-page, .admin-number-page, .admin-platform, .admin-batch-page)) .nav-actions {
order: 2;
width: auto;
min-width: 0;
flex: 0 0 auto;
justify-content: flex-end;
flex-wrap: nowrap;
gap: 8px;
overflow: visible;
}
body:has(:is(.dashboard-page, .crm-page, .sms-page, .email-dashboard-page, .contacts-page, .calendar-page, .capacity-page, .import-page, .billing-page, .test-agent-page, .admin-number-page, .admin-platform, .admin-batch-page)) .nav-actions .theme-toggle {
width: 96px;
min-width: 96px;
height: 44px;
min-height: 44px;
}
body:has(:is(.dashboard-page, .crm-page, .sms-page, .email-dashboard-page, .contacts-page, .calendar-page, .capacity-page, .import-page, .billing-page, .test-agent-page, .admin-number-page, .admin-platform, .admin-batch-page)) .nav-actions .nav-icon-button {
width: 44px;
min-width: 44px;
height: 44px;
min-height: 44px;
}
body:has(:is(.dashboard-page, .crm-page, .sms-page, .email-dashboard-page, .contacts-page, .calendar-page, .capacity-page, .import-page, .billing-page, .test-agent-page, .admin-number-page, .admin-platform, .admin-batch-page)) .menu {
position: fixed;
z-index: 90;
left: max(10px, env(safe-area-inset-left));
right: max(10px, env(safe-area-inset-right));
bottom: max(12px, env(safe-area-inset-bottom));
order: 4;
display: flex !important;
grid-template-columns: none !important;
align-items: center;
justify-items: stretch;
width: auto;
max-width: none;
height: 86px;
gap: 9px;
padding: 10px;
overflow-x: auto !important;
overflow-y: hidden;
overscroll-behavior-x: contain;
touch-action: pan-x;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
border: 1px solid rgba(255, 255, 255, 0.13);
border-radius: 24px;
background:
linear-gradient(180deg, rgba(18, 24, 44, 0.94), rgba(9, 13, 27, 0.96)),
rgba(9, 13, 27, 0.92);
box-shadow: 0 18px 50px rgba(0, 0, 0, 0.34);
backdrop-filter: blur(18px);
}
body:has(:is(.dashboard-page, .crm-page, .sms-page, .email-dashboard-page, .contacts-page, .calendar-page, .capacity-page, .import-page, .billing-page, .test-agent-page, .admin-number-page, .admin-platform, .admin-batch-page)) .menu::-webkit-scrollbar {
display: none;
}
body:has(:is(.dashboard-page, .crm-page, .sms-page, .email-dashboard-page, .contacts-page, .calendar-page, .capacity-page, .import-page, .billing-page, .test-agent-page, .admin-number-page, .admin-platform, .admin-batch-page)) .menu a,
body:has(:is(.dashboard-page, .crm-page, .sms-page, .email-dashboard-page, .contacts-page, .calendar-page, .capacity-page, .import-page, .billing-page, .test-agent-page, .admin-number-page, .admin-platform, .admin-batch-page)) .menu .menu-icon-link,
body:has(:is(.dashboard-page, .crm-page, .sms-page, .email-dashboard-page, .contacts-page, .calendar-page, .capacity-page, .import-page, .billing-page, .test-agent-page, .admin-number-page, .admin-platform, .admin-batch-page)) .menu .public-menu-link {
flex: 0 0 84px;
width: 84px;
min-width: 84px;
height: 66px;
min-height: 66px;
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
border-radius: 18px;
border-color: transparent;
color: rgba(236, 241, 255, 0.72);
background: transparent;
scroll-snap-align: center;
}
body:has(:is(.dashboard-page, .crm-page, .sms-page, .email-dashboard-page, .contacts-page, .calendar-page, .capacity-page, .import-page, .billing-page, .test-agent-page, .admin-number-page, .admin-platform, .admin-batch-page)) .menu .menu-icon-link svg,
body:has(:is(.dashboard-page, .crm-page, .sms-page, .email-dashboard-page, .contacts-page, .calendar-page, .capacity-page, .import-page, .billing-page, .test-agent-page, .admin-number-page, .admin-platform, .admin-batch-page)) .menu .public-menu-link svg {
width: 24px;
height: 24px;
stroke-width: 2.1;
}
body:has(:is(.dashboard-page, .crm-page, .sms-page, .email-dashboard-page, .contacts-page, .calendar-page, .capacity-page, .import-page, .billing-page, .test-agent-page, .admin-number-page, .admin-platform, .admin-batch-page)) .menu .nav-action__text {
position: static;
width: auto;
height: auto;
clip: auto;
overflow: hidden;
max-width: 74px;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 0.72rem;
font-weight: 800;
line-height: 1;
}
body:has(:is(.dashboard-page, .crm-page, .sms-page, .email-dashboard-page, .contacts-page, .calendar-page, .capacity-page, .import-page, .billing-page, .test-agent-page, .admin-number-page, .admin-platform, .admin-batch-page)) .menu .menu-icon-link:hover,
body:has(:is(.dashboard-page, .crm-page, .sms-page, .email-dashboard-page, .contacts-page, .calendar-page, .capacity-page, .import-page, .billing-page, .test-agent-page, .admin-number-page, .admin-platform, .admin-batch-page)) .menu .menu-icon-link:focus-visible,
body:has(:is(.dashboard-page, .crm-page, .sms-page, .email-dashboard-page, .contacts-page, .calendar-page, .capacity-page, .import-page, .billing-page, .test-agent-page, .admin-number-page, .admin-platform, .admin-batch-page)) .menu .menu-icon-link.is-active {
color: #ffffff;
border-color: rgba(123, 140, 255, 0.28);
background: linear-gradient(135deg, rgba(46, 166, 247, 0.22), rgba(106, 47, 216, 0.22));
transform: none;
}
body[data-theme="light"]:has(:is(.dashboard-page, .crm-page, .sms-page, .email-dashboard-page, .contacts-page, .calendar-page, .capacity-page, .import-page, .billing-page, .test-agent-page, .admin-number-page, .admin-platform, .admin-batch-page)) .menu {
border-color: rgba(15, 23, 42, 0.1);
background: rgba(255, 255, 255, 0.94);
box-shadow: 0 18px 46px rgba(15, 23, 42, 0.16);
}
body[data-theme="light"]:has(:is(.dashboard-page, .crm-page, .sms-page, .email-dashboard-page, .contacts-page, .calendar-page, .capacity-page, .import-page, .billing-page, .test-agent-page, .admin-number-page, .admin-platform, .admin-batch-page)) .menu a,
body[data-theme="light"]:has(:is(.dashboard-page, .crm-page, .sms-page, .email-dashboard-page, .contacts-page, .calendar-page, .capacity-page, .import-page, .billing-page, .test-agent-page, .admin-number-page, .admin-platform, .admin-batch-page)) .menu .menu-icon-link {
color: rgba(15, 23, 42, 0.62);
}
body[data-theme="light"]:has(:is(.dashboard-page, .crm-page, .sms-page, .email-dashboard-page, .contacts-page, .calendar-page, .capacity-page, .import-page, .billing-page, .test-agent-page, .admin-number-page, .admin-platform, .admin-batch-page)) .menu .menu-icon-link:hover,
body[data-theme="light"]:has(:is(.dashboard-page, .crm-page, .sms-page, .email-dashboard-page, .contacts-page, .calendar-page, .capacity-page, .import-page, .billing-page, .test-agent-page, .admin-number-page, .admin-platform, .admin-batch-page)) .menu .menu-icon-link:focus-visible,
body[data-theme="light"]:has(:is(.dashboard-page, .crm-page, .sms-page, .email-dashboard-page, .contacts-page, .calendar-page, .capacity-page, .import-page, .billing-page, .test-agent-page, .admin-number-page, .admin-platform, .admin-batch-page)) .menu .menu-icon-link.is-active {
color: #1E73D8;
border-color: rgba(30, 115, 216, 0.16);
background: rgba(30, 115, 216, 0.08);
}
}
@media (min-width: 1025px), (hover: hover) and (pointer: fine) {
body:has(:is(.dashboard-page, .crm-page, .sms-page, .email-dashboard-page, .contacts-page, .calendar-page, .capacity-page, .import-page, .billing-page, .test-agent-page, .admin-number-page, .admin-platform, .admin-batch-page)) {
padding-bottom: 0 !important;
}
body:has(:is(.dashboard-page, .crm-page, .sms-page, .email-dashboard-page, .contacts-page, .calendar-page, .capacity-page, .import-page, .billing-page, .test-agent-page, .admin-number-page, .admin-platform, .admin-batch-page)) .menu {
position: static !important;
inset: auto !important;
width: auto !important;
height: auto !important;
max-width: none !important;
overflow: visible !important;
border-radius: 999px !important;
box-shadow: none !important;
backdrop-filter: none !important;
}
}
@media (max-width: 390px) {
body:has(:is(.dashboard-page, .crm-page, .sms-page, .email-dashboard-page, .contacts-page, .calendar-page, .capacity-page, .import-page, .billing-page, .test-agent-page, .admin-number-page, .admin-platform, .admin-batch-page)) .menu a,
body:has(:is(.dashboard-page, .crm-page, .sms-page, .email-dashboard-page, .contacts-page, .calendar-page, .capacity-page, .import-page, .billing-page, .test-agent-page, .admin-number-page, .admin-platform, .admin-batch-page)) .menu .menu-icon-link {
flex-basis: 78px;
width: 78px;
min-width: 78px;
}
}
body.landing-page {
--primary: #7b8cff;
--secondary: #5eead4;
--accent: #60a5fa;
--text: #f5f7ff;
--subtitle: #aab3d1;
--background: #0b1020;
--background-soft: #121933;
--border: rgba(255, 255, 255, 0.1);
--card: rgba(255, 255, 255, 0.06);
--card-strong: rgba(255, 255, 255, 0.09);
--shadow: 0 24px 70px rgba(0, 0, 0, 0.36);
--shadow-soft: 0 14px 34px rgba(0, 0, 0, 0.24);
--gradient-main: linear-gradient(135deg, #5eead4, #60a5fa, #7b8cff);
--gradient-button: linear-gradient(135deg, #5eead4, #7b8cff);
background:
radial-gradient(circle at top left, rgba(109, 124, 255, 0.18), transparent 32%),
radial-gradient(circle at top right, rgba(80, 180, 255, 0.12), transparent 24%),
linear-gradient(180deg, #0a0f1f 0%, #0b1020 100%);
}
body.landing-page[data-theme="light"] {
--primary: #1E73D8;
--secondary: #6A2FD8;
--accent: #2EA6F7;
--text: #111827;
--subtitle: #64748b;
--background: #ffffff;
--background-soft: #f8fafc;
--border: #e5e7eb;
--card: #ffffff;
--card-strong: #ffffff;
--shadow: 0 20px 60px rgba(17, 24, 39, 0.08);
--shadow-soft: 0 10px 30px rgba(17, 24, 39, 0.06);
--gradient-main: linear-gradient(135deg, #2EA6F7, #1E73D8, #6A2FD8);
--gradient-button: linear-gradient(135deg, #2EA6F7, #6A2FD8);
background: var(--background);
}
body.not-found-body {
min-height: 100vh;
}
.not-found-page {
display: grid;
min-height: calc(100vh - 78px);
padding: 72px 16px;
place-items: center;
}
.not-found-shell {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(280px, 0.55fr);
gap: 18px;
width: min(100%, 980px);
}
.not-found-panel,
.not-found-guide {
border: 1px solid var(--border);
border-radius: 18px;
background: var(--card);
box-shadow: var(--shadow-soft);
}
.not-found-panel {
padding: clamp(28px, 5vw, 48px);
}
.not-found-kicker {
display: inline-flex;
margin-bottom: 12px;
color: var(--secondary);
font-size: 0.78rem;
font-weight: 800;
text-transform: uppercase;
}
.not-found-panel h1 {
max-width: 640px;
margin-bottom: 14px;
font-size: clamp(2rem, 6vw, 4.7rem);
line-height: 1;
}
.not-found-panel p {
max-width: 610px;
color: var(--subtitle);
font-size: 1.04rem;
}
.not-found-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 26px;
}
.not-found-guide {
display: grid;
align-content: center;
overflow: hidden;
}
.not-found-guide article {
padding: 18px;
border-bottom: 1px solid var(--border);
}
.not-found-guide article:last-child {
border-bottom: 0;
}
.not-found-guide strong,
.not-found-guide span {
display: block;
}
.not-found-guide strong {
margin-bottom: 5px;
}
.not-found-guide span {
color: var(--subtitle);
font-size: 0.92rem;
}
a {
text-decoration: none;
color: inherit;
}
button,
input,
textarea,
select {
font: inherit;
}
.container {
width: min(calc(100% - 2rem), var(--container));
margin-inline: auto;
}
.site-header {
position: sticky;
top: 0;
z-index: 1000;
color: #f5f7ff;
background: rgba(10, 15, 31, 0.88);
backdrop-filter: blur(14px);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
body.landing-page .site-header {
background: rgba(11, 16, 32, 0.86);
border-bottom-color: rgba(255, 255, 255, 0.08);
}
body.landing-page[data-theme="light"] .site-header {
background: rgba(255, 255, 255, 0.92);
border-bottom-color: rgba(229, 231, 235, 0.8);
}
body[data-theme="light"] .site-header {
color: #111827;
background: rgba(255, 255, 255, 0.92);
border-bottom-color: rgba(15, 23, 42, 0.08);
}
body:has(:is(.dashboard-page, .crm-page, .sms-page, .email-dashboard-page, .contacts-page, .calendar-page, .capacity-page, .import-page, .billing-page, .test-agent-page, .admin-number-page, .admin-platform, .admin-batch-page)) .site-header {
color: #f5f7ff !important;
background: rgba(10, 15, 31, 0.88) !important;
border-bottom-color: rgba(255, 255, 255, 0.08) !important;
box-shadow: none !important;
}
body:has(:is(.dashboard-page, .crm-page, .sms-page, .email-dashboard-page, .contacts-page, .calendar-page, .capacity-page, .import-page, .billing-page, .test-agent-page, .admin-number-page, .admin-platform, .admin-batch-page)) .site-header .logo-wrap,
body:has(:is(.dashboard-page, .crm-page, .sms-page, .email-dashboard-page, .contacts-page, .calendar-page, .capacity-page, .import-page, .billing-page, .test-agent-page, .admin-number-page, .admin-platform, .admin-batch-page)) .site-header .logo-text,
body:has(:is(.dashboard-page, .crm-page, .sms-page, .email-dashboard-page, .contacts-page, .calendar-page, .capacity-page, .import-page, .billing-page, .test-agent-page, .admin-number-page, .admin-platform, .admin-batch-page)) .site-header .logo-wordmark {
color: #f5f7ff !important;
}
body:has(:is(.dashboard-page, .crm-page, .sms-page, .email-dashboard-page, .contacts-page, .calendar-page, .capacity-page, .import-page, .billing-page, .test-agent-page, .admin-number-page, .admin-platform, .admin-batch-page)) .site-header .logo-brand {
width: 172px;
min-width: 172px;
}
body:has(:is(.dashboard-page, .crm-page, .sms-page, .email-dashboard-page, .contacts-page, .calendar-page, .capacity-page, .import-page, .billing-page, .test-agent-page, .admin-number-page, .admin-platform, .admin-batch-page)) .site-header .logo-brand__image {
width: 172px !important;
height: auto !important;
max-width: 172px !important;
}
body:has(:is(.dashboard-page, .crm-page, .sms-page, .email-dashboard-page, .contacts-page, .calendar-page, .capacity-page, .import-page, .billing-page, .test-agent-page, .admin-number-page, .admin-platform, .admin-batch-page)) .site-header .menu a {
color: #aab3d1 !important;
}
body:has(:is(.dashboard-page, .crm-page, .sms-page, .email-dashboard-page, .contacts-page, .calendar-page, .capacity-page, .import-page, .billing-page, .test-agent-page, .admin-number-page, .admin-platform, .admin-batch-page)) .site-header .menu .menu-icon-link {
width: 42px !important;
min-width: 42px !important;
height: 42px !important;
min-height: 42px !important;
padding: 0 !important;
border-color: transparent !important;
border-radius: 999px !important;
background: transparent !important;
}
body:has(:is(.dashboard-page, .crm-page, .sms-page, .email-dashboard-page, .contacts-page, .calendar-page, .capacity-page, .import-page, .billing-page, .test-agent-page, .admin-number-page, .admin-platform, .admin-batch-page)) .site-header .menu .menu-icon-link:hover,
body:has(:is(.dashboard-page, .crm-page, .sms-page, .email-dashboard-page, .contacts-page, .calendar-page, .capacity-page, .import-page, .billing-page, .test-agent-page, .admin-number-page, .admin-platform, .admin-batch-page)) .site-header .menu .menu-icon-link:focus-visible,
body:has(:is(.dashboard-page, .crm-page, .sms-page, .email-dashboard-page, .contacts-page, .calendar-page, .capacity-page, .import-page, .billing-page, .test-agent-page, .admin-number-page, .admin-platform, .admin-batch-page)) .site-header .menu .menu-icon-link.is-active {
color: #6d7cff !important;
border-color: rgba(123, 140, 255, 0.34) !important;
background: rgba(123, 140, 255, 0.12) !important;
}
body:has(:is(.dashboard-page, .crm-page, .sms-page, .email-dashboard-page, .contacts-page, .calendar-page, .capacity-page, .import-page, .billing-page, .test-agent-page, .admin-number-page, .admin-platform, .admin-batch-page)) .site-header .theme-toggle {
border-color: rgba(255, 255, 255, 0.1) !important;
background: rgba(255, 255, 255, 0.07) !important;
color: #f5f7ff !important;
}
body:has(:is(.dashboard-page, .crm-page, .sms-page, .email-dashboard-page, .contacts-page, .calendar-page, .capacity-page, .import-page, .billing-page, .test-agent-page, .admin-number-page, .admin-platform, .admin-batch-page)) .site-header .nav-actions .btn,
body:has(:is(.dashboard-page, .crm-page, .sms-page, .email-dashboard-page, .contacts-page, .calendar-page, .capacity-page, .import-page, .billing-page, .test-agent-page, .admin-number-page, .admin-platform, .admin-batch-page)) .site-header .nav-actions .btn-nav,
body:has(:is(.dashboard-page, .crm-page, .sms-page, .email-dashboard-page, .contacts-page, .calendar-page, .capacity-page, .import-page, .billing-page, .test-agent-page, .admin-number-page, .admin-platform, .admin-batch-page)) .site-header .nav-actions .btn-secondary,
body:has(:is(.dashboard-page, .crm-page, .sms-page, .email-dashboard-page, .contacts-page, .calendar-page, .capacity-page, .import-page, .billing-page, .test-agent-page, .admin-number-page, .admin-platform, .admin-batch-page)) .site-header .nav-icon-button {
width: 44px !important;
min-width: 44px !important;
height: 44px !important;
min-height: 44px !important;
padding: 0 !important;
border-radius: 999px !important;
border-color: rgba(255, 255, 255, 0.14) !important;
background: rgba(255, 255, 255, 0.07) !important;
color: #f5f7ff !important;
box-shadow: none !important;
}
body[data-theme="light"]:has(:is(.dashboard-page, .crm-page, .sms-page, .email-dashboard-page, .contacts-page, .calendar-page, .capacity-page, .import-page, .billing-page, .test-agent-page, .admin-number-page, .admin-platform, .admin-batch-page)) .site-header {
color: #111827 !important;
background: rgba(255, 255, 255, 0.92) !important;
border-bottom-color: rgba(15, 23, 42, 0.08) !important;
box-shadow: none !important;
}
body[data-theme="light"]:has(:is(.dashboard-page, .crm-page, .sms-page, .email-dashboard-page, .contacts-page, .calendar-page, .capacity-page, .import-page, .billing-page, .test-agent-page, .admin-number-page, .admin-platform, .admin-batch-page)) .site-header .logo-wrap,
body[data-theme="light"]:has(:is(.dashboard-page, .crm-page, .sms-page, .email-dashboard-page, .contacts-page, .calendar-page, .capacity-page, .import-page, .billing-page, .test-agent-page, .admin-number-page, .admin-platform, .admin-batch-page)) .site-header .logo-text,
body[data-theme="light"]:has(:is(.dashboard-page, .crm-page, .sms-page, .email-dashboard-page, .contacts-page, .calendar-page, .capacity-page, .import-page, .billing-page, .test-agent-page, .admin-number-page, .admin-platform, .admin-batch-page)) .site-header .logo-wordmark {
color: #111827 !important;
}
body[data-theme="light"]:has(:is(.dashboard-page, .crm-page, .sms-page, .email-dashboard-page, .contacts-page, .calendar-page, .capacity-page, .import-page, .billing-page, .test-agent-page, .admin-number-page, .admin-platform, .admin-batch-page)) .site-header .menu a {
color: #5b6475 !important;
}
body[data-theme="light"]:has(:is(.dashboard-page, .crm-page, .sms-page, .email-dashboard-page, .contacts-page, .calendar-page, .capacity-page, .import-page, .billing-page, .test-agent-page, .admin-number-page, .admin-platform, .admin-batch-page)) .site-header .menu .menu-icon-link:hover,
body[data-theme="light"]:has(:is(.dashboard-page, .crm-page, .sms-page, .email-dashboard-page, .contacts-page, .calendar-page, .capacity-page, .import-page, .billing-page, .test-agent-page, .admin-number-page, .admin-platform, .admin-batch-page)) .site-header .menu .menu-icon-link:focus-visible,
body[data-theme="light"]:has(:is(.dashboard-page, .crm-page, .sms-page, .email-dashboard-page, .contacts-page, .calendar-page, .capacity-page, .import-page, .billing-page, .test-agent-page, .admin-number-page, .admin-platform, .admin-batch-page)) .site-header .menu .menu-icon-link.is-active {
color: #1E73D8 !important;
border-color: rgba(30, 115, 216, 0.22) !important;
background: rgba(30, 115, 216, 0.08) !important;
}
body[data-theme="light"]:has(:is(.dashboard-page, .crm-page, .sms-page, .email-dashboard-page, .contacts-page, .calendar-page, .capacity-page, .import-page, .billing-page, .test-agent-page, .admin-number-page, .admin-platform, .admin-batch-page)) .site-header .theme-toggle {
border-color: rgba(15, 23, 42, 0.1) !important;
background: rgba(255, 255, 255, 0.92) !important;
color: #111827 !important;
}
body[data-theme="light"]:has(:is(.dashboard-page, .crm-page, .sms-page, .email-dashboard-page, .contacts-page, .calendar-page, .capacity-page, .import-page, .billing-page, .test-agent-page, .admin-number-page, .admin-platform, .admin-batch-page)) .site-header .nav-actions .btn,
body[data-theme="light"]:has(:is(.dashboard-page, .crm-page, .sms-page, .email-dashboard-page, .contacts-page, .calendar-page, .capacity-page, .import-page, .billing-page, .test-agent-page, .admin-number-page, .admin-platform, .admin-batch-page)) .site-header .nav-actions .btn-nav,
body[data-theme="light"]:has(:is(.dashboard-page, .crm-page, .sms-page, .email-dashboard-page, .contacts-page, .calendar-page, .capacity-page, .import-page, .billing-page, .test-agent-page, .admin-number-page, .admin-platform, .admin-batch-page)) .site-header .nav-actions .btn-secondary,
body[data-theme="light"]:has(:is(.dashboard-page, .crm-page, .sms-page, .email-dashboard-page, .contacts-page, .calendar-page, .capacity-page, .import-page, .billing-page, .test-agent-page, .admin-number-page, .admin-platform, .admin-batch-page)) .site-header .nav-icon-button {
border-color: rgba(15, 23, 42, 0.1) !important;
background: rgba(255, 255, 255, 0.92) !important;
color: #111827 !important;
box-shadow: none !important;
}
.nav {
min-height: 78px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.logo-wrap {
display: inline-flex;
align-items: center;
gap: 0;
min-height: 58px;
padding: 4px 8px 4px 0;
border-radius: 999px;
font-weight: 700;
font-size: 1.1rem;
color: #f5f7ff;
text-decoration: none;
transition: background 0.18s ease, transform 0.18s ease;
}
body[data-theme="light"] .logo-wrap {
color: #111827;
}
.logo-wrap:hover {
background: rgba(123, 140, 255, 0.1);
transform: translateY(-1px);
}
.logo-brand {
display: inline-flex;
align-items: center;
gap: 0;
width: auto;
height: 60px;
}
.logo-brand__image {
display: block !important;
flex: 0 0 auto;
width: auto !important;
max-width: none !important;
height: 56px !important;
max-height: none !important;
filter: drop-shadow(0 12px 24px rgba(18, 107, 255, 0.12));
}
.logo-brand__mark {
display: inline-grid;
flex: 0 0 auto;
width: 40px;
height: 40px;
place-items: center;
overflow: hidden;
border-radius: 14px;
background: #f8fbff;
box-shadow: 0 14px 28px rgba(30, 115, 216, 0.28);
}
.logo-brand__mark img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.logo-brand__word {
color: #ffffff;
font-size: 1.1rem;
font-weight: 900;
letter-spacing: 0;
line-height: 1;
white-space: nowrap;
}
.logo-brand__word span {
color: #2ea6f7;
}
body[data-theme="light"] .logo-brand__word {
color: #07162e;
}
.menu {
display: flex;
align-items: center;
gap: 8px;
}
.menu a {
color: #aab3d1;
font-size: 0.96rem;
font-weight: 500;
transition: 0.2s ease;
}
body[data-theme="light"] .menu a {
color: #5b6475;
}
.menu a:hover {
color: var(--primary);
}
.menu .menu-icon-link {
display: inline-grid;
width: 42px;
height: 42px;
min-width: 42px;
place-items: center;
border: 1px solid transparent;
border-radius: 999px;
color: #aab3d1;
background: transparent;
transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.menu .public-menu-link {
display: inline-grid;
width: 42px;
height: 42px;
min-width: 42px;
place-items: center;
border: 1px solid transparent;
border-radius: 999px;
padding: 0;
background: transparent;
}
.menu .menu-icon-link:hover,
.menu .menu-icon-link:focus-visible,
.menu .menu-icon-link.is-active,
.menu .public-menu-link:hover,
.menu .public-menu-link:focus-visible {
border-color: rgba(123, 140, 255, 0.34);
background: rgba(123, 140, 255, 0.12);
color: var(--primary);
transform: translateY(-1px);
}
.menu .menu-icon-link svg,
.menu .public-menu-link svg {
width: 19px;
height: 19px;
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 2.05;
}
.menu .public-menu-link {
display: inline-grid;
width: 42px;
min-width: 42px;
height: 42px;
place-items: center;
border: 1px solid transparent;
border-radius: 999px;
color: #aab3d1;
background: transparent;
transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.menu .public-menu-link:hover,
.menu .public-menu-link:focus-visible {
border-color: rgba(123, 140, 255, 0.34);
background: rgba(123, 140, 255, 0.12);
color: var(--primary);
transform: translateY(-1px);
}
.menu .public-menu-link--primary {
color: #f8fafc;
border-color: rgba(94, 234, 212, 0.28);
background: linear-gradient(135deg, rgba(94, 234, 212, 0.2), rgba(123, 140, 255, 0.24));
}
body.landing-page[data-theme="light"] .menu .public-menu-link--primary,
body[data-theme="light"] .menu .public-menu-link--primary {
color: #1E73D8;
border-color: rgba(30, 115, 216, 0.18);
background: rgba(30, 115, 216, 0.08);
}
.menu .public-menu-link svg {
width: 19px;
height: 19px;
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 2.05;
}
.theme-toggle {
position: relative;
display: inline-grid;
grid-template-columns: 1fr 1fr;
align-items: center;
width: 116px;
min-width: 116px;
height: 44px;
min-height: 44px;
padding: 3px;
border: 1px solid var(--border);
border-radius: 999px;
background: rgba(15, 23, 42, 0.18);
color: var(--text);
font-weight: 700;
cursor: pointer;
box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.theme-toggle:hover {
transform: translateY(-1px);
border-color: rgba(123, 140, 255, 0.42);
box-shadow: 0 14px 34px rgba(15, 23, 42, 0.12);
}
.theme-toggle__option {
position: relative;
z-index: 1;
display: inline-flex;
height: 34px;
align-items: center;
justify-content: center;
gap: 4px;
border-radius: 999px;
place-items: center;
color: var(--subtitle);
opacity: 0.55;
transition: color 0.18s ease, opacity 0.18s ease, transform 0.18s ease;
}
.theme-toggle__option svg {
width: 14px;
height: 14px;
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 2.2;
}
.theme-toggle__option span {
font-size: 0.72rem;
font-weight: 850;
letter-spacing: 0;
}
.theme-toggle__track {
position: absolute;
inset: 3px;
border-radius: 999px;
background: transparent;
pointer-events: none;
}
.theme-toggle__thumb {
position: absolute;
top: 0;
left: 0;
width: calc(50% - 1.5px);
height: 100%;
border-radius: 999px;
background: linear-gradient(135deg, #93c5fd, #4f46e5);
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.22);
transition: transform 0.22s ease, background 0.22s ease;
}
.theme-toggle[data-current-theme="light"] {
background: rgba(255, 255, 255, 0.92);
}
.theme-toggle[data-current-theme="light"] .theme-toggle__option--light,
.theme-toggle[data-current-theme="dark"] .theme-toggle__option--dark {
opacity: 1;
color: #ffffff;
}
.theme-toggle[data-current-theme="light"] .theme-toggle__thumb {
transform: translateX(calc(100% + 3px));
background: linear-gradient(135deg, #fde68a, #f59e0b);
}
.theme-toggle[data-current-theme="light"] .theme-toggle__option--light {
color: #1f2937;
}
.theme-toggle[data-current-theme="dark"] .theme-toggle__option--dark {
color: #ffffff;
}
.theme-toggle__label {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
min-height: 46px;
border: none;
border-radius: 12px;
padding: 0 22px;
font: inherit;
font-size: 0.95rem;
font-weight: 600;
line-height: 1.1;
text-align: center;
text-decoration: none;
transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, background 0.2s ease;
cursor: pointer;
white-space: nowrap;
}
.btn:hover {
transform: translateY(-1px);
}
.btn-primary,
.btn-nav {
color: white;
background: var(--gradient-button);
box-shadow: 0 12px 30px rgba(106, 47, 216, 0.18);
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
min-height: 46px;
border: none;
border-radius: 12px;
padding: 0 22px;
font: inherit;
font-size: 0.95rem;
font-weight: 600;
line-height: 1.1;
text-align: center;
text-decoration: none;
transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, background 0.2s ease;
cursor: pointer;
white-space: nowrap;
}
.btn:hover {
transform: translateY(-1px);
}
.btn-primary,
.btn-nav {
color: white;
background: var(--gradient-button);
box-shadow: 0 12px 30px rgba(106, 47, 216, 0.18);
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
min-height: 46px;
border: none;
border-radius: 12px;
padding: 0 22px;
font: inherit;
font-size: 0.95rem;
font-weight: 600;
line-height: 1.1;
text-align: center;
text-decoration: none;
transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, background 0.2s ease;
cursor: pointer;
white-space: nowrap;
}
.btn:hover {
transform: translateY(-1px);
}
.btn-primary,
.btn-nav {
color: white;
background: var(--gradient-button);
box-shadow: 0 12px 30px rgba(106, 47, 216, 0.18);
}
.btn-secondary {
background: white;
color: var(--text);
border: 1px solid var(--border);
}
.btn-secondary:hover {
box-shadow: var(--shadow-soft);
}
.btn-tertiary {
background: var(--gradient-button);
color: white;
border: none;
}
.btn-tertiary:hover {
box-shadow: var(--shadow-soft);
opacity: 0.95;
}
.hero {
padding: 5.5rem 0 4.5rem;
background:
radial-gradient(circle at top left, rgba(46, 166, 247, 0.10), transparent 30%),
radial-gradient(circle at top right, rgba(106, 47, 216, 0.10), transparent 28%),
var(--background);
}
body.landing-page .hero {
background:
radial-gradient(circle at top left, rgba(94, 234, 212, 0.12), transparent 30%),
radial-gradient(circle at top right, rgba(123, 140, 255, 0.16), transparent 28%),
transparent;
}
body.landing-page[data-theme="light"] .hero {
background:
radial-gradient(circle at top left, rgba(46, 166, 247, 0.10), transparent 30%),
radial-gradient(circle at top right, rgba(106, 47, 216, 0.10), transparent 28%),
var(--background);
}
.hero h1 {
font-size: clamp(2.8rem, 5vw, 5rem);
line-height: 1.02;
letter-spacing: -0.05em;
font-weight: 800;
margin-bottom: 1.2rem;
}
body.landing-page .mockup-card,
body.landing-page .process-step,
body.landing-page .use-case-card,
body.landing-page .reassurance-card,
body.landing-page .realtime-card,
body.landing-page .faq-card,
body.landing-page .actions-card,
body.landing-page .summary-card,
body.landing-page .conversation-card,
body.landing-page .demo-card,
body.landing-page .voice-panel,
body.landing-page .transcript-panel {
background: var(--card);
border-color: var(--border);
box-shadow: var(--shadow-soft);
}
.main-card {
position: relative;
z-index: 2;
padding: 2rem;
min-height: 340px;
box-shadow: var(--shadow);
}
.main-card h3 {
font-size: 1.45rem;
line-height: 1.2;
margin-bottom: 1rem;
letter-spacing: -0.03em;
}
.main-card p {
color: var(--subtitle);
font-size: 1rem;
margin-bottom: 1.4rem;
}
body.landing-page .mockup-tags span,
body.landing-page .process-icon,
body.landing-page .feature-icon,
body.landing-page .demo-icon,
body.landing-page .demo-phone-box,
body.landing-page .voice-info-card,
body.landing-page .transcript-empty {
background: var(--card-strong);
border-color: var(--border);
}
.mini-label {
font-size: 0.8rem;
color: var(--subtitle);
margin-bottom: 0.35rem;
}
.chat-bubble {
max-width: 82%;
padding: 0.95rem 1rem;
border-radius: 18px;
font-size: 0.98rem;
line-height: 1.55;
}
.chat-bubble.user {
align-self: flex-start;
background: #F3F4F6;
color: var(--text);
border-top-left-radius: 8px;
}
body.landing-page .chat-bubble.user,
body.landing-page .transcript-item.user {
background: rgba(255, 255, 255, 0.08);
}
.chat-bubble.ai {
align-self: flex-end;
background: linear-gradient(135deg, rgba(46, 166, 247, 0.12), rgba(106, 47, 216, 0.12));
color: var(--text);
border-top-right-radius: 8px;
}
body.landing-page .chat-bubble.ai,
body.landing-page .transcript-item.assistant {
background: linear-gradient(135deg, rgba(94, 234, 212, 0.12), rgba(123, 140, 255, 0.14));
}
@media (max-width: 860px) {
.menu {
display: none;
}
.site-header--public .menu {
display: flex;
}
.hero {
padding-top: 4rem;
}
.hero h1 {
font-size: 2.7rem;
}
.main-card,
.floating-card {
position: static;
max-width: 100%;
}
.chat-bubble {
max-width: 100%;
}
}
@media (max-width: 560px) {
.btn {
width: 100%;
}
.site-header {
align-items: flex-start;
gap: 12px;
padding: 14px 12px;
}
.nav {
width: 100%;
gap: 10px;
}
.nav-actions {
width: 100%;
gap: 8px;
justify-content: flex-start;
}
.nav-actions .btn {
width: auto;
min-height: 42px;
padding: 0 12px;
}
.theme-toggle {
min-height: 34px;
padding: 4px 6px;
}
body.landing-page .nav {
gap: 0.65rem;
}
body.landing-page .nav-actions {
gap: 8px;
}
body.landing-page .nav-actions .btn {
width: auto;
min-height: 40px;
padding: 0 12px;
}
.nav-actions .nav-icon-button,
body.landing-page .nav-actions .nav-icon-button {
width: 36px;
min-width: 36px;
height: 36px;
min-height: 36px;
padding: 0;
}
body.landing-page .theme-toggle {
min-height: 34px;
padding: 4px 6px;
}
}
.demo-readiness {
display: grid;
grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr) auto;
align-items: center;
gap: 1rem;
margin: 0 0 1.4rem;
padding: 1rem;
border: 1px solid rgba(255, 255, 255, 0.11);
border-radius: 18px;
background: rgba(255, 255, 255, 0.05);
box-shadow: var(--shadow-soft);
}
.demo-readiness--ok {
border-color: rgba(34, 197, 94, 0.28);
background: rgba(34, 197, 94, 0.08);
}
.demo-readiness--warning {
border-color: rgba(245, 158, 11, 0.3);
background: rgba(245, 158, 11, 0.08);
}
body.landing-page[data-theme="light"] .demo-readiness {
border-color: rgba(15, 23, 42, 0.1);
background: #ffffff;
}
body.landing-page[data-theme="light"] .demo-readiness--ok {
border-color: rgba(22, 163, 74, 0.22);
background: rgba(240, 253, 244, 0.92);
}
body.landing-page[data-theme="light"] .demo-readiness--warning {
border-color: rgba(217, 119, 6, 0.22);
background: rgba(255, 251, 235, 0.95);
}
.demo-readiness span {
display: block;
margin-bottom: 0.2rem;
color: var(--subtitle);
font-size: 0.82rem;
font-weight: 700;
text-transform: uppercase;
}
.demo-readiness strong {
display: block;
color: var(--text);
font-size: 1.02rem;
}
.demo-readiness p {
margin: 0;
color: var(--subtitle);
line-height: 1.45;
}
.demo-readiness .btn {
white-space: nowrap;
}
body.landing-page[data-theme="light"] .demo-card,
body.landing-page[data-theme="light"] .voice-panel,
body.landing-page[data-theme="light"] .transcript-panel,
body.landing-page[data-theme="light"] .conversation-card,
body.landing-page[data-theme="light"] .actions-card {
background: #ffffff;
}
@media (max-width: 980px) {
.demo-readiness {
grid-template-columns: 1fr;
align-items: stretch;
}
.demo-readiness .btn {
width: 100%;
}
}
.live-demo-page {
padding: 4.5rem 0 5rem;
background:
radial-gradient(circle at top left, rgba(46, 166, 247, 0.08), transparent 30%),
radial-gradient(circle at top right, rgba(106, 47, 216, 0.08), transparent 28%),
var(--background);
}
.live-demo-shell {
max-width: 980px;
margin: 0 auto;
display: grid;
gap: 1.5rem;
}
.voice-panel,
.transcript-panel {
background: white;
border: 1px solid rgba(229, 231, 235, 0.95);
border-radius: 28px;
box-shadow: var(--shadow-soft);
padding: 1.6rem;
}
.voice-notice {
display: grid;
gap: 0.25rem;
margin-bottom: 1.2rem;
padding: 0.95rem 1rem;
border: 1px solid rgba(46, 166, 247, 0.22);
border-radius: 16px;
background: rgba(46, 166, 247, 0.08);
color: var(--text);
}
.voice-notice[hidden] {
display: none;
}
.voice-notice[data-type="warning"] {
border-color: rgba(245, 158, 11, 0.35);
background: rgba(245, 158, 11, 0.12);
}
.voice-notice[data-type="error"] {
border-color: rgba(239, 68, 68, 0.36);
background: rgba(239, 68, 68, 0.12);
}
.voice-notice strong {
font-size: 0.92rem;
}
.voice-notice span {
color: var(--subtitle);
line-height: 1.55;
}
.voice-status-wrap {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.4rem;
}
.voice-orb {
width: 64px;
height: 64px;
border-radius: 999px;
background: linear-gradient(135deg, rgba(46, 166, 247, 0.18), rgba(106, 47, 216, 0.18));
border: 1px solid rgba(46, 166, 247, 0.18);
box-shadow: inset 0 0 20px rgba(46, 166, 247, 0.08);
}
.voice-orb.is-live {
animation: pulseVoice 1.6s infinite;
}
@keyframes pulseVoice {
0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(46, 166, 247, 0.25); }
70% { transform: scale(1.03); box-shadow: 0 0 0 20px rgba(46, 166, 247, 0); }
100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(46, 166, 247, 0); }
}
.voice-actions {
display: flex;
gap: 1rem;
flex-wrap: wrap;
margin-bottom: 1.4rem;
}
.voice-checklist {
display: flex;
flex-wrap: wrap;
gap: 0.65rem;
margin-bottom: 1.35rem;
}
.voice-checklist span {
display: inline-flex;
align-items: center;
gap: 0.45rem;
min-height: 34px;
padding: 0 0.78rem;
border: 1px solid var(--border);
border-radius: 999px;
background: var(--background-soft);
color: var(--subtitle);
font-size: 0.86rem;
font-weight: 700;
}
.voice-checklist span::before {
content: "";
width: 0.5rem;
height: 0.5rem;
border-radius: 999px;
background: #94a3b8;
}
.voice-checklist span[data-state="ok"] {
border-color: rgba(34, 197, 94, 0.32);
color: #15803d;
}
.voice-checklist span[data-state="ok"]::before {
background: #22c55e;
}
.voice-checklist span[data-state="fail"] {
border-color: rgba(239, 68, 68, 0.34);
color: #dc2626;
}
.voice-checklist span[data-state="fail"]::before {
background: #ef4444;
}
.voice-checklist span[data-state="pending"]::before {
background: #f59e0b;
}
.transcript-header {
margin-bottom: 1rem;
}
.transcript-header h2 {
font-size: 1.35rem;
margin-bottom: 0.25rem;
letter-spacing: -0.03em;
}
.transcript-header p {
color: var(--subtitle);
}
.transcript-log {
min-height: 280px;
max-height: 480px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 0.9rem;
}
.transcript-empty {
color: var(--subtitle);
padding: 1rem;
border: 1px dashed var(--border);
border-radius: 16px;
background: var(--background-soft);
}
.transcript-item {
max-width: 82%;
padding: 0.95rem 1rem;
border-radius: 18px;
}
.transcript-item.user {
align-self: flex-start;
background: #F3F4F6;
border-top-left-radius: 8px;
}
.transcript-item.assistant {
align-self: flex-end;
background: linear-gradient(135deg, rgba(46, 166, 247, 0.12), rgba(106, 47, 216, 0.12));
border-top-right-radius: 8px;
}
.transcript-role {
font-size: 0.78rem;
font-weight: 700;
color: var(--primary);
margin-bottom: 0.3rem;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.transcript-text {
line-height: 1.55;
}
@media (max-width: 860px) {
.voice-actions,
.live-demo-top__actions {
flex-direction: column;
}
.voice-actions .btn,
.live-demo-top__actions .btn {
width: 100%;
}
.voice-checklist {
display: grid;
grid-template-columns: 1fr;
}
.transcript-item {
max-width: 100%;
}
}
.live-demo-body {
--live-card: rgba(15, 23, 42, 0.74);
--live-card-soft: rgba(30, 41, 59, 0.68);
--live-card-border: rgba(147, 197, 253, 0.16);
--live-text-muted: rgba(226, 232, 240, 0.72);
}
.live-demo-body .home-mobile-sticky-cta {
display: none;
}
body.landing-refresh[data-theme="light"].live-demo-body {
--live-card: rgba(255, 255, 255, 0.94);
--live-card-soft: rgba(248, 250, 252, 0.96);
--live-card-border: rgba(37, 99, 235, 0.13);
--live-text-muted: #64748b;
}
.live-demo-page {
padding: clamp(36px, 6vw, 74px) 0 clamp(52px, 7vw, 96px);
background:
radial-gradient(circle at 12% 4%, rgba(37, 99, 235, 0.24), transparent 28%),
radial-gradient(circle at 88% 10%, rgba(96, 165, 250, 0.13), transparent 30%),
linear-gradient(180deg, rgba(15, 23, 42, 0.08), transparent 280px),
var(--background);
}
.live-demo-shell {
max-width: 1180px;
gap: clamp(18px, 3vw, 30px);
}
.live-demo-hero,
.live-demo-console,
.live-demo-script-board,
.live-demo-after__grid,
.live-demo-phone {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(320px, 0.72fr);
gap: clamp(18px, 3vw, 28px);
align-items: stretch;
}
.live-demo-brief {
display: grid;
gap: 12px;
}
.live-demo-brief div,
.live-demo-script-current,
.live-demo-script-grid article,
.live-demo-after,
.live-demo-phone,
.live-demo-after__steps {
border: 1px solid var(--live-card-border);
border-radius: 20px;
background: var(--live-card);
box-shadow: 0 22px 70px rgba(2, 6, 23, 0.16);
}
.live-demo-brief div {
display: grid;
gap: 6px;
align-content: center;
min-height: 0;
padding: 16px;
}
.live-demo-brief span,
.live-demo-script-current > span,
.live-demo-script-grid article > span,
.live-demo-after .home-summary-card > span {
width: max-content;
min-height: 28px;
display: inline-flex;
align-items: center;
padding: 0 0.7rem;
border-radius: 999px;
background: rgba(37, 99, 235, 0.15);
color: #93c5fd;
font-size: 0.76rem;
font-weight: 850;
letter-spacing: 0.05em;
text-transform: uppercase;
}
body.landing-refresh[data-theme="light"] .live-demo-brief span,
body.landing-refresh[data-theme="light"] .live-demo-script-current > span,
body.landing-refresh[data-theme="light"] .live-demo-script-grid article > span,
body.landing-refresh[data-theme="light"] .live-demo-after .home-summary-card > span {
color: #1d4ed8;
background: rgba(37, 99, 235, 0.1);
}
.live-demo-brief strong {
color: var(--text);
font-size: 1.05rem;
}
.live-demo-brief p,
.live-demo-script-grid p,
.live-demo-after__head p,
.live-demo-after__steps p,
.live-demo-phone p,
.live-demo-phone li {
color: var(--live-text-muted);
}
.live-demo-console {
align-items: start;
grid-template-columns: minmax(0, 1fr);
}
.live-demo-console__main,
.live-demo-console__side {
min-width: 0;
}
.live-demo-transcript-section {
display: grid;
justify-items: center;
margin-top: clamp(6px, 1vw, 14px);
}
.live-demo-transcript-panel {
width: min(100%, 1120px);
min-height: 0;
padding: clamp(22px, 3vw, 30px);
}
.voice-panel,
.transcript-panel {
height: 100%;
border-color: var(--live-card-border);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent),
var(--live-card);
box-shadow: 0 24px 80px rgba(2, 6, 23, 0.18);
}
body.landing-refresh[data-theme="light"] .voice-panel,
body.landing-refresh[data-theme="light"] .transcript-panel {
background:
linear-gradient(180deg, rgba(37, 99, 235, 0.045), transparent),
var(--live-card);
}
.voice-status-wrap {
padding: 1rem;
border: 1px solid var(--live-card-border);
border-radius: 22px;
background: var(--live-card-soft);
}
.voice-status-wrap h3,
.transcript-header h2,
.live-demo-script-current h3,
.live-demo-after__head h2,
.live-demo-after__steps h2 {
margin: 0;
color: var(--text);
}
.voice-actions {
display: grid;
grid-template-columns: minmax(0, 1.35fr) auto minmax(0, 1fr);
gap: 0.75rem;
}
.voice-actions .btn {
min-height: 48px;
}
.voice-checklist {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.7rem;
}
.voice-checklist span {
justify-content: flex-start;
border-color: var(--live-card-border);
background: var(--live-card-soft);
}
.transcript-panel {
display: grid;
grid-template-rows: auto 1fr;
min-height: 100%;
}
.transcript-header {
display: flex;
justify-content: space-between;
gap: 1rem;
align-items: flex-start;
margin-bottom: 1rem;
}
.transcript-header p {
max-width: 260px;
margin: 0;
color: var(--live-text-muted);
text-align: right;
}
.transcript-log {
min-height: 520px;
max-height: min(76vh, 780px);
padding: 1.15rem;
border: 1px solid var(--live-card-border);
border-radius: 22px;
background:
radial-gradient(circle at 30% 0%, rgba(37, 99, 235, 0.14), transparent 36%),
rgba(2, 6, 23, 0.18);
}
.live-demo-scenario-panel {
display: grid;
gap: 1rem;
margin-bottom: 1rem;
padding: clamp(0.95rem, 2vw, 1.2rem);
border: 1px solid var(--live-card-border);
border-radius: 22px;
background:
linear-gradient(180deg, rgba(37, 99, 235, 0.07), transparent),
var(--live-card-soft);
}
.live-demo-scenario-panel__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
}
.live-demo-scenario-panel__head h3 {
margin: 0.2rem 0 0;
color: var(--text);
font-size: 1.15rem;
letter-spacing: -0.03em;
}
.live-demo-scenario-options {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(116px, 1fr));
gap: 0.65rem;
}
.live-demo-scenario-options button {
min-width: 0;
min-height: 76px;
display: grid;
gap: 0.28rem;
align-content: center;
padding: 0.78rem 0.72rem;
border: 1px solid var(--live-card-border);
border-radius: 16px;
background: rgba(15, 23, 42, 0.42);
color: var(--text);
cursor: pointer;
text-align: left;
transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
body.landing-refresh[data-theme="light"] .live-demo-scenario-options button {
background: rgba(255, 255, 255, 0.82);
}
.live-demo-scenario-options button:hover,
.live-demo-scenario-options button:focus-visible,
.live-demo-scenario-options button.is-selected {
transform: translateY(-1px);
border-color: rgba(96, 165, 250, 0.55);
background: linear-gradient(135deg, rgba(37, 99, 235, 0.34), rgba(14, 165, 233, 0.16));
outline: none;
}
.live-demo-scenario-options button span {
overflow: hidden;
color: var(--live-text-muted);
font-size: 0.66rem;
font-weight: 850;
letter-spacing: 0.04em;
text-overflow: ellipsis;
text-transform: uppercase;
white-space: nowrap;
}
.live-demo-scenario-options button strong {
color: var(--text);
font-size: 0.95rem;
line-height: 1.12;
white-space: normal;
}
.live-demo-selected-script {
display: flex;
gap: 0.85rem;
align-items: end;
justify-content: space-between;
padding: 0.9rem;
border: 1px solid var(--live-card-border);
border-radius: 18px;
background: rgba(2, 6, 23, 0.2);
}
body.landing-refresh[data-theme="light"] .live-demo-selected-script {
background: rgba(241, 245, 249, 0.86);
}
.live-demo-selected-script > div {
min-width: 0;
}
.live-demo-selected-script span {
color: #93c5fd;
font-size: 0.72rem;
font-weight: 900;
letter-spacing: 0.04em;
text-transform: uppercase;
}
body.landing-refresh[data-theme="light"] .live-demo-selected-script span {
color: #1d4ed8;
}
.live-demo-selected-script h3 {
margin: 0.25rem 0;
color: var(--text);
font-size: 1rem;
}
.live-demo-selected-script p {
margin: 0;
color: var(--live-text-muted);
line-height: 1.45;
}
.live-demo-selected-script .btn {
flex: 0 0 auto;
min-height: 38px;
padding-inline: 0.9rem;
}
body.landing-refresh[data-theme="light"] .transcript-log {
background:
radial-gradient(circle at 30% 0%, rgba(37, 99, 235, 0.08), transparent 36%),
rgba(241, 245, 249, 0.78);
}
.transcript-empty {
display: grid;
place-items: center;
min-height: 220px;
border-color: var(--live-card-border);
background: var(--live-card-soft);
text-align: center;
}
.transcript-item.user {
background: rgba(148, 163, 184, 0.2);
}
.transcript-item.assistant {
background: linear-gradient(135deg, rgba(37, 99, 235, 0.82), rgba(14, 165, 233, 0.68));
color: #fff;
}
.transcript-item.assistant .transcript-role {
color: rgba(255, 255, 255, 0.76);
}
.live-demo-scenarios,
.live-demo-after,
.live-demo-phone {
padding: clamp(20px, 3vw, 30px);
}
.live-demo-scenarios__head,
.live-demo-after__head {
display: flex;
justify-content: space-between;
gap: 1.2rem;
align-items: end;
margin-bottom: 1.2rem;
}
.live-demo-scenarios__head h2,
.live-demo-after__head h2 {
margin: 0.35rem 0 0;
letter-spacing: -0.04em;
font-size: clamp(1.65rem, 3vw, 2.5rem);
}
.live-demo-scenarios__head p,
.live-demo-after__head p {
max-width: 360px;
margin: 0;
}
.live-demo-after {
margin-top: clamp(20px, 4vw, 36px);
display: grid;
gap: clamp(14px, 2vw, 22px);
background:
radial-gradient(circle at top left, rgba(37, 99, 235, 0.22), transparent 34%),
linear-gradient(145deg, rgba(15, 23, 42, 0.96), rgba(30, 41, 59, 0.82));
}
body.landing-refresh[data-theme="light"] .live-demo-after {
background:
radial-gradient(circle at top left, rgba(37, 99, 235, 0.12), transparent 34%),
linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(239, 246, 255, 0.92));
}
.live-demo-after__head {
display: grid;
justify-items: start;
text-align: left;
gap: 0.55rem;
margin-bottom: 0;
}
.live-demo-after__head h2 {
max-width: 760px;
font-size: clamp(1.55rem, 3vw, 2.45rem);
}
.live-demo-after__head p {
max-width: 680px;
}
.live-demo-after__grid {
grid-template-columns: minmax(300px, 0.78fr) minmax(0, 1.22fr);
gap: clamp(14px, 2vw, 18px);
align-items: stretch;
}
.live-demo-after .home-summary-card {
display: grid;
gap: 0.85rem;
align-content: start;
min-width: 0;
padding: clamp(18px, 2.2vw, 24px);
border: 1px solid var(--live-card-border);
border-radius: 18px;
background: rgba(15, 23, 42, 0.46);
box-shadow: none;
}
body.landing-refresh[data-theme="light"] .live-demo-after .home-summary-card {
background: rgba(255, 255, 255, 0.72);
}
.live-demo-after .home-summary-card h3 {
margin: 0;
color: var(--text);
font-size: clamp(1.05rem, 2vw, 1.28rem);
line-height: 1.2;
}
.live-demo-after .home-summary-card dl {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.65rem;
margin: 0;
}
.live-demo-after .home-summary-card dl div {
display: grid;
gap: 0.25rem;
min-width: 0;
padding: 0.8rem;
border: 1px solid var(--live-card-border);
border-radius: 14px;
background: rgba(255, 255, 255, 0.05);
}
body.landing-refresh[data-theme="light"] .live-demo-after .home-summary-card dl div {
background: rgba(37, 99, 235, 0.055);
}
.live-demo-after .home-summary-card dt {
color: var(--live-text-muted);
font-size: 0.72rem;
font-weight: 900;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.live-demo-after .home-summary-card dd {
margin: 0;
color: var(--text);
font-weight: 800;
line-height: 1.35;
}
.live-demo-after__steps {
display: grid;
gap: 0.9rem;
align-content: start;
padding: clamp(18px, 2.2vw, 24px);
background: var(--live-card-soft);
box-shadow: none;
}
.live-demo-after__steps > .home-eyebrow,
.live-demo-after .home-summary-card > span {
margin-bottom: 0.1rem;
}
.live-demo-phone {
margin-top: clamp(20px, 4vw, 36px);
grid-template-columns: minmax(0, 0.92fr) minmax(320px, 0.78fr);
align-items: stretch;
gap: clamp(18px, 3vw, 34px);
background:
radial-gradient(circle at top right, rgba(96, 165, 250, 0.2), transparent 34%),
var(--live-card);
}
.live-demo-phone .legal-card {
height: 100%;
border-color: var(--live-card-border);
background: var(--live-card-soft);
}
.live-demo-phone__form {
display: grid;
gap: 1rem;
align-self: stretch;
align-content: center;
padding: clamp(18px, 2.4vw, 26px);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.live-demo-phone__form h3 {
margin: 0;
color: var(--text);
font-size: clamp(1.15rem, 2.4vw, 1.45rem);
}
.live-demo-phone__form .auth-form {
display: grid;
gap: 0.82rem;
}
.live-demo-phone__form .form-group {
margin: 0;
}
.live-demo-phone__form label,
.live-demo-phone__form .form-group label {
color: var(--live-text-muted);
font-size: 0.78rem;
font-weight: 900;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.live-demo-phone__form input,
.live-demo-phone__form .auth-form input[type="text"],
.live-demo-phone__form .auth-form input[type="tel"] {
width: 100%;
min-height: 48px;
padding: 0 18px;
border: 1px solid rgba(147, 197, 253, 0.26) !important;
border-radius: 12px;
background: rgba(15, 23, 42, 0.52) !important;
color: #f8fafc !important;
-webkit-text-fill-color: #f8fafc !important;
caret-color: #f8fafc !important;
box-shadow: none;
}
.live-demo-phone__form input:hover,
.live-demo-phone__form .auth-form input[type="text"]:hover,
.live-demo-phone__form .auth-form input[type="tel"]:hover,
.live-demo-phone__form input:active,
.live-demo-phone__form .auth-form input[type="text"]:active,
.live-demo-phone__form .auth-form input[type="tel"]:active {
border-color: rgba(147, 197, 253, 0.5) !important;
background: rgba(15, 23, 42, 0.64) !important;
color: #f8fafc !important;
-webkit-text-fill-color: #f8fafc !important;
caret-color: #f8fafc !important;
}
.live-demo-phone__form input::placeholder,
.live-demo-phone__form .auth-form input[type="text"]::placeholder,
.live-demo-phone__form .auth-form input[type="tel"]::placeholder {
color: rgba(203, 213, 225, 0.72);
-webkit-text-fill-color: rgba(203, 213, 225, 0.72);
}
.live-demo-phone__form input:focus,
.live-demo-phone__form .auth-form input[type="text"]:focus,
.live-demo-phone__form .auth-form input[type="tel"]:focus {
border-color: rgba(96, 165, 250, 0.74) !important;
background: rgba(15, 23, 42, 0.62) !important;
color: #f8fafc !important;
-webkit-text-fill-color: #f8fafc !important;
caret-color: #f8fafc !important;
box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.16);
outline: none;
}
.live-demo-phone__form input:-webkit-autofill,
.live-demo-phone__form input:-webkit-autofill:hover,
.live-demo-phone__form input:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0 1000px #142033 inset;
-webkit-text-fill-color: #f8fafc;
}
body.landing-refresh[data-theme="light"] .live-demo-phone__form input {
border-color: rgba(37, 99, 235, 0.18) !important;
background: rgba(255, 255, 255, 0.9) !important;
color: #0f172a !important;
}
body.landing-refresh[data-theme="light"] .live-demo-phone__form input:-webkit-autofill,
body.landing-refresh[data-theme="light"] .live-demo-phone__form input:-webkit-autofill:hover,
body.landing-refresh[data-theme="light"] .live-demo-phone__form input:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0 1000px #ffffff inset;
-webkit-text-fill-color: #0f172a;
}
.live-demo-phone__copy {
display: grid;
align-content: center;
gap: 0.9rem;
}
.live-demo-phone__copy h2 {
max-width: 560px;
margin: 0;
color: var(--text);
font-size: clamp(1.8rem, 4vw, 3.1rem);
letter-spacing: -0.05em;
line-height: 1.02;
}
.live-demo-phone__copy p {
max-width: 520px;
margin: 0;
font-size: clamp(1rem, 1.4vw, 1.12rem);
line-height: 1.6;
}
.live-demo-phone__points {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
}
.live-demo-phone__points span {
display: inline-flex;
align-items: center;
min-height: 34px;
padding: 0 0.82rem;
border: 1px solid var(--live-card-border);
border-radius: 999px;
background: var(--live-card-soft);
color: var(--text);
font-size: 0.82rem;
font-weight: 850;
}
.live-demo-phone__form .btn {
justify-content: center;
width: 100%;
min-height: 50px;
}
.live-demo-phone__form p {
max-width: none;
margin: 0;
text-align: center;
font-size: 0.9rem;
line-height: 1.45;
}
@media (max-width: 980px) {
.live-demo-hero,
.live-demo-console,
.live-demo-script-board,
.live-demo-after__grid,
.live-demo-phone {
grid-template-columns: 1fr;
}
.live-demo-brief {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.voice-actions,
.voice-info-grid,
.live-demo-mini-steps,
.live-demo-scenario-options {
grid-template-columns: 1fr;
}
}
@media (max-width: 700px) {
.live-demo-page {
padding-top: 22px;
}
.live-demo-top,
.voice-panel,
.transcript-panel,
.live-demo-scenarios,
.live-demo-after,
.live-demo-phone {
border-radius: 18px;
padding: 18px;
}
.live-demo-brief,
.live-demo-script-grid,
.voice-checklist {
grid-template-columns: 1fr;
}
.live-demo-brief {
display: grid;
overflow: visible;
padding-bottom: 0;
}
.live-demo-brief div {
min-width: 0;
padding: 14px;
}
.live-demo-brief p {
margin: 0;
font-size: 0.9rem;
}
.live-demo-after__head {
justify-items: start;
text-align: left;
}
.live-demo-after__head h2 {
font-size: clamp(1.45rem, 8vw, 2.05rem);
line-height: 1.05;
}
.live-demo-after .home-summary-card,
.live-demo-after__steps,
.live-demo-phone__form {
padding: 16px;
border-radius: 16px;
}
.live-demo-after .home-summary-card dl {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.5rem;
}
.live-demo-after .home-summary-card dl div {
padding: 0.7rem;
}
.live-demo-after .home-summary-card dd {
font-size: 0.88rem;
}
.live-demo-after__steps h2 {
font-size: 1.18rem;
line-height: 1.18;
}
.live-demo-phone__copy {
gap: 0.75rem;
}
.live-demo-phone__copy h2 {
font-size: clamp(1.6rem, 9vw, 2.3rem);
}
.live-demo-phone__points {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.45rem;
}
.live-demo-phone__points span {
justify-content: center;
min-height: 38px;
padding: 0 0.45rem;
text-align: center;
line-height: 1.15;
}
.live-demo-phone__form .auth-form {
gap: 0.7rem;
}
.live-demo-phone__form input,
.live-demo-phone__form .btn {
min-height: 46px;
}
.live-demo-phone__form input,
.live-demo-phone__form .auth-form input[type="text"],
.live-demo-phone__form .auth-form input[type="tel"] {
padding-inline: 16px;
}
.live-demo-scenario-options {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.live-demo-scenario-options button {
min-height: 62px;
}
.live-demo-selected-script {
display: grid;
}
.transcript-header,
.live-demo-scenarios__head,
.live-demo-after__head {
display: grid;
align-items: start;
}
.transcript-header p,
.live-demo-scenarios__head p,
.live-demo-after__head p {
max-width: none;
text-align: left;
}
.transcript-log {
min-height: 330px;
max-height: 58vh;
padding: 0.75rem;
}
.marketing-inline-actions {
display: grid;
grid-template-columns: 1fr;
width: 100%;
}
.marketing-inline-actions .btn {
width: 100%;
}
body.live-demo-body .home-mobile-sticky-cta {
display: none !important;
}
}
.btn-danger {
background: #ef4444;
color: white;
box-shadow: 0 12px 30px rgba(239, 68, 68, 0.18);
}
.btn-danger:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 16px 36px rgba(239, 68, 68, 0.24);
}
.btn:disabled,
.btn[disabled] {
opacity: 0.5;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.btn-danger:disabled,
.btn-danger[disabled] {
background: #f3f4f6;
color: #9ca3af;
border: 1px solid var(--border);
}
.nav-actions {
display: flex;
align-items: center;
gap: 8px;
}
.nav-theme {
display: flex;
align-items: center;
}
.nav-actions--public {
gap: 10px;
}
.nav-theme--public {
flex: 0 0 auto;
}
.nav-auth-link {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
min-height: 46px;
padding: 9px 16px;
border-radius: 16px;
gap: 2px;
white-space: normal;
}
.nav-auth-link__eyebrow {
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.08em;
line-height: 1;
text-transform: uppercase;
opacity: 0.74;
}
.nav-auth-link__label {
font-size: 0.96rem;
font-weight: 800;
line-height: 1.05;
}
.nav-auth-link__icon {
display: none;
align-items: center;
justify-content: center;
}
.nav-auth-link__icon svg {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 2.1;
}
.nav-auth-link--primary {
min-width: 196px;
}
.nav-auth-link--secondary {
min-width: 148px;
}
.logout-form {
display: inline-flex;
margin: 0;
}
.nav-actions .nav-icon-button {
width: 44px;
min-width: 44px;
height: 44px;
min-height: 44px;
padding: 0;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 999px;
background: rgba(255, 255, 255, 0.07);
color: #f5f7ff;
box-shadow: none;
flex: 0 0 auto;
}
.nav-actions .nav-icon-button:hover,
.nav-actions .nav-icon-button:focus-visible {
border-color: rgba(123, 140, 255, 0.34);
background: rgba(123, 140, 255, 0.12);
color: #f5f7ff;
}
body[data-theme="light"] .nav-actions .nav-icon-button {
border-color: rgba(15, 23, 42, 0.1);
background: rgba(255, 255, 255, 0.92);
color: #111827;
}
body[data-theme="light"] .nav-actions .nav-icon-button:hover,
body[data-theme="light"] .nav-actions .nav-icon-button:focus-visible {
border-color: rgba(30, 115, 216, 0.22);
background: rgba(30, 115, 216, 0.08);
color: #1E73D8;
}
.nav-actions .nav-icon-button svg {
width: 19px;
height: 19px;
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 2;
}
.nav-action__text {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
}
.nav-action__text-mobile {
display: none;
}
.btn-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 0 16px;
border-radius: 12px;
border: 1px solid rgba(255,255,255,0.14);
background: transparent;
color: #fff;
text-decoration: none;
font-weight: 700;
cursor: pointer;
}
.btn-secondary:hover {
background: rgba(255,255,255,0.05);
}
@media (max-width: 1024px) and (hover: none), (max-width: 1024px) and (pointer: coarse) {
.site-header {
padding: 0;
}
.nav {
width: min(100% - 1.5rem, var(--container));
min-height: 0;
flex-wrap: wrap;
align-items: center;
gap: 10px;
padding: 12px 0;
}
.logo-wrap {
min-height: 46px;
padding-right: 6px;
}
.logo-brand {
width: auto;
height: 48px;
gap: 8px;
}
.logo-brand__mark {
width: 38px;
height: 38px;
border-radius: 13px;
}
.logo-brand__word {
font-size: 1.04rem;
}
.menu {
order: 3;
display: flex !important;
flex-wrap: nowrap;
width: 100%;
gap: 7px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding-bottom: 0;
}
.menu::-webkit-scrollbar {
display: none;
}
.menu a {
flex: 0 0 auto;
}
.menu .menu-icon-link {
width: 40px;
min-width: 40px;
height: 40px;
min-height: 40px;
padding: 0;
border-radius: 999px;
background: rgba(255, 255, 255, 0.05);
}
.nav-actions {
width: 100%;
justify-content: flex-start;
gap: 8px;
}
body.landing-page .nav {
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto;
align-items: center;
gap: 6px;
}
body.landing-page .logo-wrap {
grid-column: 1;
min-width: 0;
padding-right: 0;
}
body.landing-page .nav-theme--public {
display: flex;
grid-column: 2;
align-self: center;
}
body.landing-page .nav-theme--public .theme-toggle {
width: 92px;
min-width: 92px;
height: 40px;
min-height: 40px;
padding: 3px;
border-radius: 999px;
}
body.landing-page .nav-actions--public {
display: flex;
grid-column: 3;
width: auto;
flex: 0 0 auto;
justify-content: flex-end;
align-items: center;
gap: 6px;
}
body.landing-page .nav-actions--public .nav-auth-link {
flex: 0 0 auto;
width: 36px;
min-width: 36px;
height: 36px;
min-height: 36px;
padding: 0;
border-radius: 999px;
align-items: center;
justify-content: center;
gap: 0;
}
body.landing-page .nav-actions--public .nav-auth-link__eyebrow,
body.landing-page .nav-actions--public .nav-auth-link__label {
display: none;
}
body.landing-page .nav-actions--public .nav-auth-link__icon {
display: inline-flex;
}
body.landing-page {
padding-bottom: calc(112px + env(safe-area-inset-bottom));
}
body.landing-page .menu {
position: fixed;
z-index: 2000;
left: max(10px, env(safe-area-inset-left));
right: max(10px, env(safe-area-inset-right));
bottom: max(12px, env(safe-area-inset-bottom));
top: auto;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
justify-content: stretch;
width: auto;
max-width: none;
height: 86px;
gap: 8px;
padding: 10px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.13);
border-radius: 24px;
background: #0b1020;
box-shadow: 0 18px 50px rgba(0, 0, 0, 0.34);
}
body.landing-page .menu a,
body.landing-page .menu .public-menu-link {
width: 100%;
min-width: 0;
height: 66px;
min-height: 66px;
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
border-radius: 18px;
border-color: transparent;
color: rgba(236, 241, 255, 0.72);
background: transparent;
}
body.landing-page .menu .public-menu-link--primary,
body.landing-page .menu .public-menu-link:hover,
body.landing-page .menu .public-menu-link:focus,
body.landing-page .menu .public-menu-link:focus-visible,
body.landing-page .menu .public-menu-link:active,
body.landing-page .menu .public-menu-link.is-tapping {
color: #ffffff;
border-color: rgba(123, 140, 255, 0.28);
background: linear-gradient(135deg, rgba(46, 166, 247, 0.22), rgba(106, 47, 216, 0.22));
}
body.landing-page .menu .public-menu-link svg {
width: 24px;
height: 24px;
stroke-width: 2.1;
}
body.landing-page .menu .nav-action__text {
position: static;
width: auto;
height: auto;
clip: auto;
overflow: hidden;
max-width: 74px;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 0.72rem;
font-weight: 800;
line-height: 1;
}
body[data-theme="light"].landing-page .menu {
border-color: rgba(15, 23, 42, 0.1);
background: rgba(255, 255, 255, 0.94);
}
}
@media (max-width: 380px) {
.menu .menu-icon-link {
width: 38px;
min-width: 38px;
height: 38px;
min-height: 38px;
}
}
/* ===== AUTH PAGES ===== */
.auth-shell {
width: 100%;
max-width: 100vw;
min-height: calc(100vh - 90px);
display: grid;
grid-template-columns: minmax(0, 1fr);
align-items: center;
justify-items: center;
padding: 48px 20px 64px;
}
.auth-card {
width: 100%;
max-width: 560px;
margin: 0 auto;
justify-self: center;
background: #ffffff;
border: 1px solid rgba(15, 23, 42, 0.08);
border-radius: 12px;
box-shadow: 0 24px 70px rgba(15, 23, 42, 0.10);
padding: 34px 32px;
box-sizing: border-box;
}
.auth-panel {
width: 100%;
}
.auth-card--wide {
max-width: 860px;
}
.auth-card--signup {
width: min(100%, 820px);
max-width: 820px;
padding-inline: 48px;
}
.auth-panel--signup .auth-title {
margin-bottom: 12px;
}
.auth-panel--signup .auth-subtitle {
max-width: 560px;
}
.auth-panel--signup .auth-links {
justify-content: center;
text-align: center;
}
.auth-panel--signup .auth-socials--primary,
.auth-panel--signup .auth-form {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 14px;
row-gap: 14px;
}
.auth-panel--signup .auth-divider,
.auth-panel--signup .auth-errors,
.auth-panel--signup .auth-actions,
.auth-panel--signup .auth-links {
grid-column: 1 / -1;
}
.auth-eyebrow {
display: inline-block;
margin-bottom: 10px;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #5b6bff;
}
.auth-title {
margin: 0 0 12px;
font-size: clamp(1.85rem, 4vw, 2.45rem);
line-height: 1.08;
font-weight: 800;
letter-spacing: 0;
color: #0f172a;
}
.auth-subtitle {
margin: 0 0 28px;
font-size: 1rem;
line-height: 1.7;
color: #475569;
}
body.auth-page .device-copy--compact {
display: none !important;
}
.auth-form {
display: flex;
flex-direction: column;
gap: 18px;
width: 100%;
}
.form-group {
display: flex;
flex-direction: column;
gap: 8px;
width: 100%;
}
.form-group label {
margin: 0;
font-size: 0.95rem;
font-weight: 700;
color: #0f172a;
}
.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form input[type="password"],
.auth-form input[type="number"],
.auth-form input[type="url"],
.auth-form select,
.auth-form textarea {
width: 100%;
height: 54px;
padding: 0 16px;
border: 1px solid #dbe3f0;
border-radius: 10px;
background: #f8fafc;
color: #0f172a;
-webkit-text-fill-color: #0f172a;
color-scheme: light;
font-size: 1rem;
font-family: inherit;
box-sizing: border-box;
outline: none;
transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.auth-form textarea {
min-height: 120px;
height: auto;
padding: 14px 16px;
resize: vertical;
}
.auth-form input[type="text"]:focus,
.auth-form input[type="email"]:focus,
.auth-form input[type="password"]:focus,
.auth-form input[type="number"]:focus,
.auth-form input[type="url"]:focus,
.auth-form select:focus,
.auth-form textarea:focus {
background: #ffffff;
border-color: #5b6bff;
color: #0f172a;
-webkit-text-fill-color: #0f172a;
caret-color: #0f172a;
box-shadow: 0 0 0 4px rgba(91, 107, 255, 0.12);
}
.auth-form input[type="text"]:hover,
.auth-form input[type="email"]:hover,
.auth-form input[type="password"]:hover,
.auth-form input[type="number"]:hover,
.auth-form input[type="url"]:hover,
.auth-form select:hover,
.auth-form textarea:hover,
.auth-form input[type="text"]:active,
.auth-form input[type="email"]:active,
.auth-form input[type="password"]:active,
.auth-form input[type="number"]:active,
.auth-form input[type="url"]:active,
.auth-form select:active,
.auth-form textarea:active {
color: #0f172a;
-webkit-text-fill-color: #0f172a;
caret-color: #0f172a;
}
.form-group-checkbox {
margin-top: -2px;
}
.checkbox-label {
display: inline-flex;
align-items: center;
gap: 10px;
width: fit-content;
max-width: 100%;
font-weight: 700;
line-height: 1.35;
color: #334155;
cursor: pointer;
}
.auth-form input[type="checkbox"] {
width: 18px;
height: 18px;
margin: 0;
accent-color: #5b6bff;
}
.auth-actions {
margin-top: 8px;
width: 100%;
}
.btn-block {
width: 100%;
}
.auth-card .btn,
.auth-card .btn-nav {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 56px;
width: 100%;
padding: 0 22px;
border: none;
border-radius: 10px;
background: linear-gradient(135deg, #4da2ff 0%, #5b6bff 55%, #6d28d9 100%);
color: #ffffff;
text-decoration: none;
font-weight: 800;
font-size: 1rem;
font-family: inherit;
cursor: pointer;
box-shadow: 0 16px 34px rgba(91, 107, 255, 0.24);
transition: transform 0.15s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
.auth-card .btn:hover,
.auth-card .btn-nav:hover {
transform: translateY(-1px);
filter: brightness(1.02);
box-shadow: 0 20px 38px rgba(91, 107, 255, 0.30);
}
.auth-links {
margin-top: 22px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.auth-links a {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
color: #5b6bff;
font-size: 0.95rem;
font-weight: 600;
text-decoration: none;
}
.auth-links a:hover {
text-decoration: underline;
}
.auth-divider {
display: flex;
align-items: center;
gap: 12px;
margin: 24px 0 18px;
color: #64748b;
font-size: 0.86rem;
font-weight: 700;
}
.auth-divider::before,
.auth-divider::after {
content: "";
height: 1px;
flex: 1;
background: #e2e8f0;
}
.auth-socials {
display: grid;
gap: 10px;
}
.auth-social-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 52px;
padding: 0 16px;
border: 1px solid #dbe3f0;
border-radius: 10px;
background: #fff;
color: #0f172a;
text-decoration: none;
font-weight: 800;
transition: transform 0.15s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.auth-social-btn:hover {
transform: translateY(-1px);
border-color: #b8c4d8;
box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08);
}
.auth-social-btn__mark {
display: inline-grid;
width: 26px;
height: 26px;
place-items: center;
border-radius: 8px;
background: #f1f5f9;
color: #111827;
font-weight: 900;
}
.auth-errors,
.auth-messages {
margin-bottom: 20px;
padding: 14px 16px;
border-radius: 14px;
font-size: 0.95rem;
line-height: 1.5;
}
.auth-errors {
background: #fef2f2;
border: 1px solid #fecaca;
color: #b91c1c;
}
.auth-messages {
background: #f0fdf4;
border: 1px solid #bbf7d0;
color: #15803d;
}
.auth-form ul.errorlist {
margin: 6px 0 0;
padding-left: 18px;
color: #dc2626;
font-size: 0.9rem;
}
@media (max-width: 640px) {
.auth-shell {
padding: 28px 14px 40px;
}
.auth-card {
padding: 24px 18px;
border-radius: 10px;
}
.auth-card--signup {
width: min(100%, 560px);
max-width: 560px;
padding-inline: 18px;
}
.auth-panel--signup .auth-socials--primary,
.auth-panel--signup .auth-form {
grid-template-columns: 1fr;
}
.auth-links {
flex-direction: column;
align-items: flex-start;
}
.auth-links--login {
display: grid;
grid-template-columns: 1fr;
align-items: center;
column-gap: 12px;
row-gap: 10px;
width: 100%;
text-align: left;
}
.auth-links--login a {
min-width: 0;
width: 100%;
justify-content: flex-start;
text-align: left;
white-space: normal;
font-size: 0.86rem;
line-height: 1.2;
}
body.auth-page .auth-subtitle .device-copy--full {
display: none !important;
}
body.auth-page .auth-subtitle .device-copy--compact {
display: inline !important;
}
.auth-links--login a:nth-child(2) {
grid-column: 1;
grid-row: auto;
justify-self: stretch;
}
.auth-links--login a:nth-child(3) {
grid-column: 1;
grid-row: auto;
justify-self: stretch;
}
}
.auth-form select option,
.auth-form select optgroup {
background: #ffffff;
color: #0f172a;
}
.auth-form input:-webkit-autofill,
.auth-form input:-webkit-autofill:hover,
.auth-form input:-webkit-autofill:focus {
-webkit-text-fill-color: #0f172a;
box-shadow: 0 0 0 1000px #f8fafc inset;
caret-color: #0f172a;
}
/* Landing theme pass: keep this late so older landing/auth rules cannot override it. */
body.landing-page {
background:
radial-gradient(circle at top left, rgba(109, 124, 255, 0.18), transparent 32%),
radial-gradient(circle at top right, rgba(80, 180, 255, 0.12), transparent 24%),
linear-gradient(180deg, #0a0f1f 0%, #0b1020 100%);
color: var(--text);
}
body.landing-page[data-theme="light"] {
background: var(--background);
}
body.landing-page .site-header {
background: rgba(11, 16, 32, 0.86);
border-bottom-color: rgba(255, 255, 255, 0.08);
}
body.landing-page[data-theme="light"] .site-header {
background: rgba(255, 255, 255, 0.92);
border-bottom-color: rgba(229, 231, 235, 0.8);
}
body.landing-page .btn-secondary {
background: var(--card);
color: var(--text);
border-color: var(--border);
}
body.landing-page[data-theme="light"] .btn-secondary {
background: #ffffff;
color: #111827;
}
body.landing-page .mockup-card,
body.landing-page .process-step,
body.landing-page .use-case-card,
body.landing-page .reassurance-card,
body.landing-page .realtime-card,
body.landing-page .faq-card,
body.landing-page .actions-card,
body.landing-page .summary-card,
body.landing-page .conversation-card,
body.landing-page .demo-card,
body.landing-page .voice-panel,
body.landing-page .transcript-panel {
background: var(--card);
border-color: var(--border);
color: var(--text);
}
body.landing-page .voice-checklist span {
background: rgba(255, 255, 255, 0.045);
border-color: var(--border);
}
body.landing-page .voice-checklist span[data-state="ok"] {
color: #bbf7d0;
}
body.landing-page .voice-checklist span[data-state="fail"] {
color: #fecaca;
}
body.landing-page .voice-notice span {
color: var(--subtitle);
}
body.landing-page[data-theme="light"] .mockup-card,
body.landing-page[data-theme="light"] .process-step,
body.landing-page[data-theme="light"] .use-case-card,
body.landing-page[data-theme="light"] .reassurance-card,
body.landing-page[data-theme="light"] .realtime-card,
body.landing-page[data-theme="light"] .faq-card,
body.landing-page[data-theme="light"] .actions-card,
body.landing-page[data-theme="light"] .summary-card,
body.landing-page[data-theme="light"] .conversation-card,
body.landing-page[data-theme="light"] .demo-card,
body.landing-page[data-theme="light"] .voice-panel,
body.landing-page[data-theme="light"] .transcript-panel {
background: #ffffff;
color: #111827;
}
body.landing-page[data-theme="light"] .voice-checklist span {
background: var(--background-soft);
}
body.landing-page[data-theme="light"] .voice-checklist span[data-state="ok"] {
color: #15803d;
}
body.landing-page[data-theme="light"] .voice-checklist span[data-state="fail"] {
color: #dc2626;
}
@media (max-width: 720px) {
.not-found-page {
min-height: auto;
padding: 34px 10px 72px;
}
.not-found-shell {
grid-template-columns: 1fr;
}
.not-found-panel,
.not-found-guide {
border-radius: 12px;
}
.not-found-panel {
padding: 24px;
}
.not-found-panel h1 {
font-size: 2.25rem;
}
.not-found-actions {
display: grid;
grid-template-columns: 1fr;
}
.not-found-actions .btn {
width: 100%;
white-space: normal;
}
}
/* ===== CROSS-VIEWPORT RESPONSIVE BASELINE ===== */
@media (min-width: 1600px) {
:root {
--container: 1320px;
}
:where(
.dashboard-page:not(body),
.crm-page:not(body),
.sms-page:not(body),
.email-dashboard-page:not(body),
.calendar-page:not(body),
.capacity-page:not(body),
.contacts-page:not(body),
.billing-page:not(body),
.test-agent-page:not(body),
.import-page:not(body),
.admin-number-page:not(body),
.admin-platform:not(body),
.admin-batch-page:not(body)
) {
width: min(1520px, calc(100vw - 64px));
max-width: none;
margin-inline: auto;
box-sizing: border-box;
}
}
@media (min-width: 761px) and (max-width: 1180px) {
:where(.container, .landing-refresh .container) {
width: min(calc(100% - 32px), var(--container));
}
:where(
.legal-grid,
.home-use-grid,
.home-faq-grid,
.home-demo-grid,
.home-steps,
.pricing-grid,
.pricing-plans,
.billing-plans,
.contacts-grid,
.admin-number-stats
) {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
:where(
.home-split,
.home-cta__card,
.legal-hero__card,
.dashboard-control-grid,
.crm-grid,
.sms-layout,
.calendar-layout,
.test-agent-layout,
.brand-import-layout,
.import-layout
) {
grid-template-columns: 1fr !important;
}
:where(.home-hero__actions, .home-cta__actions, .marketing-inline-actions, .crm-actions, .sms-header__actions, .calendar-actions, .contacts-toolbar) {
flex-wrap: wrap;
}
}
@media (max-width: 760px) {
:where(.container, .landing-refresh .container) {
width: min(calc(100% - 20px), var(--container));
}
:where(
.legal-grid,
.home-use-grid,
.home-faq-grid,
.home-demo-grid,
.home-steps,
.pricing-grid,
.pricing-plans,
.billing-plans,
.contacts-grid,
.admin-number-stats
) {
grid-template-columns: 1fr !important;
}
:where(.home-hero__actions, .home-cta__actions, .marketing-inline-actions) {
display: grid;
grid-template-columns: 1fr;
width: 100%;
}
:where(.home-hero__actions .btn, .home-cta__actions .btn, .marketing-inline-actions .btn, .legal-card .btn) {
width: 100%;
justify-content: center;
white-space: normal;
text-align: center;
}
.landing-refresh .btn {
min-height: auto;
padding: 12px 14px;
font-size: 0.88rem;
line-height: 1.18;
overflow-wrap: anywhere;
}
:where(.legal-card, .home-use-grid article, .home-faq-grid article, .home-demo-grid article, .home-steps article, .home-cta__card) {
max-width: 100%;
}
:where(input, select, textarea) {
width: 100%;
}
table {
display: block;
width: 100%;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
}
@media (max-width: 360px) {
.landing-refresh .btn {
font-size: 0.84rem;
}
}
html.app-mobile-shell:has(body.home-gateway-page) {
height: auto !important;
min-height: 100% !important;
overflow-x: hidden !important;
overflow-y: auto !important;
}
html.app-mobile-shell body.home-gateway-page.landing-refresh:not(.app-shell) {
height: auto !important;
min-height: 100dvh !important;
padding-bottom: 0 !important;
overflow-x: hidden !important;
overflow-y: visible !important;
}
html.app-mobile-shell body.home-gateway-page.landing-refresh:not(.app-shell) main {
padding-bottom: 0 !important;
}
/* ===== RESPONSIVE APPLICATION HARDENING ===== */
@media (max-width: 1180px) {
:is(.crm-page, .sms-page, .calendar-page, .capacity-page, .contacts-page, .billing-page, .test-agent-page, .import-page, .admin-number-page, .admin-platform, .admin-batch-page, .dashboard-page) {
width: 100%;
max-width: 100%;
padding-left: max(14px, env(safe-area-inset-left));
padding-right: max(14px, env(safe-area-inset-right));
}
:is(.billing-header, .billing-summary, .calendar-header, .calendar-layout, .contacts-grid, .test-agent-layout, .brand-import-layout, .import-layout, .crm-grid, .crm-layout, .sms-layout) {
grid-template-columns: 1fr !important;
}
:is(.billing-header__aside, .calendar-actions, .sms-header__actions, .crm-header__status) {
justify-items: start;
justify-content: flex-start;
}
}
@media (max-width: 860px) {
html,
body {
max-width: 100%;
overflow-x: clip;
overflow-y: auto;
}
:is(.site-header, main, .container, .nav, .dashboard-page, .crm-page, .sms-page, .calendar-page, .capacity-page, .contacts-page, .billing-page, .test-agent-page, .import-page, .admin-number-page, .admin-platform, .admin-batch-page) {
min-width: 0;
}
.nav {
flex-wrap: wrap;
align-items: center;
gap: 10px;
}
:is(.crm-header, .sms-header, .calendar-header, .capacity-header, .contacts-header, .billing-header, .test-agent-topbar, .admin-number-hero, .dashboard-hero) {
display: grid !important;
grid-template-columns: 1fr !important;
align-items: stretch !important;
gap: 12px !important;
}
:is(.crm-header, .crm-section, .crm-list, .crm-row, .sms-panel, .calendar-section, .capacity-panel, .capacity-header, .contacts-card, .contact-editor, .contacts-quick, .billing-summary, .billing-plan, .billing-card, .test-card, .test-readiness-card, .admin-number-panel, .admin-number-card) {
min-width: 0;
max-width: 100%;
}
:is(.crm-subnav, .menu, .calendar-toolbar, .contacts-toolbar, .billing-cycle, .wizard-tabs, .admin-number-toolbar) {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
:is(.crm-subnav, .menu, .calendar-toolbar, .contacts-toolbar, .billing-cycle, .wizard-tabs, .admin-number-toolbar)::-webkit-scrollbar {
display: none;
}
:is(.crm-subnav__item, .menu a, .calendar-toolbar > *, .billing-cycle label, .wizard-tab) {
flex: 0 0 auto;
}
.menu {
order: 3;
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(42px, 1fr));
justify-items: center;
width: 100%;
max-width: 100%;
overflow: visible !important;
}
.menu a {
width: 42px;
min-width: 0;
}
.nav-actions {
order: 2;
width: 100%;
justify-content: flex-start;
flex-wrap: wrap;
overflow: hidden;
}
.crm-empty,
.crm-empty p {
width: 100%;
max-width: 100%;
overflow-wrap: anywhere;
}
.crm-daily-plan__content {
display: grid !important;
grid-template-columns: auto minmax(0, 1fr) !important;
align-items: start !important;
column-gap: 14px !important;
}
.crm-daily-plan__content .crm-icon-button,
.crm-daily-plan__content .crm-button.crm-icon-button,
.crm-daily-plan__content .crm-button-secondary.crm-icon-button {
width: 42px !important;
min-width: 42px !important;
max-width: 42px !important;
height: 42px !important;
min-height: 42px !important;
justify-self: start !important;
align-self: start !important;
}
.crm-daily-plan__content p {
width: 100%;
max-width: 100%;
min-width: 0;
}
:is(.crm-actions, .crm-row__actions, .calendar-actions, .calendar-section__head, .capacity-row, .contacts-toolbar, .contact-actions, .billing-summary__line, .billing-usage-alert, .test-agent-topbar, .admin-number-actions, .admin-agent-actions) {
flex-wrap: wrap;
}
:is(.sms-layout, .sms-thread-layout, .sms-conversation, .calendar-layout, .contacts-grid, .capacity-form--inline, .billing-usage, .billing-plans, .billing-comparison, .billing-feature-grid, .test-agent-layout, .test-readiness-grid, .admin-number-stats, .admin-agent-row, .admin-agent-config-grid) {
grid-template-columns: 1fr !important;
}
:is(input, select, textarea, button, .btn, .btn-nav, .btn-secondary, .crm-button, .sms-button, .calendar-button, .capacity-icon-button, .contacts-icon-button, .billing-button, .wizard-button, .admin-number-action-button) {
max-width: 100%;
}
.sms-broadcast__panel {
position: fixed !important;
left: 14px !important;
right: 14px !important;
top: 78px !important;
width: auto !important;
max-height: calc(100vh - 104px) !important;
overflow: auto !important;
}
}
@media (max-width: 640px) {
.crm-page:not(body),
.sms-page:not(body),
.email-dashboard-page:not(body),
.calendar-page:not(body),
.capacity-page:not(body),
.contacts-page:not(body),
.billing-page:not(body),
.test-agent-page:not(body),
.import-page:not(body),
.admin-number-page:not(body),
.admin-platform:not(body),
.dashboard-page:not(body) {
padding-left: max(10px, env(safe-area-inset-left)) !important;
padding-right: max(10px, env(safe-area-inset-right)) !important;
padding-bottom: calc(88px + env(safe-area-inset-bottom)) !important;
}
.crm-header,
.crm-section,
.crm-list,
.crm-row,
.crm-daily-plan,
.sms-header,
.sms-panel,
.calendar-header,
.calendar-section,
.capacity-header,
.capacity-panel,
.contacts-header,
.contacts-card,
.contact-editor,
.contacts-quick,
.billing-summary,
.billing-plan,
.billing-card,
.test-card,
.test-readiness-card,
.admin-number-hero,
.admin-number-panel,
.admin-number-card {
border-radius: 8px !important;
padding: 12px !important;
}
.sms-page {
padding-bottom: calc(190px + env(safe-area-inset-bottom)) !important;
}
.sms-device {
border-radius: 58px !important;
padding: 10px 9px 20px !important;
}
.crm-header {
width: 100%;
box-sizing: border-box;
overflow: hidden;
}
.crm-header__status {
display: grid !important;
grid-template-columns: repeat(2, 40px) minmax(0, 1fr);
justify-content: stretch !important;
gap: 8px !important;
}
.twilio-status-badge {
width: 100%;
max-width: 100%;
white-space: normal;
overflow-wrap: anywhere;
}
.crm-subnav {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr));
overflow: visible !important;
gap: 8px !important;
}
.crm-subnav__item {
width: 100%;
min-width: 0 !important;
justify-content: center;
}
.calendar-weekdays,
.calendar-week {
width: 100% !important;
min-width: 0 !important;
grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
gap: 4px !important;
}
.calendar-day {
min-height: 86px !important;
padding: 7px !important;
}
.sms-message,
.transcript-item {
max-width: 94% !important;
}
.crm-button,
.sms-button,
.calendar-button,
.billing-button,
.wizard-button,
.test-agent-page .btn-ui,
.auth-card .btn,
.auth-card .btn-nav {
width: 100%;
justify-content: center;
white-space: normal;
}
.admin-agent-config form,
.sms-broadcast__panel {
position: fixed !important;
left: 10px !important;
right: 10px !important;
top: 76px !important;
width: auto !important;
max-height: calc(100vh - 96px) !important;
overflow: auto !important;
}
.call-notification-toast__link,
.launch-readiness__action,
.test-readiness-action,
.billing-back {
min-height: 32px !important;
display: inline-flex !important;
align-items: center;
}
.call-notification-toast__close {
width: 34px !important;
height: 34px !important;
}
.admin-number-filter input,
.admin-number-filter select {
min-height: 38px !important;
}
}
@media (max-width: 390px) {
.theme-toggle {
width: 96px !important;
min-width: 96px !important;
}
.menu {
grid-template-columns: repeat(auto-fit, minmax(38px, 1fr));
}
.menu a {
width: 38px;
}
}
/* Public home refresh */
body.landing-refresh {
position: relative;
background:
radial-gradient(circle at 12% 8%, rgba(56, 189, 248, 0.20), transparent 26%),
radial-gradient(circle at 82% 4%, rgba(14, 165, 233, 0.15), transparent 24%),
radial-gradient(circle at 52% 24%, rgba(59, 130, 246, 0.10), transparent 28%),
linear-gradient(180deg, #050815 0%, #08101f 18%, #081426 52%, #0b1628 100%);
}
body.landing-refresh[data-theme="light"] {
background:
radial-gradient(circle at 10% 4%, rgba(186, 230, 253, 0.84), transparent 26%),
radial-gradient(circle at 88% 0%, rgba(219, 234, 254, 0.92), transparent 28%),
radial-gradient(circle at 48% 22%, rgba(224, 242, 254, 0.72), transparent 30%),
#f5f9ff;
}
body.landing-refresh :is(h1, h2, h3, .home-eyebrow, .legal-updated, .logo-brand__word, .site-footer__word) {
font-family: "Space Grotesk", "Inter", sans-serif;
}
body.landing-refresh .site-header,
body.landing-refresh .site-main,
body.landing-refresh .site-footer {
position: relative;
z-index: 1;
}
body.landing-refresh .site-main {
isolation: isolate;
}
.public-atmosphere {
position: fixed;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
}
.public-atmosphere__orb,
.public-atmosphere__grid,
.public-atmosphere__badge,
.public-atmosphere__signal {
position: absolute;
}
.public-atmosphere__orb {
border-radius: 999px;
filter: blur(12px);
opacity: 0.9;
animation: publicDrift 22s ease-in-out infinite;
}
.public-atmosphere__orb--one {
top: 10%;
left: -5%;
width: 26rem;
height: 26rem;
background: radial-gradient(circle, rgba(56, 189, 248, 0.24), transparent 64%);
}
.public-atmosphere__orb--two {
top: 12%;
right: -4%;
width: 22rem;
height: 22rem;
background: radial-gradient(circle, rgba(99, 102, 241, 0.18), transparent 64%);
animation-delay: -7s;
}
.public-atmosphere__orb--three {
bottom: 8%;
left: 22%;
width: 18rem;
height: 18rem;
background: radial-gradient(circle, rgba(16, 185, 129, 0.12), transparent 66%);
animation-delay: -12s;
}
.public-atmosphere__grid {
inset: 0;
background-image:
linear-gradient(rgba(148, 163, 184, 0.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(148, 163, 184, 0.06) 1px, transparent 1px);
background-size: 82px 82px;
mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 0.88), transparent 82%);
opacity: 0.42;
}
.public-atmosphere__badge {
display: grid;
gap: 4px;
min-width: 190px;
max-width: 220px;
padding: 12px 14px;
border: 1px solid rgba(148, 163, 184, 0.14);
border-radius: 18px;
background: rgba(7, 13, 24, 0.62);
backdrop-filter: blur(16px);
box-shadow: 0 20px 48px rgba(2, 6, 23, 0.22);
animation: publicBadgeFloat 18s ease-in-out infinite;
}
.public-atmosphere__badge strong {
color: #f8fafc;
font-size: 0.9rem;
line-height: 1.1;
}
.public-atmosphere__badge span {
color: rgba(226, 232, 240, 0.78);
font-size: 0.78rem;
font-weight: 700;
line-height: 1.35;
}
body.landing-refresh[data-theme="light"] .public-atmosphere__badge {
background: rgba(255, 255, 255, 0.78);
border-color: rgba(37, 99, 235, 0.12);
box-shadow: 0 20px 42px rgba(15, 23, 42, 0.10);
}
body.landing-refresh[data-theme="light"] .public-atmosphere__badge strong {
color: #0f172a;
}
body.landing-refresh[data-theme="light"] .public-atmosphere__badge span {
color: #475569;
}
.public-atmosphere__badge--incoming {
top: 16%;
left: 4%;
}
.public-atmosphere__badge--sms {
top: 54%;
right: 6%;
animation-delay: -6s;
}
.public-atmosphere__badge--transcript {
bottom: 10%;
left: 8%;
animation-delay: -10s;
}
body.landing-refresh:not(.home-page) .public-atmosphere__badge {
display: none;
}
.public-atmosphere__signal {
display: grid;
grid-auto-flow: column;
align-items: end;
gap: 10px;
height: 90px;
opacity: 0.55;
}
.public-atmosphere__signal span {
display: block;
width: 7px;
border-radius: 999px;
background: linear-gradient(180deg, rgba(125, 211, 252, 0.1), rgba(59, 130, 246, 0.95));
animation: publicSignal 1.8s ease-in-out infinite;
}
.public-atmosphere__signal span:nth-child(2) { animation-delay: -0.22s; }
.public-atmosphere__signal span:nth-child(3) { animation-delay: -0.44s; }
.public-atmosphere__signal span:nth-child(4) { animation-delay: -0.66s; }
.public-atmosphere__signal--left {
top: 32%;
left: 6%;
}
.public-atmosphere__signal--right {
right: 7%;
bottom: 20%;
}
.landing-refresh .container {
width: min(calc(100% - 32px), 1180px);
}
.landing-refresh :is(.legal-hero, .home-hero, .home-section, .home-cta) {
position: relative;
}
.landing-refresh :is(.legal-hero, .home-hero, .home-section, .home-cta)::before {
content: "";
position: absolute;
inset: 0 auto auto 0;
width: 180px;
height: 1px;
background: linear-gradient(90deg, rgba(125, 211, 252, 0.72), transparent);
opacity: 0.34;
}
.landing-refresh :is(.legal-card, .home-use-grid article, .home-faq-grid article, .home-demo-grid article, .home-realtime-grid article, .home-control-list div, .home-summary-card, .home-phone__screen, .home-steps article, .home-strip__grid div) {
position: relative;
overflow: hidden;
transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease, background-color 220ms ease;
}
.landing-refresh :is(.legal-card, .home-use-grid article, .home-faq-grid article, .home-demo-grid article, .home-realtime-grid article, .home-control-list div, .home-summary-card, .home-phone__screen, .home-steps article, .home-strip__grid div)::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.12) 50%, transparent 100%);
opacity: 0;
transform: translateX(-110%);
transition: opacity 220ms ease, transform 440ms ease;
}
.landing-refresh :is(.legal-card, .home-use-grid article, .home-faq-grid article, .home-demo-grid article, .home-realtime-grid article, .home-control-list div, .home-summary-card, .home-phone__screen, .home-steps article, .home-strip__grid div):hover {
transform: translateY(-4px);
border-color: rgba(125, 211, 252, 0.28);
box-shadow: 0 22px 56px rgba(2, 6, 23, 0.18);
}
.landing-refresh :is(.legal-card, .home-use-grid article, .home-faq-grid article, .home-demo-grid article, .home-realtime-grid article, .home-control-list div, .home-summary-card, .home-phone__screen, .home-steps article, .home-strip__grid div):hover::after {
opacity: 1;
transform: translateX(110%);
}
.landing-refresh .btn {
position: relative;
overflow: hidden;
transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.landing-refresh .btn:hover,
.landing-refresh .btn:focus-visible {
transform: translateY(-2px);
box-shadow: 0 14px 32px rgba(14, 165, 233, 0.18);
}
.landing-refresh .btn::after {
content: "";
position: absolute;
inset: 1px;
border-radius: inherit;
background: linear-gradient(120deg, transparent 10%, rgba(255, 255, 255, 0.18), transparent 70%);
opacity: 0;
transform: translateX(-110%);
}
.landing-refresh .btn:hover::after,
.landing-refresh .btn:focus-visible::after {
opacity: 1;
transform: translateX(110%);
transition: transform 540ms ease, opacity 220ms ease;
}
.home-hero__grid,
.home-split,
.home-control-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(360px, 0.82fr);
gap: clamp(24px, 5vw, 58px);
align-items: center;
}
.home-eyebrow {
display: inline-flex;
width: fit-content;
align-items: center;
min-height: 34px;
margin-bottom: 14px;
padding: 0 12px;
border: 1px solid rgba(125, 211, 252, 0.22);
border-radius: 999px;
background: rgba(14, 165, 233, 0.1);
color: #bae6fd;
font-size: 0.78rem;
font-weight: 900;
letter-spacing: 0.02em;
text-transform: uppercase;
}
body.landing-refresh[data-theme="light"] .home-eyebrow {
background: rgba(37, 99, 235, 0.08);
border-color: rgba(37, 99, 235, 0.14);
color: #1d4ed8;
}
.home-hero h1,
.home-section__head h2,
.home-cta h2 {
letter-spacing: 0;
}
.home-hero__actions,
.home-cta__actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 30px;
margin-bottom: 20px;
}
.home-mobile-sticky-cta {
display: none;
}
.home-mobile-sticky-cta__eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
color: #7dd3fc;
font-size: 0.72rem;
font-weight: 900;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.home-mobile-sticky-cta__actions {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.home-mobile-sticky-cta .btn {
width: 100%;
justify-content: center;
}
.home-hero__proof {
display: flex;
flex-wrap: wrap;
gap: 9px;
margin-top: 22px;
}
.home-hero__proof span {
display: inline-flex;
align-items: center;
min-height: 34px;
padding: 0 11px;
border: 1px solid rgba(255, 255, 255, 0.09);
border-radius: 999px;
background: rgba(255, 255, 255, 0.055);
color: rgba(226, 232, 240, 0.86);
font-size: 0.9rem;
font-weight: 700;
}
body.landing-refresh[data-theme="light"] .home-hero__proof span {
background: #ffffff;
border-color: rgba(15, 23, 42, 0.08);
color: #475569;
}
.home-call-card__top,
.home-phone__statusbar,
.home-summary-card__top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
body.landing-refresh[data-theme="light"] :is(.home-mobile-livefeed__panel, .home-mobile-livefeed__line) {
color: #334155;
}
.home-control-list,
.home-summary-card dl {
display: grid;
gap: 10px;
}
.home-call-rail__card,
.home-control-list div,
.home-realtime-grid article,
.home-demo-grid article,
.home-use-grid article,
.home-faq-grid article,
.home-summary-card,
.home-phone__screen {
border: 1px solid rgba(148, 163, 184, 0.14);
border-radius: 8px;
background: rgba(255, 255, 255, 0.055);
}
body.landing-refresh[data-theme="light"] :is(.home-call-rail__card, .home-control-list div, .home-realtime-grid article, .home-demo-grid article, .home-use-grid article, .home-faq-grid article, .home-summary-card, .home-phone__screen) {
background: rgba(255, 255, 255, 0.92);
border-color: rgba(15, 23, 42, 0.08);
}
.home-use-grid span,
.home-summary-card__top span,
.home-demo-grid span {
color: var(--secondary);
font-size: 0.76rem;
font-weight: 900;
text-transform: uppercase;
}
.home-section {
padding: clamp(54px, 8vw, 92px) 0;
}
.home-section--quiet {
background: rgba(18, 25, 51, 0.54);
}
body.landing-refresh[data-theme="light"] .home-section--quiet {
background: #eef6ff;
}
.home-section__head {
max-width: 760px;
margin-bottom: 28px;
}
.home-section__head--center {
margin-inline: auto;
text-align: center;
}
.home-section__head h2,
.home-cta h2 {
margin-bottom: 12px;
font-size: clamp(2rem, 4vw, 3.4rem);
line-height: 1;
}
.home-section__head p,
.home-cta p {
color: var(--subtitle);
font-size: 1.03rem;
}
.home-section__head code,
.home-use-grid code,
.home-faq-grid code {
display: inline-flex;
max-width: 100%;
padding: 2px 6px;
border: 1px solid rgba(96, 165, 250, 0.22);
border-radius: 6px;
background: rgba(15, 23, 42, 0.48);
color: #dbeafe;
font-size: 0.9em;
font-weight: 750;
line-height: 1.35;
vertical-align: baseline;
word-break: break-word;
}
.home-steps,
.home-use-grid,
.home-faq-grid,
.home-demo-grid,
.home-realtime-grid {
display: grid;
gap: 12px;
}
.home-steps {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.home-steps article {
display: grid;
align-content: start;
min-height: 250px;
padding: 18px;
border-left: 1px solid rgba(148, 163, 184, 0.18);
}
.home-steps article span {
margin-bottom: 42px;
color: var(--secondary);
font-weight: 900;
}
.home-steps--process {
position: relative;
gap: 16px;
margin-top: 30px;
}
.home-steps--process::before {
content: "";
position: absolute;
left: 40px;
right: 40px;
top: 49px;
height: 1px;
background: linear-gradient(90deg, rgba(94, 234, 212, 0), rgba(94, 234, 212, 0.42), rgba(96, 165, 250, 0.28), rgba(94, 234, 212, 0));
pointer-events: none;
}
.home-steps--process article {
position: relative;
min-height: 238px;
padding: 18px;
overflow: hidden;
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 8px;
background:
linear-gradient(145deg, rgba(94, 234, 212, 0.095), rgba(96, 165, 250, 0.045) 42%, rgba(15, 23, 42, 0.18)),
rgba(255, 255, 255, 0.035);
box-shadow: 0 18px 48px rgba(0, 0, 0, 0.12);
}
.home-steps--process article::before {
content: "";
position: absolute;
inset: 0 0 auto;
height: 3px;
background: linear-gradient(90deg, var(--secondary), rgba(96, 165, 250, 0.72));
opacity: 0.75;
}
.home-steps--process article::after {
content: "";
position: absolute;
right: -44px;
top: -44px;
width: 112px;
height: 112px;
border-radius: 50%;
background: rgba(94, 234, 212, 0.075);
}
.home-steps--process article span {
display: inline-grid;
width: 42px;
height: 42px;
margin-bottom: 58px;
place-items: center;
border: 1px solid rgba(94, 234, 212, 0.34);
border-radius: 8px;
background: rgba(7, 13, 28, 0.54);
color: #7df8e7;
font-size: 0.86rem;
letter-spacing: 0.02em;
box-shadow: 0 14px 30px rgba(45, 212, 191, 0.12);
}
.home-steps--process h3 {
max-width: 17ch;
}
.home-steps--process p {
max-width: 28ch;
line-height: 1.56;
}
body.landing-refresh[data-theme="light"] .home-steps--process::before {
background: linear-gradient(90deg, rgba(49, 94, 251, 0), rgba(49, 94, 251, 0.26), rgba(20, 184, 166, 0.24), rgba(49, 94, 251, 0));
}
body.landing-refresh[data-theme="light"] .home-steps--process article {
border-color: rgba(15, 23, 42, 0.08);
background:
linear-gradient(145deg, rgba(49, 94, 251, 0.075), rgba(20, 184, 166, 0.05) 45%, rgba(255, 255, 255, 0.92)),
#ffffff;
box-shadow: 0 20px 46px rgba(15, 23, 42, 0.08);
}
body.landing-refresh[data-theme="light"] .home-steps--process article span {
border-color: rgba(49, 94, 251, 0.18);
background: #eef4ff;
color: #315efb;
}
.home-steps h3,
.home-use-grid h3,
.home-faq-grid h3,
.home-demo-grid h3 {
margin-bottom: 8px;
font-size: 1.08rem;
line-height: 1.2;
}
.home-steps p,
.home-use-grid p,
.home-faq-grid p,
.home-demo-grid p,
.home-realtime-grid span,
.home-control-list span {
color: var(--subtitle);
}
.home-section--split {
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015));
}
body.landing-refresh[data-theme="light"] .home-section--split {
background: #ffffff;
}
.home-phone {
display: grid;
justify-items: center;
}
.home-phone__screen {
width: min(100%, 430px);
display: grid;
gap: 14px;
padding: 18px;
box-shadow: var(--shadow-soft);
}
.home-phone__statusbar {
padding-bottom: 12px;
border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}
.home-phone__statusmeta {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.home-phone__statusmeta strong,
.home-phone__contact strong,
.home-summary-card__contact strong {
color: var(--text);
}
.home-phone__statusmeta small,
.home-phone__contact span,
.home-summary-card__contact span {
color: var(--subtitle);
}
.home-phone__statusbar time {
color: #a5f3fc;
font-variant-numeric: tabular-nums;
font-weight: 900;
letter-spacing: 0.06em;
}
.home-phone__contact,
.home-summary-card__contact {
display: grid;
gap: 4px;
}
.home-phone__contact strong,
.home-summary-card__contact strong {
font-size: 1.04rem;
line-height: 1.25;
}
.home-phone__contact small,
.home-summary-card__contact small,
.home-summary-card__timeline p {
color: var(--subtitle);
font-size: 0.86rem;
line-height: 1.45;
}
.home-phone__meter {
display: grid;
grid-template-columns: repeat(8, 1fr);
align-items: end;
gap: 6px;
height: 52px;
padding: 12px 14px;
border: 1px solid rgba(148, 163, 184, 0.12);
border-radius: 20px;
background: rgba(255, 255, 255, 0.045);
}
.home-phone__meter span {
display: block;
border-radius: 999px;
background: linear-gradient(180deg, #67e8f9, #818cf8);
animation: homeWavePulse 1.45s ease-in-out infinite;
}
.home-phone__meter span:nth-child(1) { height: 28%; }
.home-phone__meter span:nth-child(2) { height: 72%; animation-delay: -0.16s; }
.home-phone__meter span:nth-child(3) { height: 46%; animation-delay: -0.32s; }
.home-phone__meter span:nth-child(4) { height: 90%; animation-delay: -0.48s; }
.home-phone__meter span:nth-child(5) { height: 58%; animation-delay: -0.64s; }
.home-phone__meter span:nth-child(6) { height: 82%; animation-delay: -0.80s; }
.home-phone__meter span:nth-child(7) { height: 40%; animation-delay: -0.96s; }
.home-phone__meter span:nth-child(8) { height: 66%; animation-delay: -1.12s; }
.home-phone__transcript,
.home-summary-card__timeline {
display: grid;
gap: 10px;
}
.home-phone__entry {
display: grid;
gap: 6px;
padding: 12px 14px;
border-radius: 18px;
opacity: 0;
transform: translateY(8px);
will-change: opacity, transform;
animation-duration: 9s;
animation-fill-mode: both;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
.home-phone__entry:nth-child(1) {
animation-name: phoneEntryClientFirst;
}
.home-phone__entry:nth-child(2) {
animation-name: phoneEntryAgent;
}
.home-phone__entry:nth-child(3) {
animation-name: phoneEntryClientSecond;
}
.home-phone__entry--client {
background: rgba(255, 255, 255, 0.07);
}
.home-phone__entry--agent {
margin-left: 22px;
background: rgba(96, 165, 250, 0.16);
}
.home-phone__stamp,
.home-summary-card__timeline span,
.home-summary-card__footer span {
color: #93c5fd;
font-size: 0.72rem;
font-weight: 900;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.home-phone__entry p {
margin: 0;
line-height: 1.48;
}
.home-phone__meta,
.home-summary-card__footer {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
.home-phone__meta div,
.home-summary-card__footer div {
display: grid;
gap: 5px;
padding: 12px;
border: 1px solid rgba(148, 163, 184, 0.12);
border-radius: 18px;
background: rgba(255, 255, 255, 0.04);
}
.home-phone__meta span,
.home-summary-card__footer span {
color: #7dd3fc;
font-size: 0.7rem;
font-weight: 900;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.home-phone__meta strong,
.home-summary-card__footer strong {
font-size: 0.86rem;
line-height: 1.36;
}
.home-phone__result {
display: grid;
gap: 6px;
padding: 14px;
border-radius: 22px;
background: rgba(96, 165, 250, 0.14);
}
.home-phone__result span {
color: #bfdbfe;
font-size: 0.8rem;
font-weight: 900;
text-transform: uppercase;
}
body.landing-refresh[data-theme="light"] .home-phone__result span {
color: #1d4ed8;
}
.home-phone__result strong,
.home-summary-card__timeline strong {
color: var(--text);
line-height: 1.32;
}
.home-phone__result small {
color: var(--subtitle);
font-size: 0.82rem;
line-height: 1.42;
}
.home-use-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.home-use-grid article,
.home-faq-grid article,
.home-demo-grid article,
.home-realtime-grid article {
display: grid;
align-content: start;
gap: 10px;
padding: 18px;
}
.home-use-grid .btn,
.home-faq-grid .btn,
.home-realtime-grid .btn {
width: fit-content;
margin-top: auto;
}
.home-section--control-realtime {
padding: clamp(68px, 9vw, 112px) 0 clamp(78px, 10vw, 126px);
}
.home-control-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.home-control-list div {
display: grid;
gap: 5px;
padding: 16px;
}
.home-split--reverse {
grid-template-columns: minmax(360px, 0.82fr) minmax(0, 1fr);
}
.home-summary-card {
display: grid;
gap: 14px;
padding: 22px;
}
.home-summary-card__top strong {
font-size: 0.9rem;
line-height: 1.3;
}
.home-summary-card__progress {
position: relative;
overflow: hidden;
height: 10px;
border-radius: 999px;
background: rgba(148, 163, 184, 0.14);
}
.home-summary-card__progress span {
position: absolute;
inset: 0 auto 0 0;
width: 58%;
border-radius: inherit;
background: linear-gradient(90deg, #38bdf8, #818cf8, #34d399);
animation: summarySweep 3.8s ease-in-out infinite;
}
.home-summary-card h3 {
margin: 0;
}
.home-summary-card__timeline {
position: relative;
padding-left: 18px;
}
.home-summary-card__timeline::before {
content: "";
position: absolute;
top: 6px;
bottom: 6px;
left: 4px;
width: 1px;
background: linear-gradient(180deg, rgba(56, 189, 248, 0.35), rgba(129, 140, 248, 0.18));
}
.home-summary-card__timeline article {
position: relative;
display: grid;
gap: 4px;
padding: 0 0 0 18px;
animation: publicBadgeFloat 12s ease-in-out infinite;
}
.home-summary-card__timeline article:nth-child(2) {
animation-delay: -2s;
}
.home-summary-card__timeline article:nth-child(3) {
animation-delay: -4s;
}
.home-summary-card__timeline article:nth-child(4) {
animation-delay: -6s;
}
.home-summary-card__timeline article::before {
content: "";
position: absolute;
top: 8px;
left: -1px;
width: 10px;
height: 10px;
border-radius: 999px;
background: #38bdf8;
box-shadow: 0 0 0 6px rgba(56, 189, 248, 0.14);
animation: publicPulseDot 1.8s ease-in-out infinite;
}
.home-faq-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.home-cta {
padding: 64px 0;
}
.home-cta__card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: clamp(22px, 4vw, 36px);
border: 1px solid rgba(125, 211, 252, 0.2);
border-radius: 8px;
background:
linear-gradient(135deg, rgba(59, 130, 246, 0.16), rgba(129, 140, 248, 0.12)),
rgba(255, 255, 255, 0.055);
box-shadow: var(--shadow-soft);
}
body.landing-refresh[data-theme="light"] .home-cta__card {
background:
linear-gradient(135deg, rgba(224, 242, 254, 0.92), rgba(238, 242, 255, 0.95)),
#ffffff;
border-color: rgba(37, 99, 235, 0.12);
}
.home-demo-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.home-demo-grid--compact {
grid-template-columns: repeat(2, minmax(280px, 360px));
justify-content: center;
max-width: 860px;
margin: 0 auto;
}
.home-demo-grid article {
display: grid;
align-content: start;
gap: 10px;
}
.home-demo-grid--compact article {
min-height: 220px;
padding: 22px;
}
.home-demo-grid .btn {
width: fit-content;
margin-top: 8px;
}
.home-use-grid {
gap: 18px;
}
.home-demo-grid--compact {
grid-template-columns: repeat(2, minmax(280px, 420px));
gap: 18px;
max-width: 920px;
}
.home-demo-grid--compact article {
min-height: 240px;
padding: 24px;
}
.home-cta__card {
align-items: center;
gap: 30px;
border-radius: 32px;
}
.home-cta__card > div:first-child {
max-width: 640px;
}
.home-cta__actions {
margin: 0;
}
.marketing-inline-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 20px;
}
.marketing-inline-actions--center {
justify-content: center;
}
.comparison-table-wrap {
overflow-x: auto;
margin-top: 26px;
border: 1px solid rgba(148, 163, 184, 0.14);
border-radius: 8px;
background: rgba(255, 255, 255, 0.055);
box-shadow: 0 22px 54px rgba(2, 6, 23, 0.18);
}
body.landing-refresh[data-theme="light"] .comparison-table-wrap {
background: rgba(255, 255, 255, 0.96);
border-color: rgba(15, 23, 42, 0.08);
box-shadow: 0 18px 44px rgba(15, 23, 42, 0.10);
}
.comparison-impact-grid {
display: grid;
grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.1fr) minmax(0, 0.95fr);
gap: 14px;
margin-top: 26px;
}
.comparison-impact-card,
.comparison-decision-strip article {
border: 1px solid rgba(148, 163, 184, 0.14);
border-radius: 8px;
background: rgba(255, 255, 255, 0.055);
box-shadow: 0 18px 44px rgba(2, 6, 23, 0.14);
}
.comparison-impact-card {
display: grid;
align-content: start;
gap: 12px;
padding: 18px;
}
.comparison-impact-card--risk {
background: linear-gradient(135deg, rgba(248, 113, 113, 0.11), transparent 58%), rgba(255, 255, 255, 0.055);
}
.comparison-impact-card--decroche {
border-color: rgba(53, 208, 127, 0.34);
background: linear-gradient(135deg, rgba(53, 208, 127, 0.14), rgba(94, 168, 255, 0.09)), rgba(255, 255, 255, 0.065);
}
.comparison-impact-card--money {
border-color: rgba(94, 168, 255, 0.28);
background: linear-gradient(135deg, rgba(94, 168, 255, 0.14), transparent 62%), rgba(255, 255, 255, 0.055);
}
.comparison-impact-card > span,
.comparison-decision-strip span {
color: var(--accent);
font-size: 0.75rem;
font-weight: 950;
text-transform: uppercase;
}
.comparison-impact-card h3 {
margin: 0;
color: var(--text);
font-size: 1.08rem;
line-height: 1.22;
}
.comparison-impact-card p,
.comparison-impact-card li,
.comparison-decision-strip p {
color: var(--subtitle);
line-height: 1.45;
}
.comparison-impact-card p,
.comparison-decision-strip p {
margin: 0;
}
.comparison-impact-card ul {
display: grid;
gap: 7px;
margin: 0;
padding-left: 18px;
}
.comparison-gain-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.comparison-gain-list strong {
display: inline-flex;
align-items: center;
min-height: 38px;
padding: 8px 10px;
border: 1px solid rgba(53, 208, 127, 0.22);
border-radius: 8px;
background: rgba(53, 208, 127, 0.1);
color: var(--text);
font-size: 0.82rem;
line-height: 1.2;
}
.comparison-formula {
display: grid;
gap: 4px;
padding: 12px;
border: 1px solid rgba(94, 168, 255, 0.26);
border-radius: 8px;
background: rgba(94, 168, 255, 0.11);
}
.comparison-formula strong {
color: var(--text);
font-size: 1.45rem;
line-height: 1;
}
.comparison-formula small {
color: var(--subtitle);
line-height: 1.35;
}
.comparison-decision-strip {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 10px;
margin-top: 14px;
}
.comparison-decision-strip article {
display: grid;
gap: 6px;
padding: 14px;
}
.comparison-decision-strip strong {
color: var(--text);
font-size: 0.98rem;
line-height: 1.2;
}
.comparison-decision-strip article.is-highlighted {
border-color: rgba(53, 208, 127, 0.36);
background: linear-gradient(135deg, rgba(53, 208, 127, 0.16), rgba(94, 168, 255, 0.10));
}
body.landing-refresh[data-theme="light"] .comparison-impact-card,
body.landing-refresh[data-theme="light"] .comparison-decision-strip article {
background-color: rgba(255, 255, 255, 0.96);
border-color: rgba(15, 23, 42, 0.08);
box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08);
}
.comparison-table {
width: 100%;
min-width: 860px;
border-collapse: collapse;
}
.comparison-table th,
.comparison-table td {
padding: 14px 16px;
border-bottom: 1px solid rgba(148, 163, 184, 0.12);
text-align: left;
vertical-align: top;
line-height: 1.45;
}
.comparison-table thead th {
color: #f8fafc;
font-size: 0.88rem;
font-weight: 900;
letter-spacing: 0.01em;
background: rgba(15, 23, 42, 0.72);
}
.comparison-table tbody th {
color: var(--text);
font-size: 0.94rem;
font-weight: 850;
background: rgba(255, 255, 255, 0.04);
}
.comparison-table td {
color: var(--subtitle);
font-size: 0.94rem;
}
.comparison-table tbody tr:last-child th,
.comparison-table tbody tr:last-child td {
border-bottom: 0;
}
body.landing-refresh[data-theme="light"] .comparison-table thead th {
color: #0f172a;
background: #e2e8f0;
}
body.landing-refresh[data-theme="light"] .comparison-table tbody th {
background: #f8fafc;
}
.comparison-table thead th:last-child,
.comparison-table tbody td:last-child {
background: rgba(53, 208, 127, 0.08);
color: var(--text);
font-weight: 850;
}
body.landing-refresh[data-theme="light"] .comparison-table thead th:last-child,
body.landing-refresh[data-theme="light"] .comparison-table tbody td:last-child {
background: #ecfdf5;
}
.guide-page .comparison-table-wrap + .home-use-grid {
margin-top: 24px;
}
@media (max-width: 640px) {
body.comparison-page .comparison-table-wrap {
overflow: visible;
border: 0;
background: transparent;
box-shadow: none;
}
body.comparison-page .comparison-table {
display: block;
width: 100%;
min-width: 0;
border-collapse: separate;
}
body.comparison-page .comparison-table thead {
display: none;
}
body.comparison-page .comparison-table tbody,
body.comparison-page .comparison-table tr,
body.comparison-page .comparison-table th,
body.comparison-page .comparison-table td {
display: block;
width: 100%;
}
body.comparison-page .comparison-table tr {
margin-bottom: 10px;
padding: 14px;
border: 1px solid rgba(148, 163, 184, 0.16);
border-radius: 8px;
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025)),
rgba(15, 23, 42, 0.74);
box-shadow: 0 16px 34px rgba(2, 6, 23, 0.16);
}
body.comparison-page .comparison-table tbody th {
margin: 0 0 8px;
padding: 0;
border: 0;
background: transparent;
color: var(--text);
font-size: 0.98rem;
line-height: 1.18;
}
body.comparison-page .comparison-table td {
position: relative;
min-height: 34px;
padding: 8px 0 8px 132px;
border: 0;
background: transparent;
color: var(--subtitle);
font-size: 0.88rem;
line-height: 1.34;
overflow-wrap: anywhere;
}
body.comparison-page .comparison-table td::before {
position: absolute;
left: 0;
top: 8px;
width: 118px;
color: #79d8ff;
font-size: 0.68rem;
font-weight: 950;
letter-spacing: 0.03em;
line-height: 1.2;
text-transform: uppercase;
}
body.comparison-page .comparison-table td:nth-child(2)::before { content: "Messagerie"; }
body.comparison-page .comparison-table td:nth-child(3)::before { content: "SVI"; }
body.comparison-page .comparison-table td:nth-child(4)::before { content: "Callbot"; }
body.comparison-page .comparison-table td:nth-child(5)::before { content: "Standard"; }
body.comparison-page .comparison-table td:nth-child(6)::before { content: "Decroche.ai"; }
body.landing-refresh[data-theme="light"].comparison-page .comparison-table tr {
background: rgba(255, 255, 255, 0.96);
border-color: rgba(15, 23, 42, 0.1);
box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}
}
@media (max-width: 980px) {
.comparison-impact-grid,
.comparison-decision-strip {
grid-template-columns: 1fr;
}
.comparison-impact-card {
padding: 16px;
}
}
@media (max-width: 620px) {
.comparison-gain-list {
grid-template-columns: 1fr;
}
.comparison-formula strong {
font-size: 1.22rem;
}
}
.landing-refresh .demo-readiness {
border-radius: 8px;
}
body.landing-refresh .legal-hero__card,
body.landing-refresh .home-cta__card,
body.landing-refresh .home-call-card {
position: relative;
overflow: hidden;
}
body.landing-refresh .legal-hero__card::before,
body.landing-refresh .home-cta__card::before,
body.landing-refresh .home-call-card::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at top right, rgba(125, 211, 252, 0.14), transparent 24rem),
linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 55%);
pointer-events: none;
}
body.landing-refresh[data-theme="light"] .legal-hero__card::before,
body.landing-refresh[data-theme="light"] .home-cta__card::before,
body.landing-refresh[data-theme="light"] .home-call-card::before {
background:
radial-gradient(circle at top right, rgba(59, 130, 246, 0.12), transparent 24rem),
linear-gradient(135deg, rgba(255, 255, 255, 0.92), transparent 55%);
}
@keyframes publicDrift {
0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
50% { transform: translate3d(0, 22px, 0) scale(1.04); }
}
@keyframes publicBadgeFloat {
0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
50% { transform: translate3d(0, -10px, 0) rotate(0.4deg); }
}
@keyframes publicSignal {
0%, 100% { height: 20%; opacity: 0.45; }
50% { height: 100%; opacity: 1; }
}
@keyframes publicPulse {
0%, 100% { transform: translateY(-50%) scale(1); }
50% { transform: translateY(-50%) scale(1.18); }
}
@keyframes publicPulseDot {
0%, 100% { box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.28); opacity: 0.9; }
50% { box-shadow: 0 0 0 9px rgba(56, 189, 248, 0); opacity: 1; }
}
@keyframes phoneStatusPulse {
0%, 100% { transform: translateX(-50%) translateY(0); box-shadow: 0 10px 26px rgba(2, 6, 23, 0.28); }
50% { transform: translateX(-50%) translateY(-2px); box-shadow: 0 14px 32px rgba(56, 189, 248, 0.22); }
}
@keyframes phoneGlow {
0%, 100% { box-shadow: 0 18px 38px rgba(2, 6, 23, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.18); }
50% { box-shadow: 0 24px 42px rgba(2, 6, 23, 0.26), 0 0 0 10px rgba(56, 189, 248, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.2); }
}
@keyframes homeWavePulse {
0%, 100% { transform: scaleY(0.72); opacity: 0.62; }
50% { transform: scaleY(1.08); opacity: 1; }
}
@keyframes phoneShake {
0%, 100% { transform: rotate(0deg) translate3d(0, 0, 0); }
8% { transform: rotate(-8deg) translate3d(-1px, 0, 0); }
16% { transform: rotate(8deg) translate3d(1px, 0, 0); }
24% { transform: rotate(-6deg) translate3d(-1px, 0, 0); }
32% { transform: rotate(6deg) translate3d(1px, 0, 0); }
40% { transform: rotate(0deg) translate3d(0, 0, 0); }
}
@keyframes phoneRingWave {
0% { transform: scale(0.82); opacity: 0; }
26% { opacity: 0.9; }
100% { transform: scale(1.28); opacity: 0; }
}
@keyframes transcriptReveal {
0%, 12% { opacity: 0; transform: translateY(8px); }
18%, 72% { opacity: 1; transform: translateY(0); }
82%, 100% { opacity: 0; transform: translateY(-4px); }
}
@keyframes transcriptStepOne {
0%, 4% { opacity: 0; transform: translateY(10px); }
10%, 83% { opacity: 1; transform: translateY(0); }
92%, 100% { opacity: 0; transform: translateY(-5px); }
}
@keyframes transcriptStepTwo {
0%, 24% { opacity: 0; transform: translateY(10px); }
30%, 83% { opacity: 1; transform: translateY(0); }
92%, 100% { opacity: 0; transform: translateY(-5px); }
}
@keyframes transcriptStepThree {
0%, 48% { opacity: 0; transform: translateY(10px); }
54%, 83% { opacity: 1; transform: translateY(0); }
92%, 100% { opacity: 0; transform: translateY(-5px); }
}
@keyframes transcriptMarkerOne {
0%, 8%, 34%, 100% {
transform: scale(1);
background: linear-gradient(135deg, rgba(14, 165, 233, 0.22), rgba(37, 99, 235, 0.16));
color: #bae6fd;
box-shadow: 0 0 0 0 rgba(56, 189, 248, 0);
}
12%, 26% {
transform: scale(1.08);
background: #7dd3fc;
color: #082f49;
box-shadow: 0 0 0 7px rgba(56, 189, 248, 0.12);
}
}
@keyframes transcriptMarkerTwo {
0%, 28%, 56%, 100% {
transform: scale(1);
background: linear-gradient(135deg, rgba(14, 165, 233, 0.22), rgba(37, 99, 235, 0.16));
color: #bae6fd;
box-shadow: 0 0 0 0 rgba(56, 189, 248, 0);
}
32%, 48% {
transform: scale(1.08);
background: #7dd3fc;
color: #082f49;
box-shadow: 0 0 0 7px rgba(56, 189, 248, 0.12);
}
}
@keyframes transcriptMarkerThree {
0%, 52%, 84%, 100% {
transform: scale(1);
background: linear-gradient(135deg, rgba(14, 165, 233, 0.22), rgba(37, 99, 235, 0.16));
color: #bae6fd;
box-shadow: 0 0 0 0 rgba(56, 189, 248, 0);
}
56%, 78% {
transform: scale(1.08);
background: #7dd3fc;
color: #082f49;
box-shadow: 0 0 0 7px rgba(56, 189, 248, 0.12);
}
}
@keyframes transcriptDrift {
0%, 100% { transform: translateY(0); opacity: 0.9; }
50% { transform: translateY(-3px); opacity: 1; }
}
@keyframes callRailLift {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
@keyframes phoneEntryClientFirst {
0% { opacity: 0; transform: translateY(10px) scale(0.98); }
6%, 30% { opacity: 1; transform: translateY(0) scale(1); }
38%, 90% { opacity: 0.42; transform: translateY(0) scale(0.992); }
96%, 100% { opacity: 0; transform: translateY(-6px) scale(0.99); }
}
@keyframes phoneEntryAgent {
0%, 30% { opacity: 0; transform: translateY(10px) scale(0.98); }
38%, 58% { opacity: 1; transform: translateY(0) scale(1); }
66%, 90% { opacity: 0.54; transform: translateY(0) scale(0.994); }
96%, 100% { opacity: 0; transform: translateY(-6px) scale(0.99); }
}
@keyframes phoneEntryClientSecond {
0%, 58% { opacity: 0; transform: translateY(10px) scale(0.98); }
66%, 90% { opacity: 1; transform: translateY(0) scale(1); }
96%, 100% { opacity: 0; transform: translateY(-6px) scale(0.99); }
}
@keyframes summarySweep {
0% { transform: translateX(-32%); }
50% { transform: translateX(42%); }
100% { transform: translateX(-32%); }
}
@media (max-width: 1080px) {
.home-hero__grid,
.home-split,
.home-split--reverse,
.home-control-grid {
grid-template-columns: 1fr;
gap: 28px;
}
.home-strip__grid,
.home-steps,
.home-use-grid,
.home-demo-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 760px) {
body.landing-refresh {
max-width: 100%;
overflow-x: hidden;
padding-bottom: calc(28px + env(safe-area-inset-bottom));
}
.landing-refresh .container {
width: min(calc(100% - 24px), 1180px);
}
.landing-refresh :where(main, .home-hero, .home-strip, .home-section, .home-cta) {
max-width: 100%;
overflow-x: clip;
}
.home-hero__grid,
.home-hero__content,
.home-hero__actions,
.home-hero__proof,
.home-call-stage,
.home-call-card {
min-width: 0;
max-width: 100%;
}
.home-hero__actions {
margin-top: 22px;
margin-bottom: 14px;
gap: 10px;
}
body.landing-refresh .site-main {
padding-bottom: calc(122px + env(safe-area-inset-bottom));
}
.home-mobile-sticky-cta {
position: fixed !important;
right: 12px !important;
bottom: calc(12px + env(safe-area-inset-bottom)) !important;
left: 12px !important;
z-index: 4900 !important;
display: grid !important;
gap: 10px;
padding: 12px;
border: 1px solid rgba(148, 163, 184, 0.2);
border-radius: 22px;
background: #081020;
box-shadow: 0 24px 60px rgba(2, 6, 23, 0.46);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
body.landing-refresh.legal-page:not(.home-page) .home-mobile-sticky-cta {
display: none !important;
}
body.landing-refresh.legal-page:not(.home-page) .site-main {
padding-bottom: calc(28px + env(safe-area-inset-bottom)) !important;
}
.home-mobile-sticky-cta .btn {
justify-content: center;
min-height: 44px;
margin: 0;
padding-inline: 8px;
font-size: 0.88rem;
font-weight: 800;
}
body.landing-refresh[data-theme="light"] .home-mobile-sticky-cta {
background: #ffffff;
border-color: rgba(15, 23, 42, 0.08);
box-shadow: 0 22px 54px rgba(15, 23, 42, 0.22);
}
body.landing-refresh[data-theme="light"] .home-mobile-sticky-cta__eyebrow {
color: #0f766e;
}
.home-eyebrow {
max-width: 100%;
white-space: normal;
text-align: center;
}
.home-call-card,
.home-phone__screen,
.home-summary-card,
.home-cta__card {
padding: 16px;
}
.home-hero__proof {
display: none;
}
.home-hero__proof span {
flex: 1 1 min(100%, 154px);
justify-content: center;
min-height: 32px;
padding-inline: 10px;
font-size: 0.82rem;
text-align: center;
white-space: normal;
}
.home-call-rail,
.home-strip__grid,
.home-steps,
.home-use-grid,
.home-faq-grid,
.home-demo-grid,
.home-control-realtime-grid,
.home-realtime-grid,
.home-control-list {
grid-template-columns: 1fr;
}
.home-strip__grid div,
.home-use-grid article,
.home-faq-grid article,
.home-demo-grid article,
.home-realtime-grid article,
.home-control-list div {
padding: 16px;
}
.home-section {
padding: 30px 0;
}
.home-section--control-realtime {
padding: 34px 0 46px;
}
.home-section__head {
margin-bottom: 16px;
}
.home-section__head--center {
text-align: left;
}
.home-section__head h2,
.home-cta h2 {
margin-bottom: 10px;
font-size: clamp(1.52rem, 7vw, 2.05rem);
line-height: 1.08;
}
.home-section__head p,
.home-cta p {
font-size: 0.95rem;
line-height: 1.46;
}
.home-section__head p {
display: none;
}
#demo .home-section__head p {
display: block;
}
.home-steps article {
min-height: 0;
padding: 14px 15px;
border: 1px solid rgba(148, 163, 184, 0.14);
border-radius: 8px;
background: rgba(255, 255, 255, 0.045);
}
body.landing-refresh[data-theme="light"] .home-steps article {
background: rgba(255, 255, 255, 0.9);
border-color: rgba(15, 23, 42, 0.08);
box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
}
.home-steps article span {
margin-bottom: 10px;
}
.home-steps--process {
gap: 10px;
margin-top: 18px;
}
.home-steps--process::before {
display: none;
}
.home-steps--process article {
min-height: 0;
padding: 16px;
}
.home-steps--process article span {
width: 36px;
height: 36px;
margin-bottom: 14px;
}
.home-steps--process h3,
.home-steps--process p {
max-width: none;
}
.home-steps article p,
.home-use-grid article p,
.home-realtime-grid article span,
.home-control-list div span,
.home-demo-grid article p {
display: none;
}
.home-steps article:nth-child(n+4),
.home-use-grid article:nth-child(n+5),
.home-faq-grid article:nth-child(n+4),
.home-hero__ticker-card:nth-child(n+3) {
display: none;
}
.home-steps--process article:nth-child(n+4) {
display: grid;
}
.home-use-grid article,
.home-faq-grid article,
.home-demo-grid article,
.home-realtime-grid article,
.home-control-list div {
min-height: 0;
}
.home-section--quiet .home-section__head p,
#summary .home-section__head p {
display: none;
}
#control,
#realtime,
#faq {
display: none;
}
.home-steps article p,
.home-use-grid article p,
.home-demo-grid article p {
display: block;
overflow: visible;
margin-top: 8px;
font-size: 0.9rem;
line-height: 1.38;
-webkit-line-clamp: unset;
}
.home-cta__card {
display: grid;
gap: 18px;
}
.home-cta {
padding: 30px 0;
}
#demo {
padding-top: 28px;
}
#demo .home-demo-grid {
gap: 10px;
}
.home-demo-grid--compact {
grid-template-columns: 1fr;
max-width: 100%;
}
#demo .home-demo-grid--compact article p {
display: block;
overflow: visible;
-webkit-line-clamp: unset;
}
.home-hero__actions .btn,
.home-cta__actions .btn,
.home-demo-grid .btn {
width: 100%;
}
.home-phone__screen {
width: 100%;
}
.home-phone__statusbar,
.home-summary-card__top {
display: grid;
align-items: start;
gap: 8px;
}
.home-phone__meta,
.home-summary-card__footer,
.home-mobile-livefeed__duo {
grid-template-columns: 1fr;
}
.home-phone__entry--agent {
margin-left: 0;
}
.home-summary-card__timeline {
padding-left: 14px;
}
}
@media (prefers-reduced-motion: reduce) {
.public-atmosphere__orb,
.public-atmosphere__badge,
.public-atmosphere__signal span,
.home-ringing-phone__device,
.home-ringing-phone__waves,
.home-waveform span,
.home-call-rail__card,
.home-transcript-stream__line,
.home-transcript-stream__step,
.home-mobile-livefeed__line,
.home-phone__meter span,
.home-phone__entry,
.home-summary-card__progress span,
.home-summary-card__timeline article,
.home-summary-card__timeline article::before,
.landing-refresh .btn,
.landing-refresh :is(.legal-card, .home-use-grid article, .home-faq-grid article, .home-demo-grid article, .home-realtime-grid article, .home-control-list div, .home-summary-card, .home-phone__screen, .home-steps article, .home-strip__grid div) {
animation: none !important;
transition: none !important;
}
.home-transcript-stream__line,
.home-transcript-stream__step,
.home-mobile-livefeed__line,
.home-phone__entry {
opacity: 1 !important;
transform: none !important;
}
}
@media (max-width: 760px) {
body:has(:is(.dashboard-page, .crm-page, .sms-page, .email-dashboard-page, .contacts-page, .calendar-page, .capacity-page, .import-page, .billing-page, .test-agent-page, .admin-number-page, .admin-platform, .admin-batch-page)) .site-header {
padding: 0 !important;
}
body:has(:is(.dashboard-page, .crm-page, .sms-page, .email-dashboard-page, .contacts-page, .calendar-page, .capacity-page, .import-page, .billing-page, .test-agent-page, .admin-number-page, .admin-platform, .admin-batch-page)) .nav {
width: min(100% - 20px, var(--container)) !important;
min-height: 68px !important;
display: flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: space-between !important;
gap: 10px !important;
padding: 10px 0 !important;
}
body:has(:is(.dashboard-page, .crm-page, .sms-page, .email-dashboard-page, .contacts-page, .calendar-page, .capacity-page, .import-page, .billing-page, .test-agent-page, .admin-number-page, .admin-platform, .admin-batch-page)) .logo-wrap {
min-width: 0 !important;
min-height: 46px !important;
flex: 1 1 auto !important;
gap: 9px !important;
padding-right: 4px !important;
}
body:has(:is(.dashboard-page, .crm-page, .sms-page, .email-dashboard-page, .contacts-page, .calendar-page, .capacity-page, .import-page, .billing-page, .test-agent-page, .admin-number-page, .admin-platform, .admin-batch-page)) .logo-mark {
width: 40px !important;
height: 40px !important;
}
body:has(:is(.dashboard-page, .crm-page, .sms-page, .email-dashboard-page, .contacts-page, .calendar-page, .capacity-page, .import-page, .billing-page, .test-agent-page, .admin-number-page, .admin-platform, .admin-batch-page)) .logo-mark svg {
width: 31px !important;
height: 31px !important;
}
body:has(:is(.dashboard-page, .crm-page, .sms-page, .email-dashboard-page, .contacts-page, .calendar-page, .capacity-page, .import-page, .billing-page, .test-agent-page, .admin-number-page, .admin-platform, .admin-batch-page)) .logo-wordmark {
min-width: 0 !important;
font-size: 1.08rem !important;
line-height: 1 !important;
}
body:has(:is(.dashboard-page, .crm-page, .sms-page, .email-dashboard-page, .contacts-page, .calendar-page, .capacity-page, .import-page, .billing-page, .test-agent-page, .admin-number-page, .admin-platform, .admin-batch-page)) .nav-actions {
order: 2 !important;
width: auto !important;
min-width: 0 !important;
flex: 0 0 auto !important;
display: flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 9px !important;
margin-left: auto !important;
}
body:has(:is(.dashboard-page, .crm-page, .sms-page, .email-dashboard-page, .contacts-page, .calendar-page, .capacity-page, .import-page, .billing-page, .test-agent-page, .admin-number-page, .admin-platform, .admin-batch-page)) .nav-actions .theme-toggle {
width: 118px !important;
min-width: 118px !important;
height: 46px !important;
min-height: 46px !important;
padding: 4px !important;
font-size: 0.9rem !important;
}
body:has(:is(.dashboard-page, .crm-page, .sms-page, .email-dashboard-page, .contacts-page, .calendar-page, .capacity-page, .import-page, .billing-page, .test-agent-page, .admin-number-page, .admin-platform, .admin-batch-page)) .nav-actions .theme-toggle__option {
gap: 4px !important;
font-size: 0.75rem !important;
font-weight: 850 !important;
}
body:has(:is(.dashboard-page, .crm-page, .sms-page, .email-dashboard-page, .contacts-page, .calendar-page, .capacity-page, .import-page, .billing-page, .test-agent-page, .admin-number-page, .admin-platform, .admin-batch-page)) .nav-actions .theme-toggle__option svg {
width: 16px !important;
height: 16px !important;
}
body:has(:is(.dashboard-page, .crm-page, .sms-page, .email-dashboard-page, .contacts-page, .calendar-page, .capacity-page, .import-page, .billing-page, .test-agent-page, .admin-number-page, .admin-platform, .admin-batch-page)) .nav-actions .nav-icon-button {
width: 46px !important;
min-width: 46px !important;
height: 46px !important;
min-height: 46px !important;
}
body:has(:is(.dashboard-page, .crm-page, .sms-page, .email-dashboard-page, .contacts-page, .calendar-page, .capacity-page, .import-page, .billing-page, .test-agent-page, .admin-number-page, .admin-platform, .admin-batch-page)) .nav-actions .nav-icon-button svg {
width: 21px !important;
height: 21px !important;
}
body:has(:is(.dashboard-page, .crm-page, .sms-page, .email-dashboard-page, .contacts-page, .calendar-page, .capacity-page, .import-page, .billing-page, .test-agent-page, .admin-number-page, .admin-platform, .admin-batch-page)) .menu {
position: fixed !important;
left: max(10px, env(safe-area-inset-left)) !important;
right: max(10px, env(safe-area-inset-right)) !important;
bottom: max(12px, env(safe-area-inset-bottom)) !important;
display: flex !important;
flex-wrap: nowrap !important;
grid-template-columns: none !important;
width: auto !important;
height: 86px !important;
overflow-x: auto !important;
overflow-y: hidden !important;
touch-action: pan-x !important;
scroll-snap-type: x proximity !important;
}
body:has(:is(.dashboard-page, .crm-page, .sms-page, .email-dashboard-page, .contacts-page, .calendar-page, .capacity-page, .import-page, .billing-page, .test-agent-page, .admin-number-page, .admin-platform, .admin-batch-page)) .menu a,
body:has(:is(.dashboard-page, .crm-page, .sms-page, .email-dashboard-page, .contacts-page, .calendar-page, .capacity-page, .import-page, .billing-page, .test-agent-page, .admin-number-page, .admin-platform, .admin-batch-page)) .menu .menu-icon-link,
body:has(:is(.dashboard-page, .crm-page, .sms-page, .email-dashboard-page, .contacts-page, .calendar-page, .capacity-page, .import-page, .billing-page, .test-agent-page, .admin-number-page, .admin-platform, .admin-batch-page)) .menu .public-menu-link {
flex: 0 0 84px !important;
width: 84px !important;
min-width: 84px !important;
height: 66px !important;
min-height: 66px !important;
scroll-snap-align: center !important;
}
}
@media (min-width: 1025px), (hover: hover) and (pointer: fine) {
body:has(:is(.dashboard-page, .crm-page, .sms-page, .email-dashboard-page, .contacts-page, .calendar-page, .capacity-page, .import-page, .billing-page, .test-agent-page, .admin-number-page, .admin-platform, .admin-batch-page)) {
padding-bottom: 0 !important;
}
body:has(:is(.dashboard-page, .crm-page, .sms-page, .email-dashboard-page, .contacts-page, .calendar-page, .capacity-page, .import-page, .billing-page, .test-agent-page, .admin-number-page, .admin-platform, .admin-batch-page)) .menu {
position: static !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
display: flex !important;
width: auto !important;
height: auto !important;
overflow: visible !important;
touch-action: auto !important;
scroll-snap-type: none !important;
box-shadow: none !important;
backdrop-filter: none !important;
}
body:has(:is(.dashboard-page, .crm-page, .sms-page, .email-dashboard-page, .contacts-page, .calendar-page, .capacity-page, .import-page, .billing-page, .test-agent-page, .admin-number-page, .admin-platform, .admin-batch-page)) .menu a,
body:has(:is(.dashboard-page, .crm-page, .sms-page, .email-dashboard-page, .contacts-page, .calendar-page, .capacity-page, .import-page, .billing-page, .test-agent-page, .admin-number-page, .admin-platform, .admin-batch-page)) .menu .menu-icon-link,
body:has(:is(.dashboard-page, .crm-page, .sms-page, .email-dashboard-page, .contacts-page, .calendar-page, .capacity-page, .import-page, .billing-page, .test-agent-page, .admin-number-page, .admin-platform, .admin-batch-page)) .menu .public-menu-link {
flex: 0 0 auto !important;
width: 42px !important;
min-width: 42px !important;
height: 42px !important;
min-height: 42px !important;
scroll-snap-align: none !important;
}
}
@media (max-width: 1024px) and (hover: none), (max-width: 1024px) and (pointer: coarse) {
body.app-shell {
padding-bottom: calc(108px + env(safe-area-inset-bottom)) !important;
}
body.app-shell main {
padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important;
}
body.app-shell .site-header {
padding: 0 !important;
}
body.app-shell .nav {
width: min(100% - 20px, var(--container)) !important;
min-height: 68px !important;
display: flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: space-between !important;
gap: 10px !important;
padding: 10px 0 !important;
}
body.app-shell .logo-wrap {
min-width: 0 !important;
min-height: 46px !important;
flex: 1 1 auto !important;
gap: 9px !important;
padding-right: 4px !important;
}
body.app-shell .nav-actions {
order: 2 !important;
width: auto !important;
min-width: 0 !important;
flex: 0 0 auto !important;
display: flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 9px !important;
margin-left: auto !important;
}
body.app-shell .nav-actions .theme-toggle {
width: 118px !important;
min-width: 118px !important;
height: 46px !important;
min-height: 46px !important;
padding: 4px !important;
font-size: 0.9rem !important;
}
body.app-shell .nav-actions .theme-toggle__option {
gap: 4px !important;
font-size: 0.75rem !important;
font-weight: 850 !important;
}
body.app-shell .nav-actions .theme-toggle__option svg {
width: 16px !important;
height: 16px !important;
}
body.app-shell .nav-actions .nav-icon-button {
width: 46px !important;
min-width: 46px !important;
height: 46px !important;
min-height: 46px !important;
}
body.app-shell .nav-actions .nav-icon-button svg {
width: 21px !important;
height: 21px !important;
}
body.app-shell .menu {
position: fixed !important;
z-index: 90 !important;
left: max(10px, env(safe-area-inset-left)) !important;
right: max(10px, env(safe-area-inset-right)) !important;
bottom: max(12px, env(safe-area-inset-bottom)) !important;
order: 4 !important;
display: flex !important;
flex-wrap: nowrap !important;
grid-template-columns: none !important;
align-items: center !important;
justify-items: stretch !important;
width: auto !important;
max-width: none !important;
height: 86px !important;
gap: 9px !important;
padding: 10px !important;
overflow-x: auto !important;
overflow-y: hidden !important;
overscroll-behavior-x: contain !important;
touch-action: pan-x !important;
scroll-snap-type: x proximity !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important;
border: 1px solid rgba(255, 255, 255, 0.13) !important;
border-radius: 24px !important;
background:
linear-gradient(180deg, rgba(18, 24, 44, 0.94), rgba(9, 13, 27, 0.96)),
rgba(9, 13, 27, 0.92) !important;
box-shadow: 0 18px 50px rgba(0, 0, 0, 0.34) !important;
backdrop-filter: blur(18px) !important;
}
body.app-shell .menu::-webkit-scrollbar {
display: none !important;
}
body.app-shell .menu a,
body.app-shell .menu .menu-icon-link,
body.app-shell .menu .public-menu-link {
flex: 0 0 84px !important;
width: 84px !important;
min-width: 84px !important;
height: 66px !important;
min-height: 66px !important;
display: inline-flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 5px !important;
border-radius: 18px !important;
border-color: transparent !important;
color: rgba(236, 241, 255, 0.72) !important;
background: transparent !important;
scroll-snap-align: center !important;
}
body.app-shell .menu .menu-icon-link svg,
body.app-shell .menu .public-menu-link svg {
width: 24px !important;
height: 24px !important;
stroke-width: 2.1 !important;
}
body.app-shell .menu .nav-action__text {
position: static !important;
width: auto !important;
height: auto !important;
clip: auto !important;
overflow: hidden !important;
max-width: 74px !important;
white-space: nowrap !important;
text-overflow: ellipsis !important;
font-size: 0.72rem !important;
font-weight: 800 !important;
line-height: 1 !important;
}
body.app-shell .menu .menu-icon-link:hover,
body.app-shell .menu .menu-icon-link:focus-visible,
body.app-shell .menu .menu-icon-link.is-active {
color: #ffffff !important;
border-color: rgba(123, 140, 255, 0.28) !important;
background: linear-gradient(135deg, rgba(46, 166, 247, 0.22), rgba(106, 47, 216, 0.22)) !important;
transform: none !important;
}
body[data-theme="light"].app-shell .menu {
border-color: rgba(15, 23, 42, 0.1) !important;
background: rgba(255, 255, 255, 0.94) !important;
box-shadow: 0 18px 46px rgba(15, 23, 42, 0.16) !important;
}
body[data-theme="light"].app-shell .menu a,
body[data-theme="light"].app-shell .menu .menu-icon-link {
color: rgba(15, 23, 42, 0.62) !important;
}
body[data-theme="light"].app-shell .menu .menu-icon-link:hover,
body[data-theme="light"].app-shell .menu .menu-icon-link:focus-visible,
body[data-theme="light"].app-shell .menu .menu-icon-link.is-active {
color: #1E73D8 !important;
border-color: rgba(30, 115, 216, 0.16) !important;
background: rgba(30, 115, 216, 0.08) !important;
}
}
@media (min-width: 1025px), (hover: hover) and (pointer: fine) {
body.app-shell {
padding-bottom: 0 !important;
}
body.app-shell .menu {
position: static !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
display: flex !important;
width: auto !important;
height: auto !important;
overflow: visible !important;
touch-action: auto !important;
scroll-snap-type: none !important;
box-shadow: none !important;
backdrop-filter: none !important;
}
body.app-shell .menu a,
body.app-shell .menu .menu-icon-link,
body.app-shell .menu .public-menu-link {
flex: 0 0 auto !important;
width: 42px !important;
min-width: 42px !important;
height: 42px !important;
min-height: 42px !important;
scroll-snap-align: none !important;
}
}
html.app-mobile-shell {
height: 100%;
overflow: hidden;
}
html.app-mobile-shell body {
height: 100dvh !important;
min-height: 100dvh !important;
overflow-x: hidden !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
}
html.app-mobile-shell:has(body:not(.app-shell)) {
height: auto;
min-height: 100%;
overflow-x: hidden;
overflow-y: auto;
}
html.app-mobile-shell body:not(.app-shell) {
height: auto !important;
min-height: 100vh !important;
overflow-x: hidden !important;
overflow-y: visible !important;
}
html.app-mobile-shell body.app-shell {
padding-bottom: calc(142px + env(safe-area-inset-bottom)) !important;
}
html.app-mobile-shell body.app-shell main {
padding-bottom: calc(64px + env(safe-area-inset-bottom)) !important;
}
html.app-mobile-shell body.app-shell main.sms-page {
padding-bottom: calc(190px + env(safe-area-inset-bottom)) !important;
}
html.app-mobile-shell body.app-shell .site-header {
z-index: 7000 !important;
padding: 0 !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
isolation: isolate !important;
}
html.app-mobile-shell body.app-shell .nav {
width: min(100% - 20px, var(--container)) !important;
min-height: 68px !important;
display: flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: space-between !important;
gap: 10px !important;
padding: 10px 0 !important;
}
html.app-mobile-shell body.app-shell .logo-wrap {
min-width: 0 !important;
min-height: 46px !important;
flex: 1 1 auto !important;
gap: 9px !important;
padding-right: 4px !important;
}
html.app-mobile-shell body.app-shell .logo-brand {
width: auto !important;
max-width: 100% !important;
min-width: 0 !important;
height: 46px !important;
gap: 0 !important;
}
html.app-mobile-shell body.app-shell .logo-brand__image {
width: min(152px, 100%) !important;
max-width: 100% !important;
height: 40px !important;
object-fit: contain !important;
}
html.app-mobile-shell body.app-shell .logo-brand__mark {
width: 38px !important;
height: 38px !important;
border-radius: 13px !important;
}
html.app-mobile-shell body.app-shell .logo-brand__word {
font-size: 1.04rem !important;
}
html.app-mobile-shell body.app-shell .nav-actions {
order: 2 !important;
width: auto !important;
min-width: 0 !important;
flex: 0 0 auto !important;
display: flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 9px !important;
margin-left: auto !important;
}
html.app-mobile-shell body.app-shell .menu {
position: fixed !important;
z-index: 5000 !important;
left: max(10px, env(safe-area-inset-left)) !important;
right: max(10px, env(safe-area-inset-right)) !important;
top: auto !important;
bottom: max(12px, env(safe-area-inset-bottom)) !important;
order: 4 !important;
display: flex !important;
flex-wrap: nowrap !important;
grid-template-columns: none !important;
align-items: center !important;
justify-items: stretch !important;
width: auto !important;
max-width: none !important;
height: 86px !important;
gap: 9px !important;
padding: 10px !important;
overflow-x: auto !important;
overflow-y: hidden !important;
overscroll-behavior-x: contain !important;
touch-action: pan-x !important;
scroll-snap-type: x proximity !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important;
border: 1px solid rgba(255, 255, 255, 0.13) !important;
border-radius: 24px !important;
background: #070d1d !important;
box-shadow:
0 26px 70px rgba(0, 0, 0, 0.5),
0 0 0 1px rgba(255, 255, 255, 0.04) inset !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
transform: translate3d(0, 0, 0) !important;
will-change: transform !important;
}
html.app-mobile-shell body.app-shell .menu::-webkit-scrollbar {
display: none !important;
}
html.app-mobile-shell body.app-shell .menu a,
html.app-mobile-shell body.app-shell .menu .menu-icon-link,
html.app-mobile-shell body.app-shell .menu .public-menu-link {
flex: 0 0 84px !important;
width: 84px !important;
min-width: 84px !important;
height: 66px !important;
min-height: 66px !important;
display: inline-flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 5px !important;
border-radius: 18px !important;
border-color: transparent !important;
color: rgba(236, 241, 255, 0.72) !important;
background: transparent !important;
scroll-snap-align: center !important;
-webkit-tap-highlight-color: transparent !important;
appearance: none !important;
opacity: 1 !important;
visibility: visible !important;
transition: none !important;
filter: none !important;
transform: translateZ(0) !important;
backface-visibility: hidden !important;
}
html.app-mobile-shell body.app-shell .menu a:active,
html.app-mobile-shell body.app-shell .menu a.is-tapping,
html.app-mobile-shell body.app-shell .menu .menu-icon-link:active,
html.app-mobile-shell body.app-shell .menu .menu-icon-link:focus,
html.app-mobile-shell body.app-shell .menu .menu-icon-link:focus-visible,
html.app-mobile-shell body.app-shell .menu .menu-icon-link.is-active,
html.app-mobile-shell body.app-shell .menu .menu-icon-link.is-tapping,
html.app-mobile-shell body.app-shell .menu .public-menu-link:active,
html.app-mobile-shell body.app-shell .menu .public-menu-link:focus,
html.app-mobile-shell body.app-shell .menu .public-menu-link:focus-visible,
html.app-mobile-shell body.app-shell .menu .public-menu-link.is-tapping {
color: #ffffff !important;
border-color: rgba(123, 140, 255, 0.28) !important;
background: linear-gradient(135deg, rgba(46, 166, 247, 0.22), rgba(106, 47, 216, 0.22)) !important;
outline: none !important;
box-shadow: none !important;
transform: none !important;
}
html.app-mobile-shell body.app-shell .menu a:active *,
html.app-mobile-shell body.app-shell .menu a.is-tapping *,
html.app-mobile-shell body.app-shell .menu .menu-icon-link:active *,
html.app-mobile-shell body.app-shell .menu .menu-icon-link.is-tapping *,
html.app-mobile-shell body.app-shell .menu .menu-icon-link.is-active *,
html.app-mobile-shell body.app-shell .menu .public-menu-link:active *,
html.app-mobile-shell body.app-shell .menu .public-menu-link.is-tapping * {
color: currentColor !important;
opacity: 1 !important;
visibility: visible !important;
}
html.app-mobile-shell body.app-shell .menu .menu-icon-link svg,
html.app-mobile-shell body.app-shell .menu .public-menu-link svg {
width: 24px !important;
height: 24px !important;
stroke-width: 2.1 !important;
}
html.app-mobile-shell body.app-shell .menu .nav-action__text {
position: static !important;
width: auto !important;
height: auto !important;
clip: auto !important;
overflow: visible !important;
max-width: none !important;
white-space: nowrap !important;
text-overflow: clip !important;
text-align: center !important;
font-size: 0.72rem !important;
font-weight: 800 !important;
line-height: 1 !important;
}
html.app-mobile-shell body.app-shell .menu .nav-action__text-desktop {
display: none !important;
}
html.app-mobile-shell body.app-shell .menu .nav-action__text-mobile {
display: inline !important;
}
html.app-mobile-shell body[data-theme="light"].app-shell .menu {
border-color: rgba(15, 23, 42, 0.1) !important;
background: #ffffff !important;
box-shadow:
0 26px 64px rgba(15, 23, 42, 0.24),
0 0 0 1px rgba(15, 23, 42, 0.04) inset !important;
}
html.app-mobile-shell body[data-theme="light"].app-shell .menu a,
html.app-mobile-shell body[data-theme="light"].app-shell .menu .menu-icon-link,
html.app-mobile-shell body[data-theme="light"].app-shell .menu .public-menu-link {
color: rgba(15, 23, 42, 0.82) !important;
}
html.app-mobile-shell body[data-theme="light"].app-shell .menu .menu-icon-link svg,
html.app-mobile-shell body[data-theme="light"].app-shell .menu .public-menu-link svg,
html.app-mobile-shell body[data-theme="light"].app-shell .menu .nav-action__text {
color: inherit !important;
opacity: 1 !important;
}
html.app-mobile-shell body[data-theme="light"].app-shell .menu a:active,
html.app-mobile-shell body[data-theme="light"].app-shell .menu a.is-tapping,
html.app-mobile-shell body[data-theme="light"].app-shell .menu .menu-icon-link:active,
html.app-mobile-shell body[data-theme="light"].app-shell .menu .menu-icon-link:focus,
html.app-mobile-shell body[data-theme="light"].app-shell .menu .menu-icon-link:focus-visible,
html.app-mobile-shell body[data-theme="light"].app-shell .menu .menu-icon-link.is-active,
html.app-mobile-shell body[data-theme="light"].app-shell .menu .menu-icon-link.is-tapping,
html.app-mobile-shell body[data-theme="light"].app-shell .menu .public-menu-link:active,
html.app-mobile-shell body[data-theme="light"].app-shell .menu .public-menu-link:focus,
html.app-mobile-shell body[data-theme="light"].app-shell .menu .public-menu-link:focus-visible,
html.app-mobile-shell body[data-theme="light"].app-shell .menu .public-menu-link.is-tapping {
color: #1d4ed8 !important;
border-color: rgba(29, 78, 216, 0.2) !important;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.16), rgba(99, 102, 241, 0.10)) !important;
outline: none !important;
box-shadow: inset 0 0 0 1px rgba(29, 78, 216, 0.04) !important;
}
html.app-mobile-shell body.landing-refresh:not(.app-shell) {
padding-bottom: calc(150px + env(safe-area-inset-bottom)) !important;
}
html.app-mobile-shell body.landing-refresh:not(.app-shell) main {
padding-bottom: calc(72px + env(safe-area-inset-bottom)) !important;
}
html.app-mobile-shell body.landing-refresh:not(.app-shell) .site-header {
z-index: 7000 !important;
padding: 0 !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
isolation: isolate !important;
}
html.app-mobile-shell body.landing-refresh:not(.app-shell) .nav {
width: min(100% - 20px, var(--container)) !important;
min-height: 68px !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto auto !important;
align-items: center !important;
gap: 6px !important;
padding: 10px 0 !important;
}
html.app-mobile-shell body.landing-refresh:not(.app-shell) .logo-wrap {
grid-column: 1 !important;
min-width: 0 !important;
min-height: 46px !important;
gap: 9px !important;
padding-right: 0 !important;
}
html.app-mobile-shell body.landing-refresh:not(.app-shell) .logo-brand {
width: auto !important;
height: 42px !important;
gap: 0 !important;
}
html.app-mobile-shell body.landing-refresh:not(.app-shell) .logo-brand__image {
height: 36px !important;
}
html.app-mobile-shell body.landing-refresh:not(.app-shell) .logo-brand__mark {
width: 38px !important;
height: 38px !important;
border-radius: 13px !important;
}
html.app-mobile-shell body.landing-refresh:not(.app-shell) .logo-brand__word {
font-size: 1.04rem !important;
}
html.app-mobile-shell body.landing-refresh:not(.app-shell) .logo-mark {
width: 40px !important;
height: 40px !important;
}
html.app-mobile-shell body.landing-refresh:not(.app-shell) .logo-wordmark {
min-width: 0 !important;
font-size: 1.08rem !important;
line-height: 1 !important;
}
html.app-mobile-shell body.landing-refresh:not(.app-shell) .nav-theme--public {
display: flex !important;
grid-column: 2 !important;
align-self: center !important;
}
html.app-mobile-shell body.landing-refresh:not(.app-shell) .nav-theme--public .theme-toggle {
width: 92px !important;
min-width: 92px !important;
height: 40px !important;
min-height: 40px !important;
padding: 3px !important;
border-radius: 999px !important;
}
html.app-mobile-shell body.landing-refresh:not(.app-shell) .nav-actions {
grid-column: 3 !important;
width: auto !important;
min-width: auto !important;
flex: 0 0 auto !important;
display: flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 6px !important;
margin-left: 0 !important;
}
html.app-mobile-shell body.landing-refresh:not(.app-shell) .nav-actions--public .nav-auth-link {
display: flex !important;
flex: 0 0 auto !important;
width: 36px !important;
min-width: 36px !important;
height: 36px !important;
min-height: 36px !important;
padding: 0 !important;
border-radius: 999px !important;
align-items: center !important;
justify-content: center !important;
gap: 0 !important;
}
html.app-mobile-shell body.landing-refresh:not(.app-shell) .nav-actions--public .nav-auth-link__eyebrow {
display: none !important;
}
html.app-mobile-shell body.landing-refresh:not(.app-shell) .nav-actions--public .nav-auth-link__icon {
display: inline-flex !important;
}
html.app-mobile-shell body.landing-refresh:not(.app-shell) .nav-actions--public .nav-auth-link__label {
display: none !important;
}
html.app-mobile-shell body.landing-refresh:not(.app-shell) .menu {
position: fixed !important;
z-index: 7100 !important;
left: max(10px, env(safe-area-inset-left)) !important;
right: max(10px, env(safe-area-inset-right)) !important;
top: auto !important;
bottom: max(12px, env(safe-area-inset-bottom)) !important;
grid-column: 1 / -1 !important;
grid-row: 3 !important;
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
align-items: center !important;
justify-content: stretch !important;
justify-items: stretch !important;
width: auto !important;
max-width: none !important;
height: 86px !important;
gap: 8px !important;
padding: 10px !important;
overflow: hidden !important;
border: 1px solid rgba(255, 255, 255, 0.13) !important;
border-radius: 24px !important;
background: #070d1d !important;
box-shadow:
0 28px 76px rgba(0, 0, 0, 0.56),
0 0 0 1px rgba(255, 255, 255, 0.04) inset !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
transform: translate3d(0, 0, 0) !important;
will-change: transform !important;
}
html.app-mobile-shell body.landing-refresh:not(.app-shell) .menu a,
html.app-mobile-shell body.landing-refresh:not(.app-shell) .menu .public-menu-link {
width: 100% !important;
min-width: 0 !important;
height: 66px !important;
min-height: 66px !important;
display: inline-flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 5px !important;
border-radius: 18px !important;
border-color: transparent !important;
color: rgba(236, 241, 255, 0.72) !important;
background: transparent !important;
-webkit-tap-highlight-color: transparent !important;
appearance: none !important;
opacity: 1 !important;
visibility: visible !important;
transition: none !important;
filter: none !important;
transform: translateZ(0) !important;
backface-visibility: hidden !important;
}
html.app-mobile-shell body.landing-refresh:not(.app-shell) .menu .public-menu-link--primary,
html.app-mobile-shell body.landing-refresh:not(.app-shell) .menu .public-menu-link:hover,
html.app-mobile-shell body.landing-refresh:not(.app-shell) .menu .public-menu-link:focus,
html.app-mobile-shell body.landing-refresh:not(.app-shell) .menu .public-menu-link:focus-visible,
html.app-mobile-shell body.landing-refresh:not(.app-shell) .menu .public-menu-link:active,
html.app-mobile-shell body.landing-refresh:not(.app-shell) .menu .public-menu-link.is-tapping {
color: #ffffff !important;
border-color: rgba(123, 140, 255, 0.28) !important;
background: linear-gradient(135deg, rgba(46, 166, 247, 0.22), rgba(106, 47, 216, 0.22)) !important;
outline: none !important;
box-shadow: none !important;
transform: none !important;
}
html.app-mobile-shell body.landing-refresh:not(.app-shell) .menu .public-menu-link:active *,
html.app-mobile-shell body.landing-refresh:not(.app-shell) .menu .public-menu-link.is-tapping *,
html.app-mobile-shell body.landing-refresh:not(.app-shell) .menu .public-menu-link--primary * {
color: currentColor !important;
opacity: 1 !important;
visibility: visible !important;
}
html.app-mobile-shell body.landing-refresh:not(.app-shell) .menu .public-menu-link svg {
width: 24px !important;
height: 24px !important;
stroke-width: 2.1 !important;
}
html.app-mobile-shell body.landing-refresh:not(.app-shell) .menu .nav-action__text {
position: static !important;
width: auto !important;
height: auto !important;
clip: auto !important;
overflow: hidden !important;
max-width: 74px !important;
white-space: nowrap !important;
text-overflow: ellipsis !important;
font-size: 0.72rem !important;
font-weight: 800 !important;
line-height: 1 !important;
}
html.app-mobile-shell body[data-theme="light"].landing-refresh:not(.app-shell) .menu {
border-color: rgba(15, 23, 42, 0.1) !important;
background: #ffffff !important;
box-shadow:
0 28px 70px rgba(15, 23, 42, 0.26),
0 0 0 1px rgba(15, 23, 42, 0.04) inset !important;
}
html.app-mobile-shell body[data-theme="light"].landing-refresh:not(.app-shell) .menu a,
html.app-mobile-shell body[data-theme="light"].landing-refresh:not(.app-shell) .menu .public-menu-link {
color: rgba(15, 23, 42, 0.82) !important;
}
html.app-mobile-shell body[data-theme="light"].landing-refresh:not(.app-shell) .menu .public-menu-link svg,
html.app-mobile-shell body[data-theme="light"].landing-refresh:not(.app-shell) .menu .nav-action__text {
color: inherit !important;
opacity: 1 !important;
}
html.app-mobile-shell body[data-theme="light"].landing-refresh:not(.app-shell) .menu .public-menu-link--primary,
html.app-mobile-shell body[data-theme="light"].landing-refresh:not(.app-shell) .menu .public-menu-link:hover,
html.app-mobile-shell body[data-theme="light"].landing-refresh:not(.app-shell) .menu .public-menu-link:focus,
html.app-mobile-shell body[data-theme="light"].landing-refresh:not(.app-shell) .menu .public-menu-link:focus-visible,
html.app-mobile-shell body[data-theme="light"].landing-refresh:not(.app-shell) .menu .public-menu-link:active,
html.app-mobile-shell body[data-theme="light"].landing-refresh:not(.app-shell) .menu .public-menu-link.is-tapping {
color: #1d4ed8 !important;
border-color: rgba(29, 78, 216, 0.2) !important;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.16), rgba(99, 102, 241, 0.10)) !important;
outline: none !important;
box-shadow: inset 0 0 0 1px rgba(29, 78, 216, 0.04) !important;
}
html.app-mobile-shell body.auth-page:not(.app-shell) {
padding-bottom: calc(150px + env(safe-area-inset-bottom)) !important;
}
html.app-mobile-shell body.auth-page:not(.app-shell) main {
padding-bottom: calc(72px + env(safe-area-inset-bottom)) !important;
}
html.app-mobile-shell body.auth-page:not(.app-shell) .site-header {
z-index: 7000 !important;
padding: 0 !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
isolation: isolate !important;
}
html.app-mobile-shell body.auth-page:not(.app-shell) .nav {
width: min(100% - 20px, var(--container)) !important;
min-height: 68px !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
align-items: center !important;
gap: 6px !important;
padding: 10px 0 !important;
}
html.app-mobile-shell body.auth-page:not(.app-shell) .logo-wrap {
grid-column: 1 !important;
min-width: 0 !important;
min-height: 46px !important;
gap: 9px !important;
padding-right: 0 !important;
}
html.app-mobile-shell body.auth-page:not(.app-shell) .logo-brand {
width: auto !important;
height: 42px !important;
gap: 0 !important;
}
html.app-mobile-shell body.auth-page:not(.app-shell) .logo-brand__image {
height: 36px !important;
}
html.app-mobile-shell body.auth-page:not(.app-shell) .logo-brand__mark {
width: 38px !important;
height: 38px !important;
border-radius: 13px !important;
}
html.app-mobile-shell body.auth-page:not(.app-shell) .logo-brand__word {
font-size: 1.04rem !important;
}
html.app-mobile-shell body.auth-page:not(.app-shell) .logo-mark {
width: 40px !important;
height: 40px !important;
}
html.app-mobile-shell body.auth-page:not(.app-shell) .logo-wordmark {
min-width: 0 !important;
font-size: 1.08rem !important;
line-height: 1 !important;
}
html.app-mobile-shell body.auth-page:not(.app-shell) .nav-theme--public {
display: flex !important;
grid-column: 2 !important;
align-self: center !important;
justify-self: end !important;
}
html.app-mobile-shell body.auth-page:not(.app-shell) .nav-theme--public .theme-toggle {
width: 72px !important;
min-width: 72px !important;
height: 40px !important;
min-height: 40px !important;
padding: 3px !important;
border-radius: 999px !important;
}
html.app-mobile-shell body.auth-page:not(.app-shell) .nav-theme--public .theme-toggle__option {
gap: 0 !important;
}
html.app-mobile-shell body.auth-page:not(.app-shell) .nav-theme--public .theme-toggle__option span {
display: none !important;
}
html.app-mobile-shell body.auth-page:not(.app-shell) .nav-actions {
display: none !important;
}
html.app-mobile-shell body.auth-page:not(.app-shell) .menu {
position: fixed !important;
z-index: 7100 !important;
left: max(10px, env(safe-area-inset-left)) !important;
right: max(10px, env(safe-area-inset-right)) !important;
top: auto !important;
bottom: max(12px, env(safe-area-inset-bottom)) !important;
order: 4 !important;
display: flex !important;
flex-wrap: nowrap !important;
grid-template-columns: none !important;
align-items: center !important;
justify-items: stretch !important;
width: auto !important;
max-width: none !important;
height: 86px !important;
gap: 6px !important;
padding: 10px !important;
overflow-x: auto !important;
overflow-y: hidden !important;
overscroll-behavior-x: contain !important;
touch-action: pan-x !important;
scroll-snap-type: x proximity !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important;
border: 1px solid rgba(255, 255, 255, 0.13) !important;
border-radius: 24px !important;
background: #070d1d !important;
box-shadow:
0 28px 76px rgba(0, 0, 0, 0.56),
0 0 0 1px rgba(255, 255, 255, 0.04) inset !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
transform: translate3d(0, 0, 0) !important;
will-change: transform !important;
}
html.app-mobile-shell body.auth-page:not(.app-shell) .menu::-webkit-scrollbar {
display: none !important;
}
html.app-mobile-shell body.auth-page:not(.app-shell) .menu a,
html.app-mobile-shell body.auth-page:not(.app-shell) .menu .public-menu-link {
flex: 0 0 74px !important;
width: 74px !important;
min-width: 74px !important;
height: 66px !important;
min-height: 66px !important;
display: inline-flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 5px !important;
border-radius: 18px !important;
border-color: transparent !important;
color: rgba(236, 241, 255, 0.72) !important;
background: transparent !important;
scroll-snap-align: center !important;
-webkit-tap-highlight-color: transparent !important;
appearance: none !important;
opacity: 1 !important;
visibility: visible !important;
transition: none !important;
filter: none !important;
transform: translateZ(0) !important;
backface-visibility: hidden !important;
}
html.app-mobile-shell body.auth-page:not(.app-shell) .menu .public-menu-link--primary,
html.app-mobile-shell body.auth-page:not(.app-shell) .menu .public-menu-link:hover,
html.app-mobile-shell body.auth-page:not(.app-shell) .menu .public-menu-link:focus,
html.app-mobile-shell body.auth-page:not(.app-shell) .menu .public-menu-link:focus-visible,
html.app-mobile-shell body.auth-page:not(.app-shell) .menu .public-menu-link:active,
html.app-mobile-shell body.auth-page:not(.app-shell) .menu .public-menu-link.is-tapping {
color: #ffffff !important;
border-color: rgba(123, 140, 255, 0.28) !important;
background: linear-gradient(135deg, rgba(46, 166, 247, 0.22), rgba(106, 47, 216, 0.22)) !important;
outline: none !important;
box-shadow: none !important;
transform: none !important;
}
html.app-mobile-shell body.auth-page:not(.app-shell) .menu .public-menu-link:active *,
html.app-mobile-shell body.auth-page:not(.app-shell) .menu .public-menu-link.is-tapping *,
html.app-mobile-shell body.auth-page:not(.app-shell) .menu .public-menu-link--primary * {
color: currentColor !important;
opacity: 1 !important;
visibility: visible !important;
}
html.app-mobile-shell body.auth-page:not(.app-shell) .menu .public-menu-link svg {
width: 24px !important;
height: 24px !important;
stroke-width: 2.1 !important;
}
html.app-mobile-shell body.auth-page:not(.app-shell) .menu .nav-action__text {
position: static !important;
width: auto !important;
height: auto !important;
clip: auto !important;
overflow: hidden !important;
max-width: 64px !important;
white-space: nowrap !important;
text-overflow: ellipsis !important;
font-size: 0.72rem !important;
font-weight: 800 !important;
line-height: 1 !important;
}
html.app-mobile-shell body[data-theme="light"].auth-page:not(.app-shell) .menu {
border-color: rgba(15, 23, 42, 0.1) !important;
background: #ffffff !important;
box-shadow:
0 28px 70px rgba(15, 23, 42, 0.26),
0 0 0 1px rgba(15, 23, 42, 0.04) inset !important;
}
html.app-mobile-shell body[data-theme="light"].auth-page:not(.app-shell) .menu a,
html.app-mobile-shell body[data-theme="light"].auth-page:not(.app-shell) .menu .public-menu-link {
color: rgba(15, 23, 42, 0.82) !important;
}
html.app-mobile-shell body[data-theme="light"].auth-page:not(.app-shell) .menu .public-menu-link svg,
html.app-mobile-shell body[data-theme="light"].auth-page:not(.app-shell) .menu .nav-action__text {
color: inherit !important;
opacity: 1 !important;
}
html.app-mobile-shell body[data-theme="light"].auth-page:not(.app-shell) .menu .public-menu-link--primary,
html.app-mobile-shell body[data-theme="light"].auth-page:not(.app-shell) .menu .public-menu-link:hover,
html.app-mobile-shell body[data-theme="light"].auth-page:not(.app-shell) .menu .public-menu-link:focus,
html.app-mobile-shell body[data-theme="light"].auth-page:not(.app-shell) .menu .public-menu-link:focus-visible,
html.app-mobile-shell body[data-theme="light"].auth-page:not(.app-shell) .menu .public-menu-link:active,
html.app-mobile-shell body[data-theme="light"].auth-page:not(.app-shell) .menu .public-menu-link.is-tapping {
color: #1d4ed8 !important;
border-color: rgba(29, 78, 216, 0.2) !important;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.16), rgba(99, 102, 241, 0.10)) !important;
outline: none !important;
box-shadow: inset 0 0 0 1px rgba(29, 78, 216, 0.04) !important;
}
html.app-mobile-shell body[data-theme="light"] .menu {
border-color: rgba(15, 23, 42, 0.12) !important;
background: rgba(255, 255, 255, 0.97) !important;
box-shadow: 0 20px 48px rgba(15, 23, 42, 0.14) !important;
}
html.app-mobile-shell body[data-theme="light"] .menu a,
html.app-mobile-shell body[data-theme="light"] .menu .menu-icon-link,
html.app-mobile-shell body[data-theme="light"] .menu .public-menu-link {
color: rgba(15, 23, 42, 0.82) !important;
}
html.app-mobile-shell body[data-theme="light"] .menu .menu-icon-link svg,
html.app-mobile-shell body[data-theme="light"] .menu .public-menu-link svg,
html.app-mobile-shell body[data-theme="light"] .menu .nav-action__text {
color: inherit !important;
opacity: 1 !important;
}
html.app-mobile-shell body[data-theme="light"] .menu .menu-icon-link.is-active,
html.app-mobile-shell body[data-theme="light"] .menu .menu-icon-link:focus,
html.app-mobile-shell body[data-theme="light"] .menu .menu-icon-link:focus-visible,
html.app-mobile-shell body[data-theme="light"] .menu .menu-icon-link:active,
html.app-mobile-shell body[data-theme="light"] .menu .menu-icon-link.is-tapping,
html.app-mobile-shell body[data-theme="light"] .menu .public-menu-link--primary,
html.app-mobile-shell body[data-theme="light"] .menu .public-menu-link:focus,
html.app-mobile-shell body[data-theme="light"] .menu .public-menu-link:focus-visible,
html.app-mobile-shell body[data-theme="light"] .menu .public-menu-link:active,
html.app-mobile-shell body[data-theme="light"] .menu .public-menu-link.is-tapping {
color: #1d4ed8 !important;
border-color: rgba(29, 78, 216, 0.2) !important;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.16), rgba(99, 102, 241, 0.10)) !important;
box-shadow: inset 0 0 0 1px rgba(29, 78, 216, 0.04) !important;
}
@media (max-width: 560px) {
body.auth-page:not(.app-shell) .site-header {
padding: 0 !important;
}
body.auth-page:not(.app-shell) .nav {
width: min(100% - 20px, var(--container)) !important;
min-height: 60px !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
align-items: center !important;
gap: 6px !important;
padding: 10px 0 !important;
}
body.auth-page:not(.app-shell) .logo-wrap {
grid-column: 1 !important;
min-width: 0 !important;
padding-right: 0 !important;
}
body.auth-page:not(.app-shell) .logo-brand {
height: 38px !important;
gap: 6px !important;
}
body.auth-page:not(.app-shell) .logo-brand__mark {
width: 34px !important;
height: 34px !important;
border-radius: 12px !important;
}
body.auth-page:not(.app-shell) .logo-brand__word {
font-size: 0.98rem !important;
}
body.auth-page:not(.app-shell) .nav-theme--public {
display: flex !important;
grid-column: 2 !important;
align-self: center !important;
justify-self: end !important;
}
body.auth-page:not(.app-shell) .nav-theme--public .theme-toggle {
width: 68px !important;
min-width: 68px !important;
height: 36px !important;
min-height: 36px !important;
padding: 2px !important;
border-radius: 999px !important;
}
body.auth-page:not(.app-shell) .nav-theme--public .theme-toggle__option {
gap: 0 !important;
}
body.auth-page:not(.app-shell) .nav-theme--public .theme-toggle__option span {
display: none !important;
}
body.auth-page:not(.app-shell) .nav-actions--public {
display: none !important;
}
}
/* Cohesive light mode pass across public, auth and product pages. */
body[data-theme="light"] {
--primary: #1769c2;
--secondary: #2563eb;
--accent: #2563eb;
--text: #0f172a;
--subtitle: #526174;
--background: #f7fafc;
--background-soft: #eff6ff;
--border: rgba(15, 23, 42, 0.1);
--card: rgba(255, 255, 255, 0.88);
--card-strong: #ffffff;
--shadow: 0 24px 70px rgba(15, 23, 42, 0.11);
--shadow-soft: 0 12px 34px rgba(15, 23, 42, 0.08);
--gradient-main: linear-gradient(135deg, #60a5fa, #1769c2, #4f46e5);
--gradient-button: linear-gradient(135deg, #1f8dd6, #1769c2);
color: var(--text);
}
body[data-theme="light"]:not(.landing-page):not(.legal-page) {
background:
linear-gradient(180deg, rgba(248, 251, 255, 0.98) 0%, rgba(239, 246, 255, 0.95) 48%, rgba(255, 255, 255, 0.98) 100%);
}
body[data-theme="light"] .site-header {
color: #0f172a;
background: rgba(255, 255, 255, 0.9);
border-bottom-color: rgba(15, 23, 42, 0.08);
box-shadow: 0 10px 34px rgba(15, 23, 42, 0.08);
}
body[data-theme="light"] .logo-wrap {
color: #0f172a;
}
body[data-theme="light"] .menu a,
body[data-theme="light"] .menu .menu-icon-link,
body[data-theme="light"] .menu .public-menu-link {
color: #526174;
}
body[data-theme="light"] .menu .menu-icon-link:hover,
body[data-theme="light"] .menu .menu-icon-link:focus-visible,
body[data-theme="light"] .menu .menu-icon-link.is-active,
body[data-theme="light"] .menu .public-menu-link:hover,
body[data-theme="light"] .menu .public-menu-link:focus-visible,
body[data-theme="light"] .menu .public-menu-link--primary {
color: #1769c2;
border-color: rgba(23, 105, 194, 0.18);
background: rgba(23, 105, 194, 0.08);
}
body[data-theme="light"] .theme-toggle {
border-color: rgba(15, 23, 42, 0.1);
background: rgba(255, 255, 255, 0.92);
color: #0f172a;
box-shadow: 0 12px 30px rgba(15, 23, 42, 0.1);
}
body[data-theme="light"] .theme-toggle__option {
color: #64748b;
}
body[data-theme="light"] .theme-toggle[data-current-theme="light"] .theme-toggle__thumb {
background: linear-gradient(135deg, #facc15, #fb923c);
box-shadow: 0 9px 20px rgba(180, 83, 9, 0.22);
}
body[data-theme="light"] .theme-toggle[data-current-theme="dark"] .theme-toggle__thumb {
background: linear-gradient(135deg, #60a5fa, #4f46e5);
}
body[data-theme="light"] .btn-primary,
body[data-theme="light"] .btn-nav {
box-shadow: 0 14px 30px rgba(23, 105, 194, 0.18);
}
body[data-theme="light"] .btn-secondary,
body[data-theme="light"] .btn-tertiary {
border-color: rgba(15, 23, 42, 0.1);
background: rgba(255, 255, 255, 0.86);
color: #0f172a;
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}
body[data-theme="light"] .btn-secondary:hover,
body[data-theme="light"] .btn-tertiary:hover {
border-color: rgba(23, 105, 194, 0.18);
background: #ffffff;
}
body[data-theme="light"] input,
body[data-theme="light"] select,
body[data-theme="light"] textarea {
border-color: rgba(15, 23, 42, 0.12);
background: rgba(255, 255, 255, 0.92);
color: #0f172a;
}
body[data-theme="light"] input::placeholder,
body[data-theme="light"] textarea::placeholder {
color: #94a3b8;
}
body[data-theme="light"] .site-footer {
border-top-color: rgba(15, 23, 42, 0.08);
background:
radial-gradient(circle at top left, rgba(37, 99, 235, 0.12), transparent 22rem),
linear-gradient(180deg, #ffffff 0%, #eef4fb 100%);
color: #526174;
}
body[data-theme="light"] .site-footer span {
color: #0f172a;
}
body[data-theme="light"] .site-footer a {
color: #526174;
}
body[data-theme="light"] .site-footer a:hover,
body[data-theme="light"] .site-footer a:focus-visible {
color: #1769c2;
}
body[data-theme="light"] :is(.human-contact-modal__content > p, .human-contact-form__note, .site-footer__pitch, .site-footer__meta) {
color: #526174;
}
body[data-theme="light"] .human-contact-modal__dialog {
border-color: rgba(15, 23, 42, 0.1);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(239, 246, 255, 0.96));
box-shadow: 0 28px 70px rgba(15, 23, 42, 0.18);
}
body[data-theme="light"] .human-contact-modal__close {
background: rgba(15, 23, 42, 0.08);
color: #0f172a;
}
body[data-theme="light"] .human-contact-modal__content h2,
body[data-theme="light"] .human-contact-form label span,
body[data-theme="light"] .site-footer__contact-link,
body[data-theme="light"] .site-footer__meta a {
color: #0f172a;
}
body[data-theme="light"] .human-contact-form :is(input, textarea) {
border-color: rgba(15, 23, 42, 0.1);
background: rgba(255, 255, 255, 0.92);
color: #0f172a;
}
body.landing-page[data-theme="light"] {
--primary: #1769c2;
--secondary: #2563eb;
--accent: #2563eb;
--text: #0f172a;
--subtitle: #526174;
--background: #f7fafc;
--background-soft: #eff6ff;
--border: rgba(15, 23, 42, 0.1);
--card: rgba(255, 255, 255, 0.88);
--card-strong: #ffffff;
background:
linear-gradient(180deg, #f8fbff 0%, #eff6ff 43%, #ffffff 100%);
}
body.landing-refresh[data-theme="light"] .home-eyebrow {
border-color: rgba(37, 99, 235, 0.18);
background: rgba(239, 246, 255, 0.9);
color: #1d4ed8;
}
body.landing-refresh[data-theme="light"] .home-hero h1,
body.landing-refresh[data-theme="light"] .home-section__head h2,
body.landing-refresh[data-theme="light"] .home-cta h2 {
color: #0b1220;
}
body.landing-refresh[data-theme="light"] .home-hero p,
body.landing-refresh[data-theme="light"] .home-section__head p,
body.landing-refresh[data-theme="light"] .home-cta p {
color: #526174;
}
body.landing-refresh[data-theme="light"] .home-hero__proof span {
border-color: rgba(15, 23, 42, 0.09);
background: rgba(255, 255, 255, 0.84);
color: #334155;
box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
}
body.landing-refresh[data-theme="light"] .home-call-card,
body.landing-refresh[data-theme="light"] .home-phone__screen,
body.landing-refresh[data-theme="light"] .home-summary-card {
border-color: rgba(15, 23, 42, 0.1);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.92));
box-shadow: 0 24px 58px rgba(15, 23, 42, 0.12);
}
body.landing-refresh[data-theme="light"] .home-waveform,
body.landing-refresh[data-theme="light"] .home-phone__meter,
body.landing-refresh[data-theme="light"] .home-phone__entry--client {
border-color: rgba(15, 23, 42, 0.06);
background: #eef4f8;
}
body.landing-refresh[data-theme="light"] .home-phone__entry--agent {
background: #e6f4ff;
}
body.landing-refresh[data-theme="light"] :is(.home-phone__meta div, .home-summary-card__footer div, .home-control-list div, .home-realtime-grid article, .home-demo-grid article, .home-use-grid article, .home-faq-grid article, .home-strip__grid div) {
border-color: rgba(15, 23, 42, 0.09);
background: rgba(255, 255, 255, 0.86);
box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}
body.landing-refresh[data-theme="light"] .home-phone__meta span,
body.landing-refresh[data-theme="light"] .home-use-grid span,
body.landing-refresh[data-theme="light"] .home-summary-card__top span,
body.landing-refresh[data-theme="light"] .home-demo-grid span {
color: #1d4ed8;
}
body.landing-refresh[data-theme="light"] .home-section--quiet {
background:
linear-gradient(180deg, rgba(239, 246, 255, 0.96), rgba(248, 251, 255, 0.96));
}
body.landing-refresh[data-theme="light"] .home-section--split {
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(241, 245, 255, 0.74));
}
body.landing-refresh[data-theme="light"] .home-phone__result {
background: rgba(219, 234, 254, 0.82);
}
body.landing-refresh[data-theme="light"] .home-phone__result strong {
color: #1d4ed8;
}
body.landing-refresh[data-theme="light"] .home-summary-card__timeline::before {
background: linear-gradient(180deg, rgba(29, 78, 216, 0.24), rgba(148, 163, 184, 0.16));
}
body.landing-refresh[data-theme="light"] .home-cta__card {
border-color: rgba(37, 99, 235, 0.14);
background:
linear-gradient(135deg, rgba(239, 246, 255, 0.95), rgba(238, 242, 255, 0.94)),
#ffffff;
box-shadow: 0 24px 60px rgba(15, 23, 42, 0.1);
}
body.landing-page[data-theme="light"] .demo-readiness,
body.landing-page[data-theme="light"] .demo-card,
body.landing-page[data-theme="light"] .voice-panel,
body.landing-page[data-theme="light"] .transcript-panel,
body.landing-page[data-theme="light"] .conversation-card,
body.landing-page[data-theme="light"] .actions-card {
border-color: rgba(15, 23, 42, 0.1);
background: rgba(255, 255, 255, 0.88);
box-shadow: 0 12px 30px rgba(15, 23, 42, 0.07);
}
body[data-theme="light"].auth-page {
background:
linear-gradient(180deg, #f8fbff 0%, #eff6ff 52%, #ffffff 100%);
}
body[data-theme="light"] .auth-card,
body[data-theme="light"] .auth-side-card,
body[data-theme="light"] .auth-panel {
border-color: rgba(15, 23, 42, 0.1);
background: rgba(255, 255, 255, 0.9);
box-shadow: 0 24px 60px rgba(15, 23, 42, 0.1);
}
body[data-theme="light"].legal-page {
background:
linear-gradient(180deg, #f8fbff 0%, #eff6ff 50%, #ffffff 100%);
color: #0f172a;
}
body[data-theme="light"].legal-page .legal-hero__card,
body[data-theme="light"].legal-page .legal-card {
border-color: rgba(15, 23, 42, 0.1);
background: rgba(255, 255, 255, 0.9);
box-shadow: 0 20px 50px rgba(15, 23, 42, 0.08);
}
body[data-theme="light"].legal-page :is(.legal-hero h1, .legal-card h2) {
color: #0f172a;
}
body[data-theme="light"].legal-page :is(.legal-hero p, .legal-card p, .legal-updated) {
color: #526174 !important;
}
body[data-theme="light"].app-shell :is(.dashboard-page, .crm-page, .sms-page, .email-dashboard-page, .calendar-page, .capacity-page, .contacts-page, .billing-page, .test-agent-page, .import-page, .admin-number-page, .admin-platform, .admin-batch-page) {
color: #0f172a;
}
body[data-theme="light"].app-shell :is(.dashboard-hero, .crm-header, .sms-header, .calendar-header, .capacity-header, .contacts-header, .billing-header, .test-agent-topbar, .admin-number-hero, .admin-platform__hero) {
border-color: rgba(15, 23, 42, 0.1);
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(239, 247, 244, 0.82));
box-shadow: 0 18px 46px rgba(15, 23, 42, 0.08);
}
body[data-theme="light"].app-shell :is(.crm-section, .crm-list, .crm-row, .sms-panel, .sms-device, .calendar-section, .capacity-panel, .contacts-card, .contact-editor, .contacts-quick, .billing-summary, .billing-plan, .billing-card, .test-card, .test-readiness-card, .admin-number-panel, .admin-number-card, .admin-platform__tab, .admin-platform__status) {
border-color: rgba(15, 23, 42, 0.1);
box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
}
.demo-booking-modal-open {
overflow: hidden;
}
html:has(body.demo-booking-modal-open) {
overflow: hidden;
}
.demo-booking-modal {
position: fixed;
inset: 0;
z-index: 20000;
display: flex;
align-items: center;
justify-content: center;
padding: 12px;
}
.demo-booking-modal[hidden] { display: none; }
.demo-booking-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(3, 8, 18, 0.78);
backdrop-filter: blur(10px);
}
.demo-booking-modal__dialog {
position: relative;
z-index: 1;
display: grid;
grid-template-rows: auto minmax(0, 1fr);
width: min(1180px, calc(100vw - 24px));
height: min(92dvh, 820px);
border: 1px solid rgba(218, 185, 108, 0.24);
border-radius: 30px;
background:
linear-gradient(135deg, rgba(218, 185, 108, 0.1), transparent 30%),
linear-gradient(180deg, rgba(5, 12, 24, 0.99), rgba(8, 18, 34, 0.99));
box-shadow: 0 44px 140px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
overflow: hidden;
}
.demo-booking-modal__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
min-height: 74px;
padding: 14px 20px 12px;
border-bottom: 1px solid rgba(218, 185, 108, 0.16);
color: #fff8ea;
background:
linear-gradient(180deg, rgba(218, 185, 108, 0.06), transparent 70%),
rgba(3, 10, 23, 0.52);
}
.demo-booking-modal__intro {
display: grid;
gap: 6px;
}
.demo-booking-modal__header h2 {
margin: 0;
color: inherit;
font-size: clamp(1.8rem, 2.4vw, 2.55rem);
line-height: 1;
letter-spacing: -0.035em;
}
.demo-booking-modal__header p {
margin: 0;
max-width: 760px;
color: rgba(226, 232, 240, 0.82);
font-size: 1rem;
line-height: 1.68;
}
.demo-booking-modal__badges {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 10px;
margin-left: auto;
}
.demo-booking-modal__badge {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 40px;
padding: 0 15px;
border: 1px solid rgba(226, 232, 240, 0.14);
border-radius: 999px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 60%),
rgba(255, 255, 255, 0.05);
color: #e2e8f0;
font-size: 0.82rem;
font-weight: 800;
letter-spacing: 0.02em;
}
.demo-booking-modal__badge::before {
content: "";
width: 8px;
height: 8px;
border-radius: 999px;
background: #f3d58a;
box-shadow: 0 0 0 0 rgba(243, 213, 138, 0.5);
animation: demoBookingPulse 1.8s ease-out infinite;
}
.demo-booking-modal__close {
flex: 0 0 auto;
width: 44px;
height: 44px;
border: 1px solid rgba(218, 185, 108, 0.22);
border-radius: 999px;
background: rgba(218, 185, 108, 0.08);
color: #f7e6bc;
font-size: 1.45rem;
line-height: 1;
cursor: pointer;
transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.demo-booking-modal__close:hover,
.demo-booking-modal__close:focus-visible {
transform: scale(1.04);
background: rgba(255, 255, 255, 0.15);
box-shadow: 0 12px 24px rgba(15, 23, 42, 0.24);
}
.demo-booking-modal__body {
min-height: 0;
padding: 8px;
background:
linear-gradient(135deg, rgba(218, 185, 108, 0.06), transparent 28%),
#050b17;
}
.demo-booking-modal__body iframe {
width: 100%;
height: 100%;
border: 0;
border-radius: 22px;
background: #050b17;
box-shadow: inset 0 0 0 1px rgba(218, 185, 108, 0.12);
}
html:has(body.demo-booking-embed),
body.demo-booking-embed {
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
scrollbar-width: none;
}
html:has(body.demo-booking-embed)::-webkit-scrollbar,
body.demo-booking-embed::-webkit-scrollbar {
width: 0;
height: 0;
display: none;
}
@media (min-width: 1000px) and (max-width: 1220px) and (orientation: landscape) {
.demo-booking-modal__dialog {
width: min(1120px, calc(100vw - 20px));
height: calc(100svh - 20px);
margin: 10px auto;
border-radius: 26px;
}
.demo-booking-modal__header {
min-height: 64px;
padding: 12px 16px 10px;
}
.demo-booking-modal__intro .home-eyebrow {
display: none;
}
.demo-booking-modal__header h2 {
font-size: 2rem;
}
.demo-booking-modal__body {
padding: 8px;
}
.demo-booking-modal__body iframe {
border-radius: 20px;
}
}
body[data-theme="light"] .demo-booking-modal__dialog {
border-color: rgba(15, 23, 42, 0.1);
background:
radial-gradient(circle at top left, rgba(14, 165, 233, 0.18), transparent 26%),
radial-gradient(circle at top right, rgba(34, 197, 94, 0.12), transparent 26%),
linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(245, 248, 252, 0.99));
box-shadow: 0 32px 90px rgba(15, 23, 42, 0.18);
}
body[data-theme="light"] .demo-booking-modal__header {
border-bottom-color: rgba(15, 23, 42, 0.08);
color: #0f172a;
}
body[data-theme="light"] .demo-booking-modal__header p {
color: #475569;
}
body[data-theme="light"] .demo-booking-modal__badge {
border-color: rgba(15, 23, 42, 0.08);
background:
linear-gradient(180deg, rgba(37, 99, 235, 0.03), transparent 60%),
rgba(255, 255, 255, 0.9);
color: #0f172a;
}
body[data-theme="light"] .demo-booking-modal__close {
background: rgba(15, 23, 42, 0.06);
color: #0f172a;
}
body[data-theme="light"] .demo-booking-modal__body,
body[data-theme="light"] .demo-booking-modal__body iframe {
background: #eef4f8;
}
.demo-booking-section {
position: relative;
}
.demo-booking-section--embed {
padding: 0;
}
.demo-booking-shell {
display: grid;
gap: 22px;
padding: 12px 0 0;
}
.demo-booking-shell--embed {
min-height: 100%;
padding: 0;
}
.demo-booking-flash-stack {
display: grid;
gap: 12px;
}
.demo-booking-panel {
position: relative;
padding: 26px;
border: 1px solid rgba(15, 23, 42, 0.08);
border-radius: 28px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98));
box-shadow: 0 26px 70px rgba(15, 23, 42, 0.1);
}
.demo-booking-panel--slots {
overflow: hidden;
}
.demo-booking-panel--form {
position: sticky;
top: 0;
}
.demo-day-tab {
flex: 0 0 auto;
display: grid;
gap: 4px;
min-width: 128px;
padding: 14px 16px;
border: 1px solid rgba(148, 163, 184, 0.24);
border-radius: 18px;
background: #fff;
color: #334155;
cursor: pointer;
text-align: left;
transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.demo-day-tab strong {
color: #0f172a;
font-size: 0.96rem;
}
.demo-day-tab small {
color: #64748b;
font-size: 0.8rem;
}
.demo-day-tab:hover,
.demo-day-tab:focus-visible,
.demo-day-tab.is-active {
transform: translateY(-1px);
border-color: rgba(14, 165, 233, 0.42);
background: linear-gradient(180deg, rgba(239, 248, 255, 1), rgba(255, 255, 255, 1));
box-shadow: 0 18px 34px rgba(14, 165, 233, 0.12);
}
.demo-slot-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.demo-slot-pill {
position: relative;
display: block;
cursor: pointer;
}
.demo-slot-pill input {
position: absolute;
inset: 0;
opacity: 0;
pointer-events: none;
}
.demo-slot-card {
display: grid;
gap: 12px;
min-height: 124px;
padding: 16px;
border: 1px solid rgba(148, 163, 184, 0.22);
border-radius: 22px;
background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(248, 250, 252, 0.94));
transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.demo-slot-pill:hover .demo-slot-card,
.demo-slot-pill:focus-within .demo-slot-card {
transform: translateY(-2px);
border-color: rgba(14, 165, 233, 0.32);
box-shadow: 0 18px 32px rgba(15, 23, 42, 0.08);
}
.demo-slot-pill input:checked + .demo-slot-card {
border-color: rgba(14, 165, 233, 0.46);
background:
radial-gradient(circle at top right, rgba(14, 165, 233, 0.16), transparent 42%),
linear-gradient(180deg, rgba(239, 248, 255, 1), rgba(255, 255, 255, 1));
box-shadow: 0 22px 36px rgba(14, 165, 233, 0.16);
}
.demo-slot-card__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
}
.demo-slot-card__head strong {
color: #0f172a;
font-size: 1rem;
}
.demo-slot-card__capacity {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 34px;
min-height: 34px;
padding: 0 10px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.06);
color: #0f172a;
font-size: 0.8rem;
font-weight: 800;
}
.demo-slot-meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.demo-chip {
display: inline-flex;
align-items: center;
min-height: 30px;
padding: 0 10px;
border-radius: 999px;
background: rgba(37, 99, 235, 0.08);
color: #1d4ed8;
font-size: 0.8rem;
font-weight: 700;
}
.demo-chip--quiet {
background: rgba(15, 23, 42, 0.06);
color: #334155;
}
.demo-form-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.demo-form-grid .form-group--full {
grid-column: 1 / -1;
}
.demo-mode-picker {
display: grid;
gap: 10px;
}
.demo-mode-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
.demo-mode-card {
position: relative;
display: block;
cursor: pointer;
}
.demo-mode-card input {
position: absolute;
inset: 0;
opacity: 0;
pointer-events: none;
}
.demo-mode-card__body {
display: grid;
gap: 6px;
min-height: 100px;
padding: 14px;
border: 1px solid rgba(148, 163, 184, 0.22);
border-radius: 18px;
background: #fff;
transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}
.demo-mode-card__body strong {
color: #0f172a;
font-size: 0.95rem;
}
.demo-mode-card__body span {
color: #64748b;
font-size: 0.83rem;
}
.demo-mode-card:hover .demo-mode-card__body,
.demo-mode-card:focus-within .demo-mode-card__body {
transform: translateY(-1px);
border-color: rgba(14, 165, 233, 0.3);
}
.demo-mode-card input:checked + .demo-mode-card__body {
border-color: rgba(14, 165, 233, 0.42);
background: linear-gradient(180deg, rgba(239, 248, 255, 1), rgba(255, 255, 255, 1));
box-shadow: 0 18px 30px rgba(14, 165, 233, 0.14);
}
.demo-mode-card.is-disabled {
cursor: not-allowed;
}
.demo-mode-card.is-disabled .demo-mode-card__body {
opacity: 0.4;
background: rgba(248, 250, 252, 0.98);
}
.demo-mode-help {
color: #64748b;
font-size: 0.88rem;
}
.demo-reminders {
display: grid;
gap: 10px;
margin-top: 18px;
padding: 16px 18px;
border-radius: 20px;
background: #f8fafc;
border: 1px solid rgba(15, 23, 42, 0.06);
}
.demo-reminders strong {
color: #0f172a;
}
.demo-reminders label {
display: flex;
align-items: flex-start;
gap: 10px;
margin: 0;
color: #334155;
}
.demo-booking-note {
margin: 18px 0 0;
color: #475569;
font-size: 0.92rem;
}
.demo-booking-submit {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
margin-top: 18px;
}
.demo-booking-submit .btn {
min-width: 220px;
}
.demo-booking-submit span {
color: #64748b;
font-size: 0.85rem;
}
.demo-booking-empty {
padding: 32px;
border-radius: 28px;
}
@keyframes demoBookingPulse {
0% {
box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.44);
}
70% {
box-shadow: 0 0 0 10px rgba(34, 197, 94, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
}
}
@keyframes demoBookingRing {
0% {
opacity: 0.55;
transform: scale(0.96);
}
60% {
opacity: 0;
transform: scale(1.26);
}
100% {
opacity: 0;
transform: scale(1.34);
}
}
@media (max-width: 720px) {
.demo-booking-modal__dialog {
width: 100vw;
height: 100vh;
margin: 0;
border-radius: 0;
}
.demo-booking-modal__header {
align-items: flex-start;
flex-wrap: wrap;
padding: 16px 14px 14px;
}
.demo-booking-modal__badges {
width: 100%;
justify-content: flex-start;
}
.demo-booking-modal__body {
padding: 0;
}
.demo-booking-modal__body iframe {
border-radius: 0;
}
}
@media (max-width: 1080px) {
.demo-booking-panel--form {
position: static;
}
.demo-slot-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 860px) {
.demo-booking-panel {
padding: 20px;
border-radius: 24px;
}
.demo-booking-kpis,
.demo-mode-grid,
.demo-form-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.demo-slot-grid {
grid-template-columns: 1fr;
}
.demo-day-tab {
min-width: 118px;
}
}
/* APP RESPONSIVE CONSOLIDATION
These rules intentionally use !important on layout-only properties because
several dashboard templates inject page-local CSS after this stylesheet. */
@media (min-width: 1440px) {
.crm-page,
.contacts-shell,
.email-dashboard,
.sms-page,
.calendar-page,
.admin-number-page,
.admin-platform-page {
width: min(100% - 64px, 1560px) !important;
max-width: min(100% - 64px, 1560px) !important;
margin-inline: auto !important;
box-sizing: border-box !important;
}
.email-layout:not(.email-layout--setup) {
grid-template-columns: minmax(230px, 260px) minmax(330px, 430px) minmax(0, 1fr) !important;
}
}
@media (max-width: 1180px) {
.crm-page,
.contacts-page,
.email-dashboard,
.sms-page,
.calendar-page,
.admin-number-page,
.admin-platform-page {
max-width: 100vw !important;
overflow-x: clip !important;
}
.contacts-grid,
.calendar-layout,
.admin-number-hero,
.admin-twilio-market,
.admin-platform-layout,
.admin-platform-grid {
grid-template-columns: 1fr !important;
}
.contacts-side,
.calendar-form,
.calendar-section,
.admin-number-panel,
.admin-platform-card {
min-width: 0 !important;
}
.admin-inventory__form,
.admin-inventory__row,
.admin-agent-row,
.admin-agent-config-grid,
.admin-twilio-search,
.admin-twilio-market__forms {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.admin-twilio-capabilities,
.admin-agent-row__top,
.admin-agent-row__metric:has(.admin-agent-actions) {
grid-column: 1 / -1 !important;
}
}
@media (max-width: 900px) {
.email-layout {
grid-template-columns: 1fr !important;
min-height: 0 !important;
}
.email-sidebar {
grid-template-columns: 1fr !important;
}
.email-folders {
display: flex !important;
gap: 8px !important;
overflow-x: auto !important;
padding-bottom: 2px !important;
-webkit-overflow-scrolling: touch !important;
}
.email-folder {
min-width: 148px !important;
flex: 0 0 auto !important;
}
.email-thread-list,
.email-messages {
max-height: none !important;
}
.sms-layout {
grid-template-columns: 1fr !important;
min-height: 0 !important;
overflow: visible !important;
}
.sms-sidebar {
order: 2 !important;
}
.sms-device {
order: 1 !important;
}
.calendar-header,
.calendar-actions {
grid-template-columns: 1fr !important;
}
.calendar-toolbar {
width: 100% !important;
justify-content: space-between !important;
}
}
@media (max-width: 760px) {
.crm-page,
.contacts-page,
.email-dashboard,
.sms-page,
.calendar-page,
.admin-number-page,
.admin-platform-page {
width: 100% !important;
padding-right: 10px !important;
padding-left: 10px !important;
padding-bottom: calc(150px + env(safe-area-inset-bottom)) !important;
}
.crm-header,
.contacts-header,
.contacts-card,
.contact-editor,
.contacts-quick,
.email-hero,
.email-panel,
.calendar-header,
.calendar-section,
.calendar-form,
.admin-number-hero,
.admin-number-panel,
.admin-platform-card {
border-radius: 14px !important;
padding: 14px !important;
}
.crm-layout,
.crm-main,
.crm-row,
.crm-row__contact,
.crm-row__summary,
.crm-row-kpis,
.crm-action-grid,
.pipeline-filters,
.contacts-grid,
.contacts-card__header,
.contacts-toolbar,
.contact-line,
.contact-editor-form,
.contacts-quick-form,
.contacts-quick-actions,
.email-hero,
.email-layout,
.email-list-header,
.email-reader-header,
.email-mailbox-input,
.sms-header,
.sms-new-message__grid,
.calendar-header,
.calendar-actions,
.calendar-metrics,
.calendar-layout,
.calendar-form--inline,
.calendar-checkbox-grid,
.calendar-mini-form,
.admin-number-stats,
.admin-inventory__form,
.admin-inventory__row,
.admin-agent-row,
.admin-agent-config-grid,
.admin-twilio-search,
.admin-twilio-market__forms,
.admin-twilio-capabilities {
grid-template-columns: 1fr !important;
}
.crm-page input,
.crm-page select,
.crm-page textarea,
.contacts-page input,
.contacts-page select,
.contacts-page textarea,
.email-dashboard input,
.email-dashboard select,
.email-dashboard textarea,
.sms-page input,
.sms-page select,
.sms-page textarea,
.calendar-page input,
.calendar-page select,
.calendar-page textarea,
.admin-number-page input,
.admin-number-page select,
.admin-number-page textarea,
.admin-platform-page input,
.admin-platform-page select,
.admin-platform-page textarea {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
}
.contacts-card,
.contacts-list,
.contact-line,
.contact-name,
.contact-line__headline,
.contacts-list-title__copy,
.admin-number-panel,
.admin-number-list,
.admin-number-card,
.admin-number-card__top,
.admin-agent-row,
.admin-agent-row__top,
.admin-agent-row__metric {
width: 100% !important;
inline-size: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
}
.contacts-toolbar {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto auto !important;
}
.contact-line__headline {
display: grid !important;
grid-template-columns: 38px minmax(0, 1fr) !important;
inline-size: 100% !important;
overflow: hidden !important;
}
.contacts-list-title__copy,
.contacts-list-title__copy strong,
.contacts-list-title__copy span,
.contact-name > .contacts-muted {
inline-size: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
}
.contact-line__meta,
.contact-line__context,
.contact-line__hints,
.contact-line__summary {
padding-left: 0 !important;
}
.contact-line__actions,
.crm-row__quick-actions,
.journal-actions,
.email-actions,
.calendar-submit-row,
.admin-number-actions,
.admin-agent-actions {
display: flex !important;
flex-wrap: wrap !important;
gap: 8px !important;
justify-content: flex-start !important;
width: 100% !important;
}
.crm-row__quick-actions .contact-icon-button,
.contact-line__actions .contacts-icon-button,
.journal-actions .crm-icon-button,
.email-actions .email-icon-button,
.admin-number-actions .admin-number-action-button,
.admin-agent-actions .admin-number-action-button {
flex: 0 0 42px !important;
width: 42px !important;
max-width: 42px !important;
}
.pipeline-filters {
gap: 8px !important;
}
.pipeline-filters .crm-icon-button {
justify-self: start !important;
}
.email-status-strip {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 8px !important;
min-width: 0 !important;
}
.email-stat {
min-width: 0 !important;
padding: 10px 8px !important;
}
.email-stat strong {
font-size: clamp(1rem, 5vw, 1.35rem) !important;
}
.email-reader,
.email-thread-list,
.email-messages {
min-height: 0 !important;
}
.sms-device {
width: min(100%, 430px) !important;
height: clamp(690px, calc(100dvh - 148px), 820px) !important;
min-height: 690px !important;
max-height: 820px !important;
padding: 12px 10px 24px !important;
border-radius: 58px !important;
}
.sms-bubbles {
min-height: 0 !important;
padding-right: 14px !important;
padding-left: 14px !important;
}
.sms-compose {
grid-template-columns: minmax(0, 1fr) 48px !important;
min-height: 84px !important;
margin: 0 0 2px !important;
padding: 10px 10px 14px !important;
}
.sms-compose textarea {
min-height: 58px !important;
}
.sms-compose button {
width: 48px !important;
height: 48px !important;
align-self: center !important;
justify-self: center !important;
}
.sms-thread-list {
display: flex !important;
overflow-x: auto !important;
overflow-y: hidden !important;
-webkit-overflow-scrolling: touch !important;
}
.sms-thread {
min-width: min(280px, 78vw) !important;
}
.calendar-month {
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
}
.calendar-weekdays,
.calendar-week {
min-width: 620px !important;
}
.calendar-week-view {
grid-template-columns: 1fr !important;
}
.calendar-day-view {
max-height: none !important;
}
.calendar-item__top,
.calendar-demo-slot__head {
flex-direction: column !important;
align-items: flex-start !important;
}
.admin-number-toolbar,
.admin-number-filter {
display: grid !important;
grid-template-columns: 1fr !important;
width: 100% !important;
}
.admin-agent-config form {
position: fixed !important;
inset: 72px 10px auto 10px !important;
width: auto !important;
max-height: calc(100dvh - 94px) !important;
overflow: auto !important;
}
.admin-agent-line-menu[open] .admin-agent-line-menu__panel {
position: fixed !important;
inset: 72px 10px auto 10px !important;
width: auto !important;
max-height: calc(100dvh - 94px) !important;
overflow: auto !important;
}
}
@media (max-width: 420px) {
.email-status-strip {
grid-template-columns: 1fr !important;
}
.sms-device {
height: clamp(640px, calc(100dvh - 128px), 760px) !important;
min-height: 640px !important;
border-radius: 50px !important;
}
.calendar-weekdays,
.calendar-week {
min-width: 560px !important;
}
}
/* SECONDARY SURFACES RESPONSIVE CONSOLIDATION */
@media (min-width: 1440px) {
.billing-page,
.test-agent-page,
.personalized-demo__shell,
.optout-page,
.legal-page .legal-hero__card,
.legal-page .legal-section > .container,
.demo-booking-shell {
max-width: min(100% - 64px, 1480px);
}
.billing-plans {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.auth-card,
.billing-page,
.billing-header,
.billing-summary,
.billing-plan,
.billing-included,
.test-agent-page,
.test-card,
.test-readiness-card,
.personalized-demo__hero,
.personalized-demo__panel,
.personalized-demo__card,
.personalized-demo__result,
.optout-card,
.legal-card,
.privacy-matrix,
.pilot-proof-strip,
.pilot-proof-ladder,
.demo-booking-embed-card,
.demo-booking-launch__card,
.demo-booking-aside,
.demo-booking-stage {
min-width: 0;
overflow-wrap: anywhere;
}
.auth-form input,
.auth-form select,
.auth-form textarea,
.billing-page input,
.billing-page select,
.billing-page textarea,
.test-agent-page input,
.test-agent-page select,
.test-agent-page textarea,
.optout-form input,
.optout-form textarea,
.demo-form-grid input,
.demo-form-grid select,
.demo-form-grid textarea {
max-width: 100%;
min-width: 0;
box-sizing: border-box;
}
@media (max-width: 1180px) {
.billing-header,
.billing-summary,
.billing-included__head,
.personalized-demo__hero,
.personalized-demo__grid,
.personalized-demo__result-grid,
.optout-card,
.demo-booking-embed-card,
.demo-booking-launch__card {
grid-template-columns: 1fr !important;
}
.billing-plans {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.test-agent-layout,
.test-side-compact {
grid-template-columns: 1fr !important;
}
.pilot-proof-strip,
.pilot-proof-ladder {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.demo-day-grid,
.demo-slot-grid,
.demo-mode-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
@media (max-width: 820px) {
.auth-shell,
.billing-page,
.test-agent-page,
.personalized-demo,
.optout-page,
.demo-booking-section {
width: 100%;
max-width: 100vw;
overflow-x: clip;
}
.auth-card,
.billing-header,
.billing-summary,
.billing-plan,
.billing-included,
.test-agent-topbar,
.test-card,
.test-readiness-card,
.personalized-demo__hero,
.personalized-demo__panel,
.personalized-demo__card,
.personalized-demo__result,
.optout-card,
.optout-panel,
.demo-booking-launch__card,
.demo-booking-embed-card,
.demo-booking-aside,
.demo-booking-stage {
border-radius: 16px !important;
padding: 16px !important;
}
.auth-card--wide,
.auth-card--signup,
.billing-page,
.test-agent-page,
.personalized-demo__shell,
.demo-booking-shell {
width: min(100% - 20px, 720px) !important;
max-width: min(100% - 20px, 720px) !important;
}
.billing-plans,
.billing-usage,
.billing-included__grid,
.billing-plan__meter,
.billing-actions,
.billing-plan__actions,
.test-readiness-grid,
.agent-summary,
.test-card--conversation .scenario-grid,
.test-card--conversation .test-message-form,
.test-composer .button-row,
.personalized-demo__actions,
.personalized-demo__meta,
.personalized-demo__grid,
.personalized-demo__trust,
.personalized-demo__result-grid,
.pilot-metrics,
.pilot-proof-strip,
.pilot-proof-ladder,
.demo-day-grid,
.demo-slot-grid,
.demo-mode-grid,
.demo-form-grid,
.demo-booking-form-grid,
.demo-booking-launch__facts,
.demo-booking-aside__facts,
.demo-booking-step-indicator {
grid-template-columns: 1fr !important;
}
.auth-actions,
.auth-actions--split,
.auth-links,
.billing-trust-row,
.billing-cycle,
.billing-summary__top,
.billing-included__head,
.test-agent-topbar,
.test-history-header,
.demo-step-footer,
.demo-booking-launch__actions,
.demo-selected-summary,
.demo-booking-submit,
.optout-link-row {
display: flex !important;
flex-wrap: wrap !important;
align-items: stretch !important;
gap: 10px !important;
}
.auth-card .btn,
.auth-card .btn-nav,
.auth-social-btn,
.billing-button,
.billing-back,
.test-agent-page .btn-ui,
.personalized-demo__actions .btn,
.demo-step-footer .btn,
.demo-booking-launch__actions .btn,
.demo-booking-submit .btn,
.optout-submit {
width: 100%;
max-width: none;
justify-content: center;
}
.billing-header__aside,
.billing-header__cancel,
.billing-header__cancel .billing-button {
width: 100%;
}
.billing-plan {
max-width: none !important;
}
.billing-plan__meter {
gap: 8px;
}
.billing-plan__meter span {
min-height: 52px;
}
.test-agent-topbar h1,
.personalized-demo__copy h1,
.optout-card h1 {
font-size: clamp(2rem, 11vw, 3.1rem) !important;
line-height: 1.02 !important;
}
.test-card--conversation .chat-history {
max-height: min(52dvh, 520px) !important;
}
.chat-bubble {
max-width: 94% !important;
}
.privacy-matrix {
display: grid;
gap: 10px;
}
.privacy-matrix__row {
grid-template-columns: 1fr !important;
}
.privacy-matrix__row--head {
display: none !important;
}
.privacy-matrix__row span::before {
display: block;
margin-bottom: 4px;
color: var(--text-muted, #94a3b8);
content: attr(data-label);
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
}
@media (max-width: 560px) {
.auth-shell,
.billing-page,
.test-agent-page,
.personalized-demo__shell,
.optout-page,
.demo-booking-shell {
width: 100% !important;
max-width: 100% !important;
padding-right: 10px !important;
padding-left: 10px !important;
}
.auth-card,
.billing-header,
.billing-summary,
.billing-plan,
.billing-included,
.test-agent-topbar,
.test-card,
.test-readiness-card,
.personalized-demo__hero,
.personalized-demo__panel,
.personalized-demo__card,
.personalized-demo__result,
.optout-card,
.demo-booking-launch__card,
.demo-booking-embed-card,
.demo-booking-aside,
.demo-booking-stage,
.legal-card {
border-radius: 12px !important;
padding: 14px !important;
}
.auth-title,
.billing-header h1,
.test-agent-topbar h1,
.personalized-demo__copy h1,
.demo-booking-launch__copy h3,
.demo-booking-aside h2,
.optout-card h1 {
hyphens: auto;
overflow-wrap: anywhere;
}
.auth-links--login {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
justify-content: center !important;
}
.auth-links--login a,
.auth-links--login button {
flex: 1 1 calc(50% - 8px) !important;
min-width: min(100%, 136px) !important;
}
.billing-cycle {
grid-template-columns: 1fr 1fr !important;
width: 100%;
}
.billing-cycle__discount {
grid-column: 1 / -1;
justify-self: center;
}
.billing-usage__item,
.billing-plan__meter span,
.billing-included__item,
.test-readiness-item,
.agent-summary-item,
.personalized-demo__trust span,
.personalized-demo__result-item,
.pilot-metric,
.pilot-proof-ladder__step,
.pilot-proof-strip__item,
.pilot-proof-strip__intro {
min-height: auto !important;
padding: 12px !important;
}
.test-card--conversation .test-message-form .form-row,
.test-card--conversation .test-message-form .button-row {
grid-template-columns: 1fr !important;
}
.test-card--conversation .test-composer .test-textarea,
.test-textarea,
.test-select {
width: 100% !important;
max-width: 100% !important;
}
.demo-day-grid,
.demo-slot-grid {
grid-template-columns: 1fr !important;
}
.demo-day-tab,
.demo-slot-card,
.demo-mode-card__body {
min-width: 0 !important;
}
}
/* Stable global header geometry. Keep the logo anchored across public/auth views. */
.site-header > .nav {
width: min(calc(100% - 2rem), var(--container)) !important;
margin-right: auto !important;
margin-left: auto !important;
box-sizing: border-box;
}
.site-header .logo-wrap {
justify-self: start !important;
}
.site-header .logo-brand,
.site-header .logo-brand__image {
flex: 0 0 auto !important;
}
@media (min-width: 1025px), (min-width: 861px) and (hover: hover) and (pointer: fine) {
.site-header > .nav {
display: grid !important;
grid-template-columns: auto minmax(0, 1fr) auto auto !important;
align-items: center !important;
gap: clamp(10px, 1.5vw, 20px) !important;
min-height: 78px !important;
padding: 0 !important;
}
.site-header .logo-wrap {
grid-column: 1 !important;
min-width: 0 !important;
min-height: 58px !important;
padding: 4px 8px 4px 0 !important;
}
.site-header .menu {
grid-column: 2 !important;
justify-self: center !important;
min-width: 0 !important;
width: auto !important;
}
.site-header .nav-theme {
grid-column: 3 !important;
justify-self: end !important;
}
.site-header .nav-actions {
grid-column: 4 !important;
justify-self: end !important;
width: auto !important;
margin-left: 0 !important;
}
.site-header .nav-actions:not(.nav-actions--public) {
grid-column: 4 !important;
}
}
@media (max-width: 860px) {
body.app-shell:is(
.dashboard-page,
.crm-page,
.sms-page,
.email-dashboard-page,
.calendar-page,
.capacity-page,
.contacts-page,
.billing-page,
.test-agent-page,
.import-page,
.admin-number-page,
.admin-platform,
.admin-batch-page
) {
padding-right: 0 !important;
padding-left: 0 !important;
}
.site-header > .nav {
width: min(100% - 20px, var(--container)) !important;
min-height: 68px !important;
padding: 10px 0 !important;
}
html.app-mobile-shell .site-header .logo-wrap {
grid-column: 1 !important;
min-width: 0 !important;
min-height: 46px !important;
padding-right: 0 !important;
}
html.app-mobile-shell .site-header .logo-brand {
width: auto !important;
height: 42px !important;
max-width: 100% !important;
}
html.app-mobile-shell .site-header .logo-brand__image {
width: auto !important;
height: 36px !important;
max-width: min(152px, 100%) !important;
object-fit: contain !important;
}
html.app-mobile-shell body.app-shell .site-header > .nav {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
align-items: center !important;
gap: 10px !important;
}
html.app-mobile-shell body.app-shell .site-header .nav-actions {
grid-column: 2 !important;
justify-self: end !important;
width: auto !important;
margin-left: 0 !important;
}
html.app-mobile-shell body:not(.app-shell) .site-header > .nav {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto auto !important;
align-items: center !important;
gap: 6px !important;
}
html.app-mobile-shell body:not(.app-shell) .site-header .nav-theme--public {
grid-column: 2 !important;
justify-self: end !important;
}
html.app-mobile-shell body:not(.app-shell) .site-header .nav-actions--public {
grid-column: 3 !important;
justify-self: end !important;
width: auto !important;
margin-left: 0 !important;
}
}
/* Live demo polish: a wider, cleaner product console for /demo/live/. */
body.live-demo-body {
--live-ink: #f8fafc;
--live-muted-strong: rgba(226, 232, 240, 0.78);
--live-panel: rgba(11, 18, 32, 0.86);
--live-panel-strong: rgba(15, 23, 42, 0.94);
--live-surface: rgba(22, 31, 48, 0.78);
--live-line: rgba(125, 211, 252, 0.16);
--live-accent: #14b8a6;
--live-accent-2: #3b82f6;
--live-warm: #f59e0b;
}
body.landing-refresh.live-demo-body {
background:
linear-gradient(180deg, #08111f 0%, #0b1323 42%, #07101d 100%);
}
body.landing-refresh[data-theme="light"].live-demo-body {
--live-ink: #0f172a;
--live-muted-strong: #526174;
--live-panel: rgba(255, 255, 255, 0.94);
--live-panel-strong: rgba(255, 255, 255, 0.98);
--live-surface: rgba(241, 245, 249, 0.92);
--live-line: rgba(15, 23, 42, 0.1);
background:
linear-gradient(180deg, #f8fbff 0%, #eef7ff 46%, #ffffff 100%);
}
body.live-demo-body .live-demo-page {
padding: 34px 0 72px;
background:
linear-gradient(180deg, rgba(20, 184, 166, 0.08), rgba(59, 130, 246, 0.04) 340px, transparent 720px),
transparent;
}
body.live-demo-embed .site-header,
body.live-demo-embed .site-footer,
body.live-demo-embed .home-mobile-sticky-cta,
body.live-demo-embed .cookie-banner,
body.live-demo-embed .live-demo-hero,
body.live-demo-embed .live-demo-personalizer,
body.live-demo-embed .live-demo-resource-drawer,
body.live-demo-embed .live-demo-phone {
display: none !important;
}
body.live-demo-embed .site-main,
body.live-demo-embed .live-demo-page {
min-height: 0;
padding: 0;
}
body.live-demo-embed .container {
width: 100%;
max-width: none;
padding: 0;
}
body.live-demo-embed .live-demo-shell {
max-width: none;
gap: 12px;
padding: 0;
}
body.live-demo-embed .live-demo-console,
body.live-demo-embed .transcript-panel,
body.live-demo-embed .live-demo-after {
border-radius: 0;
border-left: 0;
border-right: 0;
box-shadow: none;
}
body.live-demo-embed .voice-panel {
border-radius: 0;
box-shadow: none;
}
body.live-demo-embed .live-demo-transcript-section,
body.live-demo-embed .live-demo-after {
margin-top: 0;
}
body.live-demo-embed .live-demo-after {
padding: 16px;
}
body.live-demo-embed .live-demo-after__head {
margin-bottom: 12px;
}
body.live-demo-body .container {
width: min(100% - 32px, 1360px);
}
body.live-demo-body .live-demo-shell {
max-width: 1320px;
gap: 18px;
}
body.live-demo-body .live-demo-hero {
grid-template-columns: minmax(0, 1.04fr) minmax(360px, 0.64fr);
gap: 18px;
align-items: stretch;
min-height: 520px;
}
body.live-demo-body .live-demo-top,
body.live-demo-body .live-demo-brief div,
body.live-demo-body .live-demo-console,
body.live-demo-body .voice-panel,
body.live-demo-body .transcript-panel,
body.live-demo-body .live-demo-after,
body.live-demo-body .live-demo-phone,
body.live-demo-body .live-demo-after__steps,
body.live-demo-body .live-demo-phone .legal-card {
border-radius: 8px;
border-color: var(--live-line);
box-shadow: 0 18px 48px rgba(2, 6, 23, 0.22);
}
body.live-demo-body .section-label,
body.live-demo-body .home-eyebrow {
width: fit-content;
min-height: 28px;
display: inline-flex;
align-items: center;
border-radius: 8px;
background: rgba(20, 184, 166, 0.14);
color: #99f6e4;
letter-spacing: 0;
}
body.landing-refresh[data-theme="light"].live-demo-body .section-label,
body.landing-refresh[data-theme="light"].live-demo-body .home-eyebrow {
background: rgba(20, 184, 166, 0.12);
color: #0f766e;
}
body.live-demo-body .live-demo-proof-strip {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
max-width: 780px;
margin-top: 20px;
}
body.live-demo-body .live-demo-proof-strip span {
display: grid;
gap: 5px;
align-content: start;
min-height: 76px;
padding: 12px;
border: 1px solid var(--live-line);
border-radius: 8px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02)),
rgba(2, 6, 23, 0.18);
color: var(--live-muted-strong);
}
body.live-demo-body .live-demo-proof-strip strong {
color: var(--live-ink);
font-size: 0.86rem;
text-transform: uppercase;
letter-spacing: 0;
}
body.live-demo-body .live-demo-proof-strip small {
color: var(--live-muted-strong);
font-size: 0.92rem;
font-weight: 800;
line-height: 1.35;
}
body.landing-refresh[data-theme="light"].live-demo-body .live-demo-proof-strip span {
background: rgba(255, 255, 255, 0.74);
}
body.live-demo-body .live-demo-top__actions .btn,
body.live-demo-body .live-demo-resource-strip .btn,
body.live-demo-body .live-demo-phone__form .btn {
border-radius: 8px;
}
body.live-demo-body .live-demo-brief {
gap: 12px;
}
body.live-demo-body .live-demo-brief div {
min-height: 0;
padding: 18px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent),
var(--live-panel);
}
body.live-demo-body .live-demo-brief div:nth-child(2) {
border-color: rgba(20, 184, 166, 0.24);
}
body.live-demo-body .live-demo-brief div:nth-child(3) {
border-color: rgba(245, 158, 11, 0.2);
}
body.live-demo-body .live-demo-brief strong,
body.live-demo-body .voice-status-wrap h3,
body.live-demo-body .transcript-header h2,
body.live-demo-body .live-demo-scenario-panel__head h3,
body.live-demo-body .live-demo-after__head h2,
body.live-demo-body .live-demo-after__steps h2,
body.live-demo-body .live-demo-phone__copy h2,
body.live-demo-body .live-demo-phone__form h3 {
color: var(--live-ink);
letter-spacing: 0;
}
body.live-demo-body .live-demo-brief p,
body.live-demo-body .live-demo-after__head p,
body.live-demo-body .live-demo-phone p,
body.live-demo-body .transcript-header p,
body.live-demo-body .live-demo-selected-script p {
color: var(--live-muted-strong);
}
body.live-demo-body .live-demo-console {
padding: 0;
background: transparent;
box-shadow: none;
}
body.live-demo-body .live-demo-personalizer {
display: grid;
grid-template-columns: minmax(0, 0.72fr) minmax(360px, 1fr);
gap: 16px;
padding: 20px;
border: 1px solid var(--live-card-border);
border-radius: 8px;
background: var(--live-card-soft);
}
body.live-demo-body .live-demo-personalizer__copy {
display: grid;
align-content: center;
gap: 8px;
}
body.live-demo-body .live-demo-personalizer__copy h2,
body.live-demo-body .live-demo-outcome-grid h3 {
margin: 0;
color: var(--live-ink);
}
body.live-demo-body .live-demo-personalizer--ready {
grid-template-columns: minmax(0, 0.7fr) minmax(360px, 0.78fr);
align-items: center;
padding: 16px;
background:
linear-gradient(135deg, rgba(20, 184, 166, 0.1), rgba(59, 130, 246, 0.05)),
var(--live-card-soft);
}
body.live-demo-body .live-demo-personalizer--ready .live-demo-personalizer__copy p {
margin: 0;
}
body.live-demo-body .live-demo-business-search {
display: grid;
gap: 10px;
}
body.live-demo-body .live-demo-business-search--ready {
align-content: center;
}
body.live-demo-body .live-demo-business-search form {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 10px;
}
body.live-demo-body .live-demo-business-search input {
width: 100%;
min-height: 46px;
padding: 0 16px;
border: 1px solid rgba(147, 197, 253, 0.26);
border-radius: 8px;
background: rgba(2, 6, 23, 0.42);
color: #f8fafc;
outline: none;
}
body.live-demo-body .live-demo-business-search input:focus {
border-color: rgba(20, 184, 166, 0.6);
box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.12);
}
body.live-demo-body .live-demo-business-status {
min-height: 20px;
margin: 0;
color: var(--live-muted-strong);
font-size: 0.9rem;
font-weight: 750;
}
body.live-demo-body .live-demo-business-status.is-error {
color: #fca5a5;
}
body.live-demo-body .live-demo-business-results {
display: grid;
gap: 8px;
}
body.live-demo-body .live-demo-business-result,
body.live-demo-body .live-demo-business-selected {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 12px;
align-items: center;
min-height: 58px;
padding: 12px;
border: 1px solid var(--live-line);
border-radius: 8px;
background: var(--live-surface);
color: #f8fafc;
}
body.live-demo-body .live-demo-business-selected[hidden] {
display: none;
}
body.live-demo-body .live-demo-business-result {
width: 100%;
cursor: pointer;
text-align: left;
}
body.live-demo-body .live-demo-business-result:hover,
body.live-demo-body .live-demo-business-result:focus-visible {
border-color: rgba(20, 184, 166, 0.46);
background: rgba(20, 184, 166, 0.12);
outline: none;
}
body.live-demo-body .live-demo-business-result span,
body.live-demo-body .live-demo-business-selected span {
display: grid;
gap: 3px;
min-width: 0;
}
body.live-demo-body .live-demo-business-result strong,
body.live-demo-body .live-demo-business-selected strong {
overflow: hidden;
color: #f8fafc;
font-weight: 900;
text-overflow: ellipsis;
white-space: nowrap;
}
body.live-demo-body .live-demo-business-result small,
body.live-demo-body .live-demo-business-selected p {
margin: 0;
color: var(--live-muted-strong);
font-size: 0.84rem;
}
body.live-demo-body .live-demo-business-result__meta {
color: #67e8f9;
font-size: 0.82rem;
font-weight: 900;
white-space: nowrap;
}
body.live-demo-body .live-demo-business-search--ready .live-demo-business-selected {
grid-template-columns: 1fr;
gap: 6px;
min-height: 0;
padding: 16px;
border-color: rgba(20, 184, 166, 0.34);
background:
linear-gradient(135deg, rgba(20, 184, 166, 0.14), rgba(59, 130, 246, 0.08)),
var(--live-surface);
}
body.live-demo-body .live-demo-business-search--ready .live-demo-business-selected span {
display: inline-flex;
width: fit-content;
color: #67e8f9;
font-size: 0.72rem;
font-weight: 950;
letter-spacing: 0;
text-transform: uppercase;
}
body.live-demo-body .live-demo-business-search--ready .live-demo-business-selected strong {
overflow: visible;
font-size: 1.18rem;
line-height: 1.18;
text-overflow: clip;
white-space: normal;
}
body.live-demo-body .live-demo-business-search--ready .live-demo-business-selected p {
font-size: 0.92rem;
line-height: 1.5;
}
body.live-demo-body .live-demo-change-business {
border: 1px solid var(--live-line);
border-radius: 8px;
background: rgba(255, 255, 255, 0.035);
}
body.live-demo-body .live-demo-change-business summary {
min-height: 42px;
display: flex;
align-items: center;
padding: 0 12px;
color: var(--live-muted-strong);
font-weight: 900;
cursor: pointer;
}
body.live-demo-body .live-demo-change-business[open] summary {
border-bottom: 1px solid var(--live-line);
}
body.live-demo-body .live-demo-change-business__panel {
display: grid;
gap: 10px;
padding: 12px;
}
body.landing-refresh[data-theme="light"].live-demo-body .live-demo-change-business {
background: rgba(255, 255, 255, 0.62);
}
body.live-demo-body .voice-panel {
display: grid;
grid-template-columns: minmax(240px, 0.74fr) minmax(0, 1.26fr);
gap: 14px;
align-items: stretch;
padding: 18px;
background:
linear-gradient(180deg, rgba(20, 184, 166, 0.08), rgba(59, 130, 246, 0.04)),
var(--live-panel);
}
body.live-demo-body .voice-notice {
grid-column: 1 / -1;
}
body.live-demo-body .voice-status-wrap {
display: grid;
align-content: center;
gap: 16px;
min-height: 100%;
padding: 18px;
border-radius: 8px;
background:
linear-gradient(180deg, rgba(59, 130, 246, 0.12), transparent),
var(--live-surface);
}
body.live-demo-body .voice-orb {
width: 74px;
height: 74px;
border-radius: 8px;
background:
linear-gradient(135deg, rgba(20, 184, 166, 0.92), rgba(59, 130, 246, 0.86));
box-shadow: 0 16px 34px rgba(20, 184, 166, 0.18);
}
body.live-demo-body .voice-status-wrap .mini-label,
body.live-demo-body .voice-info-card .mini-label {
margin-bottom: 5px;
color: #67e8f9;
letter-spacing: 0;
}
body.live-demo-body .voice-actions {
grid-template-columns: minmax(0, 1fr) minmax(110px, 0.36fr) minmax(150px, 0.5fr);
align-self: start;
gap: 10px;
}
body.live-demo-body .voice-actions .btn {
min-height: 46px;
border-radius: 8px;
}
body.live-demo-body .voice-checklist {
align-self: stretch;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
}
body.live-demo-body .voice-checklist span,
body.live-demo-body .voice-info-card,
body.live-demo-body .live-demo-scenario-options button,
body.live-demo-body .live-demo-selected-script,
body.live-demo-body .live-demo-after .home-summary-card dl div,
body.live-demo-body .live-demo-mini-steps article,
body.live-demo-body .live-demo-phone__points span {
border-radius: 8px;
border-color: var(--live-line);
background: var(--live-surface);
}
body.live-demo-body .voice-checklist span {
min-height: 40px;
padding: 0 10px;
font-weight: 800;
}
body.live-demo-body .voice-checklist span::before {
width: 8px;
height: 8px;
border-radius: 999px;
background: #f59e0b;
box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.14);
}
body.live-demo-body .voice-checklist span[data-state="ok"]::before {
background: #22c55e;
box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.14);
}
body.live-demo-body .voice-checklist span[data-state="fail"]::before {
background: #ef4444;
box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.14);
}
body.live-demo-body .live-demo-transcript-section {
margin-top: 18px;
}
body.live-demo-body .live-demo-transcript-panel {
width: 100%;
padding: 20px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent),
var(--live-panel);
}
body.live-demo-body .transcript-panel {
grid-template-rows: auto auto minmax(360px, 1fr);
}
body.live-demo-body .transcript-header {
padding: 0 2px 14px;
border-bottom: 1px solid var(--live-line);
}
body.live-demo-body .live-demo-scenario-panel {
margin: 0 0 16px;
border-radius: 8px;
background:
linear-gradient(135deg, rgba(20, 184, 166, 0.08), rgba(59, 130, 246, 0.05)),
var(--live-surface);
}
body.live-demo-body .live-demo-scenario-options {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
body.live-demo-body .live-demo-scenario-options button {
min-height: 82px;
}
body.live-demo-body .live-demo-scenario-options button:hover,
body.live-demo-body .live-demo-scenario-options button:focus-visible,
body.live-demo-body .live-demo-scenario-options button.is-selected {
border-color: rgba(20, 184, 166, 0.44);
background:
linear-gradient(135deg, rgba(20, 184, 166, 0.22), rgba(59, 130, 246, 0.12));
}
body.live-demo-body .live-demo-selected-script {
padding: 14px;
}
body.live-demo-body .live-demo-selected-script .btn,
body.live-demo-body .live-demo-selected-script button {
border-radius: 8px;
}
body.live-demo-body .transcript-log {
min-height: 440px;
max-height: 640px;
border-radius: 8px;
background:
linear-gradient(180deg, rgba(8, 13, 25, 0.58), rgba(11, 18, 32, 0.28));
}
body.landing-refresh[data-theme="light"].live-demo-body .transcript-log {
background:
linear-gradient(180deg, rgba(239, 246, 255, 0.92), rgba(248, 250, 252, 0.76));
}
body.live-demo-body .transcript-empty {
min-height: 250px;
border-radius: 8px;
}
body.live-demo-body .live-demo-after,
body.live-demo-body .live-demo-phone {
width: min(100%, 1320px);
margin-inline: auto;
background:
linear-gradient(135deg, rgba(20, 184, 166, 0.1), rgba(59, 130, 246, 0.06)),
var(--live-panel);
}
body.landing-refresh[data-theme="light"].live-demo-body .live-demo-after,
body.landing-refresh[data-theme="light"].live-demo-body .live-demo-phone {
background:
linear-gradient(135deg, rgba(20, 184, 166, 0.08), rgba(219, 234, 254, 0.5)),
var(--live-panel);
}
body.live-demo-body .live-demo-after__grid {
grid-template-columns: minmax(320px, 0.66fr) minmax(0, 1.34fr);
}
body.live-demo-body .live-demo-after .home-summary-card,
body.live-demo-body .live-demo-after__steps {
border-radius: 8px;
border-color: var(--live-line);
background: var(--live-surface);
}
body.live-demo-body .live-demo-outcome-dashboard {
display: grid;
gap: 14px;
}
body.live-demo-body .live-demo-outcome-dashboard.is-empty {
opacity: 0.92;
}
body.live-demo-body .live-demo-outcome-dashboard.is-live .live-demo-outcome-kpis span:first-child {
border-color: rgba(94, 234, 212, 0.42);
box-shadow: 0 0 0 1px rgba(94, 234, 212, 0.14), 0 18px 34px rgba(20, 184, 166, 0.10);
}
body.live-demo-body .live-demo-outcome-kpis {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
}
body.live-demo-body .live-demo-outcome-kpis span,
body.live-demo-body .live-demo-outcome-grid article {
border: 1px solid var(--live-line);
border-radius: 8px;
background: var(--live-surface);
}
body.live-demo-body .live-demo-outcome-kpis span {
display: grid;
gap: 4px;
padding: 12px;
}
body.live-demo-body .live-demo-outcome-kpis strong {
color: #f8fafc;
font-size: 1rem;
}
body.live-demo-body .live-demo-outcome-kpis small,
body.live-demo-body .live-demo-outcome-grid article > span,
body.live-demo-body .live-demo-outcome-grid dt {
color: var(--live-muted-strong);
font-size: 0.74rem;
font-weight: 900;
text-transform: uppercase;
}
body.live-demo-body .live-demo-outcome-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
body.live-demo-body .live-demo-outcome-grid article {
display: grid;
align-content: start;
gap: 8px;
min-height: 150px;
padding: 14px;
}
body.live-demo-body .live-demo-outcome-grid p {
margin: 0;
color: var(--live-muted-strong);
}
body.live-demo-body .live-demo-outcome-grid dl {
display: grid;
gap: 8px;
margin: 0;
}
body.live-demo-body .live-demo-outcome-grid dl div {
display: grid;
grid-template-columns: 88px minmax(0, 1fr);
gap: 10px;
}
body.live-demo-body .live-demo-outcome-grid dd {
margin: 0;
color: #f8fafc;
font-weight: 800;
}
body.live-demo-body .live-demo-outcome-grid dl div.is-missing dd {
color: rgba(226, 232, 240, 0.46);
font-weight: 700;
}
body.live-demo-body .live-demo-outcome-kpis span.is-missing strong {
color: rgba(226, 232, 240, 0.58);
}
body.live-demo-body .live-demo-phone {
grid-template-columns: minmax(0, 1fr) minmax(360px, 0.58fr);
}
body.live-demo-body .live-demo-phone__copy {
align-content: center;
}
body.live-demo-body .live-demo-phone__points span {
color: var(--live-muted-strong);
}
body.live-demo-body .live-demo-phone__form input,
body.live-demo-body .live-demo-phone__form .auth-form input[type="text"],
body.live-demo-body .live-demo-phone__form .auth-form input[type="tel"] {
border-radius: 8px;
padding-inline: 18px !important;
background: rgba(2, 6, 23, 0.36);
}
body.live-demo-body .live-demo-phone__form input:hover,
body.live-demo-body .live-demo-phone__form .auth-form input[type="text"]:hover,
body.live-demo-body .live-demo-phone__form .auth-form input[type="tel"]:hover,
body.live-demo-body .live-demo-phone__form input:focus,
body.live-demo-body .live-demo-phone__form .auth-form input[type="text"]:focus,
body.live-demo-body .live-demo-phone__form .auth-form input[type="tel"]:focus {
background: rgba(2, 6, 23, 0.54) !important;
color: #f8fafc !important;
-webkit-text-fill-color: #f8fafc !important;
caret-color: #f8fafc !important;
}
body.landing-refresh[data-theme="light"].live-demo-body .live-demo-phone__form input,
body.landing-refresh[data-theme="light"].live-demo-body .live-demo-phone__form .auth-form input[type="text"],
body.landing-refresh[data-theme="light"].live-demo-body .live-demo-phone__form .auth-form input[type="tel"] {
background: rgba(255, 255, 255, 0.94) !important;
}
body.landing-refresh[data-theme="light"].live-demo-body .live-demo-phone__form input:hover,
body.landing-refresh[data-theme="light"].live-demo-body .live-demo-phone__form .auth-form input[type="text"]:hover,
body.landing-refresh[data-theme="light"].live-demo-body .live-demo-phone__form .auth-form input[type="tel"]:hover,
body.landing-refresh[data-theme="light"].live-demo-body .live-demo-phone__form input:focus,
body.landing-refresh[data-theme="light"].live-demo-body .live-demo-phone__form .auth-form input[type="text"]:focus,
body.landing-refresh[data-theme="light"].live-demo-body .live-demo-phone__form .auth-form input[type="tel"]:focus {
background: #ffffff !important;
color: #0f172a !important;
-webkit-text-fill-color: #0f172a !important;
caret-color: #0f172a !important;
}
body.landing-refresh[data-theme="light"].live-demo-body .live-demo-business-search input {
border-color: rgba(15, 23, 42, 0.12);
background: #ffffff;
color: #0f172a;
}
body.landing-refresh[data-theme="light"].live-demo-body :is(.live-demo-business-result, .live-demo-business-selected, .live-demo-outcome-kpis span, .live-demo-outcome-grid article) {
border-color: rgba(15, 23, 42, 0.1);
background: rgba(255, 255, 255, 0.8);
}
body.landing-refresh[data-theme="light"].live-demo-body :is(.live-demo-business-result strong, .live-demo-business-selected strong, .live-demo-outcome-kpis strong, .live-demo-outcome-grid dd) {
color: #0f172a;
}
body.landing-refresh[data-theme="light"].live-demo-body :is(.live-demo-business-result small, .live-demo-business-selected p, .live-demo-business-status, .live-demo-outcome-grid p, .live-demo-outcome-kpis small, .live-demo-outcome-grid article > span, .live-demo-outcome-grid dt) {
color: rgba(51, 65, 85, 0.76);
}
@media (max-width: 1180px) {
body.live-demo-body .live-demo-hero,
body.live-demo-body .live-demo-personalizer,
body.live-demo-body .live-demo-after__grid,
body.live-demo-body .live-demo-phone {
grid-template-columns: 1fr;
}
body.live-demo-body .live-demo-brief {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
body.live-demo-body .voice-panel {
grid-template-columns: 1fr;
}
}
/* Studio chatbot and rules */
.home-studio-live__grid > section:nth-child(2) > span strong {
display: inline-grid;
place-items: center;
min-width: 28px;
height: 24px;
padding-inline: 8px;
border: 1px solid rgba(94, 234, 212, 0.34);
border-radius: 999px;
background:
linear-gradient(135deg, rgba(94, 234, 212, 0.2), rgba(96, 165, 250, 0.12)),
rgba(15, 23, 42, 0.8);
color: #ccfbf1;
font-size: 0.82rem;
font-weight: 950;
}
.home-studio-chatbot {
position: relative;
overflow: hidden;
border-color: rgba(94, 234, 212, 0.28);
background:
radial-gradient(circle at 0% 0%, rgba(94, 234, 212, 0.15), transparent 34%),
linear-gradient(145deg, rgba(15, 23, 42, 0.8), rgba(8, 13, 26, 0.66));
}
.home-studio-chatbot::after {
content: "";
position: absolute;
inset: auto 18px 18px auto;
width: 96px;
height: 96px;
pointer-events: none;
border-radius: 999px;
background: rgba(94, 234, 212, 0.11);
filter: blur(22px);
}
.home-studio-chatbot__head,
.home-studio-chatbot__transcript,
.home-studio-chatbot__card,
.home-studio-chatbot__done {
position: relative;
z-index: 1;
}
.home-studio-chatbot__head {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 6px 12px;
align-items: start;
padding-bottom: 8px;
border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}
.home-studio-chatbot__head span,
.home-studio-rules-panel__head span {
color: #67e8f9;
font-size: 0.76rem;
font-weight: 950;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.home-studio-chatbot__head strong {
grid-column: 2;
grid-row: 1 / span 2;
align-self: center;
min-width: 58px;
padding: 9px 10px;
border: 1px solid rgba(125, 211, 252, 0.22);
border-radius: 999px;
background: rgba(15, 23, 42, 0.62);
color: #f8fafc;
text-align: center;
}
.home-studio-chatbot__head small {
color: rgba(226, 232, 240, 0.72);
font-weight: 750;
line-height: 1.35;
}
.home-studio-chatbot__transcript {
display: grid;
gap: 8px;
}
.home-studio-chatbot__bubble {
width: fit-content;
max-width: min(100%, 760px);
padding: 11px 13px;
border-radius: 14px;
color: #f8fafc;
font-weight: 780;
line-height: 1.38;
}
.home-studio-chatbot__bubble--agent {
border: 1px solid rgba(125, 211, 252, 0.2);
background: rgba(30, 41, 59, 0.62);
}
.home-studio-chatbot__bubble--user {
justify-self: end;
border: 1px solid rgba(94, 234, 212, 0.28);
background:
linear-gradient(135deg, rgba(94, 234, 212, 0.18), rgba(96, 165, 250, 0.1)),
rgba(14, 116, 144, 0.22);
color: #ccfbf1;
}
.home-studio-chatbot__card {
display: grid;
gap: 12px;
padding: clamp(14px, 2vw, 18px);
border: 1px solid rgba(125, 211, 252, 0.22);
border-radius: 14px;
background:
linear-gradient(145deg, rgba(15, 23, 42, 0.76), rgba(30, 41, 59, 0.45)),
rgba(2, 6, 23, 0.42);
}
.home-studio-chatbot__card > span {
color: #93c5fd;
font-size: 0.76rem;
font-weight: 950;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.home-studio-chatbot__card p {
margin: 0;
color: #f8fafc;
font-size: clamp(1rem, 1.45vw, 1.2rem);
font-weight: 900;
line-height: 1.28;
}
.home-studio-chatbot__evidence {
display: grid;
gap: 5px;
padding: 10px 12px;
border: 1px solid rgba(217, 183, 111, 0.18);
border-radius: 14px;
background:
linear-gradient(135deg, rgba(217, 183, 111, 0.1), rgba(122, 162, 255, 0.06)),
rgba(8, 12, 24, 0.45);
}
.home-studio-chatbot__evidence[hidden] {
display: none;
}
.home-studio-chatbot__evidence small {
color: #f4dba0;
font-size: 0.68rem;
font-weight: 950;
letter-spacing: 0.08em;
line-height: 1.1;
text-transform: uppercase;
}
.home-studio-chatbot__evidence strong {
color: rgba(248, 250, 252, 0.9);
font-size: 0.87rem;
font-weight: 850;
line-height: 1.36;
}
.home-studio-chatbot__choices {
display: flex;
flex-wrap: wrap;
gap: 9px;
justify-content: center;
}
.home-studio-chatbot__choices button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 40px;
padding: 0 14px;
border: 1px solid rgba(94, 234, 212, 0.28);
border-radius: 999px;
background:
linear-gradient(135deg, rgba(94, 234, 212, 0.13), rgba(96, 165, 250, 0.08)),
rgba(15, 23, 42, 0.64);
color: #dffdf7;
text-align: center;
font: inherit;
font-weight: 900;
cursor: pointer;
transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}
.home-studio-chatbot__choices button:hover,
.home-studio-chatbot__choices button:focus-visible {
transform: translateY(-1px);
border-color: rgba(94, 234, 212, 0.55);
background:
linear-gradient(135deg, rgba(94, 234, 212, 0.22), rgba(96, 165, 250, 0.14)),
rgba(15, 23, 42, 0.72);
}
.home-studio-chatbot__card[data-question-type^="table_capacity"] .home-studio-chatbot__choices {
justify-content: center;
gap: 12px;
margin-top: 8px;
}
.home-studio-chatbot__card[data-question-type^="table_capacity"] .home-studio-chatbot__choices button {
min-width: min(100%, 260px);
padding-inline: 22px;
}
.home-studio-chatbot__note {
display: grid;
gap: 7px;
}
.home-studio-chatbot__note-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 10px;
align-items: stretch;
}
.home-studio-chatbot__note span,
.home-studio-chatbot__helper {
color: rgba(191, 219, 254, 0.82);
font-size: 0.84rem;
font-weight: 850;
line-height: 1.35;
}
.home-studio-chatbot__note textarea {
width: 100%;
min-height: 72px;
padding: 11px 12px;
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 10px;
background: rgba(8, 13, 26, 0.72);
color: #f8fafc;
font: inherit;
line-height: 1.35;
outline: none;
resize: vertical;
}
.home-studio-chatbot__note textarea:focus {
border-color: rgba(94, 234, 212, 0.5);
box-shadow: 0 0 0 3px rgba(94, 234, 212, 0.1);
}
.home-studio-chatbot__note textarea.is-empty {
border-color: rgba(248, 113, 113, 0.72);
box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.12);
}
.home-studio-chatbot__note-row button {
min-width: 108px;
padding: 0 16px;
border: 1px solid rgba(217, 183, 111, 0.28);
border-radius: 12px;
background: linear-gradient(135deg, rgba(244, 223, 174, 0.96), rgba(122, 162, 255, 0.95));
color: #07101f;
font: inherit;
font-weight: 950;
cursor: pointer;
box-shadow: 0 14px 30px rgba(0, 0, 0, 0.24);
transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease;
}
.home-studio-chatbot__note-row button:hover,
.home-studio-chatbot__note-row button:focus-visible {
transform: translateY(-1px);
filter: brightness(1.04);
box-shadow: 0 18px 38px rgba(0, 0, 0, 0.3);
}
.home-studio-chatbot__done {
display: grid;
gap: 4px;
padding: 14px;
border: 1px solid rgba(52, 211, 153, 0.26);
border-radius: 14px;
background: rgba(22, 163, 74, 0.1);
}
.home-studio-chatbot__done strong {
color: #dcfce7;
}
.home-studio-chatbot__done span {
color: rgba(220, 252, 231, 0.76);
font-weight: 760;
}
.home-studio-rules-panel {
border-color: rgba(251, 191, 36, 0.3);
background:
radial-gradient(circle at 100% 0%, rgba(251, 191, 36, 0.12), transparent 32%),
linear-gradient(145deg, rgba(30, 41, 59, 0.72), rgba(15, 23, 42, 0.68));
}
.home-studio-rules-panel__head {
display: grid;
gap: 5px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(251, 191, 36, 0.16);
}
.home-studio-rules-panel__head span {
color: #facc15;
}
.home-studio-rules-panel__head strong {
color: #fef3c7;
font-size: 1.08rem;
font-weight: 950;
}
.home-studio-rules-panel__head small {
color: rgba(254, 243, 199, 0.72);
font-weight: 760;
}
.home-studio-rules-panel ul {
display: grid;
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
}
.home-studio-rules-panel li {
grid-template-columns: minmax(0, 1fr);
border-color: rgba(251, 191, 36, 0.16);
background:
linear-gradient(135deg, rgba(251, 191, 36, 0.08), rgba(15, 23, 42, 0.44)),
rgba(15, 23, 42, 0.6);
}
.home-studio-rules-panel li::before,
.home-studio-rules-panel li::after {
display: none;
}
.home-studio-rules-panel li strong,
.home-studio-rules-panel li span {
grid-column: 1;
}
.home-studio-rules-panel li strong::before {
content: "Règle";
display: inline-flex;
margin-right: 8px;
padding: 3px 7px;
border-radius: 999px;
background: rgba(251, 191, 36, 0.12);
color: #fde68a;
font-size: 0.68rem;
font-weight: 950;
letter-spacing: 0.08em;
text-transform: uppercase;
vertical-align: 1px;
}
@media (max-width: 680px) {
.home-studio-chatbot__head {
grid-template-columns: 1fr;
}
.home-studio-chatbot__head strong {
grid-column: 1;
grid-row: auto;
width: fit-content;
}
.home-studio-chatbot__choices button {
flex: 1 1 130px;
}
}
@media (max-width: 760px) {
body.live-demo-body .container {
width: min(100% - 18px, 1360px);
}
body.live-demo-body .live-demo-page {
padding-top: 18px;
}
html.app-mobile-shell body.live-demo-body:not(.app-shell) .live-demo-brief {
margin-top: 0;
}
body.live-demo-body .live-demo-brief,
body.live-demo-body .live-demo-proof-strip,
body.live-demo-body .voice-actions,
body.live-demo-body .voice-checklist,
body.live-demo-body .voice-info-grid,
body.live-demo-body .live-demo-scenario-options,
body.live-demo-body .live-demo-outcome-kpis,
body.live-demo-body .live-demo-outcome-grid,
body.live-demo-body .live-demo-mini-steps,
body.live-demo-body .live-demo-after .home-summary-card dl {
grid-template-columns: 1fr;
}
body.live-demo-body .live-demo-top,
body.live-demo-body .live-demo-personalizer,
body.live-demo-body .voice-panel,
body.live-demo-body .transcript-panel,
body.live-demo-body .live-demo-after,
body.live-demo-body .live-demo-phone,
body.live-demo-body .live-demo-phone .legal-card {
padding: 16px;
}
body.live-demo-body .voice-status-wrap {
min-height: 128px;
}
body.live-demo-body .transcript-header,
body.live-demo-body .live-demo-scenario-panel__head,
body.live-demo-body .live-demo-selected-script {
display: grid;
}
body.live-demo-body .transcript-header p {
text-align: left;
}
body.live-demo-body .transcript-log {
min-height: 310px;
max-height: 58vh;
}
body.live-demo-body .live-demo-business-search form,
body.live-demo-body .live-demo-business-result,
body.live-demo-body .live-demo-business-selected,
body.live-demo-body .live-demo-outcome-grid dl div {
grid-template-columns: 1fr;
}
body.live-demo-body .live-demo-business-search .btn {
width: 100%;
}
body.live-demo-body .live-demo-phone__points {
grid-template-columns: 1fr;
}
}
@media (max-width: 760px) {
html.app-mobile-shell body.live-demo-body:not(.app-shell) .live-demo-hero,
html.app-mobile-shell body.live-demo-body:not(.app-shell) .live-demo-console,
html.app-mobile-shell body.live-demo-body:not(.app-shell) .live-demo-after__grid,
html.app-mobile-shell body.live-demo-body:not(.app-shell) .live-demo-phone {
grid-template-columns: 1fr !important;
}
html.app-mobile-shell body.live-demo-body:not(.app-shell) .live-demo-top,
html.app-mobile-shell body.live-demo-body:not(.app-shell) .live-demo-brief {
width: 100% !important;
min-width: 0 !important;
}
}
/* Simplified live demo flow: fewer panels, clearer hierarchy. */
body.live-demo-body .live-demo-page {
padding: 26px 0 58px;
}
body.live-demo-body .live-demo-hero {
min-height: 0;
grid-template-columns: minmax(0, 1.18fr) minmax(300px, 0.5fr);
}
body.live-demo-body .live-demo-proof-strip {
max-width: 680px;
}
body.live-demo-body .live-demo-brief div {
min-height: 108px;
}
body.live-demo-body .live-demo-brief strong {
font-size: 1.05rem;
}
body.live-demo-body .live-demo-brief p {
margin: 0;
line-height: 1.45;
}
body.live-demo-body .live-demo-scenario-options {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
body.live-demo-body .live-demo-after--simple {
display: grid;
grid-template-columns: minmax(220px, 0.42fr) minmax(0, 1fr);
align-items: stretch;
gap: 14px;
padding: 18px;
}
body.live-demo-body .live-demo-after--simple .live-demo-after__head {
align-content: center;
padding: 16px;
border: 1px solid var(--live-line);
border-radius: 8px;
background: var(--live-surface);
}
body.live-demo-body .live-demo-after--simple .live-demo-after__head h2 {
font-size: clamp(1.35rem, 2.4vw, 2rem);
}
body.live-demo-body .voice-panel {
grid-template-columns: minmax(0, 0.95fr) minmax(280px, 0.54fr);
align-items: center;
}
body.live-demo-body .voice-status-wrap {
display: flex;
align-items: center;
min-height: 132px;
}
body.live-demo-body .voice-status-copy {
display: grid;
gap: 8px;
min-width: 0;
}
body.live-demo-body .voice-runtime-strip {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
body.live-demo-body .voice-runtime-strip span {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 30px;
padding: 0 10px;
border: 1px solid var(--live-line);
border-radius: 8px;
background: rgba(255, 255, 255, 0.045);
color: var(--live-muted-strong);
font-size: 0.84rem;
font-weight: 800;
}
body.live-demo-body .voice-runtime-strip strong {
color: var(--live-ink);
font-size: 0.86rem;
}
body.live-demo-body .voice-actions {
grid-template-columns: 1fr;
align-self: stretch;
}
body.live-demo-body .voice-checklist {
grid-column: 1 / -1;
}
@media (max-width: 1180px) {
body.live-demo-body .live-demo-hero,
body.live-demo-body .live-demo-after--simple {
grid-template-columns: 1fr;
}
body.live-demo-body .voice-panel {
grid-template-columns: 1fr;
}
}
@media (max-width: 760px) {
body.live-demo-body .live-demo-proof-strip,
body.live-demo-body .live-demo-brief {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
body.live-demo-body .live-demo-proof-strip span {
min-height: 68px;
padding: 9px 7px;
}
body.live-demo-body .live-demo-proof-strip small,
body.live-demo-body .live-demo-brief p {
font-size: 0.76rem;
line-height: 1.22;
}
body.live-demo-body .live-demo-brief div {
min-height: 96px;
padding: 10px;
}
body.live-demo-body .live-demo-brief strong {
font-size: 0.9rem;
}
body.live-demo-body .voice-status-wrap {
min-height: 0;
align-items: flex-start;
}
body.live-demo-body .voice-runtime-strip {
display: grid;
grid-template-columns: 1fr;
}
body.live-demo-body .live-demo-after--simple {
padding: 16px;
}
body.live-demo-body .live-demo-after--simple .live-demo-mini-steps,
body.live-demo-body .live-demo-scenario-options {
grid-template-columns: 1fr;
}
}
.site-footer__link-button {
display: inline;
width: fit-content;
border: 0;
padding: 0;
background: transparent;
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
}
.site-footer__link-button:hover,
.site-footer__link-button:focus-visible {
color: var(--brand-primary, #60a5fa);
text-decoration: underline;
}
.cookie-banner {
position: fixed;
right: 18px;
bottom: 18px;
z-index: 1500;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 18px;
width: min(920px, calc(100vw - 36px));
padding: 16px;
border: 1px solid rgba(148, 163, 184, 0.24);
border-radius: 8px;
background: rgba(15, 23, 42, 0.96);
color: #f8fafc;
box-shadow: 0 24px 70px rgba(2, 6, 23, 0.34);
opacity: 0;
transform: translateY(18px) scale(0.985);
transition:
opacity 0.42s ease,
transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}
.cookie-banner.is-visible {
opacity: 1;
transform: translateY(0) scale(1);
}
.cookie-banner[hidden],
.cookie-modal[hidden] {
display: none !important;
}
.cookie-banner__body {
display: grid;
gap: 6px;
}
.cookie-banner__body strong,
.cookie-modal__dialog h2,
.cookie-choice strong {
color: inherit;
}
.cookie-banner__body p,
.cookie-modal__dialog p,
.cookie-choice small {
margin: 0;
color: rgba(226, 232, 240, 0.78);
line-height: 1.5;
}
.cookie-banner__actions,
.cookie-modal__actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
justify-content: flex-end;
}
.cookie-modal {
position: fixed;
inset: 0;
z-index: 1510;
display: grid;
place-items: center;
padding: 18px;
}
.cookie-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(2, 6, 23, 0.68);
}
.cookie-modal__dialog {
position: relative;
display: grid;
gap: 16px;
width: min(680px, 100%);
max-height: calc(100vh - 36px);
overflow: auto;
padding: 22px;
border: 1px solid rgba(148, 163, 184, 0.24);
border-radius: 8px;
background: #0f172a;
color: #f8fafc;
box-shadow: 0 30px 90px rgba(2, 6, 23, 0.42);
}
.cookie-modal__close {
position: absolute;
top: 12px;
right: 12px;
display: grid;
width: 34px;
height: 34px;
place-items: center;
border: 1px solid rgba(148, 163, 184, 0.22);
border-radius: 50%;
background: rgba(15, 23, 42, 0.72);
color: #f8fafc;
cursor: pointer;
}
.cookie-choice-list {
display: grid;
gap: 10px;
}
.cookie-choice {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 16px;
align-items: center;
padding: 14px;
border: 1px solid rgba(148, 163, 184, 0.2);
border-radius: 8px;
background: rgba(30, 41, 59, 0.62);
}
.cookie-choice span {
display: grid;
gap: 4px;
}
.cookie-choice input {
width: 22px;
height: 22px;
accent-color: #60a5fa;
}
body[data-theme="light"] .cookie-banner,
body[data-theme="light"] .cookie-modal__dialog {
border-color: rgba(15, 23, 42, 0.12);
background: rgba(255, 255, 255, 0.98);
color: #0f172a;
box-shadow: 0 24px 70px rgba(15, 23, 42, 0.18);
}
body[data-theme="light"] .cookie-banner__body p,
body[data-theme="light"] .cookie-modal__dialog p,
body[data-theme="light"] .cookie-choice small {
color: rgba(51, 65, 85, 0.78);
}
body[data-theme="light"] .cookie-choice {
border-color: rgba(15, 23, 42, 0.1);
background: rgba(248, 250, 252, 0.92);
}
body[data-theme="light"] .cookie-modal__close {
background: rgba(248, 250, 252, 0.94);
color: #0f172a;
}
@media (max-width: 760px) {
.cookie-banner {
left: 14px;
right: 14px;
bottom: 14px;
grid-template-columns: 1fr;
width: auto;
}
html.app-mobile-shell .cookie-banner {
bottom: calc(112px + env(safe-area-inset-bottom));
}
.cookie-banner__actions,
.cookie-modal__actions {
justify-content: stretch;
}
.cookie-banner__actions .btn,
.cookie-modal__actions .btn {
flex: 1 1 140px;
}
}
/* Home intake refactor: the index is now a business personalization gateway. */
.home-page .home-mobile-sticky-cta {
display: none !important;
}
.home-intake-hero {
position: relative;
padding: clamp(34px, 7vw, 86px) 0 clamp(28px, 5vw, 62px);
background:
linear-gradient(180deg, rgba(10, 17, 31, 0.96), rgba(8, 13, 26, 0.98)),
#0a111f;
}
.home-intake-hero::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(90deg, rgba(45, 212, 191, 0.12), transparent 36%),
linear-gradient(270deg, rgba(99, 102, 241, 0.12), transparent 40%);
}
.home-intake-panel__head span,
.home-intake-search label,
.home-intake-selected span {
color: #93c5fd;
font-size: 0.76rem;
font-weight: 950;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.home-intake-verticals {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 10px;
}
.home-intake-vertical {
--home-intake-accent: #5eead4;
display: grid;
grid-template-rows: auto minmax(0, 1fr);
gap: 10px;
min-height: 176px;
padding: 12px;
border: 1px solid rgba(148, 163, 184, 0.16);
border-radius: 8px;
background: rgba(255, 255, 255, 0.045);
color: #f8fafc;
text-align: left;
cursor: pointer;
transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}
.home-intake-vertical--restaurant { --home-intake-accent: #5eead4; }
.home-intake-vertical--hotel { --home-intake-accent: #f4d38d; }
.home-intake-vertical--artisan { --home-intake-accent: #38bdf8; }
.home-intake-vertical--commerce { --home-intake-accent: #c084fc; }
.home-intake-vertical--services { --home-intake-accent: #34d399; }
.home-intake-vertical:hover,
.home-intake-vertical:focus-visible,
.home-intake-vertical.is-selected {
border-color: var(--home-intake-accent);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.04)),
rgba(255, 255, 255, 0.045);
transform: translateY(-2px);
}
.home-intake-vertical.is-selected {
box-shadow: inset 0 0 0 1px var(--home-intake-accent);
}
.home-intake-vertical__icon {
display: grid;
width: 46px;
height: 46px;
place-items: center;
border: 1px solid currentColor;
border-radius: 8px;
background: rgba(255, 255, 255, 0.06);
color: var(--home-intake-accent);
}
.home-intake-vertical__icon svg,
.home-intake-search__field svg {
width: 22px;
height: 22px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.home-intake-vertical__text {
display: grid;
gap: 6px;
min-width: 0;
}
.home-intake-vertical__text strong {
color: #f8fafc;
font-size: 1rem;
}
.home-intake-vertical__text small {
display: -webkit-box;
overflow: hidden;
color: rgba(226, 232, 240, 0.68);
font-size: 0.82rem;
line-height: 1.35;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
.home-intake-search {
display: grid;
gap: 10px;
padding: 14px;
border: 1px solid rgba(148, 163, 184, 0.16);
border-radius: 8px;
background: rgba(2, 6, 23, 0.24);
}
.home-intake-search form {
display: grid;
grid-template-columns: minmax(0, 1fr) max-content;
gap: 10px;
}
.home-intake-search__field {
display: grid;
grid-template-columns: 42px minmax(0, 1fr);
align-items: center;
min-height: 54px;
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 8px;
background: rgba(15, 23, 42, 0.78);
color: #93c5fd;
}
.home-intake-search__field input {
width: 100%;
min-width: 0;
height: 100%;
border: 0;
background: transparent;
color: #f8fafc;
font: inherit;
outline: none;
}
.home-intake-search__field input::placeholder {
color: rgba(226, 232, 240, 0.42);
}
.home-intake-search__field svg {
justify-self: center;
}
.home-intake-status {
margin: 0;
color: rgba(226, 232, 240, 0.68);
font-size: 0.9rem;
line-height: 1.45;
}
.home-intake-results {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.home-intake-result {
display: grid;
gap: 5px;
min-height: 118px;
padding: 12px;
border: 1px solid rgba(148, 163, 184, 0.16);
border-radius: 8px;
background: rgba(255, 255, 255, 0.045);
color: #f8fafc;
text-align: left;
cursor: pointer;
}
.home-intake-result:hover,
.home-intake-result:focus-visible {
border-color: rgba(94, 234, 212, 0.42);
background: rgba(20, 184, 166, 0.09);
}
.home-intake-result span,
.home-intake-result small,
.home-intake-selected p {
color: rgba(226, 232, 240, 0.66);
line-height: 1.35;
}
.home-intake-selected {
display: grid;
gap: 5px;
padding: 12px;
border: 1px solid rgba(52, 211, 153, 0.24);
border-radius: 8px;
background: rgba(52, 211, 153, 0.08);
}
.home-intake-selected strong {
color: #f8fafc;
}
.home-intake-selected p {
margin: 0;
}
.home-intake-actions .btn,
.home-intake-search .btn {
justify-content: center;
border-radius: 8px;
}
body.landing-refresh[data-theme="light"] .home-intake-hero {
background:
linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(239, 246, 255, 0.96)),
#f8fafc;
}
body.landing-refresh[data-theme="light"] .home-intake-flow span,
body.landing-refresh[data-theme="light"] .home-intake-panel,
body.landing-refresh[data-theme="light"] .home-intake-search,
body.landing-refresh[data-theme="light"] .home-intake-vertical,
body.landing-refresh[data-theme="light"] .home-intake-result,
body.landing-refresh[data-theme="light"] .home-intake-selected {
border-color: rgba(15, 23, 42, 0.1);
background: rgba(255, 255, 255, 0.82);
color: #0f172a;
box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
}
body.landing-refresh[data-theme="light"] .home-intake-vertical__text strong,
body.landing-refresh[data-theme="light"] .home-intake-result strong,
body.landing-refresh[data-theme="light"] .home-intake-selected strong {
color: #0f172a;
}
body.landing-refresh[data-theme="light"] .home-intake-vertical__text small,
body.landing-refresh[data-theme="light"] .home-intake-status,
body.landing-refresh[data-theme="light"] .home-intake-result span,
body.landing-refresh[data-theme="light"] .home-intake-result small,
body.landing-refresh[data-theme="light"] .home-intake-selected p {
color: #64748b;
}
body.landing-refresh[data-theme="light"] .home-intake-search__field {
border-color: rgba(15, 23, 42, 0.12);
background: #f8fafc;
color: #2563eb;
}
body.landing-refresh[data-theme="light"] .home-intake-search__field input {
color: #0f172a;
}
@media (max-width: 760px) {
.home-intake-hero {
padding: 14px 0 22px;
}
.home-intake-verticals {
display: flex;
gap: 8px;
margin-inline: -2px;
padding: 2px 2px 8px;
overflow-x: auto;
scroll-snap-type: x proximity;
scrollbar-width: none;
}
.home-intake-verticals::-webkit-scrollbar {
display: none;
}
.home-intake-vertical {
flex: 0 0 132px;
min-height: 112px;
padding: 10px;
scroll-snap-align: start;
}
.home-intake-vertical__icon {
width: 38px;
height: 38px;
}
.home-intake-vertical__text small {
display: none;
}
.home-intake-search {
padding: 10px;
}
.home-intake-search form,
.home-intake-results,
.home-intake-actions {
grid-template-columns: 1fr;
}
.home-intake-search form {
grid-template-columns: minmax(0, 1fr) 104px;
}
.home-intake-search .btn,
.home-intake-actions .btn {
width: 100%;
min-height: 48px;
}
.home-intake-result {
min-height: 0;
}
}
/* Home gateway v2: the root page is only the business intake. */
body.home-gateway-page {
min-height: 100svh;
overflow-x: hidden;
}
body.home-gateway-page .home-mobile-sticky-cta,
body.home-gateway-page .site-header--public .menu,
body.home-gateway-page .nav-actions--public .nav-auth-link--primary {
display: none !important;
}
html.app-mobile-shell body.home-gateway-page .nav-actions--public .nav-auth-link--primary {
display: none !important;
}
html.app-mobile-shell body.home-gateway-page.landing-refresh:not(.app-shell) .nav-actions--public .nav-auth-link.nav-auth-link--primary {
display: none !important;
}
body.home-gateway-page .site-header {
border-bottom-color: rgba(148, 163, 184, 0.12);
background:
linear-gradient(90deg, rgba(8, 13, 26, 0.92), rgba(14, 21, 38, 0.88)),
rgba(8, 13, 26, 0.9);
backdrop-filter: blur(18px);
}
body.home-gateway-page .site-main {
min-height: calc(100svh - 86px);
}
.home-gateway {
--home-selected-accent: #5eead4;
min-height: calc(100svh - 86px);
padding: clamp(30px, 4.4vw, 58px) 0 clamp(32px, 4.4vw, 62px);
background:
linear-gradient(135deg, rgba(4, 10, 24, 0.98) 0%, rgba(9, 17, 35, 0.98) 42%, rgba(15, 23, 42, 0.98) 100%),
#070d19;
}
.home-gateway::before {
background:
linear-gradient(120deg, rgba(45, 212, 191, 0.16), transparent 28%),
linear-gradient(240deg, rgba(96, 165, 250, 0.13), transparent 30%),
linear-gradient(180deg, transparent 0%, rgba(96, 165, 250, 0.08) 100%);
}
.home-gateway::after {
content: "";
position: absolute;
inset: auto 0 0;
height: 1px;
pointer-events: none;
background: linear-gradient(90deg, transparent, rgba(94, 234, 212, 0.46), rgba(96, 165, 250, 0.3), transparent);
}
.home-gateway-shell {
position: relative;
z-index: 1;
display: grid;
width: min(calc(100% - 56px), 1120px);
max-width: 1120px !important;
margin-inline: auto;
grid-template-columns: 1fr;
gap: clamp(24px, 3.4vw, 38px);
align-items: stretch;
}
.home-gateway-intro {
display: grid;
justify-items: center;
gap: clamp(16px, 2vw, 22px);
text-align: center;
}
.home-gateway-intro .home-eyebrow {
width: fit-content;
border-color: rgba(94, 234, 212, 0.34);
background: rgba(20, 184, 166, 0.12);
color: #99f6e4;
}
.home-gateway-intro h1 {
max-width: min(100%, 15ch);
margin: 0;
color: #f8fafc;
font-size: clamp(2.8rem, 4.4vw, 4.75rem);
line-height: 0.95;
letter-spacing: 0;
}
.home-gateway-intro p {
max-width: 760px;
margin: 0;
color: rgba(226, 232, 240, 0.78);
font-size: clamp(1rem, 1.2vw, 1.16rem);
line-height: 1.58;
}
.home-gateway-proof {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
width: min(100%, 780px);
max-width: 780px;
}
.home-gateway-proof span {
position: relative;
display: grid;
grid-template-columns: 18px minmax(0, 1fr);
column-gap: 9px;
row-gap: 3px;
align-items: start;
min-width: 0;
padding: 14px 13px;
border: 1px solid rgba(94, 234, 212, 0.17);
border-radius: 8px;
background:
linear-gradient(145deg, rgba(94, 234, 212, 0.09), rgba(96, 165, 250, 0.04)),
rgba(15, 23, 42, 0.72);
box-shadow:
0 18px 44px rgba(2, 6, 23, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.home-gateway-proof span::before {
content: "";
grid-row: 1 / span 2;
align-self: start;
justify-self: center;
width: 9px;
height: 9px;
margin-top: 3px;
border-radius: 999px;
background: linear-gradient(135deg, #5eead4, #60a5fa);
box-shadow:
0 0 0 5px rgba(94, 234, 212, 0.1),
0 0 18px rgba(94, 234, 212, 0.22);
}
.home-gateway-proof strong {
min-width: 0;
color: #f8fafc;
font-size: 0.95rem;
line-height: 1.16;
}
.home-gateway-proof small {
min-width: 0;
color: rgba(226, 232, 240, 0.66);
font-size: 0.78rem;
line-height: 1.34;
}
.home-gateway-live-card span,
.home-gateway-next > span {
color: #93c5fd;
font-size: 0.74rem;
font-weight: 950;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.home-gateway-panel {
display: grid;
gap: 20px;
width: 100%;
max-width: 100%;
justify-self: stretch;
padding: clamp(18px, 2vw, 26px);
border: 1px solid rgba(125, 211, 252, 0.18);
border-radius: 8px;
background:
radial-gradient(circle at 18% 0%, rgba(94, 234, 212, 0.12), transparent 34%),
linear-gradient(145deg, rgba(15, 23, 42, 0.97), rgba(21, 31, 52, 0.9)),
rgba(15, 23, 42, 0.94);
box-shadow:
0 34px 120px rgba(2, 6, 23, 0.42),
inset 0 1px 0 rgba(255, 255, 255, 0.055);
}
.home-gateway-step {
display: grid;
grid-template-columns: 46px minmax(0, 1fr);
gap: 14px;
align-items: start;
}
.home-gateway-step > span {
display: grid;
width: 46px;
height: 46px;
place-items: center;
border: 1px solid rgba(94, 234, 212, 0.28);
border-radius: 8px;
background: rgba(20, 184, 166, 0.1);
color: #99f6e4;
font-weight: 950;
}
.home-gateway-step h2 {
margin: 0;
color: #f8fafc;
font-size: clamp(1.25rem, 1.58vw, 1.72rem);
line-height: 1.08;
}
.home-gateway-step p {
margin: 4px 0 0;
color: rgba(226, 232, 240, 0.66);
line-height: 1.45;
}
.home-gateway-step--search {
position: relative;
margin-top: 4px;
transition: opacity 180ms ease, transform 180ms ease;
}
.home-gateway:not(.has-vertical) .home-gateway-step--search,
.home-gateway:not(.has-vertical) .home-gateway-search,
.home-gateway:not(.has-vertical) .home-gateway-next {
display: none;
}
.home-gateway:not(.has-vertical) .home-gateway-step--search,
.home-gateway:not(.has-vertical) .home-gateway-search {
opacity: 0;
}
.home-gateway:not(.has-vertical) .home-gateway-search {
position: relative;
pointer-events: none;
border-color: rgba(148, 163, 184, 0.16);
background:
linear-gradient(135deg, rgba(148, 163, 184, 0.11), rgba(59, 130, 246, 0.055)),
rgba(2, 6, 23, 0.18);
}
.home-gateway:not(.has-vertical) .home-gateway-step--search > span {
border-color: rgba(148, 163, 184, 0.2);
background: rgba(148, 163, 184, 0.08);
color: rgba(226, 232, 240, 0.72);
}
.home-gateway:not(.has-vertical) .home-gateway-step--search h2,
.home-gateway:not(.has-vertical) .home-gateway-step--search p {
color: rgba(226, 232, 240, 0.62);
}
.home-gateway:not(.has-vertical) .home-gateway-search label {
color: rgba(191, 219, 254, 0.74);
}
.home-gateway:not(.has-vertical) .home-gateway-search .home-intake-search__field {
border-color: rgba(148, 163, 184, 0.13);
background: rgba(8, 13, 26, 0.54);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}
.home-gateway:not(.has-vertical) .home-gateway-search .home-intake-search__field svg,
.home-gateway:not(.has-vertical) .home-gateway-search .home-intake-search__field input::placeholder {
color: rgba(148, 163, 184, 0.66);
}
.home-gateway.has-vertical .home-gateway-step--search,
.home-gateway.has-vertical .home-gateway-search {
animation: homeGatewayStepReveal 220ms ease-out both;
}
@keyframes homeGatewayStepReveal {
from {
transform: translateY(5px);
}
to {
transform: translateY(0);
}
}
.home-gateway:not(.has-vertical) .home-gateway-next {
display: none;
}
.home-gateway-verticals {
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 12px;
}
.home-gateway-vertical {
position: relative;
min-height: 156px;
isolation: isolate;
overflow: hidden;
border-color: rgba(148, 163, 184, 0.18);
background:
linear-gradient(160deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.026)),
rgba(255, 255, 255, 0.045);
box-shadow:
0 16px 40px rgba(2, 6, 23, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.055);
transition: border-color 160ms ease, background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.home-gateway-vertical:hover,
.home-gateway-vertical:focus-visible,
.home-gateway-vertical.is-selected {
transform: translateY(-2px);
border-color: color-mix(in srgb, var(--home-intake-accent) 52%, rgba(148, 163, 184, 0.22));
background:
linear-gradient(145deg, color-mix(in srgb, var(--home-intake-accent) 14%, transparent), rgba(255, 255, 255, 0.045)),
rgba(255, 255, 255, 0.055);
box-shadow:
0 22px 58px rgba(2, 6, 23, 0.22),
inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.home-gateway-vertical::after {
content: "";
position: absolute;
inset: auto 12px 12px 12px;
height: 3px;
border-radius: 999px;
background: var(--home-intake-accent);
opacity: 0;
transform: scaleX(0.42);
transform-origin: left center;
transition: opacity 180ms ease, transform 180ms ease;
}
.home-gateway-vertical:hover::after,
.home-gateway-vertical:focus-visible::after,
.home-gateway-vertical.is-selected::after {
opacity: 1;
transform: scaleX(1);
}
.home-gateway-vertical .home-intake-vertical__icon {
width: 46px;
height: 46px;
background:
linear-gradient(180deg, color-mix(in srgb, var(--home-intake-accent) 18%, transparent), rgba(255, 255, 255, 0.055));
}
.home-gateway-vertical .home-intake-vertical__text strong {
font-size: 0.98rem;
}
.home-gateway-vertical .home-intake-vertical__text small {
display: block;
overflow: visible;
font-size: 0.82rem;
line-height: 1.28;
-webkit-line-clamp: unset;
}
.home-gateway-vertical.is-selected .home-intake-vertical__text strong {
color: #ffffff;
}
.home-gateway-vertical__cta {
align-self: end;
color: color-mix(in srgb, var(--home-intake-accent) 78%, white);
font-size: 0.72rem;
font-weight: 950;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.home-gateway-search {
padding: 18px;
border-color: rgba(125, 211, 252, 0.18);
background:
linear-gradient(135deg, rgba(14, 165, 233, 0.13), rgba(20, 184, 166, 0.09)),
rgba(2, 6, 23, 0.28);
}
.home-gateway-search label {
color: #bfdbfe;
}
.home-gateway-search .home-intake-search__field {
min-height: 58px;
border-color: rgba(148, 163, 184, 0.2);
background: rgba(8, 13, 26, 0.78);
}
.home-gateway-search .home-intake-search__field:has(input:disabled) {
opacity: 0.62;
}
.home-gateway-search .btn:disabled {
opacity: 0.55;
cursor: not-allowed;
box-shadow: none;
}
.home-gateway-results {
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: stretch;
}
.home-gateway-result {
min-height: 104px;
}
.home-gateway-selected {
border-color: rgba(34, 197, 94, 0.32);
background:
linear-gradient(135deg, rgba(34, 197, 94, 0.14), rgba(20, 184, 166, 0.08)),
rgba(2, 6, 23, 0.16);
}
.home-intake-selected[hidden],
.home-gateway-selected[hidden],
.home-gateway-enrichment[hidden] {
display: none !important;
}
.home-gateway-enrichment {
display: grid;
gap: 14px;
padding: 16px;
border: 1px solid rgba(94, 234, 212, 0.24);
border-radius: 8px;
background:
linear-gradient(135deg, rgba(20, 184, 166, 0.14), rgba(59, 130, 246, 0.08)),
rgba(2, 6, 23, 0.2);
}
.home-gateway-step--compact {
grid-template-columns: 38px minmax(0, 1fr);
}
.home-gateway-step--compact > span {
width: 38px;
height: 38px;
}
.home-gateway-recovered {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
.home-gateway-recovered article,
.home-gateway-profile,
.home-gateway-analysis {
border: 1px solid rgba(148, 163, 184, 0.15);
border-radius: 8px;
background: rgba(15, 23, 42, 0.6);
}
.home-gateway-recovered article {
display: grid;
gap: 5px;
min-width: 0;
padding: 12px;
}
.home-gateway-recovered span,
.home-gateway-profile > div span,
.home-gateway-analysis > div span {
color: #93c5fd;
font-size: 0.72rem;
font-weight: 950;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.home-gateway-recovered strong {
min-width: 0;
overflow: hidden;
color: #f8fafc;
font-size: 0.92rem;
line-height: 1.24;
text-overflow: ellipsis;
overflow-wrap: anywhere;
}
.home-gateway-profile {
display: grid;
grid-template-columns: minmax(180px, 0.9fr) repeat(3, minmax(0, 1fr));
gap: 10px;
padding: 12px;
}
.home-gateway-profile > div,
.home-gateway-profile label {
display: grid;
gap: 7px;
min-width: 0;
}
.home-gateway-profile > div strong,
.home-gateway-analysis > div strong {
color: #f8fafc;
line-height: 1.2;
}
.home-gateway-profile label span {
color: rgba(191, 219, 254, 0.92);
font-size: 0.78rem;
font-weight: 900;
}
.home-gateway-profile input {
width: 100%;
min-height: 42px;
padding: 0 12px;
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 8px;
background: rgba(8, 13, 26, 0.74);
color: #f8fafc;
font: inherit;
}
.home-gateway-profile input::placeholder {
color: rgba(148, 163, 184, 0.72);
}
.home-gateway-analysis {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 12px;
align-items: center;
padding: 12px;
}
.home-gateway-analysis > div {
display: grid;
gap: 5px;
}
.home-gateway-analysis p {
margin: 0;
color: rgba(226, 232, 240, 0.7);
line-height: 1.42;
}
.home-gateway-analysis__actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 8px;
}
.home-gateway-upload {
position: relative;
display: inline-flex;
min-height: 42px;
align-items: center;
justify-content: center;
padding: 0 13px;
border: 1px solid rgba(148, 163, 184, 0.2);
border-radius: 8px;
background: rgba(255, 255, 255, 0.06);
color: #bfdbfe;
font-weight: 900;
cursor: pointer;
}
.home-gateway-upload input {
position: absolute;
inset: 0;
width: 100%;
min-width: 0;
max-width: 100%;
height: 100%;
box-sizing: border-box;
opacity: 0;
cursor: pointer;
}
.home-gateway-analysis__status {
grid-column: 1 / -1;
color: rgba(153, 246, 228, 0.9) !important;
font-size: 0.86rem;
}
.home-gateway-next {
display: grid;
gap: 12px;
padding: 16px;
border: 1px solid color-mix(in srgb, var(--home-selected-accent) 34%, rgba(148, 163, 184, 0.2));
border-radius: 8px;
background:
linear-gradient(135deg, color-mix(in srgb, var(--home-selected-accent) 14%, transparent), rgba(99, 102, 241, 0.08)),
rgba(15, 23, 42, 0.76);
}
.home-gateway-next h2 {
margin: 0;
color: #f8fafc;
font-size: clamp(1.25rem, 2vw, 1.9rem);
line-height: 1.06;
}
.home-gateway-next p {
max-width: 74ch;
margin: 0;
color: rgba(226, 232, 240, 0.72);
line-height: 1.52;
}
.home-gateway-next__chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.home-gateway-next__chips span {
display: inline-flex;
align-items: center;
min-height: 30px;
padding: 0 10px;
border: 1px solid rgba(148, 163, 184, 0.16);
border-radius: 999px;
background: rgba(255, 255, 255, 0.055);
color: rgba(226, 232, 240, 0.8);
font-size: 0.82rem;
font-weight: 800;
}
.home-gateway-primary {
justify-content: center;
min-height: 54px;
border-radius: 8px;
}
.home-gateway-primary.is-disabled {
border-color: rgba(148, 163, 184, 0.16);
background:
linear-gradient(180deg, rgba(148, 163, 184, 0.18), rgba(100, 116, 139, 0.16));
color: rgba(226, 232, 240, 0.64);
box-shadow: none;
cursor: not-allowed;
}
@media (max-width: 1180px) {
.home-gateway-shell {
width: min(calc(100% - 40px), 900px);
max-width: 900px !important;
grid-template-columns: 1fr;
align-items: start;
}
.home-gateway-intro h1 {
max-width: 13.8ch;
font-size: clamp(2.65rem, 5.8vw, 4rem);
}
.home-gateway-panel {
max-width: none;
justify-self: stretch;
}
}
@media (max-width: 860px) {
body.home-gateway-page .site-main,
.home-gateway {
min-height: auto;
}
.home-gateway {
padding: 16px 0 26px;
}
.home-gateway-shell {
gap: 14px;
}
.home-gateway-intro {
gap: 12px;
}
.home-gateway-intro h1 {
max-width: 100%;
font-size: clamp(1.95rem, 8.4vw, 2.72rem);
line-height: 1.02;
}
.home-gateway-intro p {
font-size: 0.95rem;
line-height: 1.45;
}
.home-gateway-proof {
grid-template-columns: 1fr;
}
.home-gateway-panel {
padding: 12px;
gap: 12px;
}
.home-gateway-step {
grid-template-columns: 38px minmax(0, 1fr);
gap: 10px;
}
.home-gateway-step > span {
width: 38px;
height: 38px;
}
.home-gateway-step h2 {
font-size: 1.12rem;
}
.home-gateway-step p {
font-size: 0.9rem;
}
.home-gateway-verticals {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
overflow: visible;
}
.home-gateway-vertical {
min-height: 118px;
padding: 12px;
}
.home-gateway-vertical .home-intake-vertical__icon {
width: 40px;
height: 40px;
}
.home-gateway-vertical .home-intake-vertical__text small {
display: -webkit-box;
-webkit-line-clamp: 2;
}
.home-gateway-search form,
.home-gateway-results,
.home-gateway-recovered,
.home-gateway-profile,
.home-gateway-analysis {
grid-template-columns: 1fr;
}
.home-gateway-search form {
gap: 8px;
}
.home-gateway-search .btn {
min-height: 48px;
}
.home-gateway-next {
padding: 12px;
}
.home-gateway-enrichment {
padding: 12px;
gap: 12px;
}
.home-gateway-profile {
padding: 12px;
}
.home-gateway-analysis__actions {
justify-content: stretch;
}
.home-gateway-analysis__actions .btn,
.home-gateway-upload {
width: 100%;
}
}
@media (max-width: 520px) {
html.app-mobile-shell body.home-gateway-page.landing-refresh:not(.app-shell) .site-header .menu {
display: none !important;
}
body.home-gateway-page .nav-actions--public .nav-auth-link--secondary {
min-width: 46px;
padding-inline: 10px;
}
body.home-gateway-page .nav-actions--public .nav-auth-link--secondary .nav-auth-link__eyebrow {
display: none;
}
.home-gateway-verticals {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.home-gateway-vertical {
grid-template-columns: 38px minmax(0, 1fr);
grid-template-rows: auto;
align-items: start;
min-height: 92px;
gap: 9px;
padding: 11px;
overflow: visible;
}
.home-gateway-vertical::after {
display: none;
}
.home-gateway-vertical .home-intake-vertical__icon {
width: 38px;
height: 38px;
}
.home-gateway-vertical .home-intake-vertical__text {
gap: 3px;
overflow: visible;
}
.home-gateway-vertical .home-intake-vertical__text strong {
font-size: 0.95rem;
}
.home-gateway-vertical .home-intake-vertical__text small {
display: block;
overflow: visible;
color: rgba(226, 232, 240, 0.72);
font-size: 0.75rem;
line-height: 1.26;
-webkit-line-clamp: unset;
}
.home-gateway-vertical__cta {
display: none;
}
.home-gateway-proof {
gap: 7px;
}
.home-gateway-proof span {
padding: 10px 11px;
}
.home-gateway-next__chips {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.home-gateway-next__chips span {
justify-content: center;
}
.home-gateway-step--compact {
grid-template-columns: 34px minmax(0, 1fr);
}
.home-gateway-step--compact > span {
width: 34px;
height: 34px;
}
.home-gateway-recovered {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.home-gateway-recovered article {
padding: 10px;
}
.home-gateway-recovered strong {
font-size: 0.86rem;
}
}
@media (max-width: 520px) {
body.home-gateway-page .home-gateway {
padding: 10px 0 18px !important;
}
body.home-gateway-page .home-gateway-shell {
gap: 10px !important;
}
body.home-gateway-page .home-gateway-intro {
gap: 8px !important;
}
body.home-gateway-page .home-gateway-intro h1 {
max-width: 11ch !important;
font-size: clamp(2rem, 10vw, 2.5rem) !important;
line-height: 1.02 !important;
letter-spacing: 0 !important;
}
body.home-gateway-page .home-gateway-intro p {
display: -webkit-box !important;
overflow: hidden !important;
-webkit-box-orient: vertical !important;
-webkit-line-clamp: 3 !important;
font-size: 0.9rem !important;
line-height: 1.36 !important;
}
body.home-gateway-page .home-gateway-intro .home-eyebrow {
padding: 7px 10px !important;
font-size: 0.68rem !important;
}
body.home-gateway-page .home-gateway-proof {
display: none !important;
}
body.home-gateway-page .home-gateway-panel {
gap: 10px !important;
padding: 10px !important;
border-radius: 8px !important;
}
body.home-gateway-page .home-gateway-step {
grid-template-columns: 34px minmax(0, 1fr) !important;
gap: 8px !important;
}
body.home-gateway-page .home-gateway-step > span {
width: 34px !important;
height: 34px !important;
border-radius: 8px !important;
font-size: 0.84rem !important;
}
body.home-gateway-page .home-gateway-step h2 {
font-size: 1.04rem !important;
line-height: 1.08 !important;
}
body.home-gateway-page .home-gateway-step p {
display: none !important;
}
body.home-gateway-page .home-gateway-verticals {
gap: 7px !important;
}
body.home-gateway-page .home-gateway-vertical {
min-height: 74px !important;
grid-template-columns: 32px minmax(0, 1fr) !important;
gap: 7px !important;
padding: 8px !important;
border-radius: 8px !important;
}
body.home-gateway-page .home-gateway-vertical .home-intake-vertical__icon {
width: 32px !important;
height: 32px !important;
border-radius: 8px !important;
}
body.home-gateway-page .home-gateway-vertical .home-intake-vertical__text strong {
font-size: 0.84rem !important;
line-height: 1.05 !important;
}
body.home-gateway-page .home-gateway-vertical .home-intake-vertical__text small {
display: -webkit-box !important;
overflow: hidden !important;
-webkit-box-orient: vertical !important;
-webkit-line-clamp: 2 !important;
font-size: 0.68rem !important;
line-height: 1.12 !important;
}
body.home-gateway-page .home-gateway-step--search {
margin-top: 2px !important;
}
body.home-gateway-page .home-gateway-search {
gap: 8px !important;
padding: 10px !important;
border-radius: 8px !important;
}
body.home-gateway-page .home-gateway-search label {
font-size: 0.7rem !important;
letter-spacing: 0.04em !important;
}
body.home-gateway-page .home-gateway-search form {
gap: 7px !important;
}
body.home-gateway-page .home-gateway-search .home-intake-search__field {
min-height: 46px !important;
border-radius: 8px !important;
}
body.home-gateway-page .home-gateway-search input {
min-height: 46px !important;
font-size: 16px !important;
}
body.home-gateway-page .home-gateway-search .btn {
min-height: 44px !important;
border-radius: 8px !important;
}
body.home-gateway-page .home-intake-status {
margin: 0 !important;
font-size: 0.78rem !important;
line-height: 1.28 !important;
}
}
body.home-gateway-page[data-theme="light"] .site-header {
background: rgba(248, 250, 252, 0.9);
}
body.home-gateway-page[data-theme="light"] .home-gateway {
background:
linear-gradient(135deg, #f8fafc 0%, #eef6ff 48%, #ecfeff 100%),
#f8fafc;
}
body.home-gateway-page[data-theme="light"] .home-gateway-intro h1,
body.home-gateway-page[data-theme="light"] .home-gateway-step h2,
body.home-gateway-page[data-theme="light"] .home-gateway-next h2,
body.home-gateway-page[data-theme="light"] .home-gateway-live-card strong,
body.home-gateway-page[data-theme="light"] .home-gateway-proof strong {
color: #0f172a;
}
body.home-gateway-page[data-theme="light"] .home-gateway-intro p,
body.home-gateway-page[data-theme="light"] .home-gateway-step p,
body.home-gateway-page[data-theme="light"] .home-gateway-next p,
body.home-gateway-page[data-theme="light"] .home-gateway-proof small {
color: #526174;
}
body.home-gateway-page[data-theme="light"] .home-gateway-panel,
body.home-gateway-page[data-theme="light"] .home-gateway-proof span,
body.home-gateway-page[data-theme="light"] .home-gateway-live-card div,
body.home-gateway-page[data-theme="light"] .home-gateway-next,
body.home-gateway-page[data-theme="light"] .home-gateway-search,
body.home-gateway-page[data-theme="light"] .home-gateway-enrichment,
body.home-gateway-page[data-theme="light"] .home-gateway-recovered article,
body.home-gateway-page[data-theme="light"] .home-gateway-profile,
body.home-gateway-page[data-theme="light"] .home-gateway-analysis {
border-color: rgba(15, 23, 42, 0.1);
background: rgba(255, 255, 255, 0.78);
box-shadow: 0 24px 80px rgba(15, 23, 42, 0.12);
}
body.home-gateway-page[data-theme="light"] .home-gateway-search .home-intake-search__field {
background: #f8fafc;
}
body.home-gateway-page[data-theme="light"] .home-gateway-recovered strong,
body.home-gateway-page[data-theme="light"] .home-gateway-profile > div strong,
body.home-gateway-page[data-theme="light"] .home-gateway-analysis > div strong {
color: #0f172a;
}
body.home-gateway-page[data-theme="light"] .home-gateway-profile input {
border-color: rgba(15, 23, 42, 0.12);
background: #ffffff;
color: #0f172a;
}
body.home-gateway-page[data-theme="light"] .home-gateway-analysis p {
color: #526174;
}
body.home-gateway-page[data-theme="light"] .home-gateway-next__chips span {
border-color: rgba(15, 23, 42, 0.1);
background: rgba(255, 255, 255, 0.75);
color: #334155;
}
body.home-gateway-page[data-theme="light"] .home-gateway-primary.is-disabled {
background: rgba(15, 23, 42, 0.08);
color: #64748b;
}
@media (max-width: 1180px) {
.home-gateway-shell {
width: min(calc(100% - 40px), 900px);
max-width: 900px !important;
grid-template-columns: 1fr;
align-items: start;
}
.home-gateway-intro h1 {
max-width: 13.8ch;
font-size: clamp(2.65rem, 5.8vw, 4rem);
}
.home-gateway-panel {
max-width: none;
justify-self: stretch;
}
}
@media (max-width: 860px) {
body.home-gateway-page .site-main,
.home-gateway {
min-height: auto;
}
.home-gateway {
padding: 16px 0 26px;
}
.home-gateway-shell {
gap: 14px;
}
.home-gateway-intro {
gap: 12px;
}
.home-gateway-intro h1 {
max-width: 100%;
font-size: clamp(2.08rem, 8.8vw, 3rem);
line-height: 1.02;
}
.home-gateway-intro p {
font-size: 0.95rem;
line-height: 1.45;
}
.home-gateway-panel {
padding: 12px;
gap: 12px;
}
.home-gateway-step {
grid-template-columns: 38px minmax(0, 1fr);
gap: 10px;
}
.home-gateway-step > span {
width: 38px;
height: 38px;
}
.home-gateway-step h2 {
font-size: 1.12rem;
}
.home-gateway-step p {
font-size: 0.9rem;
}
.home-gateway-verticals {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
overflow: visible;
}
.home-gateway-vertical {
min-height: 118px;
padding: 12px;
}
.home-gateway-vertical .home-intake-vertical__icon {
width: 40px;
height: 40px;
}
.home-gateway-vertical .home-intake-vertical__text small {
display: -webkit-box;
-webkit-line-clamp: 2;
}
.home-gateway-search form,
.home-gateway-results,
.home-gateway-recovered,
.home-gateway-profile,
.home-gateway-analysis {
grid-template-columns: 1fr;
}
.home-gateway-search form {
gap: 8px;
}
.home-gateway-search .btn {
min-height: 48px;
}
.home-gateway-next {
padding: 12px;
}
.home-gateway-enrichment {
padding: 12px;
gap: 12px;
}
.home-gateway-profile {
padding: 12px;
}
.home-gateway-analysis__actions {
justify-content: stretch;
}
.home-gateway-analysis__actions .btn,
.home-gateway-upload {
width: 100%;
}
}
@media (max-width: 520px) {
html.app-mobile-shell body.home-gateway-page.landing-refresh:not(.app-shell) .site-header .menu {
display: none !important;
}
body.home-gateway-page .nav-actions--public .nav-auth-link--secondary {
min-width: 46px;
padding-inline: 10px;
}
body.home-gateway-page .nav-actions--public .nav-auth-link--secondary .nav-auth-link__eyebrow {
display: none;
}
.home-gateway-verticals {
grid-template-columns: 1fr;
}
.home-gateway-vertical {
grid-template-columns: 48px minmax(0, 1fr);
grid-template-rows: auto auto;
align-items: start;
min-height: 0;
gap: 8px 12px;
padding: 14px;
overflow: visible;
}
.home-gateway-vertical::after {
display: none;
}
.home-gateway-vertical .home-intake-vertical__icon {
grid-row: 1 / span 2;
width: 44px;
height: 44px;
}
.home-gateway-vertical .home-intake-vertical__text {
gap: 3px;
overflow: visible;
}
.home-gateway-vertical .home-intake-vertical__text strong {
font-size: 1rem;
}
.home-gateway-vertical .home-intake-vertical__text small {
display: block;
overflow: visible;
color: rgba(226, 232, 240, 0.72);
line-height: 1.35;
-webkit-line-clamp: unset;
}
.home-gateway-vertical__cta {
grid-column: 2;
grid-row: 2;
justify-self: start;
align-self: start;
margin-top: 4px;
padding: 6px 8px;
border: 1px solid color-mix(in srgb, var(--home-intake-accent) 45%, transparent);
border-radius: 999px;
background: color-mix(in srgb, var(--home-intake-accent) 12%, transparent);
font-size: 0.68rem;
}
.home-gateway-next__chips {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.home-gateway-next__chips span {
justify-content: center;
}
.home-gateway-step--compact {
grid-template-columns: 34px minmax(0, 1fr);
}
.home-gateway-step--compact > span {
width: 34px;
height: 34px;
}
.home-gateway-recovered {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.home-gateway-recovered article {
padding: 10px;
}
.home-gateway-recovered strong {
font-size: 0.86rem;
}
}
@media (max-width: 360px) {
.home-gateway-vertical {
grid-template-columns: 44px minmax(0, 1fr) max-content;
}
}
@media (max-width: 720px) {
html.app-mobile-shell body.vertical-page.landing-refresh:not(.app-shell) .site-header .menu {
display: none !important;
}
html.app-mobile-shell body.vertical-page.landing-refresh:not(.app-shell) .home-mobile-sticky-cta {
display: none !important;
}
body.vertical-page .site-main {
padding-bottom: calc(24px + env(safe-area-inset-bottom)) !important;
}
body.vertical-page .vertical-hero {
padding: 18px 0 12px !important;
}
body.vertical-page .vertical-hero__grid,
body.vertical-page .vertical-signature__grid,
body.vertical-page .vertical-funnel__shell,
body.vertical-page .vertical-split,
body.vertical-page .vertical-start {
gap: 12px !important;
}
body.vertical-page .vertical-hero__copy {
gap: 10px !important;
}
body.vertical-page .vertical-hero__copy h1 {
max-width: 100% !important;
font-size: clamp(1.88rem, 8.2vw, 2.42rem) !important;
line-height: 1.04 !important;
text-wrap: balance;
}
body.vertical-page .vertical-hero__copy p {
font-size: 0.95rem !important;
line-height: 1.45 !important;
}
body.vertical-page .vertical-hero__ready-grid {
display: none !important;
}
body.vertical-page .vertical-hero__actions,
body.vertical-page .vertical-start__actions,
body.vertical-page .home-cta__actions {
grid-template-columns: 1fr !important;
gap: 8px !important;
width: 100% !important;
}
body.vertical-page .vertical-hero__actions {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
body.vertical-page .vertical-hero__actions .btn:first-child {
grid-column: 1 / -1;
}
body.vertical-page .vertical-hero__actions .btn,
body.vertical-page .home-cta__actions .btn {
width: 100% !important;
min-height: 44px !important;
padding: 0.68rem 0.78rem !important;
font-size: 0.9rem !important;
}
body.vertical-page .vertical-proof-strip {
display: flex !important;
flex-wrap: wrap !important;
gap: 6px !important;
width: 100% !important;
}
body.vertical-page .vertical-proof-strip span {
min-height: 30px !important;
padding: 6px 9px !important;
border-radius: 999px !important;
font-size: 0.72rem !important;
line-height: 1.15 !important;
}
body.vertical-page .vertical-ready-panel,
body.vertical-page .vertical-funnel__head,
body.vertical-page .vertical-funnel__next,
body.vertical-page .vertical-funnel__steps article,
body.vertical-page .vertical-signature__copy,
body.vertical-page .vertical-signature-board,
body.vertical-page .home-steps--process article,
body.vertical-page .vertical-faq-grid article,
body.vertical-page .vertical-integration-panel,
body.vertical-page .home-cta__card {
padding: 12px !important;
border-radius: 8px !important;
box-shadow: 0 12px 32px rgba(2, 6, 23, 0.16) !important;
}
body.vertical-page .vertical-ready-panel {
gap: 10px !important;
}
body.vertical-page .vertical-ready-panel__summary {
display: none !important;
}
body.vertical-page .vertical-ready-panel__header {
display: grid !important;
gap: 5px !important;
padding-bottom: 8px !important;
}
body.vertical-page .vertical-ready-panel__header strong {
font-size: 1.22rem !important;
line-height: 1.12 !important;
}
body.vertical-page .vertical-ready-panel__header small,
body.vertical-page .vertical-ready-panel__outcome p {
font-size: 0.88rem !important;
line-height: 1.38 !important;
}
body.vertical-page .vertical-ready-panel__badge {
display: none !important;
}
body.vertical-page .vertical-ready-panel__context,
body.vertical-page .vertical-ready-panel__outcome {
gap: 7px !important;
padding: 10px !important;
}
body.vertical-page .vertical-ready-panel__context ul {
gap: 6px !important;
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
body.vertical-page .vertical-ready-panel__context li {
display: grid !important;
grid-template-columns: 76px minmax(0, 1fr) !important;
gap: 8px !important;
align-items: start !important;
padding: 7px 8px !important;
}
body.vertical-page .vertical-ready-panel__context li strong,
body.vertical-page .vertical-ready-panel__context li span {
font-size: 0.82rem !important;
line-height: 1.3 !important;
}
body.vertical-page .vertical-ready-panel--generic .vertical-ready-panel__context,
body.vertical-page .vertical-ready-panel__outcome {
display: none !important;
}
body.vertical-page .vertical-ready-panel--business .vertical-ready-panel__context li:nth-child(n+4) {
display: none !important;
}
body.vertical-page .vertical-ready-panel--business .vertical-ready-panel__context > span {
color: #a7f3d0 !important;
}
body.vertical-page .vertical-start__copy h2,
body.vertical-page .vertical-funnel__head h2,
body.vertical-page .vertical-signature__copy h2,
body.vertical-page .home-section__head h2,
body.vertical-page .vertical-integration-panel h2,
body.vertical-page .home-cta__card h2 {
max-width: 100% !important;
font-size: clamp(1.7rem, 8vw, 2.28rem) !important;
line-height: 1.04 !important;
}
body.vertical-page .vertical-start__copy p,
body.vertical-page .vertical-funnel__head p,
body.vertical-page .vertical-funnel__next p,
body.vertical-page .vertical-signature__copy p,
body.vertical-page .home-section__head p,
body.vertical-page .vertical-integration-panel p,
body.vertical-page .home-cta__card p {
font-size: 0.92rem !important;
line-height: 1.45 !important;
}
body.vertical-page .vertical-start__actions a {
grid-template-columns: 36px minmax(0, 1fr) !important;
min-height: 0 !important;
gap: 2px 10px !important;
padding: 11px !important;
}
body.vertical-page .vertical-start__actions a > span {
grid-row: span 2 !important;
}
body.vertical-page .vertical-start__actions small,
body.vertical-page .home-steps--process article p,
body.vertical-page .vertical-faq-grid article p,
body.vertical-page .vertical-integration-panel a span,
body.vertical-page .vertical-signature-board article p {
display: -webkit-box !important;
overflow: hidden !important;
-webkit-box-orient: vertical !important;
-webkit-line-clamp: 2 !important;
font-size: 0.84rem !important;
line-height: 1.34 !important;
}
body.vertical-page .vertical-funnel__steps {
gap: 8px !important;
}
body.vertical-page .vertical-funnel__steps article {
display: grid !important;
grid-template-columns: 34px minmax(0, 1fr) !important;
gap: 2px 10px !important;
min-height: 0 !important;
}
body.vertical-page .vertical-funnel__steps article > span {
grid-row: span 2 !important;
width: 32px !important;
height: 32px !important;
font-size: 0.74rem !important;
}
body.vertical-page .vertical-funnel__steps h3,
body.vertical-page .vertical-funnel__next h3,
body.vertical-page .home-steps--process article h3,
body.vertical-page .vertical-faq-grid article h3 {
font-size: 1rem !important;
line-height: 1.2 !important;
}
body.vertical-page .vertical-funnel__steps p {
grid-column: 2 !important;
font-size: 0.86rem !important;
line-height: 1.34 !important;
}
body.vertical-page .vertical-signature__bullets,
body.vertical-page .vertical-signature-tools,
body.vertical-page .vertical-integration-panel div {
grid-template-columns: 1fr !important;
gap: 7px !important;
}
body.vertical-page .vertical-signature__bullets span,
body.vertical-page .vertical-signature-tools span {
min-height: 34px !important;
padding: 7px 9px !important;
font-size: 0.78rem !important;
}
body.vertical-page .restaurant-floor-board__tables {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 7px !important;
}
body.vertical-page .restaurant-floor-board__tables span,
body.vertical-page .commerce-stock-board__shelves span {
min-height: 50px !important;
font-size: 1rem !important;
}
body.vertical-page .hotel-reception-board__lanes,
body.vertical-page .commerce-stock-board__shelves,
body.vertical-page .services-agenda-board__slots {
grid-template-columns: 1fr !important;
gap: 7px !important;
}
body.vertical-page .home-steps--process,
body.vertical-page .vertical-faq-grid {
gap: 8px !important;
}
body.vertical-page .cookie-banner {
bottom: calc(12px + env(safe-area-inset-bottom)) !important;
left: 12px !important;
right: 12px !important;
gap: 8px !important;
padding: 10px !important;
}
body.vertical-page .cookie-banner__body {
gap: 3px !important;
}
body.vertical-page .cookie-banner__body strong {
font-size: 0.92rem !important;
}
body.vertical-page .cookie-banner__body p {
display: -webkit-box !important;
overflow: hidden !important;
-webkit-box-orient: vertical !important;
-webkit-line-clamp: 2 !important;
font-size: 0.78rem !important;
line-height: 1.28 !important;
}
body.vertical-page .cookie-banner__actions {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 6px !important;
}
body.vertical-page .cookie-banner__actions .btn {
min-height: 38px !important;
padding: 0.5rem 0.35rem !important;
font-size: 0.74rem !important;
white-space: nowrap !important;
}
body.vertical-page .cookie-banner__actions .btn-tertiary {
grid-column: auto !important;
}
}
/* Public mobile polish: cleaner first impression across the marketing site. */
@media (max-width: 720px) {
html:has(body.landing-refresh:not(.app-shell)),
body.landing-refresh:not(.app-shell) {
overflow-x: hidden !important;
}
body.landing-refresh:not(.app-shell) {
background:
radial-gradient(circle at 18% 0%, rgba(45, 212, 191, 0.16), transparent 32%),
radial-gradient(circle at 100% 8%, rgba(96, 165, 250, 0.13), transparent 34%),
linear-gradient(180deg, #070d19 0%, #081326 48%, #07101f 100%) !important;
}
body.landing-refresh:not(.app-shell) .site-header {
position: sticky;
top: 0;
z-index: 80;
min-height: 0;
border-bottom: 1px solid rgba(148, 163, 184, 0.14);
background:
linear-gradient(180deg, rgba(6, 11, 24, 0.95), rgba(8, 14, 28, 0.86)),
rgba(6, 11, 24, 0.9) !important;
backdrop-filter: blur(18px);
}
body.landing-refresh:not(.app-shell) .nav {
width: 100%;
min-height: 64px;
padding: 8px 12px;
gap: 8px;
}
body.landing-refresh:not(.app-shell) .logo-wrap {
min-width: 0;
}
body.landing-refresh:not(.app-shell) .logo-brand__image {
height: 40px !important;
max-width: 152px;
}
body.landing-refresh:not(.app-shell) .nav-theme--public {
margin-left: auto;
}
body.landing-refresh:not(.app-shell) .theme-toggle {
min-width: 92px;
height: 42px;
padding: 0 8px;
border-radius: 999px;
}
body.landing-refresh:not(.app-shell) .theme-toggle__label {
display: none !important;
}
body.landing-refresh:not(.app-shell) .theme-toggle__option {
gap: 3px;
font-size: 0.76rem;
}
body.landing-refresh:not(.app-shell) .nav-actions--public {
gap: 6px;
}
body.landing-refresh:not(.app-shell) .nav-auth-link {
display: inline-grid;
width: 42px;
min-width: 42px;
height: 42px;
place-items: center;
padding: 0 !important;
border-radius: 999px;
}
body.landing-refresh:not(.app-shell) .nav-auth-link__eyebrow,
body.landing-refresh:not(.app-shell) .nav-auth-link__label {
display: none !important;
}
body.landing-refresh:not(.app-shell) .nav-auth-link__icon {
width: 22px;
height: 22px;
margin: 0;
}
body.home-gateway-page .site-main {
min-height: auto !important;
}
body.landing-refresh:not(.home-gateway-page):not(.app-shell) .site-main {
padding-top: 70px !important;
}
body.home-gateway-page .home-gateway {
min-height: auto !important;
padding: 18px 0 28px !important;
background:
radial-gradient(circle at 8% 0%, rgba(45, 212, 191, 0.18), transparent 34%),
radial-gradient(circle at 100% 10%, rgba(96, 165, 250, 0.14), transparent 34%),
linear-gradient(180deg, #081224 0%, #091426 54%, #070d19 100%) !important;
}
body.home-gateway-page .home-gateway::before {
opacity: 0.42;
background:
linear-gradient(120deg, rgba(217, 183, 111, 0.12), transparent 34%),
linear-gradient(240deg, rgba(122, 162, 255, 0.11), transparent 36%) !important;
}
body.home-gateway-page .home-gateway-shell {
gap: 16px !important;
}
body.home-gateway-page .home-gateway-intro {
gap: 12px !important;
}
body.home-gateway-page .home-gateway-intro .home-eyebrow,
body.vertical-page .home-eyebrow {
border-color: rgba(217, 183, 111, 0.28);
background: rgba(217, 183, 111, 0.1);
color: #f4dfae;
font-size: 0.7rem;
}
body.home-gateway-page .home-gateway-intro h1 {
max-width: 100% !important;
font-size: clamp(2rem, 8.8vw, 2.62rem) !important;
line-height: 1.01 !important;
text-wrap: balance;
}
body.home-gateway-page .home-gateway-intro p {
max-width: 36rem;
font-size: 0.92rem !important;
line-height: 1.42 !important;
color: rgba(226, 232, 240, 0.78) !important;
}
body.home-gateway-page .home-gateway-proof {
display: none !important;
}
body.home-gateway-page .home-gateway-panel,
body.home-gateway-page .home-gateway-proof span,
body.home-gateway-page .home-gateway-search,
body.home-gateway-page .home-gateway-next,
body.home-gateway-page .home-gateway-enrichment,
body.home-gateway-page .home-gateway-profile,
body.home-gateway-page .home-gateway-analysis,
body.home-gateway-page .home-gateway-recovered article,
body.home-gateway-page .home-gateway-selected,
body.vertical-page :is(.vertical-ready-panel, .vertical-start, .vertical-funnel__head, .vertical-funnel__next, .vertical-signature__copy, .vertical-signature-board, .vertical-integration-panel, .home-cta__card) {
border-radius: 8px !important;
border-color: rgba(148, 163, 184, 0.18) !important;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.035)),
rgba(12, 20, 38, 0.76) !important;
box-shadow: 0 18px 48px rgba(2, 6, 23, 0.28) !important;
}
body.home-gateway-page .home-gateway-panel {
gap: 12px !important;
padding: 12px !important;
}
body.home-gateway-page .home-gateway-step {
grid-template-columns: 38px minmax(0, 1fr) !important;
gap: 10px !important;
align-items: start;
}
body.home-gateway-page .home-gateway-step > span {
width: 38px !important;
height: 38px !important;
border-color: rgba(217, 183, 111, 0.28) !important;
background:
linear-gradient(135deg, rgba(217, 183, 111, 0.15), rgba(122, 162, 255, 0.08)),
rgba(15, 23, 42, 0.7) !important;
color: #f4dfae !important;
}
body.home-gateway-page .home-gateway-step h2 {
font-size: 1.08rem !important;
line-height: 1.14 !important;
}
body.home-gateway-page .home-gateway-step p {
font-size: 0.84rem !important;
line-height: 1.32 !important;
}
body.home-gateway-page .home-gateway:not(.has-vertical) .home-gateway-step p {
display: block !important;
}
body.home-gateway-page .home-gateway:not(.has-vertical) .home-gateway-step--search,
body.home-gateway-page .home-gateway:not(.has-vertical) .home-gateway-search {
display: none !important;
pointer-events: none !important;
}
body.home-gateway-page .home-gateway:not(.has-vertical) .home-gateway-next {
display: none !important;
}
body.home-gateway-page .home-gateway-verticals {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 8px !important;
}
body.home-gateway-page .home-gateway-vertical {
min-height: 0 !important;
grid-template-columns: 34px minmax(0, 1fr) !important;
grid-template-rows: auto !important;
gap: 8px !important;
padding: 9px !important;
border-color: rgba(148, 163, 184, 0.17) !important;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025)),
rgba(15, 23, 42, 0.72) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}
body.home-gateway-page .home-gateway-vertical.is-selected {
border-color: color-mix(in srgb, var(--home-intake-accent) 54%, rgba(148, 163, 184, 0.2)) !important;
background:
linear-gradient(135deg, color-mix(in srgb, var(--home-intake-accent) 15%, transparent), rgba(255, 255, 255, 0.045)),
rgba(15, 23, 42, 0.78) !important;
box-shadow:
inset 0 0 0 1px color-mix(in srgb, var(--home-intake-accent) 38%, transparent),
0 14px 34px rgba(2, 6, 23, 0.26) !important;
}
body.home-gateway-page .home-gateway-vertical .home-intake-vertical__icon {
width: 34px !important;
height: 34px !important;
border-radius: 8px !important;
background:
linear-gradient(180deg, color-mix(in srgb, var(--home-intake-accent) 16%, transparent), rgba(255, 255, 255, 0.035)),
rgba(15, 23, 42, 0.62) !important;
}
body.home-gateway-page .home-gateway-vertical .home-intake-vertical__text strong {
font-size: 0.9rem !important;
line-height: 1.16 !important;
}
body.home-gateway-page .home-gateway-vertical .home-intake-vertical__text small {
font-size: 0.7rem !important;
line-height: 1.24 !important;
}
body.home-gateway-page .home-gateway-vertical__cta {
display: none !important;
}
body.home-gateway-page .home-gateway-search {
gap: 10px !important;
padding: 12px !important;
}
body.home-gateway-page .home-gateway-search form {
gap: 8px !important;
}
body.home-gateway-page .home-intake-search__field,
body.home-gateway-page .home-gateway-profile input {
min-height: 50px !important;
border-radius: 8px !important;
border-color: rgba(148, 163, 184, 0.2) !important;
background: rgba(5, 10, 23, 0.72) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
body.home-gateway-page .home-intake-search__field input,
body.home-gateway-page .home-gateway-profile input {
min-height: 48px;
font-size: 16px !important;
}
body.home-gateway-page .home-intake-status {
font-size: 0.83rem !important;
line-height: 1.35 !important;
}
body.home-gateway-page .home-gateway-next {
gap: 10px !important;
padding: 12px !important;
}
body.home-gateway-page .home-gateway-next h2 {
font-size: 1.35rem !important;
line-height: 1.08 !important;
text-wrap: balance;
}
body.home-gateway-page .home-gateway-next p {
font-size: 0.9rem !important;
line-height: 1.42 !important;
}
body.home-gateway-page .home-gateway-next__chips {
gap: 7px !important;
}
body.home-gateway-page .home-gateway-next__chips span {
min-height: 32px !important;
padding: 0 9px !important;
border-radius: 8px !important;
font-size: 0.76rem !important;
}
body.home-gateway-page .home-gateway-primary,
body.landing-refresh:not(.app-shell) .btn-primary,
body.landing-refresh:not(.app-shell) .btn-secondary,
body.landing-refresh:not(.app-shell) .btn-tertiary {
border-radius: 8px !important;
}
body.landing-refresh:not(.app-shell) .btn-primary {
box-shadow: 0 14px 32px rgba(45, 212, 191, 0.16), 0 10px 28px rgba(99, 102, 241, 0.14);
}
body.landing-refresh:not(.app-shell) .cookie-banner {
bottom: calc(10px + env(safe-area-inset-bottom)) !important;
left: 10px !important;
right: 10px !important;
gap: 8px !important;
padding: 10px !important;
border-radius: 8px !important;
background:
linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(12, 20, 38, 0.94)),
rgba(15, 23, 42, 0.94) !important;
box-shadow: 0 18px 52px rgba(0, 0, 0, 0.34) !important;
}
body.landing-refresh:not(.app-shell) .cookie-banner__body {
gap: 3px !important;
}
body.landing-refresh:not(.app-shell) .cookie-banner__body strong {
font-size: 0.92rem !important;
}
body.landing-refresh:not(.app-shell) .cookie-banner__body p {
display: -webkit-box !important;
overflow: hidden !important;
-webkit-box-orient: vertical !important;
-webkit-line-clamp: 2 !important;
font-size: 0.78rem !important;
line-height: 1.28 !important;
}
body.landing-refresh:not(.app-shell) .cookie-banner__actions {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 6px !important;
}
body.landing-refresh:not(.app-shell) .cookie-banner__actions .btn {
min-height: 38px !important;
padding: 0.48rem 0.32rem !important;
font-size: 0.72rem !important;
white-space: nowrap !important;
}
body.auth-page .home-mobile-sticky-cta {
display: none !important;
}
html.app-mobile-shell body.auth-page.landing-page .site-header.site-header--public .menu,
body.auth-page.landing-page .site-header.site-header--public .menu {
display: none !important;
}
body.auth-page .auth-shell {
min-height: calc(100svh - 64px) !important;
align-items: flex-start !important;
padding: 18px 12px 72px !important;
background:
radial-gradient(circle at 18% 0%, rgba(45, 212, 191, 0.16), transparent 34%),
radial-gradient(circle at 100% 6%, rgba(96, 165, 250, 0.13), transparent 34%),
linear-gradient(180deg, #07101f 0%, #081326 56%, #070d19 100%) !important;
}
body.auth-page .auth-card {
width: 100% !important;
padding: 20px 16px !important;
border-color: rgba(148, 163, 184, 0.18) !important;
border-radius: 8px !important;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.035)),
rgba(12, 20, 38, 0.82) !important;
box-shadow: 0 20px 54px rgba(2, 6, 23, 0.34) !important;
}
body.auth-page .auth-title {
font-size: clamp(1.9rem, 8vw, 2.35rem) !important;
line-height: 1.04 !important;
text-wrap: balance;
}
body.auth-page .auth-subtitle {
font-size: 0.94rem !important;
line-height: 1.45 !important;
}
body.auth-page .auth-card input,
body.auth-page .auth-card select,
body.auth-page .auth-card textarea {
min-height: 48px !important;
border-radius: 8px !important;
font-size: 16px !important;
}
body.auth-page .auth-card .btn,
body.auth-page .auth-card .btn-nav,
body.auth-page .auth-card .auth-social-btn {
min-height: 46px !important;
border-radius: 8px !important;
}
body.auth-page .auth-panel--signup .auth-socials--primary {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 8px !important;
}
body.auth-page .auth-panel--signup .auth-form {
row-gap: 11px !important;
}
body.auth-page .auth-business-context {
gap: 10px !important;
padding: 12px !important;
}
body.auth-page .auth-business-context__intro {
gap: 4px !important;
}
body.auth-page .auth-business-context__intro strong {
font-size: 1rem !important;
line-height: 1.22 !important;
}
body.auth-page .auth-business-context__intro p,
body.auth-page .auth-form__hint {
display: none !important;
}
body.auth-page .cookie-banner {
bottom: calc(10px + env(safe-area-inset-bottom)) !important;
left: 10px !important;
right: 10px !important;
gap: 8px !important;
padding: 10px !important;
border-radius: 8px !important;
background:
linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(12, 20, 38, 0.94)),
rgba(15, 23, 42, 0.94) !important;
box-shadow: 0 18px 52px rgba(0, 0, 0, 0.34) !important;
}
body.auth-page .cookie-banner__body {
gap: 3px !important;
}
body.auth-page .cookie-banner__body strong {
font-size: 0.92rem !important;
}
body.auth-page .cookie-banner__body p {
display: -webkit-box !important;
overflow: hidden !important;
-webkit-box-orient: vertical !important;
-webkit-line-clamp: 2 !important;
font-size: 0.78rem !important;
line-height: 1.28 !important;
}
body.auth-page .cookie-banner__actions {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 6px !important;
}
body.auth-page .cookie-banner__actions .btn {
min-height: 38px !important;
padding: 0.48rem 0.32rem !important;
font-size: 0.72rem !important;
white-space: nowrap !important;
}
}
@media (max-width: 380px) {
body.landing-refresh:not(.app-shell) .logo-brand__image {
max-width: 132px;
}
body.landing-refresh:not(.app-shell) .theme-toggle {
min-width: 82px;
}
body.landing-refresh:not(.app-shell) .theme-toggle__option span {
display: none;
}
body.landing-refresh:not(.app-shell) .nav-auth-link {
width: 40px;
min-width: 40px;
height: 40px;
}
}
/* Vertical public pages: conversion polish shared by restaurant, hotel, artisan, commerce and services. */
body.vertical-page.landing-refresh:not(.app-shell) .site-main {
background:
linear-gradient(140deg, rgba(45, 212, 191, 0.12), transparent 32%),
linear-gradient(220deg, rgba(96, 165, 250, 0.1), transparent 34%),
linear-gradient(180deg, #07101f 0%, #081326 48%, #070d19 100%);
}
body.vertical-page .vertical-hero {
isolation: isolate;
}
body.vertical-page .vertical-hero::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-bottom: 1px solid rgba(148, 163, 184, 0.12);
background:
linear-gradient(120deg, var(--vertical-accent-soft, rgba(94, 234, 212, 0.12)), transparent 36%),
linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 42%);
pointer-events: none;
}
body.vertical-page .vertical-hero--compact .vertical-hero__grid {
grid-template-columns: minmax(0, 1fr) minmax(330px, 0.48fr);
align-items: stretch;
}
body.vertical-page .vertical-hero--compact .vertical-hero__copy {
align-content: center;
}
body.vertical-page .vertical-hero--compact .vertical-hero__copy h1 {
max-width: 15.5ch;
font-size: clamp(2.35rem, 4.3vw, 4.45rem);
line-height: 0.96;
}
body.vertical-page .vertical-page-proof {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.55rem;
max-width: 780px;
margin-top: 0.15rem;
}
body.vertical-page .vertical-page-proof span {
position: relative;
display: flex;
align-items: center;
min-width: 0;
min-height: 42px;
padding: 0.65rem 0.8rem 0.65rem 1.82rem;
border: 1px solid var(--vertical-accent-line, rgba(94, 234, 212, 0.28));
border-radius: 8px;
background:
linear-gradient(135deg, var(--vertical-accent-soft, rgba(94, 234, 212, 0.1)), rgba(255, 255, 255, 0.035)),
rgba(15, 23, 42, 0.55);
color: rgba(248, 250, 252, 0.9);
font-size: 0.84rem;
font-weight: 850;
line-height: 1.25;
}
body.vertical-page .vertical-page-proof span::before {
content: "";
position: absolute;
left: 0.72rem;
top: 50%;
width: 0.42rem;
height: 0.42rem;
border-radius: 999px;
background: var(--vertical-accent, #5eead4);
transform: translateY(-50%);
box-shadow: 0 0 0 5px color-mix(in srgb, var(--vertical-accent, #5eead4) 15%, transparent);
}
body.vertical-page .vertical-page-summary {
display: grid;
gap: 1rem;
align-content: center;
padding: clamp(1rem, 2vw, 1.35rem);
overflow: hidden;
border-color: rgba(148, 163, 184, 0.18);
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)),
linear-gradient(135deg, var(--vertical-accent-soft, rgba(94, 234, 212, 0.1)), rgba(37, 99, 235, 0.08)),
rgba(10, 18, 34, 0.9);
box-shadow:
0 28px 70px rgba(2, 6, 23, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
body.vertical-page .vertical-page-summary__status {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
}
body.vertical-page .vertical-page-summary__status small {
flex: 0 0 auto;
padding: 0.36rem 0.58rem;
border: 1px solid var(--vertical-accent-line, rgba(94, 234, 212, 0.26));
border-radius: 999px;
background: var(--vertical-accent-soft, rgba(94, 234, 212, 0.1));
color: color-mix(in srgb, var(--vertical-accent, #5eead4) 72%, white);
font-size: 0.72rem;
font-weight: 900;
white-space: nowrap;
}
body.vertical-page .vertical-page-summary > strong {
font-size: clamp(1.55rem, 2.6vw, 2.35rem);
line-height: 1.02;
}
body.vertical-page .vertical-page-summary p {
max-width: 34rem;
margin: 0;
color: rgba(226, 232, 240, 0.76);
line-height: 1.5;
}
body.vertical-page .vertical-page-summary__flow {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.5rem;
}
body.vertical-page .vertical-page-summary__flow span {
display: grid;
place-items: center;
min-height: 38px;
padding: 0.45rem 0.55rem;
border: 1px solid rgba(148, 163, 184, 0.16);
border-radius: 8px;
background: rgba(255, 255, 255, 0.055);
color: rgba(226, 232, 240, 0.86);
font-size: 0.76rem;
font-weight: 850;
line-height: 1.18;
text-align: center;
}
@media (max-width: 720px) {
body.vertical-page .vertical-hero--compact .vertical-hero__grid {
grid-template-columns: 1fr !important;
gap: 10px !important;
}
body.vertical-page .vertical-hero--compact .vertical-hero__copy h1 {
max-width: 100% !important;
font-size: clamp(1.74rem, 7.3vw, 2.18rem) !important;
line-height: 1.05 !important;
}
body.vertical-page .vertical-hero__copy p {
display: -webkit-box !important;
overflow: hidden !important;
-webkit-box-orient: vertical !important;
-webkit-line-clamp: 3 !important;
font-size: 0.9rem !important;
line-height: 1.38 !important;
}
body.vertical-page .vertical-hero__actions {
margin-top: 0 !important;
}
body.vertical-page .vertical-page-proof {
grid-template-columns: 1fr !important;
gap: 6px !important;
margin-top: 0 !important;
}
body.vertical-page .vertical-page-proof span {
min-height: 30px !important;
padding: 6px 9px 6px 24px !important;
font-size: 0.72rem !important;
line-height: 1.18 !important;
}
body.vertical-page .vertical-page-proof span::before {
left: 10px;
width: 5px;
height: 5px;
box-shadow: none;
}
body.vertical-page .vertical-page-summary {
gap: 8px !important;
padding: 11px !important;
border-radius: 8px !important;
box-shadow: 0 14px 36px rgba(2, 6, 23, 0.22) !important;
}
body.vertical-page .vertical-page-summary__status {
align-items: flex-start;
}
body.vertical-page .vertical-page-summary__status small {
padding: 5px 7px !important;
font-size: 0.64rem !important;
}
body.vertical-page .vertical-page-summary > strong {
font-size: 1.16rem !important;
line-height: 1.12 !important;
}
body.vertical-page .vertical-page-summary p {
display: -webkit-box !important;
overflow: hidden !important;
-webkit-box-orient: vertical !important;
-webkit-line-clamp: 2 !important;
font-size: 0.82rem !important;
line-height: 1.32 !important;
}
body.vertical-page .vertical-page-summary__flow {
gap: 5px !important;
}
body.vertical-page .vertical-page-summary__flow span {
min-height: 28px !important;
padding: 4px 5px !important;
font-size: 0.62rem !important;
}
}
/* Generic public legal and marketing pages: denser, more polished conversion layout. */
body.landing-refresh.legal-page:not(.app-shell) .legal-hero__card {
border-color: rgba(148, 163, 184, 0.16);
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025)),
linear-gradient(135deg, rgba(45, 212, 191, 0.11), rgba(96, 165, 250, 0.09)),
rgba(8, 15, 30, 0.9);
box-shadow:
0 30px 82px rgba(2, 6, 23, 0.34),
inset 0 1px 0 rgba(255, 255, 255, 0.055);
}
body.landing-refresh.legal-page:not(.app-shell) .legal-card,
body.landing-refresh.legal-page:not(.app-shell) .home-demo-grid article,
body.landing-refresh.legal-page:not(.app-shell) .home-faq-grid article,
body.landing-refresh.legal-page:not(.app-shell) .home-steps article,
body.landing-refresh.legal-page:not(.app-shell) .home-use-grid article,
body.landing-refresh.legal-page:not(.app-shell) .calculator-panel,
body.landing-refresh.legal-page:not(.app-shell) .calculator-result {
border-radius: 8px;
}
body.landing-refresh.legal-page:not(.app-shell) .home-section__head p {
max-width: 68ch;
}
body.landing-refresh.legal-page:not(.app-shell) .legal-hero {
padding: clamp(34px, 5vw, 70px) 0 24px !important;
}
body.landing-refresh.legal-page:not(.app-shell) .legal-hero__card {
max-width: min(100% - 64px, 860px) !important;
gap: 14px !important;
padding: clamp(24px, 3.8vw, 40px) !important;
}
body.landing-refresh.legal-page:not(.app-shell) .legal-hero h1 {
max-width: 780px !important;
font-size: clamp(2.25rem, 4.8vw, 4.15rem) !important;
line-height: 1 !important;
letter-spacing: 0 !important;
}
body.landing-refresh.legal-page:not(.app-shell) .legal-hero p {
max-width: 690px !important;
font-size: 1rem !important;
line-height: 1.48 !important;
}
body.guide-page .comparison-table-wrap--operator-codes {
scroll-margin-top: 96px;
}
body.security-page:not(.app-shell) .legal-hero h1 {
font-size: clamp(2.15rem, 4.1vw, 3.55rem) !important;
}
@media (max-width: 720px) {
body.landing-refresh.legal-page:not(.app-shell) .legal-hero {
padding: 16px 0 12px !important;
}
body.landing-refresh.legal-page:not(.app-shell) .legal-hero__card {
gap: 11px !important;
padding: 16px !important;
border-radius: 8px !important;
}
body.landing-refresh.legal-page:not(.app-shell) .legal-hero h1 {
max-width: 100% !important;
font-size: clamp(1.9rem, 8vw, 2.34rem) !important;
line-height: 1.04 !important;
letter-spacing: 0 !important;
text-wrap: balance;
}
body.landing-refresh.legal-page:not(.app-shell) .legal-hero p {
display: -webkit-box !important;
overflow: hidden !important;
-webkit-box-orient: vertical !important;
-webkit-line-clamp: 3 !important;
font-size: 0.9rem !important;
line-height: 1.4 !important;
}
body.landing-refresh.legal-page:not(.app-shell) .legal-hero .home-hero__actions,
body.landing-refresh.legal-page:not(.app-shell) .home-cta__actions,
body.landing-refresh.legal-page:not(.app-shell) .marketing-inline-actions {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 8px !important;
width: 100% !important;
margin-top: 0 !important;
}
body.landing-refresh.legal-page:not(.app-shell) .legal-hero .home-hero__actions .btn:first-child,
body.landing-refresh.legal-page:not(.app-shell) .home-cta__actions .btn:first-child,
body.landing-refresh.legal-page:not(.app-shell) .marketing-inline-actions .btn:first-child {
grid-column: 1 / -1;
}
body.landing-refresh.legal-page:not(.app-shell) .legal-hero .home-hero__actions .btn,
body.landing-refresh.legal-page:not(.app-shell) .home-cta__actions .btn,
body.landing-refresh.legal-page:not(.app-shell) .marketing-inline-actions .btn {
width: 100% !important;
min-height: 42px !important;
padding: 0.64rem 0.72rem !important;
font-size: 0.86rem !important;
}
body.landing-refresh.legal-page:not(.app-shell) .legal-section,
body.landing-refresh.legal-page:not(.app-shell) .home-section {
padding-top: 24px !important;
padding-bottom: 52px !important;
}
body.landing-refresh.legal-page:not(.app-shell) .home-section__head {
gap: 8px !important;
margin-bottom: 16px !important;
}
body.landing-refresh.legal-page:not(.app-shell) .home-section__head h2,
body.landing-refresh.legal-page:not(.app-shell) .legal-card h2 {
max-width: 100% !important;
font-size: clamp(1.45rem, 7.4vw, 2rem) !important;
line-height: 1.06 !important;
letter-spacing: 0 !important;
text-wrap: balance;
}
body.landing-refresh.legal-page:not(.app-shell) .home-section__head p,
body.landing-refresh.legal-page:not(.app-shell) .legal-card p,
body.landing-refresh.legal-page:not(.app-shell) .home-demo-grid article p,
body.landing-refresh.legal-page:not(.app-shell) .home-faq-grid article p,
body.landing-refresh.legal-page:not(.app-shell) .home-steps article p {
font-size: 0.88rem !important;
line-height: 1.4 !important;
}
body.landing-refresh.legal-page:not(.app-shell) .legal-card,
body.landing-refresh.legal-page:not(.app-shell) .home-demo-grid article,
body.landing-refresh.legal-page:not(.app-shell) .home-faq-grid article,
body.landing-refresh.legal-page:not(.app-shell) .home-steps article,
body.landing-refresh.legal-page:not(.app-shell) .home-use-grid article {
min-height: 0 !important;
gap: 9px !important;
padding: 14px !important;
border-radius: 8px !important;
}
body.support-page .legal-grid--support {
grid-template-columns: 1fr !important;
gap: 10px !important;
}
body.support-page .legal-grid--support .legal-card {
min-height: 0 !important;
}
body.support-page .legal-grid--support .legal-card p,
body.security-page .legal-grid .legal-card p,
body.security-page .legal-grid .legal-card li {
display: -webkit-box !important;
overflow: hidden !important;
-webkit-box-orient: vertical !important;
-webkit-line-clamp: 3 !important;
}
body.security-page .legal-updated {
font-size: 0.78rem !important;
line-height: 1.25 !important;
}
body.guide-page .comparison-table-wrap--operator-codes {
overflow-x: visible !important;
margin-top: 16px !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
body.guide-page .comparison-table--operator-codes {
display: block !important;
width: 100% !important;
min-width: 0 !important;
border-collapse: separate !important;
}
body.guide-page .comparison-table--operator-codes thead {
display: none !important;
}
body.guide-page .comparison-table--operator-codes tbody,
body.guide-page .comparison-table--operator-codes tr,
body.guide-page .comparison-table--operator-codes th,
body.guide-page .comparison-table--operator-codes td {
display: block !important;
width: 100% !important;
}
body.guide-page .comparison-table--operator-codes tr {
margin-bottom: 10px !important;
padding: 12px !important;
border: 1px solid rgba(148, 163, 184, 0.16) !important;
border-radius: 8px !important;
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025)),
rgba(15, 23, 42, 0.74) !important;
box-shadow: 0 16px 34px rgba(2, 6, 23, 0.16) !important;
}
body.guide-page .comparison-table--operator-codes tbody th {
margin: 0 0 8px !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
color: var(--text) !important;
font-size: 0.98rem !important;
line-height: 1.18 !important;
}
body.guide-page .comparison-table--operator-codes td {
position: relative !important;
min-height: 30px !important;
padding: 6px 0 6px 104px !important;
border: 0 !important;
background: transparent !important;
color: var(--subtitle) !important;
font-size: 0.84rem !important;
line-height: 1.35 !important;
overflow-wrap: anywhere !important;
}
body.guide-page .comparison-table--operator-codes td::before {
position: absolute;
left: 0;
top: 6px;
width: 92px;
color: #79d8ff;
font-size: 0.68rem;
font-weight: 950;
letter-spacing: 0.03em;
line-height: 1.2;
text-transform: uppercase;
}
body.guide-page .comparison-table--operator-codes td:nth-child(2)::before {
content: "Code";
}
body.guide-page .comparison-table--operator-codes td:nth-child(3)::before {
content: "Verifier";
}
body.guide-page .comparison-table--operator-codes td:nth-child(4)::before {
content: "Annuler";
}
body.guide-page .comparison-table--operator-codes td:nth-child(5)::before {
content: "Terrain";
}
body.guide-page .comparison-table--operator-codes code {
white-space: normal !important;
word-break: break-word !important;
}
body.landing-refresh[data-theme="light"] .comparison-table--operator-codes tr {
background: rgba(255, 255, 255, 0.96) !important;
border-color: rgba(15, 23, 42, 0.1) !important;
box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08) !important;
}
body.missed-call-calculator-page .calculator-panel {
gap: 10px !important;
padding: 12px !important;
}
body.missed-call-calculator-page .calculator-form .calculator-field {
min-height: 0 !important;
gap: 7px !important;
padding: 10px !important;
border-radius: 8px !important;
}
body.missed-call-calculator-page .calculator-form .calculator-field input {
min-height: 44px !important;
border-radius: 8px !important;
font-size: 16px !important;
text-align: left !important;
}
body.missed-call-calculator-page .calculator-result {
gap: 5px !important;
padding: 13px !important;
}
body.missed-call-calculator-page .calculator-result strong {
font-size: clamp(1.65rem, 8vw, 2.05rem) !important;
letter-spacing: 0 !important;
}
}
/* Home gateway production polish: keeps the intake vertical, clear and conversion-first. */
body.home-gateway-page .home-gateway-shell {
width: min(calc(100% - 64px), 1180px) !important;
max-width: 1180px !important;
grid-template-columns: 1fr !important;
}
body.home-gateway-page .home-gateway-intro h1 {
max-width: min(100%, 18ch) !important;
text-wrap: balance;
}
body.home-gateway-page .home-gateway-proof {
width: min(100%, 900px) !important;
max-width: 900px !important;
}
body.home-gateway-page .home-gateway-proof span {
grid-template-columns: 16px minmax(0, 1fr) !important;
align-items: start !important;
text-align: left;
}
body.home-gateway-page .home-gateway-proof span::before {
align-self: start !important;
margin-top: 4px !important;
}
body.home-gateway-page .home-gateway-panel {
max-width: none !important;
}
body.home-gateway-page .home-gateway-verticals {
grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}
body.home-gateway-page .home-gateway-results,
body.home-gateway-page .home-intake-results {
max-height: none !important;
overflow: visible !important;
}
@media (max-width: 980px) {
body.home-gateway-page .home-gateway-shell {
width: min(calc(100% - 36px), 900px) !important;
}
body.home-gateway-page .home-gateway-verticals {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
@media (max-width: 640px) {
body.home-gateway-page .home-gateway-shell {
width: min(calc(100% - 24px), 520px) !important;
gap: 16px !important;
}
body.home-gateway-page .home-gateway-intro {
text-align: left !important;
justify-items: stretch !important;
}
body.home-gateway-page .home-gateway-intro h1 {
max-width: 100% !important;
font-size: clamp(2.05rem, 9vw, 2.82rem) !important;
line-height: 1.02 !important;
}
body.home-gateway-page .home-gateway-intro p {
display: block !important;
overflow: visible !important;
-webkit-box-orient: initial !important;
-webkit-line-clamp: unset !important;
font-size: 0.96rem !important;
line-height: 1.48 !important;
}
body.home-gateway-page .home-gateway-proof {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 8px !important;
}
body.home-gateway-page .home-gateway-verticals {
grid-template-columns: 1fr !important;
}
body.home-gateway-page .home-gateway-vertical {
grid-template-columns: 42px minmax(0, 1fr) !important;
padding: 12px !important;
}
body.home-gateway-page .home-gateway-vertical .home-intake-vertical__text small {
display: block !important;
overflow: visible !important;
-webkit-box-orient: initial !important;
-webkit-line-clamp: unset !important;
}
}
/* Premium home landing */
body.home-gateway-page .home-premium-hero {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(360px, 0.82fr);
gap: clamp(24px, 4vw, 54px);
align-items: center;
min-height: min(760px, calc(100vh - 120px));
}
body.home-gateway-page .home-premium-hero .home-gateway-intro {
justify-items: start !important;
text-align: left !important;
}
body.home-gateway-page .home-premium-hero .home-gateway-intro h1 {
max-width: 12.8ch !important;
font-size: clamp(3.1rem, 5.4vw, 6.15rem) !important;
line-height: 0.92 !important;
}
body.home-gateway-page .home-premium-hero .home-gateway-intro p {
max-width: 720px !important;
font-size: clamp(1.02rem, 1.25vw, 1.2rem) !important;
}
.home-premium-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
}
.home-agent-prep-card,
.home-premium-section,
.home-final-cta {
position: relative;
isolation: isolate;
}
.home-agent-prep-card {
display: grid;
gap: 18px;
padding: clamp(18px, 2.2vw, 28px);
border: 1px solid rgba(125, 211, 252, 0.22);
border-radius: 14px;
background:
linear-gradient(150deg, rgba(15, 23, 42, 0.86), rgba(14, 116, 144, 0.24)),
rgba(2, 6, 23, 0.72);
box-shadow: 0 30px 90px rgba(2, 6, 23, 0.36);
}
.home-agent-prep-card::before,
.home-agent-prep-card::after {
content: "";
position: absolute;
inset: auto 24px 24px auto;
width: 150px;
height: 150px;
border-radius: 999px;
background: rgba(94, 234, 212, 0.1);
filter: blur(30px);
z-index: -1;
}
.home-agent-prep-card::after {
inset: 24px auto auto 24px;
background: rgba(96, 165, 250, 0.12);
}
.home-agent-prep-card__top,
.home-agent-prep-business,
.home-agent-rule {
display: grid;
gap: 7px;
}
.home-agent-prep-card__top {
grid-template-columns: 1fr auto;
align-items: center;
}
.home-agent-prep-card__top span,
.home-agent-prep-business span,
.home-agent-rule span,
.home-premium-section-head span,
.home-agent-build-card__header span,
.home-call-summary-card > span {
color: #93c5fd;
font-size: 0.74rem;
font-weight: 950;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.home-agent-prep-card__top strong {
display: grid;
width: 62px;
height: 62px;
place-items: center;
border: 1px solid rgba(94, 234, 212, 0.36);
border-radius: 999px;
background: radial-gradient(circle, rgba(94, 234, 212, 0.2), rgba(15, 23, 42, 0.64));
color: #ccfbf1;
font-size: 1.08rem;
}
.home-agent-prep-business {
padding: 16px;
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 10px;
background: rgba(15, 23, 42, 0.62);
}
.home-agent-prep-business strong,
.home-agent-rule p,
.home-agent-flow li,
.home-agent-build-card strong,
.home-call-summary-card dd,
.home-mode-grid strong,
.home-usecase-grid h3,
.home-source-grid h3,
.home-level-grid h3 {
color: #f8fafc;
}
.home-agent-prep-business small,
.home-agent-rule p,
.home-agent-build-card span,
.home-call-summary-card p,
.home-call-summary-card dt,
.home-premium-section-head p,
.home-source-grid p,
.home-level-grid p,
.home-mode-grid p,
.home-usecase-grid p,
.home-trust-note,
.home-control-list li,
.home-voice-reco small {
color: rgba(226, 232, 240, 0.72);
line-height: 1.55;
}
.home-agent-flow {
display: grid;
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
}
.home-agent-flow li {
display: flex;
align-items: center;
gap: 10px;
min-height: 36px;
padding: 0 12px;
border: 1px solid rgba(148, 163, 184, 0.14);
border-radius: 999px;
background: rgba(255, 255, 255, 0.045);
font-weight: 800;
}
.home-agent-flow li span {
width: 9px;
height: 9px;
border-radius: 999px;
background: #5eead4;
box-shadow: 0 0 0 5px rgba(94, 234, 212, 0.1);
}
.home-agent-detected,
.home-integration-strip,
.home-voice-options,
.home-gateway-next__chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.home-agent-detected span,
.home-integration-strip span,
.home-voice-options span {
display: inline-flex;
align-items: center;
min-height: 34px;
padding: 0 11px;
border: 1px solid rgba(148, 163, 184, 0.16);
border-radius: 999px;
background: rgba(255, 255, 255, 0.055);
color: rgba(226, 232, 240, 0.82);
font-size: 0.82rem;
font-weight: 850;
}
.home-agent-rule {
padding: 14px;
border: 1px solid rgba(34, 197, 94, 0.22);
border-radius: 10px;
background: rgba(34, 197, 94, 0.08);
}
.home-premium-section {
padding: clamp(54px, 7vw, 96px) 0;
background:
radial-gradient(circle at 8% 8%, rgba(94, 234, 212, 0.08), transparent 30%),
linear-gradient(180deg, rgba(8, 15, 31, 0.98), rgba(12, 21, 42, 0.98));
}
.home-how-hub {
padding: clamp(46px, 6vw, 78px) 0 0;
border-top: 1px solid rgba(148, 163, 184, 0.16);
background:
radial-gradient(circle at 50% 0%, rgba(122, 162, 255, 0.13), transparent 32%),
linear-gradient(180deg, rgba(6, 10, 22, 0.98), rgba(9, 15, 31, 0.98));
}
.home-how-hub__intro {
display: grid;
gap: 14px;
max-width: 920px;
text-align: left;
}
.home-how-hub__intro > span {
width: fit-content;
padding: 8px 12px;
border: 1px solid rgba(217, 183, 111, 0.28);
border-radius: 999px;
background: rgba(217, 183, 111, 0.09);
color: #ffe9b6;
font-size: 0.75rem;
font-weight: 950;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.home-how-hub__intro h2 {
max-width: 820px;
margin: 0;
color: #f8fafc;
font-size: clamp(2rem, 4vw, 4.2rem);
line-height: 0.98;
}
.home-how-hub__intro p {
max-width: 760px;
margin: 0;
color: rgba(226, 232, 240, 0.76);
font-size: clamp(1rem, 1.35vw, 1.2rem);
line-height: 1.58;
}
.home-how-hub__links {
display: flex;
flex-wrap: wrap;
gap: 9px;
margin-top: 4px;
}
.home-how-hub__links a {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0 13px;
border: 1px solid rgba(122, 162, 255, 0.2);
border-radius: 999px;
background: rgba(255, 255, 255, 0.055);
color: rgba(238, 244, 255, 0.9);
font-size: 0.86rem;
font-weight: 900;
text-decoration: none;
}
.home-how-hub__links a:hover,
.home-how-hub__links a:focus-visible {
border-color: rgba(217, 183, 111, 0.45);
color: #fff2cf;
}
.home-how-hub > .home-premium-section {
padding: clamp(38px, 5vw, 72px) 0;
background: transparent;
}
.home-how-hub > .home-premium-section + .home-premium-section {
border-top: 1px solid rgba(148, 163, 184, 0.1);
}
.home-premium-container {
display: grid;
gap: clamp(22px, 3vw, 34px);
}
.home-premium-section-head {
display: grid;
gap: 10px;
max-width: 820px;
margin-inline: auto;
text-align: center;
}
.home-premium-section-head--left,
.home-premium-section-head--compact {
margin-inline: 0;
text-align: left;
}
.home-premium-section-head h2 {
margin: 0;
color: #f8fafc;
font-size: clamp(2rem, 4.2vw, 4rem);
line-height: 0.98;
letter-spacing: 0;
}
.home-premium-section-head--compact h2 {
font-size: clamp(1.65rem, 2.5vw, 2.45rem);
}
.home-studio-grid,
.home-premium-split,
.home-operations-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(340px, 0.85fr);
gap: clamp(18px, 3vw, 30px);
align-items: stretch;
}
.home-studio-chat,
.home-agent-build-card,
.home-voice-panel,
.home-call-summary-card,
.home-control-card {
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 14px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.032)),
rgba(15, 23, 42, 0.76);
box-shadow: 0 24px 72px rgba(2, 6, 23, 0.28);
}
.home-studio-chat {
display: grid;
gap: 14px;
padding: clamp(16px, 2.2vw, 24px);
}
.home-studio-message {
display: grid;
gap: 10px;
max-width: 92%;
padding: 16px;
border: 1px solid rgba(125, 211, 252, 0.2);
border-radius: 14px;
background: rgba(14, 116, 144, 0.16);
}
.home-studio-message p {
margin: 0;
color: #f8fafc;
line-height: 1.5;
}
.home-studio-message div {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.home-studio-message button {
min-height: 34px;
padding: 0 11px;
border: 1px solid rgba(94, 234, 212, 0.22);
border-radius: 999px;
background: rgba(94, 234, 212, 0.08);
color: #ccfbf1;
font-weight: 850;
}
.home-agent-build-card,
.home-voice-panel,
.home-call-summary-card {
display: grid;
gap: 16px;
padding: clamp(16px, 2.2vw, 24px);
}
.home-agent-build-card__header {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: center;
}
.home-agent-build-card__header strong {
font-size: 2rem;
}
.home-agent-build-card ul,
.home-control-list {
display: grid;
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
}
.home-agent-build-card li {
display: grid;
grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
gap: 12px;
padding: 12px;
border: 1px solid rgba(148, 163, 184, 0.13);
border-radius: 10px;
background: rgba(255, 255, 255, 0.04);
}
.home-source-grid,
.home-level-grid,
.home-mode-grid,
.home-usecase-grid {
display: grid;
gap: 14px;
}
.home-source-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.home-level-grid,
.home-usecase-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.home-mode-grid {
grid-template-columns: 1fr;
}
.home-source-grid article,
.home-level-grid article,
.home-mode-grid article,
.home-usecase-grid article {
display: grid;
gap: 9px;
min-height: 156px;
padding: 18px;
border: 1px solid rgba(148, 163, 184, 0.16);
border-radius: 12px;
background:
linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03)),
rgba(15, 23, 42, 0.7);
}
.home-source-grid article > span,
.home-level-grid article > span {
color: #5eead4;
font-size: 0.78rem;
font-weight: 950;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.home-voice-options .is-selected {
border-color: rgba(94, 234, 212, 0.42);
background: rgba(94, 234, 212, 0.13);
color: #ccfbf1;
}
.home-voice-reco {
display: grid;
gap: 6px;
padding: 15px;
border: 1px solid rgba(94, 234, 212, 0.2);
border-radius: 12px;
background: rgba(20, 184, 166, 0.09);
}
.home-voice-reco strong {
color: #f8fafc;
font-size: 1.16rem;
}
.home-integration-strip {
justify-content: center;
}
.home-trust-note {
margin: 0;
text-align: center;
font-weight: 800;
}
.home-call-summary-card dl {
display: grid;
gap: 8px;
margin: 0;
}
.home-call-summary-card dl div {
display: grid;
grid-template-columns: 110px minmax(0, 1fr);
gap: 10px;
padding: 10px 0;
border-bottom: 1px solid rgba(148, 163, 184, 0.13);
}
.home-call-summary-card h3 {
margin: 0;
color: #f8fafc;
font-size: 1.5rem;
}
.home-control-card {
padding: clamp(18px, 3vw, 34px);
grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
gap: 24px;
align-items: start;
}
.home-control-list li {
position: relative;
padding: 12px 12px 12px 34px;
border: 1px solid rgba(148, 163, 184, 0.13);
border-radius: 10px;
background: rgba(255, 255, 255, 0.04);
}
.home-control-list li::before {
content: "";
position: absolute;
left: 14px;
top: 18px;
width: 8px;
height: 8px;
border-radius: 999px;
background: #5eead4;
}
.home-final-cta {
padding: clamp(54px, 8vw, 110px) 0;
background:
radial-gradient(circle at 50% 0%, rgba(94, 234, 212, 0.16), transparent 36%),
linear-gradient(180deg, rgba(12, 21, 42, 0.98), #08101f);
}
.home-final-cta__inner {
display: grid;
justify-items: center;
gap: 16px;
max-width: 860px;
text-align: center;
}
.home-final-cta__inner > span {
color: #99f6e4;
font-size: 0.78rem;
font-weight: 950;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.home-final-cta h2 {
margin: 0;
color: #f8fafc;
font-size: clamp(2.2rem, 5vw, 4.8rem);
line-height: 0.96;
}
.home-final-cta p {
max-width: 620px;
margin: 0;
color: rgba(226, 232, 240, 0.76);
line-height: 1.58;
}
@media (max-width: 1180px) {
body.home-gateway-page .home-premium-hero,
.home-studio-grid,
.home-premium-split,
.home-operations-grid,
.home-control-card {
grid-template-columns: 1fr;
}
body.home-gateway-page .home-premium-hero {
min-height: 0;
}
.home-source-grid,
.home-level-grid,
.home-usecase-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 720px) {
body.home-gateway-page .home-premium-hero .home-gateway-intro h1 {
max-width: 100% !important;
font-size: clamp(2.35rem, 11vw, 3.45rem) !important;
}
.home-premium-actions {
display: grid;
width: 100%;
}
.home-premium-actions .btn {
width: 100%;
}
.home-agent-prep-card,
.home-studio-chat,
.home-agent-build-card,
.home-voice-panel,
.home-call-summary-card,
.home-control-card {
border-radius: 10px;
}
.home-source-grid,
.home-level-grid,
.home-usecase-grid,
.home-call-summary-card dl div,
.home-agent-build-card li {
grid-template-columns: 1fr;
}
.home-premium-section-head {
text-align: left;
}
.home-premium-section-head h2,
.home-final-cta h2 {
line-height: 1.02;
}
}
/* Home tunnel corrections */
body.home-gateway-page .home-premium-hero {
grid-template-columns: minmax(0, 0.98fr) minmax(340px, 0.78fr) !important;
min-height: min(660px, calc(100vh - 120px)) !important;
}
body.home-gateway-page .home-premium-hero .home-gateway-intro h1 {
max-width: 13.8ch !important;
font-size: clamp(2.7rem, 4.3vw, 4.95rem) !important;
line-height: 0.96 !important;
}
body.home-gateway-page .home-agent-prep-card {
max-width: 520px;
justify-self: end;
}
body.home-gateway-page .home-gateway-panel .home-premium-section-head--compact {
max-width: none;
padding: 18px;
border: 1px solid rgba(125, 211, 252, 0.16);
border-radius: 12px;
background:
linear-gradient(135deg, rgba(14, 165, 233, 0.1), rgba(20, 184, 166, 0.06)),
rgba(15, 23, 42, 0.58);
}
body.home-gateway-page .home-gateway-panel .home-premium-section-head--compact h2 {
max-width: 17ch;
font-size: clamp(1.75rem, 2.8vw, 2.65rem);
line-height: 1.02;
}
body.home-gateway-page .home-gateway-panel .home-premium-section-head--compact p {
max-width: 70ch;
font-size: 0.98rem;
}
.home-gateway-recovered--editable {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.home-gateway-recovered--editable label {
display: grid;
gap: 7px;
min-width: 0;
padding: 12px;
border: 1px solid rgba(148, 163, 184, 0.15);
border-radius: 8px;
background: rgba(15, 23, 42, 0.6);
}
.home-gateway-recovered--editable input,
.home-gateway-recovered--editable textarea {
width: 100%;
min-height: 40px;
padding: 9px 11px;
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 8px;
background: rgba(8, 13, 26, 0.72);
color: #f8fafc;
font: inherit;
font-weight: 800;
line-height: 1.3;
outline: none;
}
.home-gateway-recovered--editable textarea {
min-height: 64px;
resize: vertical;
}
.home-gateway-recovered--editable label:has([data-home-review-hours]) {
grid-column: span 2;
}
.home-gateway-recovered--editable [data-home-review-hours] {
min-height: 148px;
white-space: pre-wrap;
}
.home-gateway-recovered--editable input:focus,
.home-gateway-recovered--editable textarea:focus {
border-color: rgba(94, 234, 212, 0.48);
box-shadow: 0 0 0 3px rgba(94, 234, 212, 0.1);
}
.home-studio-entry[hidden] {
display: none !important;
}
.home-studio-entry {
display: grid;
gap: 14px;
padding: 16px;
border: 1px solid rgba(94, 234, 212, 0.22);
border-radius: 12px;
background:
linear-gradient(135deg, rgba(20, 184, 166, 0.12), rgba(59, 130, 246, 0.08)),
rgba(2, 6, 23, 0.22);
}
.home-ai-detection {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
.home-ai-detection span {
display: flex;
align-items: center;
gap: 9px;
min-height: 42px;
padding: 0 12px;
border: 1px solid rgba(148, 163, 184, 0.16);
border-radius: 999px;
background: rgba(255, 255, 255, 0.05);
color: rgba(226, 232, 240, 0.86);
font-weight: 850;
}
.home-ai-detection i {
width: 9px;
height: 9px;
flex: 0 0 9px;
border-radius: 999px;
background: #5eead4;
box-shadow: 0 0 0 0 rgba(94, 234, 212, 0.28);
animation: homeAiPulse 1.5s ease-in-out infinite;
}
.home-ai-detection span:nth-child(2) i {
animation-delay: 0.18s;
}
.home-ai-detection span:nth-child(3) i {
animation-delay: 0.36s;
}
@keyframes homeAiPulse {
0%, 100% {
box-shadow: 0 0 0 0 rgba(94, 234, 212, 0.24);
opacity: 0.74;
}
50% {
box-shadow: 0 0 0 7px rgba(94, 234, 212, 0);
opacity: 1;
}
}
.home-studio-entry .home-gateway-analysis {
border-color: rgba(94, 234, 212, 0.2);
background:
linear-gradient(135deg, rgba(15, 23, 42, 0.86), rgba(14, 116, 144, 0.18)),
rgba(15, 23, 42, 0.76);
}
.home-studio-live[hidden] {
display: none !important;
}
.home-studio-live {
display: grid;
gap: 14px;
padding: 16px;
border: 1px solid rgba(96, 165, 250, 0.24);
border-radius: 12px;
background:
radial-gradient(circle at 12% 0%, rgba(94, 234, 212, 0.14), transparent 34%),
linear-gradient(135deg, rgba(15, 23, 42, 0.92), rgba(30, 41, 59, 0.72));
box-shadow: 0 18px 48px rgba(2, 6, 23, 0.22);
}
.home-studio-live__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 14px;
}
.home-studio-live__head div {
display: grid;
gap: 5px;
}
.home-studio-live__head span,
.home-studio-live__grid > section > span {
color: #93c5fd;
font-size: 0.76rem;
font-weight: 900;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.home-studio-live__head strong {
color: #f8fafc;
font-size: clamp(1.05rem, 1.6vw, 1.35rem);
line-height: 1.18;
}
.home-studio-live__head em {
min-width: 58px;
padding: 12px 10px;
border: 1px solid rgba(94, 234, 212, 0.26);
border-radius: 999px;
background: rgba(20, 184, 166, 0.12);
color: #a7f3d0;
font-style: normal;
font-weight: 900;
text-align: center;
}
.home-studio-live__bar {
height: 8px;
overflow: hidden;
border-radius: 999px;
background: rgba(148, 163, 184, 0.14);
}
.home-studio-live__bar i {
display: block;
width: 0%;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, #5eead4, #60a5fa, #818cf8);
transition: width 220ms ease;
}
.home-studio-live__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 12px;
}
.home-studio-live__grid section,
.home-studio-live__questions,
.home-studio-live__rules {
display: grid;
gap: 10px;
min-width: 0;
padding: 12px;
border: 1px solid rgba(148, 163, 184, 0.16);
border-radius: 10px;
background: rgba(8, 13, 26, 0.52);
}
.home-studio-live ul,
.home-studio-live__questions,
.home-studio-live__rules {
margin: 0;
padding-left: 0;
list-style: none;
}
.home-studio-live li {
display: grid;
gap: 4px;
padding: 10px;
border: 1px solid rgba(148, 163, 184, 0.13);
border-radius: 9px;
background: rgba(15, 23, 42, 0.58);
}
.home-studio-live li strong {
color: #f8fafc;
font-weight: 900;
}
.home-studio-live li span,
.home-studio-live li small {
min-width: 0;
color: rgba(203, 213, 225, 0.82);
font-weight: 700;
overflow-wrap: anywhere;
}
.home-studio-live__questions[hidden],
.home-studio-live__rules[hidden] {
display: none !important;
}
@media (max-width: 1180px) {
body.home-gateway-page .home-premium-hero {
grid-template-columns: 1fr !important;
min-height: 0 !important;
}
body.home-gateway-page .home-agent-prep-card {
max-width: none;
justify-self: stretch;
}
}
@media (max-width: 760px) {
body.home-gateway-page .home-premium-hero .home-gateway-intro h1 {
font-size: clamp(2.15rem, 9.2vw, 3.08rem) !important;
line-height: 1.02 !important;
}
.home-gateway-recovered--editable,
.home-ai-detection {
grid-template-columns: 1fr;
}
.home-gateway-recovered--editable label:has([data-home-review-hours]) {
grid-column: auto;
}
.home-studio-live__grid {
grid-template-columns: 1fr;
}
}
/* Home Studio premium polish */
body.home-gateway-page .home-premium-hero {
grid-template-columns: minmax(0, 1fr) !important;
align-items: start !important;
min-height: 0 !important;
padding-top: clamp(18px, 3vw, 42px);
gap: clamp(22px, 3vw, 36px) !important;
}
body.home-gateway-page .home-premium-hero .home-gateway-intro {
justify-items: center !important;
width: min(100%, 980px);
margin-inline: auto;
text-align: center !important;
}
body.home-gateway-page .home-premium-hero .home-gateway-intro .home-eyebrow {
margin-inline: auto;
}
body.home-gateway-page .home-premium-hero .home-gateway-intro h1 {
max-width: 13.4ch !important;
margin-inline: auto !important;
text-align: center !important;
font-size: clamp(2.85rem, 5.15vw, 5.7rem) !important;
line-height: 0.94 !important;
}
body.home-gateway-page .home-premium-hero .home-gateway-intro p {
max-width: 780px !important;
margin-inline: auto !important;
text-align: center !important;
}
body.home-gateway-page .home-premium-actions,
body.home-gateway-page .home-gateway-proof,
body.home-gateway-page .home-gateway-live-card {
justify-content: center;
margin-inline: auto;
}
body.home-gateway-page .home-agent-prep-card {
width: min(100%, 780px);
max-width: 780px !important;
justify-self: center !important;
}
.home-studio-entry {
position: relative;
overflow: hidden;
gap: 18px;
padding: clamp(18px, 2.2vw, 26px);
border-color: rgba(125, 211, 252, 0.28);
border-radius: 16px;
background:
radial-gradient(circle at 10% 0%, rgba(94, 234, 212, 0.18), transparent 32%),
radial-gradient(circle at 92% 18%, rgba(96, 165, 250, 0.18), transparent 36%),
linear-gradient(145deg, rgba(15, 23, 42, 0.9), rgba(8, 13, 26, 0.74));
box-shadow:
0 24px 70px rgba(2, 6, 23, 0.28),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.home-studio-entry::before {
content: "";
position: absolute;
inset: 0 0 auto;
height: 2px;
background: linear-gradient(90deg, transparent, rgba(94, 234, 212, 0.95), rgba(96, 165, 250, 0.75), transparent);
}
.home-studio-entry .home-gateway-step {
position: relative;
z-index: 1;
align-items: center;
}
.home-studio-entry .home-gateway-step > span {
box-shadow:
0 0 0 7px rgba(94, 234, 212, 0.08),
0 14px 34px rgba(45, 212, 191, 0.16);
}
.home-ai-detection {
position: relative;
z-index: 1;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.home-ai-detection span {
min-height: 58px;
border-color: rgba(125, 211, 252, 0.22);
border-radius: 14px;
background:
linear-gradient(145deg, rgba(15, 23, 42, 0.68), rgba(30, 41, 59, 0.42)),
rgba(255, 255, 255, 0.04);
color: #eaf6ff;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.home-studio-entry .home-gateway-analysis {
position: relative;
z-index: 1;
grid-template-columns: 1fr;
align-items: center;
padding: clamp(16px, 2vw, 22px);
border-color: rgba(94, 234, 212, 0.26);
border-radius: 14px;
background:
linear-gradient(135deg, rgba(8, 13, 26, 0.84), rgba(14, 116, 144, 0.2)),
rgba(15, 23, 42, 0.8);
}
.home-studio-entry .home-gateway-analysis::before {
content: "";
position: absolute;
inset: 14px auto 14px 0;
width: 3px;
border-radius: 999px;
background: linear-gradient(180deg, #5eead4, #60a5fa);
}
.home-studio-entry .home-gateway-analysis > div strong {
font-size: clamp(1.04rem, 1.45vw, 1.28rem);
}
.home-studio-entry .home-gateway-analysis__actions .btn,
.home-studio-entry .home-gateway-upload {
border-radius: 10px;
}
.home-studio-live {
position: relative;
z-index: 1;
gap: 18px;
padding: clamp(18px, 2.2vw, 24px);
border-color: rgba(96, 165, 250, 0.3);
border-radius: 16px;
background:
radial-gradient(circle at 14% 12%, rgba(94, 234, 212, 0.16), transparent 34%),
radial-gradient(circle at 86% 0%, rgba(129, 140, 248, 0.16), transparent 38%),
linear-gradient(145deg, rgba(2, 6, 23, 0.82), rgba(15, 23, 42, 0.78));
box-shadow:
0 22px 64px rgba(2, 6, 23, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.home-studio-live::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(rgba(125, 211, 252, 0.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(125, 211, 252, 0.04) 1px, transparent 1px);
background-size: 28px 28px;
mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.8), transparent 78%);
}
.home-studio-live__head,
.home-studio-live__bar,
.home-studio-live__grid,
.home-studio-live__questions,
.home-studio-live__rules {
position: relative;
z-index: 1;
}
.home-studio-live__head {
align-items: start;
padding: clamp(16px, 2vw, 22px);
border: 1px solid rgba(217, 183, 111, 0.16);
border-radius: 18px;
background:
linear-gradient(135deg, rgba(217, 183, 111, 0.085), rgba(122, 162, 255, 0.045)),
rgba(8, 12, 24, 0.64);
}
.home-studio-live__head span {
color: #67e8f9;
}
.home-studio-live__head strong {
display: -webkit-box;
max-width: 900px;
overflow: hidden;
color: #f8fafc;
font-size: clamp(1.12rem, 1.85vw, 1.48rem);
line-height: 1.2;
text-wrap: balance;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
.home-studio-live__head em {
min-width: 72px;
padding: 14px 12px;
border-color: rgba(94, 234, 212, 0.36);
background:
radial-gradient(circle at 50% 24%, rgba(94, 234, 212, 0.32), transparent 58%),
rgba(15, 23, 42, 0.72);
color: #ccfbf1;
box-shadow: 0 0 0 8px rgba(94, 234, 212, 0.06);
}
.home-studio-live.is-running .home-studio-live__head em {
animation: homeStudioProgressPulse 1.45s ease-in-out infinite;
}
@keyframes homeStudioProgressPulse {
0%, 100% {
transform: scale(1);
box-shadow: 0 0 0 8px rgba(94, 234, 212, 0.06);
}
50% {
transform: scale(1.035);
box-shadow: 0 0 0 12px rgba(94, 234, 212, 0);
}
}
.home-studio-live__bar {
height: 11px;
padding: 2px;
border: 1px solid rgba(125, 211, 252, 0.18);
background: rgba(2, 6, 23, 0.48);
}
.home-studio-live__bar i {
background:
linear-gradient(90deg, #2dd4bf, #38bdf8, #818cf8),
repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.24) 0 8px, transparent 8px 16px);
box-shadow: 0 0 22px rgba(56, 189, 248, 0.34);
}
.home-studio-live__grid {
grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
gap: 14px;
}
.home-studio-live__grid section,
.home-studio-live__questions,
.home-studio-live__rules {
padding: 14px;
border-color: rgba(125, 211, 252, 0.18);
border-radius: 14px;
background:
linear-gradient(145deg, rgba(15, 23, 42, 0.72), rgba(30, 41, 59, 0.45)),
rgba(8, 13, 26, 0.58);
}
.home-studio-live__grid > section > span {
display: inline-flex;
align-items: center;
gap: 8px;
color: #bae6fd;
}
.home-studio-live__grid > section > span::before,
.home-studio-live__questions::before,
.home-studio-live__rules::before {
content: "";
width: 9px;
height: 9px;
border-radius: 999px;
background: #5eead4;
box-shadow: 0 0 0 5px rgba(94, 234, 212, 0.1);
}
.home-studio-live__questions::before,
.home-studio-live__rules::before {
display: block;
margin-bottom: -4px;
}
.home-studio-live li {
position: relative;
grid-template-columns: 32px minmax(0, 1fr);
column-gap: 10px;
padding: 12px;
border-color: rgba(148, 163, 184, 0.16);
border-radius: 12px;
background:
linear-gradient(145deg, rgba(15, 23, 42, 0.72), rgba(8, 13, 26, 0.55)),
rgba(255, 255, 255, 0.03);
}
.home-studio-live li::before {
content: "";
grid-row: 1 / span 2;
width: 32px;
height: 32px;
border: 1px solid rgba(94, 234, 212, 0.22);
border-radius: 10px;
background:
linear-gradient(135deg, rgba(94, 234, 212, 0.16), rgba(96, 165, 250, 0.12)),
rgba(15, 23, 42, 0.72);
}
.home-studio-live li::after {
content: "";
position: absolute;
top: 22px;
left: 24px;
width: 10px;
height: 10px;
border-radius: 999px;
background: #5eead4;
box-shadow: 0 0 14px rgba(94, 234, 212, 0.44);
}
.home-studio-live__grid section:first-child li::after {
width: 13px;
height: 8px;
border-radius: 2px;
background: #7dd3fc;
}
.home-studio-live li strong,
.home-studio-live li span,
.home-studio-live li small {
grid-column: 2;
}
.home-studio-live li strong {
font-size: 0.98rem;
line-height: 1.2;
}
.home-studio-live li span,
.home-studio-live li small {
color: rgba(226, 232, 240, 0.78);
font-size: 0.9rem;
line-height: 1.35;
}
.home-studio-live li .home-studio-source {
display: inline-flex;
width: fit-content;
max-width: 100%;
min-height: 24px;
align-items: center;
margin-top: 4px;
padding: 4px 9px;
border: 1px solid rgba(217, 183, 111, 0.2);
border-radius: 999px;
background: rgba(217, 183, 111, 0.08);
color: rgba(244, 223, 174, 0.9);
font-size: 0.7rem;
font-weight: 900;
line-height: 1.1;
overflow: hidden;
text-overflow: ellipsis;
}
.home-studio-live li .home-studio-source[hidden] {
display: none;
}
.home-studio-live.is-complete {
border-color: rgba(122, 162, 255, 0.4);
box-shadow:
0 28px 84px rgba(0, 0, 0, 0.38),
0 0 0 1px rgba(217, 183, 111, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.075);
}
.home-studio-live.is-error {
border-color: rgba(251, 113, 133, 0.42);
}
.home-gateway-source-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.home-gateway-source-card {
position: relative;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 12px;
align-items: start;
min-width: 0;
padding: 14px;
border: 1px solid rgba(125, 211, 252, 0.18);
border-radius: 14px;
background:
linear-gradient(145deg, rgba(15, 23, 42, 0.76), rgba(30, 41, 59, 0.42)),
rgba(2, 6, 23, 0.36);
}
.home-gateway-source-card--site {
border-color: rgba(94, 234, 212, 0.26);
}
.home-gateway-source-card > i {
display: inline-grid;
place-items: center;
width: 38px;
height: 38px;
border: 1px solid rgba(94, 234, 212, 0.28);
border-radius: 12px;
background: rgba(20, 184, 166, 0.12);
color: #99f6e4;
font-style: normal;
font-weight: 950;
}
.home-gateway-source-card span {
color: #93c5fd;
font-size: 0.74rem;
font-weight: 950;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.home-gateway-source-card strong {
display: block;
margin-top: 4px;
color: #f8fafc;
font-size: 1.02rem;
font-weight: 950;
line-height: 1.18;
}
.home-gateway-source-card p {
margin: 6px 0 0;
color: rgba(226, 232, 240, 0.72);
font-weight: 740;
line-height: 1.38;
}
.home-gateway-source-card .btn,
.home-gateway-source-card .home-gateway-upload {
grid-column: 1 / -1;
width: 100%;
justify-content: center;
}
.home-studio-chatbot__phase {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 12px;
align-items: center;
padding: 14px;
border: 1px solid rgba(52, 211, 153, 0.3);
border-radius: 16px;
background:
radial-gradient(circle at 0% 0%, rgba(52, 211, 153, 0.2), transparent 34%),
linear-gradient(145deg, rgba(6, 78, 59, 0.36), rgba(15, 23, 42, 0.66));
animation: homeStudioPhaseIn 420ms ease both;
}
.home-studio-chatbot__phase > i {
position: relative;
display: inline-grid;
place-items: center;
width: 42px;
height: 42px;
border-radius: 999px;
background: rgba(52, 211, 153, 0.16);
box-shadow: 0 0 0 8px rgba(52, 211, 153, 0.08);
}
.home-studio-chatbot__phase > i::before {
content: "";
width: 18px;
height: 10px;
border-left: 3px solid #bbf7d0;
border-bottom: 3px solid #bbf7d0;
transform: rotate(-45deg) translate(1px, -1px);
}
.home-studio-chatbot__phase span {
color: #86efac;
font-size: 0.72rem;
font-weight: 950;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.home-studio-chatbot__phase strong {
display: block;
margin-top: 3px;
color: #f8fafc;
font-size: 1.08rem;
font-weight: 950;
}
.home-studio-chatbot__phase p {
margin: 5px 0 0;
color: rgba(220, 252, 231, 0.76);
font-weight: 760;
line-height: 1.36;
}
@keyframes homeStudioPhaseIn {
from {
opacity: 0;
transform: translateY(10px) scale(0.98);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.home-studio-rules-panel li {
gap: 5px;
}
.home-studio-rules-panel li small {
grid-column: 1;
width: fit-content;
padding: 3px 8px;
border: 1px solid rgba(251, 191, 36, 0.18);
border-radius: 999px;
background: rgba(251, 191, 36, 0.1);
color: #fde68a;
font-size: 0.68rem;
font-weight: 950;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.home-studio-rules-panel li strong::before {
display: none;
}
.home-studio-rules-panel li[data-source="validée"] {
border-color: rgba(52, 211, 153, 0.24);
background:
linear-gradient(135deg, rgba(52, 211, 153, 0.1), rgba(15, 23, 42, 0.5)),
rgba(15, 23, 42, 0.62);
}
.home-studio-rules-panel li[data-source="validée"] small {
border-color: rgba(52, 211, 153, 0.24);
background: rgba(52, 211, 153, 0.12);
color: #bbf7d0;
}
/* Home premium-luxury pass */
body.home-gateway-page .home-gateway {
--home-selected-accent: #d9b76f;
background:
linear-gradient(135deg, rgba(5, 7, 16, 0.99) 0%, rgba(10, 15, 31, 0.99) 46%, rgba(18, 24, 44, 0.98) 100%),
#070a13;
}
body.home-gateway-page .home-gateway::before {
opacity: 0.75;
background:
linear-gradient(120deg, rgba(217, 183, 111, 0.14), transparent 36%),
linear-gradient(245deg, rgba(122, 162, 255, 0.12), transparent 38%),
linear-gradient(180deg, transparent 0%, rgba(217, 183, 111, 0.045) 100%);
}
body.home-gateway-page .home-gateway::after {
background: linear-gradient(90deg, transparent, rgba(217, 183, 111, 0.42), rgba(122, 162, 255, 0.28), transparent);
}
body.home-gateway-page .home-premium-hero .home-gateway-intro .home-eyebrow,
body.home-gateway-page .home-gateway-step > span,
.home-studio-entry .home-gateway-step > span {
border-color: rgba(217, 183, 111, 0.32) !important;
background:
linear-gradient(145deg, rgba(217, 183, 111, 0.15), rgba(122, 162, 255, 0.08)),
rgba(11, 16, 30, 0.76) !important;
color: #f4dfae !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.08),
0 12px 34px rgba(217, 183, 111, 0.08) !important;
}
body.home-gateway-page .home-gateway-panel,
body.home-gateway-page .home-gateway-search,
body.home-gateway-page .home-gateway-next,
body.home-gateway-page .home-gateway-enrichment,
body.home-gateway-page .home-gateway-profile,
body.home-gateway-page .home-gateway-analysis,
body.home-gateway-page .home-gateway-recovered article,
body.home-gateway-page .home-gateway-selected,
.home-agent-prep-card {
border-color: rgba(217, 183, 111, 0.18) !important;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.026)),
linear-gradient(145deg, rgba(12, 17, 32, 0.94), rgba(18, 24, 44, 0.78)) !important;
box-shadow:
0 24px 76px rgba(0, 0, 0, 0.34),
inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}
body.home-gateway-page .home-gateway-vertical {
border-color: rgba(163, 174, 199, 0.18) !important;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.064), rgba(255, 255, 255, 0.026)),
rgba(13, 18, 34, 0.82) !important;
}
body.home-gateway-page .home-gateway-vertical.is-selected {
border-color: color-mix(in srgb, #d9b76f 54%, var(--home-intake-accent) 24%) !important;
background:
linear-gradient(145deg, color-mix(in srgb, var(--home-intake-accent) 10%, transparent), rgba(217, 183, 111, 0.085)),
rgba(16, 21, 39, 0.9) !important;
box-shadow:
inset 0 0 0 1px rgba(217, 183, 111, 0.2),
0 18px 48px rgba(0, 0, 0, 0.32) !important;
}
body.landing-refresh:not(.app-shell) .btn-primary,
body.home-gateway-page .home-gateway-primary:not(.is-disabled) {
background:
linear-gradient(135deg, #f0d893 0%, #8fb0ff 100%) !important;
color: #07101f !important;
box-shadow:
0 18px 42px rgba(122, 162, 255, 0.2),
0 12px 34px rgba(217, 183, 111, 0.18) !important;
}
body.landing-refresh:not(.app-shell) .btn-secondary,
body.landing-refresh:not(.app-shell) .btn-tertiary,
.home-gateway-source-card .home-gateway-upload {
border-color: rgba(217, 183, 111, 0.22) !important;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.028)),
rgba(12, 17, 32, 0.82) !important;
color: #f1dca8 !important;
}
/* Harmonisation : le bouton tertiaire devient aussi visible que le secondaire
(bordure dorée + fond léger) au lieu d'un simple texte doré. */
body.landing-refresh:not(.app-shell) .btn-tertiary:hover,
body.landing-refresh:not(.app-shell) .btn-tertiary:focus-visible {
border-color: rgba(217, 183, 111, 0.5) !important;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04)),
rgba(16, 22, 42, 0.86) !important;
color: #fbeecb !important;
}
.home-studio-entry {
border-color: rgba(217, 183, 111, 0.2);
background:
linear-gradient(145deg, rgba(8, 12, 24, 0.96), rgba(16, 22, 42, 0.86)),
rgba(8, 12, 24, 0.9);
box-shadow:
0 30px 90px rgba(0, 0, 0, 0.36),
inset 0 1px 0 rgba(255, 255, 255, 0.075);
}
.home-studio-entry::before {
background: linear-gradient(90deg, transparent, rgba(217, 183, 111, 0.86), rgba(122, 162, 255, 0.62), transparent);
}
.home-ai-detection span,
.home-gateway-source-card,
.home-studio-live__grid section,
.home-studio-live__questions,
.home-studio-live__rules {
border-color: rgba(217, 183, 111, 0.16);
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.058), rgba(255, 255, 255, 0.022)),
rgba(12, 17, 32, 0.78);
color: #eef3ff;
}
.home-ai-detection i,
.home-studio-live__grid > section > span::before,
.home-studio-live__questions::before,
.home-studio-live__rules::before {
background: #d9b76f;
box-shadow: 0 0 0 5px rgba(217, 183, 111, 0.1), 0 0 18px rgba(217, 183, 111, 0.22);
}
.home-studio-entry .home-gateway-analysis {
border-color: rgba(217, 183, 111, 0.22);
background:
linear-gradient(145deg, rgba(13, 18, 34, 0.92), rgba(22, 28, 48, 0.78)),
rgba(8, 12, 24, 0.82);
}
.home-studio-entry .home-gateway-analysis::before {
background: linear-gradient(180deg, #e8c77c, #7aa2ff);
}
.home-studio-live {
border-color: rgba(122, 162, 255, 0.24);
background:
linear-gradient(145deg, rgba(6, 9, 18, 0.95), rgba(17, 23, 42, 0.88)),
rgba(7, 10, 19, 0.92);
box-shadow:
0 28px 84px rgba(0, 0, 0, 0.38),
inset 0 1px 0 rgba(255, 255, 255, 0.075);
}
.home-studio-live::before,
.home-studio-chatbot::after {
display: none;
}
.home-studio-live__head span,
.home-studio-live__grid > section > span,
.home-gateway-source-card span,
.home-studio-chatbot__card > span,
.home-studio-chatbot__head span {
color: #b9ccff;
}
.home-studio-live__head em {
border-color: rgba(217, 183, 111, 0.34);
background:
linear-gradient(145deg, rgba(217, 183, 111, 0.16), rgba(122, 162, 255, 0.08)),
rgba(12, 17, 32, 0.8);
color: #f4dfae;
box-shadow: 0 0 0 8px rgba(217, 183, 111, 0.06);
}
.home-studio-live.is-running .home-studio-live__head em {
animation-name: homeStudioLuxuryPulse;
}
@keyframes homeStudioLuxuryPulse {
0%, 100% {
transform: scale(1);
box-shadow: 0 0 0 8px rgba(217, 183, 111, 0.06);
}
50% {
transform: scale(1.035);
box-shadow: 0 0 0 12px rgba(122, 162, 255, 0);
}
}
.home-studio-live__bar {
border-color: rgba(217, 183, 111, 0.16);
background: rgba(6, 9, 18, 0.72);
}
.home-studio-live__bar i {
background: linear-gradient(90deg, #d9b76f, #8fb0ff, #f0d893);
box-shadow: 0 0 22px rgba(217, 183, 111, 0.2);
}
.home-studio-live li::before,
.home-gateway-source-card > i {
border-color: rgba(217, 183, 111, 0.22);
background:
linear-gradient(145deg, rgba(217, 183, 111, 0.13), rgba(122, 162, 255, 0.08)),
rgba(12, 17, 32, 0.78);
color: #f2dca6;
}
.home-studio-live li::after {
background: #d9b76f;
box-shadow: 0 0 14px rgba(217, 183, 111, 0.3);
}
.home-studio-live__grid section:first-child li::after {
background: #8fb0ff;
}
.home-studio-chatbot {
border-color: rgba(122, 162, 255, 0.22);
background:
linear-gradient(145deg, rgba(11, 16, 30, 0.9), rgba(7, 10, 19, 0.82)),
rgba(9, 13, 25, 0.88);
}
.home-studio-chatbot__card,
.home-studio-chatbot__bubble--agent {
border-color: rgba(217, 183, 111, 0.16);
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.058), rgba(255, 255, 255, 0.024)),
rgba(12, 17, 32, 0.76);
}
.home-studio-chatbot__bubble--user,
.home-studio-chatbot__choices button {
border-color: rgba(217, 183, 111, 0.22);
background:
linear-gradient(145deg, rgba(217, 183, 111, 0.13), rgba(122, 162, 255, 0.07)),
rgba(12, 17, 32, 0.76);
color: #f6e6bf;
}
.home-studio-chatbot__choices button:hover,
.home-studio-chatbot__choices button:focus-visible {
border-color: rgba(240, 216, 147, 0.48);
background:
linear-gradient(145deg, rgba(217, 183, 111, 0.2), rgba(122, 162, 255, 0.12)),
rgba(15, 22, 40, 0.86);
}
.home-studio-chatbot__card[data-question-id="voice_gender"] {
border-color: rgba(122, 162, 255, 0.28);
background:
linear-gradient(145deg, rgba(122, 162, 255, 0.13), rgba(217, 183, 111, 0.07)),
rgba(11, 16, 30, 0.88);
}
.home-studio-chatbot__card[data-question-id="voice_gender"] .home-studio-chatbot__choices {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.home-studio-chatbot__card[data-question-id="voice_gender"] .home-studio-chatbot__choices button {
display: inline-flex;
align-items: center;
min-height: 54px;
justify-content: center;
border-radius: 14px;
font-size: 0.98rem;
}
.home-studio-chatbot__card[data-question-id="voice_gender"] .home-studio-chatbot__choices button:nth-child(-n+2) {
border-color: rgba(122, 162, 255, 0.36);
background:
linear-gradient(145deg, rgba(122, 162, 255, 0.18), rgba(217, 183, 111, 0.09)),
rgba(14, 19, 35, 0.9);
color: #eef4ff;
}
.home-studio-chatbot__note textarea:focus {
border-color: rgba(217, 183, 111, 0.46);
box-shadow: 0 0 0 3px rgba(217, 183, 111, 0.1);
}
.home-studio-chatbot__done,
.home-studio-chatbot__phase {
border-color: rgba(217, 183, 111, 0.26);
background:
linear-gradient(145deg, rgba(217, 183, 111, 0.12), rgba(122, 162, 255, 0.08)),
rgba(12, 17, 32, 0.82);
}
.home-studio-chatbot__phase > i {
background: rgba(217, 183, 111, 0.14);
box-shadow: 0 0 0 8px rgba(217, 183, 111, 0.08);
}
.home-studio-chatbot__phase > i::before {
border-color: #f4dfae;
}
.home-studio-chatbot__phase span,
.home-studio-chatbot__done strong,
.home-studio-rules-panel__head span {
color: #f2dca6;
}
.home-studio-chatbot__phase p,
.home-studio-chatbot__done span {
color: rgba(246, 230, 191, 0.76);
}
.home-studio-rules-panel {
border-color: rgba(217, 183, 111, 0.24);
background:
linear-gradient(145deg, rgba(18, 24, 44, 0.86), rgba(10, 14, 26, 0.82)),
rgba(10, 14, 26, 0.86);
}
.home-studio-rules-panel__head {
border-bottom-color: rgba(217, 183, 111, 0.16);
}
.home-studio-rules-panel__head strong {
color: #fff2cf;
}
.home-studio-rules-panel li,
.home-studio-rules-panel li[data-source="validée"] {
border-color: rgba(217, 183, 111, 0.16);
background:
linear-gradient(145deg, rgba(217, 183, 111, 0.075), rgba(122, 162, 255, 0.045)),
rgba(12, 17, 32, 0.72);
}
.home-studio-rules-panel li small,
.home-studio-rules-panel li[data-source="validée"] small {
border-color: rgba(217, 183, 111, 0.22);
background: rgba(217, 183, 111, 0.1);
color: #f4dfae;
}
/* Studio chatbot conversation polish */
.home-studio-chatbot {
align-content: start;
gap: 14px;
}
.home-studio-chatbot__head {
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
padding: 12px 12px 14px;
border: 1px solid rgba(217, 183, 111, 0.14);
border-radius: 18px;
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.018)),
rgba(7, 10, 19, 0.52);
}
.home-studio-chatbot__head::before {
content: "";
grid-row: 1 / span 2;
width: 12px;
height: 12px;
align-self: start;
margin-top: 3px;
border-radius: 999px;
background: #d9b76f;
box-shadow:
0 0 0 7px rgba(217, 183, 111, 0.08),
0 0 18px rgba(217, 183, 111, 0.24);
}
.home-studio-chatbot__head span,
.home-studio-chatbot__head small {
grid-column: 2;
}
.home-studio-chatbot__head strong {
grid-column: 3;
grid-row: 1 / span 2;
min-width: 66px;
border-color: rgba(122, 162, 255, 0.22);
background:
linear-gradient(145deg, rgba(122, 162, 255, 0.12), rgba(217, 183, 111, 0.08)),
rgba(8, 12, 24, 0.76);
}
.home-studio-chatbot__transcript {
position: relative;
display: flex;
flex-direction: column;
gap: 10px;
padding: 4px 2px;
}
.home-studio-chatbot__transcript::before {
content: "";
position: absolute;
top: 18px;
bottom: 18px;
left: 18px;
width: 1px;
background: linear-gradient(180deg, transparent, rgba(217, 183, 111, 0.18), transparent);
}
.home-studio-chatbot__message {
position: relative;
z-index: 1;
display: grid;
gap: 10px;
align-items: end;
max-width: min(88%, 720px);
}
.home-studio-chatbot__message--agent {
grid-template-columns: 38px minmax(0, 1fr);
justify-self: start;
}
.home-studio-chatbot__message--user {
grid-template-columns: minmax(0, 1fr) 34px;
justify-self: end;
}
.home-studio-chatbot__message > i {
display: inline-grid;
place-items: center;
width: 34px;
height: 34px;
border: 1px solid rgba(217, 183, 111, 0.2);
border-radius: 999px;
background:
linear-gradient(145deg, rgba(217, 183, 111, 0.14), rgba(122, 162, 255, 0.08)),
rgba(9, 13, 25, 0.9);
color: #f4dfae;
font-style: normal;
font-size: 0.78rem;
font-weight: 950;
box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
}
.home-studio-chatbot__message--user > i {
border-color: rgba(122, 162, 255, 0.22);
color: #dbe7ff;
}
.home-studio-chatbot__message > div {
display: grid;
gap: 5px;
min-width: 0;
padding: 10px 13px;
border: 1px solid rgba(217, 183, 111, 0.16);
border-radius: 18px 18px 18px 7px;
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.022)),
rgba(12, 17, 32, 0.82);
box-shadow:
0 14px 34px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.055);
}
.home-studio-chatbot__message--user > div {
border-color: rgba(122, 162, 255, 0.2);
border-radius: 18px 18px 7px 18px;
background:
linear-gradient(145deg, rgba(217, 183, 111, 0.13), rgba(122, 162, 255, 0.07)),
rgba(14, 18, 31, 0.86);
}
.home-studio-chatbot__message small {
color: rgba(185, 204, 255, 0.82);
font-size: 0.68rem;
font-weight: 950;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.home-studio-chatbot__message--user small {
color: rgba(244, 223, 174, 0.86);
text-align: right;
}
.home-studio-chatbot__message p {
margin: 0;
color: #f8fafc;
font-weight: 850;
line-height: 1.34;
}
.home-studio-chatbot__message--user p {
color: #f6e6bf;
text-align: right;
}
.home-studio-chatbot__bubble {
display: none;
}
.home-studio-chatbot__card {
border-radius: 20px;
}
.home-studio-chatbot__done {
grid-template-columns: 42px minmax(0, 1fr);
align-items: center;
gap: 12px;
padding: 16px;
border-radius: 20px;
}
.home-studio-chatbot__done > i {
display: inline-grid;
place-items: center;
width: 42px;
height: 42px;
border-radius: 999px;
background:
linear-gradient(145deg, rgba(217, 183, 111, 0.22), rgba(122, 162, 255, 0.12)),
rgba(8, 12, 24, 0.9);
box-shadow: 0 0 0 8px rgba(217, 183, 111, 0.07);
}
.home-studio-chatbot__done > i::before {
content: "";
width: 18px;
height: 10px;
border-left: 3px solid #f4dfae;
border-bottom: 3px solid #f4dfae;
transform: rotate(-45deg) translate(1px, -1px);
}
.home-studio-chatbot__done > div {
display: grid;
gap: 4px;
}
.home-studio-chatbot__title {
grid-column: 2;
display: grid;
gap: 4px;
min-width: 0;
}
.home-studio-chatbot__title h3 {
margin: 0;
color: #f8fafc;
font-size: clamp(1.08rem, 1.65vw, 1.48rem);
line-height: 1.08;
}
.home-studio-chatbot__head > strong {
align-self: center;
}
.home-studio-chatbot__card[data-phase="extra"],
.home-studio-chatbot__card[data-phase="faq"] {
border-radius: 22px;
box-shadow:
0 20px 54px rgba(0, 0, 0, 0.26),
inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.home-studio-chatbot__card[data-phase="extra"] {
border-color: rgba(217, 183, 111, 0.28);
background:
radial-gradient(circle at 100% 0%, rgba(217, 183, 111, 0.13), transparent 34%),
linear-gradient(145deg, rgba(22, 18, 31, 0.9), rgba(10, 14, 26, 0.82));
}
.home-studio-chatbot__card[data-phase="faq"] {
border-color: rgba(122, 162, 255, 0.3);
background:
radial-gradient(circle at 0% 0%, rgba(122, 162, 255, 0.16), transparent 34%),
linear-gradient(145deg, rgba(13, 18, 34, 0.92), rgba(8, 12, 24, 0.82));
}
.home-studio-chatbot__card[data-phase="faq"] .home-studio-chatbot__choices {
display: grid;
grid-template-columns: minmax(0, 1fr);
width: min(100%, 760px);
max-width: 760px;
gap: 8px;
justify-items: center;
margin-inline: auto;
}
.home-studio-chatbot__card[data-phase="faq"] .home-studio-chatbot__choices button {
width: 100%;
min-height: 44px;
justify-content: center;
border-radius: 12px;
padding: 10px 12px;
text-align: center;
white-space: normal;
line-height: 1.2;
font-size: 0.92rem;
}
.home-studio-chatbot__card[data-phase="faq"] .home-studio-chatbot__choices button.is-customize {
width: min(100%, 360px);
border-color: rgba(122, 162, 255, 0.18);
color: #eef4ff;
}
.home-studio-chatbot__card[data-phase="extra"] .home-studio-chatbot__note textarea {
min-height: 112px;
}
.home-studio-weekly-schedule {
display: grid;
gap: 10px;
padding: 13px;
border: 1px solid rgba(122, 162, 255, 0.22);
border-radius: 16px;
background:
linear-gradient(145deg, rgba(122, 162, 255, 0.08), rgba(217, 183, 111, 0.045)),
rgba(6, 10, 22, 0.64);
}
.home-studio-weekly-schedule__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.home-studio-weekly-schedule__head > div {
display: grid;
gap: 3px;
}
.home-studio-weekly-schedule__head strong {
color: #f8fafc;
font-size: 0.96rem;
font-weight: 950;
}
.home-studio-weekly-schedule__head span {
color: rgba(226, 232, 240, 0.66);
font-size: 0.8rem;
font-weight: 760;
}
.home-studio-weekly-schedule__head button {
min-height: 34px;
padding: 0 11px;
border: 1px solid rgba(217, 183, 111, 0.22);
border-radius: 999px;
background: rgba(217, 183, 111, 0.09);
color: #f6e6bf;
font: inherit;
font-size: 0.78rem;
font-weight: 900;
cursor: pointer;
}
.home-studio-weekly-schedule__simple {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(220px, auto);
gap: 12px;
align-items: center;
}
.home-studio-weekly-schedule__days {
display: flex;
flex-wrap: wrap;
gap: 7px;
}
.home-studio-weekly-schedule__chip {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 50px;
min-height: 38px;
padding: 0 11px;
border: 1px solid rgba(148, 163, 184, 0.16);
border-radius: 999px;
background: rgba(8, 12, 24, 0.62);
color: rgba(238, 244, 255, 0.72);
font-weight: 900;
cursor: pointer;
transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}
.home-studio-weekly-schedule__chip input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.home-studio-weekly-schedule__chip.is-active {
border-color: rgba(217, 183, 111, 0.48);
background:
linear-gradient(145deg, rgba(217, 183, 111, 0.18), rgba(122, 162, 255, 0.08)),
rgba(15, 22, 40, 0.82);
color: #fff7dd;
}
.home-studio-weekly-schedule__range {
display: grid;
grid-template-columns: repeat(2, minmax(96px, 1fr));
gap: 8px;
}
.home-studio-weekly-schedule__range label {
display: grid;
gap: 5px;
color: rgba(226, 232, 240, 0.68);
font-size: 0.72rem;
font-weight: 900;
text-transform: uppercase;
}
.home-studio-weekly-schedule__presets {
display: flex;
flex-wrap: wrap;
gap: 7px;
}
.home-studio-weekly-schedule__presets button {
min-height: 32px;
padding: 0 10px;
border: 1px solid rgba(122, 162, 255, 0.18);
border-radius: 999px;
background: rgba(122, 162, 255, 0.07);
color: rgba(238, 244, 255, 0.78);
font: inherit;
font-size: 0.76rem;
font-weight: 850;
cursor: pointer;
}
.home-studio-weekly-schedule__rows {
display: none;
gap: 7px;
padding-top: 2px;
}
.home-studio-weekly-schedule.is-expanded .home-studio-weekly-schedule__rows {
display: grid;
}
.home-studio-weekly-schedule__row {
display: grid;
grid-template-columns: minmax(116px, 1fr) 112px 112px;
gap: 8px;
align-items: center;
}
.home-studio-weekly-schedule__day {
display: flex;
align-items: center;
gap: 9px;
min-height: 40px;
padding: 0 10px;
border: 1px solid rgba(148, 163, 184, 0.14);
border-radius: 12px;
background: rgba(12, 17, 32, 0.66);
color: rgba(238, 244, 255, 0.92);
font-weight: 900;
}
.home-studio-weekly-schedule__day input {
width: 16px;
height: 16px;
accent-color: #d9b76f;
}
.home-studio-weekly-schedule input[type="time"] {
width: 100%;
min-height: 40px;
padding: 0 9px;
border: 1px solid rgba(148, 163, 184, 0.16);
border-radius: 12px;
background: rgba(8, 12, 24, 0.82);
color: #f8fafc;
color-scheme: dark;
font: inherit;
font-weight: 850;
}
.home-studio-weekly-schedule > small {
color: rgba(226, 232, 240, 0.68);
font-weight: 760;
line-height: 1.38;
}
.home-studio-table-capacity {
display: grid;
gap: 12px;
padding: 16px;
border: 1px solid rgba(217, 183, 111, 0.22);
border-radius: 20px;
background:
radial-gradient(circle at 100% 0%, rgba(217, 183, 111, 0.14), transparent 36%),
radial-gradient(circle at 0% 100%, rgba(122, 162, 255, 0.11), transparent 40%),
linear-gradient(145deg, rgba(17, 20, 34, 0.9), rgba(8, 12, 24, 0.76));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
0 18px 42px rgba(0, 0, 0, 0.22);
}
.home-studio-table-capacity__head {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(150px, 190px);
gap: 12px;
align-items: center;
}
.home-studio-table-capacity__head div,
.home-studio-table-capacity__zones section > div:first-child {
display: grid;
gap: 3px;
}
.home-studio-table-capacity__zones section > div:first-child > div {
display: grid;
gap: 3px;
min-width: 0;
}
.home-studio-table-capacity label {
display: grid;
gap: 6px;
min-width: 0;
}
.home-studio-table-capacity strong {
color: #fff7dd;
font-size: 0.96rem;
font-weight: 950;
}
.home-studio-table-capacity span,
.home-studio-table-capacity p,
.home-studio-table-capacity small {
margin: 0;
color: rgba(226, 232, 240, 0.72);
font-size: 0.84rem;
font-weight: 760;
line-height: 1.35;
}
.home-studio-table-capacity small {
color: rgba(226, 232, 240, 0.58);
font-size: 0.78rem;
}
.home-studio-table-capacity__modes {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.home-studio-table-capacity__modes span {
display: inline-flex;
align-items: center;
min-height: 30px;
padding: 0 10px;
border: 1px solid rgba(217, 183, 111, 0.18);
border-radius: 999px;
background: rgba(217, 183, 111, 0.08);
color: #f4dba0;
font-size: 0.76rem;
font-weight: 920;
}
.home-studio-table-capacity__modes span:first-child {
border-color: rgba(122, 162, 255, 0.22);
background: rgba(122, 162, 255, 0.09);
color: #dbe7ff;
}
.home-studio-table-capacity__mode-switch {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.home-studio-table-capacity__mode-switch button {
display: grid;
gap: 4px;
min-height: 78px;
padding: 12px;
border: 1px solid rgba(148, 163, 184, 0.16);
border-radius: 16px;
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.018)),
rgba(12, 17, 32, 0.74);
color: #eef4ff;
text-align: left;
font: inherit;
cursor: pointer;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.home-studio-table-capacity__mode-switch button:hover,
.home-studio-table-capacity__mode-switch button:focus-visible,
.home-studio-table-capacity__mode-switch button.is-selected {
transform: translateY(-1px);
border-color: rgba(217, 183, 111, 0.42);
background:
linear-gradient(145deg, rgba(217, 183, 111, 0.15), rgba(122, 162, 255, 0.08)),
rgba(15, 22, 40, 0.86);
}
.home-studio-table-capacity__mode-switch button strong {
color: #fff7dd;
font-size: 0.92rem;
}
.home-studio-table-capacity__mode-switch button span {
color: rgba(226, 232, 240, 0.66);
font-size: 0.78rem;
font-weight: 780;
}
.home-studio-table-capacity__mode-switch button.is-selected::after {
content: "Sélectionné";
justify-self: start;
margin-top: 3px;
padding: 3px 8px;
border: 1px solid rgba(217, 183, 111, 0.24);
border-radius: 999px;
background: rgba(217, 183, 111, 0.1);
color: #f4dfae;
font-size: 0.68rem;
font-weight: 950;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.home-studio-table-capacity__metrics {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.home-studio-table-capacity__metrics > span {
display: grid;
gap: 4px;
min-width: 0;
padding: 10px 12px;
border: 1px solid rgba(217, 183, 111, 0.14);
border-radius: 14px;
background:
linear-gradient(145deg, rgba(217, 183, 111, 0.075), rgba(122, 162, 255, 0.05)),
rgba(8, 12, 24, 0.54);
}
.home-studio-table-capacity__metrics small {
color: rgba(246, 230, 191, 0.72);
font-size: 0.68rem;
font-weight: 950;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.home-studio-table-capacity__metrics strong {
overflow-wrap: anywhere;
color: #eef4ff;
font-size: 0.9rem;
line-height: 1.2;
}
.home-studio-table-capacity input {
min-height: 42px;
width: 100%;
padding: 0 12px;
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 12px;
background: rgba(8, 12, 24, 0.82);
color: #f8fafc;
font: inherit;
font-weight: 850;
outline: none;
}
.home-studio-table-capacity textarea {
width: 100%;
min-height: 72px;
resize: vertical;
padding: 12px;
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 12px;
background: rgba(8, 12, 24, 0.82);
color: #f8fafc;
font: inherit;
font-weight: 760;
line-height: 1.35;
outline: none;
}
.home-studio-table-capacity input:focus,
.home-studio-table-capacity textarea:focus {
border-color: rgba(164, 182, 255, 0.56);
box-shadow: 0 0 0 3px rgba(164, 182, 255, 0.12);
}
.home-studio-table-capacity.is-empty {
border-color: rgba(248, 113, 113, 0.48);
box-shadow:
0 0 0 3px rgba(248, 113, 113, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.home-studio-table-capacity__toggle {
display: inline-flex;
align-items: center;
gap: 8px;
justify-self: start;
min-height: 38px;
padding: 0 14px;
border: 1px solid rgba(217, 183, 111, 0.24);
border-radius: 999px;
background:
linear-gradient(135deg, rgba(217, 183, 111, 0.16), rgba(122, 162, 255, 0.1)),
rgba(15, 23, 42, 0.82);
color: #f7e7bd;
font: inherit;
font-size: 0.82rem;
font-weight: 950;
cursor: pointer;
transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.home-studio-table-capacity__toggle::before {
content: "+";
display: inline-grid;
width: 20px;
height: 20px;
place-items: center;
border-radius: 50%;
background: rgba(217, 183, 111, 0.16);
color: #ffe7ad;
font-weight: 950;
}
.home-studio-table-capacity.is-advanced-open .home-studio-table-capacity__toggle::before {
content: "−";
}
.home-studio-table-capacity__toggle:hover {
transform: translateY(-1px);
border-color: rgba(217, 183, 111, 0.46);
background:
linear-gradient(135deg, rgba(217, 183, 111, 0.23), rgba(122, 162, 255, 0.14)),
rgba(15, 23, 42, 0.88);
}
.home-studio-table-capacity__advanced {
display: grid;
gap: 12px;
padding-top: 2px;
}
.home-studio-table-capacity__advanced[hidden] {
display: none;
}
.home-studio-table-capacity__zones {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.home-studio-table-capacity__zones section {
display: grid;
gap: 10px;
min-width: 0;
padding: 12px;
border: 1px solid rgba(217, 183, 111, 0.17);
border-radius: 16px;
background:
linear-gradient(180deg, rgba(30, 35, 49, 0.7), rgba(15, 23, 42, 0.52)),
rgba(15, 23, 42, 0.54);
}
.home-studio-table-capacity__zones section > div:first-child {
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
}
.home-studio-table-capacity__zones button {
min-height: 32px;
padding: 0 11px;
border: 1px solid rgba(164, 182, 255, 0.28);
border-radius: 999px;
background: rgba(122, 162, 255, 0.1);
color: #dbe7ff;
font: inherit;
font-size: 0.76rem;
font-weight: 950;
cursor: pointer;
}
.home-studio-table-capacity__quick {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
padding: 8px;
border: 1px solid rgba(217, 183, 111, 0.11);
border-radius: 12px;
background: rgba(8, 12, 24, 0.46);
}
.home-studio-table-capacity [data-capacity-rows] {
display: grid;
gap: 7px;
}
.home-studio-table-capacity__row {
display: grid;
grid-template-columns: minmax(92px, 1fr) auto minmax(92px, 1fr) auto 32px;
gap: 7px;
align-items: end;
}
.home-studio-table-capacity__row > span {
padding-bottom: 12px;
white-space: nowrap;
color: rgba(248, 250, 252, 0.78);
font-weight: 850;
}
.home-studio-table-capacity__row label span {
color: rgba(226, 232, 240, 0.62);
font-size: 0.7rem;
font-weight: 900;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.home-studio-table-capacity__row [data-table-remove] {
display: inline-grid;
place-items: center;
width: 32px;
min-height: 32px;
padding: 0;
border-color: rgba(248, 113, 113, 0.24);
background: rgba(127, 29, 29, 0.18);
color: #fecaca;
font-size: 1.1rem;
}
.home-studio-table-capacity > p {
padding: 10px 12px;
border: 1px solid rgba(217, 183, 111, 0.18);
border-radius: 14px;
background:
linear-gradient(135deg, rgba(217, 183, 111, 0.1), rgba(122, 162, 255, 0.07)),
rgba(15, 23, 42, 0.72);
color: #dce8ff;
font-weight: 900;
}
.home-studio-table-capacity > p strong {
display: block;
margin-bottom: 4px;
color: #fff7dd;
font-size: 0.76rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.home-studio-table-capacity > p span {
color: #dce8ff;
font-size: 0.86rem;
font-weight: 900;
}
.home-studio-table-capacity__notes {
padding: 10px;
border: 1px solid rgba(164, 182, 255, 0.14);
border-radius: 14px;
background: rgba(15, 23, 42, 0.44);
}
.home-studio-live li[data-source="faq"] {
border-color: rgba(122, 162, 255, 0.24);
background:
linear-gradient(145deg, rgba(122, 162, 255, 0.1), rgba(217, 183, 111, 0.045)),
rgba(12, 17, 32, 0.76);
}
@media (max-width: 720px) {
.home-studio-chatbot__card[data-phase="faq"] .home-studio-chatbot__choices {
grid-template-columns: 1fr;
}
.home-studio-weekly-schedule__head {
align-items: stretch;
flex-direction: column;
}
.home-studio-weekly-schedule__simple {
grid-template-columns: 1fr;
}
.home-studio-weekly-schedule__range {
grid-template-columns: 1fr 1fr;
}
.home-studio-weekly-schedule__row {
grid-template-columns: 1fr 1fr;
}
.home-studio-weekly-schedule__day {
grid-column: 1 / -1;
}
.home-studio-rules-panel__editor {
grid-template-columns: 1fr;
}
.home-studio-rules-panel__editor button,
.home-studio-rules-panel__actions .btn {
width: 100%;
}
.home-studio-table-capacity__head,
.home-studio-table-capacity__mode-switch,
.home-studio-table-capacity__metrics,
.home-studio-table-capacity__zones,
.home-studio-table-capacity__quick,
.home-studio-table-capacity__row {
grid-template-columns: 1fr;
}
.home-studio-table-capacity__row > span {
display: none;
}
}
body.home-gateway-page .home-gateway-search .home-intake-status {
margin-top: 8px !important;
}
.home-studio-live__section-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
min-width: 0;
}
.home-studio-live__section-head > span {
display: inline-flex;
min-width: 0;
align-items: center;
gap: 8px;
color: #b9ccff;
font-size: 0.76rem;
font-weight: 950;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.home-studio-live__section-head > span::before {
content: "";
flex: 0 0 auto;
width: 9px;
height: 9px;
border-radius: 999px;
background: #d9b76f;
box-shadow: 0 0 0 5px rgba(217, 183, 111, 0.1), 0 0 18px rgba(217, 183, 111, 0.22);
}
.home-studio-live__section-head > span strong {
display: inline-flex;
min-width: 28px;
min-height: 22px;
align-items: center;
justify-content: center;
padding: 0 8px;
border: 1px solid rgba(217, 183, 111, 0.24);
border-radius: 999px;
background:
linear-gradient(145deg, rgba(217, 183, 111, 0.14), rgba(122, 162, 255, 0.08)),
rgba(8, 12, 24, 0.72);
color: #f4dfae;
font-size: 0.72rem;
letter-spacing: 0;
}
.home-studio-live__section-head button,
.home-studio-rules-panel__head button {
flex: 0 0 auto;
min-height: 30px;
padding: 0 12px;
border: 1px solid rgba(122, 162, 255, 0.22);
border-radius: 999px;
background:
linear-gradient(145deg, rgba(122, 162, 255, 0.12), rgba(217, 183, 111, 0.07)),
rgba(8, 12, 24, 0.74);
color: #dbe7ff;
font: inherit;
font-size: 0.72rem;
font-weight: 950;
cursor: pointer;
}
.home-studio-live__section-head button:hover,
.home-studio-live__section-head button:focus-visible,
.home-studio-rules-panel__head button:hover,
.home-studio-rules-panel__head button:focus-visible {
border-color: rgba(217, 183, 111, 0.42);
color: #fff2cf;
}
.home-studio-live__grid section.is-collapsed {
align-content: start;
min-height: 76px;
}
.home-studio-live__grid section.is-collapsed ul {
display: none;
}
.home-studio-rules-panel__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.home-studio-rules-panel__head > div {
display: grid;
min-width: 0;
gap: 5px;
}
.home-studio-rules-panel.is-collapsed ul {
display: none;
}
.home-studio-rules-panel__editor {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 10px;
align-items: end;
padding: 14px;
border: 1px solid rgba(217, 183, 111, 0.18);
border-radius: 16px;
background:
linear-gradient(145deg, rgba(217, 183, 111, 0.07), rgba(122, 162, 255, 0.035)),
rgba(8, 12, 24, 0.56);
}
.home-studio-rules-panel__editor label {
display: grid;
gap: 7px;
min-width: 0;
}
.home-studio-rules-panel__editor label span {
color: rgba(254, 243, 199, 0.82);
font-size: 0.82rem;
font-weight: 900;
}
.home-studio-rules-panel__editor textarea {
width: 100%;
min-height: 62px;
padding: 11px 12px;
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 12px;
background: rgba(5, 8, 17, 0.74);
color: #f8fafc;
font: inherit;
line-height: 1.35;
outline: none;
resize: vertical;
}
.home-studio-rules-panel__editor textarea:focus {
border-color: rgba(217, 183, 111, 0.46);
box-shadow: 0 0 0 3px rgba(217, 183, 111, 0.1);
}
.home-studio-rules-panel__editor textarea.is-empty {
border-color: rgba(248, 113, 113, 0.7);
}
.home-studio-rules-panel__editor button {
min-height: 48px;
padding: 0 16px;
border: 1px solid rgba(217, 183, 111, 0.28);
border-radius: 14px;
background:
linear-gradient(145deg, rgba(217, 183, 111, 0.16), rgba(122, 162, 255, 0.08)),
rgba(12, 17, 32, 0.86);
color: #fff2cf;
font: inherit;
font-weight: 950;
cursor: pointer;
}
.home-studio-rules-panel__actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
justify-content: space-between;
}
.home-studio-rules-panel__actions .btn {
min-width: min(100%, 280px);
}
.home-studio-rules-panel__actions small {
color: rgba(254, 243, 199, 0.68);
font-weight: 760;
}
.home-studio-rules-panel.is-validated {
border-color: rgba(52, 211, 153, 0.28) !important;
}
.home-studio-test-suite[hidden] {
display: none !important;
}
.home-studio-test-suite {
display: grid;
gap: 16px;
padding: clamp(16px, 2vw, 22px);
border: 1px solid rgba(122, 162, 255, 0.24);
border-radius: 18px;
background:
radial-gradient(circle at 12% 0%, rgba(122, 162, 255, 0.14), transparent 32%),
linear-gradient(145deg, rgba(9, 13, 25, 0.94), rgba(16, 22, 40, 0.86));
box-shadow:
0 26px 76px rgba(0, 0, 0, 0.32),
inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.home-studio-test-suite__head {
display: grid;
gap: 6px;
max-width: 860px;
}
.home-studio-test-suite__head span,
.home-studio-test-card > span,
.home-studio-test-card__head span,
.home-studio-test-grid article > span {
color: #b9ccff;
font-size: 0.76rem;
font-weight: 950;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.home-studio-test-suite__head h3,
.home-studio-test-card h4,
.home-studio-test-grid h4 {
margin: 0;
color: #f8fafc;
line-height: 1.12;
}
.home-studio-test-suite__head h3 {
font-size: clamp(1.28rem, 2vw, 1.8rem);
}
.home-studio-test-suite__head p,
.home-studio-test-card p,
.home-studio-test-grid p,
.home-studio-test-grid dd {
margin: 0;
color: rgba(226, 232, 240, 0.74);
line-height: 1.45;
}
.home-studio-test-layout {
display: grid;
grid-template-columns: minmax(380px, 0.98fr) minmax(0, 1.02fr);
gap: 18px;
align-items: stretch;
}
.home-studio-test-card,
.home-studio-test-dashboard {
min-width: 0;
border: 1px solid rgba(217, 183, 111, 0.16);
border-radius: 16px;
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.022)),
rgba(10, 14, 26, 0.78);
}
.home-studio-test-card {
display: grid;
gap: 13px;
align-content: start;
padding: 16px;
}
.home-studio-test-card--number {
min-height: 620px;
align-content: center;
justify-items: stretch;
gap: 20px;
padding: clamp(24px, 3.2vw, 44px);
border-color: rgba(217, 183, 111, 0.34);
background:
radial-gradient(circle at 18% 12%, rgba(217, 183, 111, 0.16), transparent 34%),
linear-gradient(145deg, rgba(122, 162, 255, 0.09), rgba(217, 183, 111, 0.06)),
rgba(10, 14, 26, 0.9);
}
.home-studio-test-card--number > span {
color: #f6e6bf;
font-size: 0.86rem;
}
.home-studio-test-card--number a {
display: inline-flex;
width: fit-content;
align-items: center;
justify-content: center;
min-height: 64px;
padding: 0 22px;
border: 1px solid rgba(217, 183, 111, 0.38);
border-radius: 999px;
background:
linear-gradient(145deg, rgba(246, 230, 191, 0.18), rgba(122, 162, 255, 0.16)),
rgba(8, 12, 24, 0.78);
color: #fff8e7;
font-size: clamp(1.45rem, 2vw, 2.05rem);
font-weight: 950;
text-decoration: none;
letter-spacing: 0.01em;
box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
}
.home-studio-test-card--number p {
max-width: 36ch;
color: rgba(248, 250, 252, 0.86);
font-size: clamp(1.02rem, 1.25vw, 1.22rem);
font-weight: 760;
line-height: 1.45;
}
.home-studio-test-call {
display: grid;
gap: 14px;
margin-top: 8px;
}
.home-studio-test-call label {
display: grid;
gap: 6px;
color: rgba(246, 230, 191, 0.86);
font-size: 0.82rem;
font-weight: 900;
}
.home-studio-test-call input {
width: 100%;
min-height: 54px;
padding: 0 16px;
border: 1px solid rgba(217, 183, 111, 0.18);
border-radius: 13px;
background: rgba(5, 10, 23, 0.82);
color: #f8fafc;
font: inherit;
}
.home-studio-test-call .btn {
min-height: 58px;
border-radius: 14px;
font-size: 1rem;
}
.home-studio-test-card__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.home-studio-test-transcript {
display: grid;
align-content: start;
gap: 10px;
min-height: 260px;
max-height: 360px;
overflow: auto;
padding: 12px;
border: 1px solid rgba(122, 162, 255, 0.16);
border-radius: 14px;
background: rgba(5, 10, 23, 0.58);
}
.home-studio-test-card--transcript {
min-height: 620px;
}
.home-studio-test-card--transcript .btn {
min-height: 38px;
padding-inline: 13px;
border-radius: 10px;
white-space: nowrap;
}
.home-studio-live-console {
display: grid;
align-content: start;
grid-auto-rows: max-content;
gap: 14px;
min-height: 320px;
padding: clamp(18px, 2.4vw, 28px);
border: 1px solid rgba(217, 183, 111, 0.2);
border-radius: 20px;
background:
radial-gradient(circle at 14% 0%, rgba(217, 183, 111, 0.14), transparent 36%),
radial-gradient(circle at 100% 100%, rgba(122, 162, 255, 0.12), transparent 34%),
linear-gradient(145deg, rgba(18, 24, 40, 0.96), rgba(5, 10, 23, 0.92));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.home-studio-live-console:not(.is-started) {
align-content: center;
}
.home-studio-live-console.is-started {
min-height: 520px;
}
.home-studio-live-notice {
display: grid;
gap: 3px;
padding: 10px 12px;
border: 1px solid rgba(122, 162, 255, 0.18);
border-radius: 12px;
background: rgba(13, 18, 34, 0.82);
color: rgba(226, 232, 240, 0.82);
font-size: 0.86rem;
}
.home-studio-live-notice[hidden] {
display: none !important;
}
.home-studio-live-notice strong {
color: #f8fafc;
}
.home-studio-live-notice[data-type="error"] {
border-color: rgba(248, 113, 113, 0.34);
}
.home-studio-live-notice[data-type="warning"],
.home-studio-live-notice[data-type="info"] {
border-color: rgba(217, 183, 111, 0.34);
}
.home-studio-live-status {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 12px;
align-items: center;
width: 100%;
max-width: 440px;
justify-self: center;
padding: 14px;
border: 1px solid rgba(122, 162, 255, 0.22);
border-radius: 18px;
background:
linear-gradient(145deg, rgba(15, 23, 42, 0.9), rgba(7, 12, 24, 0.78));
}
.home-studio-live-orb {
width: 52px;
height: 52px;
border: 1px solid rgba(217, 183, 111, 0.34);
border-radius: 50%;
background:
radial-gradient(circle at 35% 30%, #f8e7b1, #7aa2ff 45%, rgba(10, 14, 26, 0.2) 70%),
rgba(122, 162, 255, 0.18);
box-shadow: 0 14px 32px rgba(122, 162, 255, 0.18);
}
.home-studio-live-orb.is-live {
animation: homeStudioLivePulse 1.35s ease-in-out infinite;
}
@keyframes homeStudioLivePulse {
0%, 100% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(217, 183, 111, 0.28), 0 14px 32px rgba(122, 162, 255, 0.18);
}
50% {
transform: scale(1.04);
box-shadow: 0 0 0 10px rgba(217, 183, 111, 0), 0 18px 40px rgba(122, 162, 255, 0.26);
}
}
.home-studio-live-status strong {
display: block;
color: #f8fafc;
font-size: 1.02rem;
}
.home-studio-live-status small {
display: block;
margin-top: 2px;
color: rgba(226, 232, 240, 0.66);
font-weight: 800;
}
.home-studio-live-status b {
color: #f6e6bf;
}
.home-studio-live-actions {
display: grid;
grid-template-columns: minmax(220px, 340px);
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
}
.home-studio-live-actions.has-secondary-actions {
grid-template-columns: minmax(210px, 1.25fr) repeat(2, minmax(96px, 0.58fr));
justify-content: stretch;
}
.home-studio-live-actions [hidden] {
display: none !important;
}
.home-studio-live-actions .btn {
width: 100%;
min-height: 46px;
padding: 0 16px;
border-radius: 14px;
justify-content: center;
text-align: center;
line-height: 1.1;
white-space: normal;
}
.home-studio-live-actions .btn[data-home-live-start] {
min-height: 50px;
border-radius: 16px;
box-shadow: 0 16px 30px rgba(122, 162, 255, 0.18);
}
.home-studio-live-actions .btn[data-home-live-stop],
.home-studio-live-actions .btn[data-home-live-reset] {
min-height: 44px;
font-size: 0.9rem;
border-color: rgba(217, 183, 111, 0.22);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)),
rgba(12, 18, 32, 0.78);
color: #f6e6bf;
}
.home-studio-live-actions .btn:disabled {
opacity: 0.42;
cursor: not-allowed;
box-shadow: none;
}
.home-studio-live-checks {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
}
.home-studio-live-checks span {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 34px;
padding: 0 9px;
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 999px;
background: rgba(15, 23, 42, 0.72);
color: rgba(226, 232, 240, 0.78);
font-size: 0.74rem;
font-weight: 950;
}
.home-studio-live-checks span::before {
content: "";
width: 7px;
height: 7px;
margin-right: 7px;
border-radius: 50%;
background: rgba(148, 163, 184, 0.65);
}
.home-studio-live-checks span[data-state="ok"] {
border-color: rgba(217, 183, 111, 0.34);
color: #f6e6bf;
}
.home-studio-live-checks span[data-state="ok"]::before {
background: #f3d27d;
}
.home-studio-live-checks span[data-state="fail"] {
border-color: rgba(248, 113, 113, 0.34);
color: #fecaca;
}
.home-studio-live-checks span[data-state="fail"]::before {
background: #f87171;
}
.home-studio-live-transcript {
min-height: 240px;
max-height: 330px;
}
.home-studio-test-transcript > p {
align-self: center;
justify-self: center;
max-width: 340px;
text-align: center;
}
.home-studio-test-line {
display: grid;
gap: 4px;
max-width: 86%;
padding: 10px 12px;
border: 1px solid rgba(217, 183, 111, 0.16);
border-radius: 14px 14px 14px 5px;
background: rgba(15, 23, 42, 0.76);
}
.home-studio-test-line--agent {
justify-self: end;
border-color: rgba(122, 162, 255, 0.2);
border-radius: 14px 14px 5px 14px;
background:
linear-gradient(145deg, rgba(122, 162, 255, 0.12), rgba(217, 183, 111, 0.06)),
rgba(13, 18, 34, 0.84);
}
.home-studio-test-line small {
color: rgba(185, 204, 255, 0.86);
font-size: 0.68rem;
font-weight: 950;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.home-studio-test-line span {
color: #f8fafc;
font-weight: 820;
line-height: 1.36;
}
.home-studio-test-dashboard {
display: grid;
gap: 14px;
padding: 14px;
}
.home-studio-test-dashboard.is-live {
border-color: rgba(122, 162, 255, 0.34);
}
.home-studio-test-dashboard.is-complete {
border-color: rgba(217, 183, 111, 0.34);
}
.home-studio-test-kpis,
.home-studio-test-grid {
display: grid;
gap: 10px;
}
.home-studio-test-kpis {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.home-studio-test-kpis span,
.home-studio-test-grid article {
min-width: 0;
padding: 13px;
border: 1px solid rgba(148, 163, 184, 0.14);
border-radius: 12px;
background: rgba(8, 12, 24, 0.58);
}
.home-studio-test-kpis strong,
.home-studio-test-kpis small {
display: block;
}
.home-studio-test-kpis strong {
color: #fff2cf;
font-size: 1rem;
line-height: 1.16;
}
.home-studio-test-kpis small,
.home-studio-test-grid dt {
color: rgba(185, 204, 255, 0.75);
font-size: 0.72rem;
font-weight: 950;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.home-studio-test-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.home-studio-test-grid article {
display: grid;
gap: 9px;
}
.home-studio-test-grid dl {
display: grid;
gap: 7px;
margin: 0;
}
.home-studio-test-grid dl div {
display: grid;
grid-template-columns: 92px minmax(0, 1fr);
gap: 8px;
}
.home-studio-test-calendar__slot {
display: grid;
gap: 5px;
padding: 11px;
border: 1px solid rgba(217, 183, 111, 0.2);
border-radius: 12px;
background:
linear-gradient(145deg, rgba(217, 183, 111, 0.12), rgba(122, 162, 255, 0.05)),
rgba(8, 12, 24, 0.7);
}
.home-studio-test-calendar__slot strong {
color: #fff2cf;
}
.home-studio-test-actions {
display: grid;
justify-items: center;
gap: 9px;
padding: 6px 0 2px;
text-align: center;
}
.home-studio-test-actions .btn {
width: min(100%, 460px);
min-height: 50px;
justify-content: center;
}
.home-studio-test-actions small {
max-width: 520px;
color: rgba(226, 232, 240, 0.66);
font-weight: 780;
line-height: 1.4;
}
.home-studio-connection-step[hidden] {
display: none !important;
}
.home-studio-connection-step {
display: grid;
gap: 18px;
justify-items: center;
margin-top: 18px;
padding: clamp(18px, 2.4vw, 28px);
border: 1px solid rgba(217, 183, 111, 0.28);
border-radius: 20px;
background:
radial-gradient(circle at 100% 0%, rgba(122, 162, 255, 0.13), transparent 32%),
linear-gradient(145deg, rgba(19, 24, 39, 0.94), rgba(9, 13, 25, 0.94));
text-align: center;
}
.home-studio-connection-step span {
display: inline-flex;
width: fit-content;
padding: 7px 10px;
border: 1px solid rgba(217, 183, 111, 0.28);
border-radius: 999px;
color: #ffe9b6;
font-size: 0.72rem;
font-weight: 950;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.home-studio-connection-step h4 {
margin: 10px 0 8px;
color: #f8fafc;
font-size: clamp(1.35rem, 2vw, 2rem);
line-height: 1.06;
}
.home-studio-connection-step p {
max-width: 680px;
margin: 0;
color: rgba(226, 232, 240, 0.72);
font-weight: 780;
}
.home-studio-connection-step__actions {
display: grid;
grid-template-columns: repeat(2, minmax(180px, 260px));
gap: 12px;
justify-content: center;
width: 100%;
}
.home-studio-connection-step__actions .btn {
min-height: 50px;
justify-content: center;
}
.home-studio-signup-step[hidden] {
display: none !important;
}
.home-studio-signup-step {
display: grid;
grid-template-columns: minmax(0, 1fr);
justify-items: center;
gap: 16px;
align-items: center;
padding: clamp(16px, 2.2vw, 24px);
border: 1px solid rgba(217, 183, 111, 0.34);
border-radius: 18px;
background:
radial-gradient(circle at 100% 0%, rgba(217, 183, 111, 0.16), transparent 34%),
linear-gradient(145deg, rgba(29, 24, 39, 0.9), rgba(9, 13, 25, 0.92));
box-shadow:
0 24px 70px rgba(0, 0, 0, 0.34),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.home-studio-signup-step__copy {
display: grid;
justify-items: center;
gap: 8px;
max-width: 760px;
text-align: center;
}
.home-studio-signup-step__copy > span {
width: fit-content;
padding: 7px 10px;
border: 1px solid rgba(217, 183, 111, 0.28);
border-radius: 999px;
background: rgba(217, 183, 111, 0.1);
color: #ffe9b6;
font-size: 0.72rem;
font-weight: 950;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.home-studio-signup-step__copy h3 {
margin: 0;
max-width: 780px;
color: #f8fafc;
font-size: clamp(1.42rem, 2.2vw, 2.2rem);
line-height: 1.04;
}
.home-studio-signup-step__copy p {
margin: 0;
max-width: 820px;
color: rgba(226, 232, 240, 0.78);
font-size: clamp(0.98rem, 1.2vw, 1.08rem);
line-height: 1.5;
}
.home-studio-signup-step__facts {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
width: min(100%, 980px);
}
.home-studio-signup-step__facts span {
display: flex;
align-items: center;
gap: 8px;
min-height: 46px;
padding: 10px 12px;
border: 1px solid rgba(122, 162, 255, 0.18);
border-radius: 12px;
background: rgba(8, 12, 24, 0.58);
color: rgba(238, 244, 255, 0.94);
font-size: 0.88rem;
font-weight: 900;
}
.home-studio-signup-step__facts span::before {
content: "";
flex: 0 0 auto;
width: 8px;
height: 8px;
border-radius: 999px;
background: #d9b76f;
box-shadow: 0 0 0 4px rgba(217, 183, 111, 0.12);
}
.home-studio-signup-step__actions {
display: grid;
gap: 10px;
justify-self: center;
width: min(100%, 620px);
}
.home-studio-signup-step__actions .btn {
min-height: 48px;
justify-content: center;
text-align: center;
}
@media (max-width: 680px) {
.home-studio-chatbot__card[data-question-id="voice_gender"] .home-studio-chatbot__choices {
grid-template-columns: 1fr;
}
.home-studio-signup-step,
.home-studio-test-layout,
.home-studio-test-grid,
.home-studio-test-kpis {
grid-template-columns: 1fr;
}
.home-studio-signup-step__facts {
grid-template-columns: 1fr;
}
.home-studio-test-card__head {
align-items: stretch;
flex-direction: column;
}
.home-studio-test-card--number {
min-height: auto;
padding: 22px;
}
.home-studio-test-card--transcript {
min-height: 560px;
}
.home-studio-live-console {
min-height: 470px;
}
.home-studio-live-actions,
.home-studio-live-checks {
grid-template-columns: 1fr;
}
}
/* Keep rule badges horizontal inside the Studio rules list. */
.home-studio-live .home-studio-rules-panel li {
grid-template-columns: minmax(0, 1fr) !important;
align-items: start;
}
.home-studio-live .home-studio-rules-panel li::before,
.home-studio-live .home-studio-rules-panel li::after {
content: none !important;
display: none !important;
}
.home-studio-live .home-studio-rules-panel li small,
.home-studio-live .home-studio-rules-panel li strong,
.home-studio-live .home-studio-rules-panel li span {
grid-column: 1 / -1 !important;
}
.home-studio-live .home-studio-rules-panel li small {
display: inline-flex;
width: max-content;
max-width: 100%;
align-items: center;
white-space: nowrap;
writing-mode: horizontal-tb;
}
/* Keep Studio status dots attached to real headings instead of floating in cards. */
.home-studio-live__questions::before,
.home-studio-live__rules::before {
content: none !important;
display: none !important;
}
.home-studio-chatbot__head::before {
align-self: center !important;
grid-row: 1 !important;
margin-top: 0 !important;
}
/* Home hero copy pass: simpler headline, calmer scale. */
body.home-gateway-page .home-premium-hero .home-gateway-intro h1 {
max-width: min(100%, 11.5ch) !important;
font-size: clamp(2.8rem, 5.8vw, 5.8rem) !important;
line-height: 0.96 !important;
}
body.home-gateway-page .home-premium-hero .home-gateway-intro p {
max-width: 620px !important;
font-size: clamp(1rem, 1.35vw, 1.18rem) !important;
line-height: 1.45 !important;
}
@media (max-width: 680px) {
.home-studio-chatbot__head {
grid-template-columns: auto minmax(0, 1fr);
}
.home-studio-chatbot__head strong {
grid-column: 2;
grid-row: auto;
justify-self: start;
width: fit-content;
}
.home-studio-chatbot__message {
max-width: 100%;
}
.home-studio-chatbot__message--agent,
.home-studio-chatbot__message--user {
grid-template-columns: 30px minmax(0, 1fr);
}
.home-studio-chatbot__message--user > div {
grid-column: 2;
grid-row: 1;
}
.home-studio-chatbot__message--user > i {
grid-column: 1;
grid-row: 1;
}
.home-studio-chatbot__message--user small,
.home-studio-chatbot__message--user p {
text-align: left;
}
.home-studio-chatbot__note-row {
grid-template-columns: 1fr;
}
.home-studio-chatbot__note-row button {
min-height: 46px;
}
}
@media (max-width: 860px) {
body.home-gateway-page .home-premium-hero {
padding-top: 10px;
}
body.home-gateway-page .home-premium-hero .home-gateway-intro h1 {
max-width: 11.5ch !important;
font-size: clamp(2.15rem, 8.8vw, 3.1rem) !important;
line-height: 1 !important;
}
body.home-gateway-page .home-agent-prep-card {
width: 100%;
}
.home-studio-live__grid {
grid-template-columns: 1fr;
}
.home-studio-live__head {
align-items: flex-start;
}
.home-gateway-source-grid {
grid-template-columns: 1fr;
}
}
/* Home Studio is the next step after Google Maps validation, not part of the intake card. */
body.home-gateway-page .home-studio-entry[hidden] {
display: none !important;
}
body.home-gateway-page .home-studio-suite {
display: grid;
width: 100%;
gap: clamp(18px, 2.4vw, 28px);
margin-top: clamp(22px, 4vw, 48px);
padding: clamp(22px, 3vw, 34px);
border: 1px solid rgba(217, 183, 111, 0.26) !important;
border-radius: 26px;
background:
radial-gradient(circle at 12% 0%, rgba(217, 183, 111, 0.12), transparent 34%),
radial-gradient(circle at 88% 10%, rgba(122, 162, 255, 0.11), transparent 38%),
linear-gradient(145deg, rgba(7, 10, 19, 0.98), rgba(18, 24, 44, 0.9)) !important;
box-shadow:
0 36px 110px rgba(0, 0, 0, 0.38),
inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}
body.home-gateway-page .home-studio-suite::before {
background: linear-gradient(90deg, transparent, rgba(217, 183, 111, 0.82), rgba(143, 176, 255, 0.58), transparent) !important;
}
.home-studio-suite__intro {
display: grid;
gap: 10px;
max-width: 860px;
padding: clamp(16px, 2vw, 22px);
border: 1px solid rgba(217, 183, 111, 0.18);
border-radius: 20px;
background:
linear-gradient(135deg, rgba(217, 183, 111, 0.105), rgba(122, 162, 255, 0.055)),
rgba(8, 12, 24, 0.62);
}
.home-studio-suite__intro span {
width: fit-content;
padding: 7px 11px;
border: 1px solid rgba(217, 183, 111, 0.28);
border-radius: 999px;
color: #f2dca6;
font-size: 0.72rem;
font-weight: 950;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.home-studio-suite__intro h2 {
max-width: 16ch;
margin: 0;
color: #f8fafc;
font-size: clamp(1.72rem, 3vw, 3rem);
line-height: 1.02;
text-wrap: balance;
}
.home-studio-suite__intro p {
max-width: 720px;
margin: 0;
color: rgba(226, 232, 240, 0.72);
font-size: clamp(0.98rem, 1.15vw, 1.08rem);
line-height: 1.55;
}
body.home-gateway-page .home-studio-suite .home-gateway-step {
padding-top: clamp(4px, 1vw, 10px);
}
body.home-gateway-page .home-studio-suite .home-ai-detection {
gap: 12px;
}
body.home-gateway-page .home-studio-suite .home-gateway-analysis {
margin-top: 2px;
}
.home-studio-stage[hidden] {
display: none !important;
}
.home-studio-stage {
display: grid;
gap: clamp(14px, 1.8vw, 20px);
min-width: 0;
padding: clamp(16px, 2vw, 24px);
border: 1px solid rgba(122, 162, 255, 0.18);
border-radius: 22px;
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)),
rgba(7, 10, 19, 0.56);
box-shadow:
0 24px 76px rgba(0, 0, 0, 0.22),
inset 0 1px 0 rgba(255, 255, 255, 0.055);
}
.home-studio-stage--analysis {
border-color: rgba(217, 183, 111, 0.22);
}
.home-studio-stage--questions {
border-color: rgba(122, 162, 255, 0.24);
background:
linear-gradient(145deg, rgba(122, 162, 255, 0.075), rgba(217, 183, 111, 0.035)),
rgba(7, 10, 19, 0.68);
}
.home-studio-stage__head {
display: grid;
gap: 7px;
max-width: 760px;
}
.home-studio-stage__head span {
width: fit-content;
color: #b9ccff;
font-size: 0.76rem;
font-weight: 950;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.home-studio-stage__head h2 {
margin: 0;
color: #f8fafc;
font-size: clamp(1.35rem, 2vw, 2rem);
line-height: 1.08;
}
.home-studio-stage__head p {
margin: 0;
color: rgba(226, 232, 240, 0.7);
line-height: 1.5;
}
.home-studio-stage--questions .home-studio-chatbot {
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
@media (max-width: 760px) {
body.home-gateway-page .home-studio-suite {
gap: 16px;
margin-top: 22px;
padding: 16px;
border-radius: 20px;
}
.home-studio-suite__intro {
padding: 14px;
border-radius: 16px;
}
.home-studio-suite__intro h2 {
max-width: 100%;
font-size: clamp(1.55rem, 7.4vw, 2.15rem);
}
body.home-gateway-page .home-studio-suite .home-ai-detection {
grid-template-columns: 1fr;
}
.home-studio-stage {
padding: 14px;
border-radius: 18px;
}
}
/* Compact the real-analysis summary so it reads like a premium status card, not a wall of text. */
body.home-gateway-page .home-studio-suite .home-studio-live__head {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 18px;
align-items: center;
padding: clamp(16px, 2vw, 22px) !important;
border: 1px solid rgba(217, 183, 111, 0.16);
border-radius: 18px;
background:
linear-gradient(135deg, rgba(217, 183, 111, 0.085), rgba(122, 162, 255, 0.045)),
rgba(8, 12, 24, 0.64);
}
body.home-gateway-page .home-studio-suite .home-studio-live__head div {
display: grid;
min-width: 0;
gap: 8px;
}
body.home-gateway-page .home-studio-suite .home-studio-live__head span {
color: #b9ccff;
font-size: 0.72rem;
}
body.home-gateway-page .home-studio-suite .home-studio-live__head strong {
display: -webkit-box;
max-width: 920px;
overflow: hidden;
color: #f8fafc;
font-size: clamp(1.08rem, 1.72vw, 1.42rem) !important;
line-height: 1.22 !important;
text-wrap: balance;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
body.home-gateway-page .home-studio-suite .home-studio-live__head em {
display: grid;
width: 68px;
min-width: 68px;
height: 68px;
place-items: center;
padding: 0 !important;
border-color: rgba(217, 183, 111, 0.3) !important;
color: #f4dfae !important;
font-size: 1rem;
}
body.home-gateway-page .home-studio-suite .home-studio-live__bar {
margin-top: -6px;
}
@media (max-width: 760px) {
body.home-gateway-page .home-studio-suite .home-studio-live__head {
grid-template-columns: 1fr;
}
body.home-gateway-page .home-studio-suite .home-studio-live__head em {
justify-self: start;
width: auto;
min-width: 70px;
height: 34px;
padding: 0 12px !important;
}
}
/* Studio follow-up sections live beside the analysis card, not inside it. */
body.home-gateway-page .home-studio-suite > .home-studio-live__questions,
body.home-gateway-page .home-studio-suite > .home-studio-live__rules,
body.home-gateway-page .home-studio-suite > .home-studio-test-suite {
margin-top: clamp(6px, 1.2vw, 12px);
}
body.home-gateway-page .home-studio-suite > .home-studio-live__questions,
body.home-gateway-page .home-studio-suite > .home-studio-live__rules {
border-radius: 22px;
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.016)),
rgba(8, 12, 24, 0.58);
box-shadow:
0 24px 74px rgba(0, 0, 0, 0.26),
inset 0 1px 0 rgba(255, 255, 255, 0.055);
}
body.home-gateway-page .home-studio-suite > .home-studio-live__questions {
border-color: rgba(122, 162, 255, 0.2);
}
body.home-gateway-page .home-studio-suite > .home-studio-live__rules {
border-color: rgba(217, 183, 111, 0.24);
}
body.home-gateway-page .home-studio-suite .home-studio-rules-panel li {
grid-template-columns: minmax(0, 1fr) !important;
align-items: start;
}
body.home-gateway-page .home-studio-suite .home-studio-rules-panel li::before,
body.home-gateway-page .home-studio-suite .home-studio-rules-panel li::after {
content: none !important;
display: none !important;
}
body.home-gateway-page .home-studio-suite .home-studio-rules-panel li small,
body.home-gateway-page .home-studio-suite .home-studio-rules-panel li strong,
body.home-gateway-page .home-studio-suite .home-studio-rules-panel li span {
grid-column: 1 / -1 !important;
}
body.home-gateway-page .home-studio-suite .home-studio-rules-panel li small {
display: inline-flex;
width: max-content;
max-width: 100%;
align-items: center;
white-space: nowrap;
writing-mode: horizontal-tb;
}
/* Make the Studio chatbot header read vertically: title, phase, helper. */
body.home-gateway-page .home-studio-suite .home-studio-chatbot__head {
display: grid;
grid-template-columns: 18px minmax(0, 1fr) auto;
gap: 8px 14px;
align-items: start;
padding: clamp(14px, 1.8vw, 18px) !important;
}
body.home-gateway-page .home-studio-suite .home-studio-chatbot__head::before {
grid-column: 1;
grid-row: 1;
align-self: start !important;
margin-top: 8px !important;
}
body.home-gateway-page .home-studio-suite .home-studio-chatbot__title {
grid-column: 2;
display: flex;
min-width: 0;
flex-direction: column;
gap: 7px;
}
body.home-gateway-page .home-studio-suite .home-studio-chatbot__title h3 {
order: 1;
max-width: 760px;
font-size: clamp(1.22rem, 1.9vw, 1.68rem);
line-height: 1.08;
text-wrap: balance;
}
body.home-gateway-page .home-studio-suite .home-studio-chatbot__title span {
order: 2;
grid-column: auto !important;
width: fit-content;
padding: 5px 9px;
border: 1px solid rgba(122, 162, 255, 0.22);
border-radius: 999px;
background: rgba(122, 162, 255, 0.08);
color: #b9ccff;
font-size: 0.68rem;
}
body.home-gateway-page .home-studio-suite .home-studio-chatbot__title small {
order: 3;
grid-column: auto !important;
max-width: 620px;
color: rgba(226, 232, 240, 0.72);
font-size: 0.86rem;
line-height: 1.38;
}
body.home-gateway-page .home-studio-suite .home-studio-chatbot__head > strong {
grid-column: 3;
grid-row: 1;
align-self: start;
margin-top: 2px;
}
@media (max-width: 700px) {
body.home-gateway-page .home-studio-suite .home-studio-chatbot__head {
grid-template-columns: 18px minmax(0, 1fr);
}
body.home-gateway-page .home-studio-suite .home-studio-chatbot__head > strong {
grid-column: 2;
grid-row: auto;
justify-self: start;
margin-top: 4px;
}
}
/* Simplify the current Studio question card for first-time users. */
body.home-gateway-page .home-studio-suite .home-studio-chatbot__card {
gap: 16px;
padding: clamp(18px, 2.5vw, 26px) !important;
justify-items: center;
border-color: rgba(217, 183, 111, 0.18) !important;
border-radius: 24px;
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.018)),
rgba(10, 14, 26, 0.76) !important;
}
body.home-gateway-page .home-studio-suite .home-studio-chatbot__card > span {
width: fit-content;
padding: 6px 10px;
border: 1px solid rgba(122, 162, 255, 0.18);
border-radius: 999px;
background: rgba(122, 162, 255, 0.07);
color: #b9ccff;
font-size: 0.68rem;
}
body.home-gateway-page .home-studio-suite .home-studio-chatbot__card > p {
max-width: min(100%, 1040px);
margin-inline: auto;
margin-bottom: clamp(8px, 1.4vw, 16px);
color: #f8fafc;
font-size: clamp(1.08rem, 1.7vw, 1.42rem);
line-height: 1.26;
text-align: center;
text-wrap: balance;
}
body.home-gateway-page .home-studio-suite .home-studio-chatbot__evidence {
gap: 4px;
padding: 11px 13px;
border-color: rgba(217, 183, 111, 0.14);
border-radius: 14px;
background:
linear-gradient(135deg, rgba(217, 183, 111, 0.075), rgba(122, 162, 255, 0.035)),
rgba(8, 12, 24, 0.5);
}
body.home-gateway-page .home-studio-suite .home-studio-chatbot__evidence small {
color: rgba(244, 223, 174, 0.86);
font-size: 0.64rem;
}
body.home-gateway-page .home-studio-suite .home-studio-chatbot__evidence strong {
color: rgba(248, 250, 252, 0.82);
font-size: 0.88rem;
}
body.home-gateway-page .home-studio-suite .home-studio-chatbot__choices {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 240px));
gap: 10px;
width: min(100%, 820px);
margin-inline: auto;
justify-content: center;
justify-items: center;
}
body.home-gateway-page .home-studio-suite .home-studio-chatbot__choices button {
display: flex;
align-items: center;
min-height: 56px;
justify-content: center;
padding: 12px 18px;
border-color: rgba(217, 183, 111, 0.22);
border-radius: 16px;
background:
linear-gradient(145deg, rgba(217, 183, 111, 0.1), rgba(122, 162, 255, 0.055)),
rgba(8, 12, 24, 0.64);
color: #f6e6bf;
font-size: clamp(0.98rem, 1.05vw, 1.08rem);
line-height: 1.22;
text-align: center;
}
body.home-gateway-page .home-studio-suite .home-studio-chatbot__choices button.is-selected {
border-color: rgba(240, 216, 147, 0.58);
background:
linear-gradient(145deg, rgba(217, 183, 111, 0.2), rgba(122, 162, 255, 0.11)),
rgba(12, 17, 32, 0.88);
box-shadow: 0 0 0 1px rgba(240, 216, 147, 0.12), 0 14px 34px rgba(0, 0, 0, 0.18);
}
body.home-gateway-page .home-studio-suite .home-studio-chatbot__choices button:hover,
body.home-gateway-page .home-studio-suite .home-studio-chatbot__choices button:focus-visible {
border-color: rgba(240, 216, 147, 0.46);
background:
linear-gradient(145deg, rgba(217, 183, 111, 0.16), rgba(122, 162, 255, 0.09)),
rgba(12, 17, 32, 0.82);
}
body.home-gateway-page .home-studio-suite .home-studio-chatbot__note {
width: min(100%, 840px);
gap: 0;
margin-inline: auto;
padding-top: 0;
}
body.home-gateway-page .home-studio-suite .home-studio-chatbot__note[hidden] {
display: none !important;
}
body.home-gateway-page .home-studio-suite .home-studio-chatbot__note span {
display: none !important;
}
body.home-gateway-page .home-studio-suite .home-studio-chatbot__note textarea {
min-height: 82px;
border-radius: 14px;
background: rgba(5, 8, 17, 0.72);
}
body.home-gateway-page .home-studio-suite .home-studio-chatbot__note-row {
grid-template-columns: minmax(0, 1fr) minmax(160px, 220px);
}
body.home-gateway-page .home-studio-suite .home-studio-chatbot__note-row button {
min-width: 112px;
border-radius: 14px;
}
body.home-gateway-page .home-studio-suite .home-studio-chatbot__helper {
display: none !important;
max-width: 760px;
color: rgba(226, 232, 240, 0.66);
font-size: 0.82rem;
}
@media (max-width: 760px) {
body.home-gateway-page .home-studio-suite .home-studio-chatbot__choices {
grid-template-columns: 1fr;
}
body.home-gateway-page .home-studio-suite .home-studio-chatbot__note-row {
grid-template-columns: 1fr;
}
}
/* Keep previous user answers visually anchored to the right side of the conversation. */
body.home-gateway-page .home-studio-suite .home-studio-chatbot__message--user {
width: min(78%, 760px);
max-width: min(78%, 760px);
margin-left: auto;
justify-self: end;
grid-template-columns: minmax(0, 1fr) 34px;
}
body.home-gateway-page .home-studio-suite .home-studio-chatbot__message--user > div {
grid-column: 1;
justify-self: stretch;
}
body.home-gateway-page .home-studio-suite .home-studio-chatbot__message--user > i {
grid-column: 2;
justify-self: end;
}
body.home-gateway-page .home-studio-suite .home-studio-chatbot__message--user small,
body.home-gateway-page .home-studio-suite .home-studio-chatbot__message--user p {
text-align: right;
}
body.home-gateway-page .home-studio-suite .home-studio-chatbot__message--agent {
width: min(78%, 760px);
max-width: min(78%, 760px);
margin-right: auto;
}
@media (max-width: 700px) {
body.home-gateway-page .home-studio-suite .home-studio-chatbot__message--user,
body.home-gateway-page .home-studio-suite .home-studio-chatbot__message--agent {
width: 100%;
max-width: 100%;
}
}
/* Capacity question: split the heavy configurator into clear mini-questions. */
body.home-gateway-page .home-studio-suite .home-studio-table-capacity {
gap: 14px;
padding: clamp(14px, 2vw, 18px);
border-radius: 22px;
background:
linear-gradient(145deg, rgba(217, 183, 111, 0.07), rgba(122, 162, 255, 0.035)),
rgba(8, 12, 24, 0.66);
}
.home-studio-table-capacity__intro {
display: grid;
gap: 4px;
}
.home-studio-table-capacity__intro small {
color: rgba(244, 223, 174, 0.76);
font-size: 0.68rem;
font-weight: 950;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.home-studio-table-capacity__intro strong {
color: #fff7dd;
font-size: clamp(1rem, 1.35vw, 1.18rem);
}
.home-studio-table-capacity__intro span {
color: rgba(226, 232, 240, 0.68);
font-size: 0.84rem;
}
body.home-gateway-page .home-studio-suite .home-studio-table-capacity__step {
display: grid;
grid-template-columns: 38px minmax(0, 1fr) minmax(150px, 220px);
gap: 12px;
align-items: center;
padding: 12px;
border: 1px solid rgba(217, 183, 111, 0.14);
border-radius: 16px;
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.014)),
rgba(5, 8, 17, 0.42);
}
body.home-gateway-page .home-studio-suite .home-studio-table-capacity__step--total {
grid-template-columns: minmax(0, 1fr) minmax(140px, 220px);
}
.home-studio-table-capacity__step--plain {
grid-template-columns: 38px minmax(0, 1fr) !important;
}
.home-studio-table-capacity__step i {
display: inline-grid;
width: 34px;
height: 34px;
place-items: center;
border: 1px solid rgba(217, 183, 111, 0.22);
border-radius: 12px;
background: rgba(217, 183, 111, 0.1);
color: #f4dfae;
font-style: normal;
font-weight: 950;
}
.home-studio-table-capacity__step > span {
display: grid;
gap: 3px;
}
.home-studio-table-capacity__step > span strong {
color: #f8fafc;
font-size: 0.95rem;
}
.home-studio-table-capacity__step > span small {
color: rgba(226, 232, 240, 0.58);
font-size: 0.78rem;
}
body.home-gateway-page .home-studio-suite .home-studio-table-capacity__step input {
min-height: 48px;
border-radius: 14px;
font-size: 1rem;
}
body.home-gateway-page .home-studio-suite .home-studio-table-capacity__toggle {
width: fit-content;
min-height: 40px;
border-radius: 999px;
}
body.home-gateway-page .home-studio-suite .home-studio-table-capacity__advanced {
gap: 12px;
padding-top: 0;
}
body.home-gateway-page .home-studio-suite .home-studio-table-capacity__zones section {
border-radius: 16px;
}
body.home-gateway-page .home-studio-suite .home-studio-table-capacity__notes {
padding: 12px;
}
body.home-gateway-page .home-studio-suite .home-studio-table-capacity > p {
margin: 0;
border-color: rgba(122, 162, 255, 0.18);
background:
linear-gradient(135deg, rgba(122, 162, 255, 0.08), rgba(217, 183, 111, 0.055)),
rgba(8, 12, 24, 0.5);
}
@media (max-width: 760px) {
body.home-gateway-page .home-studio-suite .home-studio-table-capacity__step {
grid-template-columns: 34px minmax(0, 1fr);
}
body.home-gateway-page .home-studio-suite .home-studio-table-capacity__step input {
grid-column: 1 / -1;
}
}
/* Extra info phase: make it feel optional after the métier questions are done. */
body.home-gateway-page .home-studio-suite .home-studio-chatbot__card[data-phase="extra"] {
gap: 14px;
border-color: rgba(217, 183, 111, 0.22) !important;
background:
linear-gradient(145deg, rgba(217, 183, 111, 0.07), rgba(122, 162, 255, 0.032)),
rgba(8, 12, 24, 0.72) !important;
}
body.home-gateway-page .home-studio-suite .home-studio-chatbot__card[data-phase="extra"] > span {
color: #f4dfae;
background: rgba(217, 183, 111, 0.09);
}
body.home-gateway-page .home-studio-suite .home-studio-chatbot__card[data-phase="extra"] > p {
max-width: 760px;
font-size: clamp(1.08rem, 1.55vw, 1.34rem);
}
body.home-gateway-page .home-studio-suite .home-studio-chatbot__card[data-phase="extra"] .home-studio-chatbot__choices {
grid-template-columns: repeat(2, minmax(0, 220px));
justify-content: center;
justify-items: center;
}
body.home-gateway-page .home-studio-suite .home-studio-chatbot__card[data-phase="extra"] .home-studio-chatbot__note textarea {
min-height: 82px;
}
body.home-gateway-page .home-studio-suite .home-studio-chatbot__card[data-phase="extra"] .home-studio-chatbot__helper {
max-width: 680px;
}
/* FAQ phase: keep call simulations compact and easy to scan. */
body.home-gateway-page .home-studio-suite .home-studio-chatbot__card[data-phase="faq"] {
gap: 12px;
padding: clamp(16px, 2vw, 22px) !important;
}
body.home-gateway-page .home-studio-suite .home-studio-chatbot__card[data-phase="faq"] > p {
max-width: min(100%, 980px);
font-size: clamp(1.06rem, 1.45vw, 1.28rem);
line-height: 1.28;
text-align: center;
}
body.home-gateway-page .home-studio-suite .home-studio-chatbot__card[data-phase="faq"] .home-studio-chatbot__choices {
grid-template-columns: minmax(0, 1fr) !important;
width: min(100%, 980px);
max-width: 980px;
justify-items: center;
margin-inline: auto;
}
body.home-gateway-page .home-studio-suite .home-studio-chatbot__card[data-phase="faq"] .home-studio-chatbot__choices button {
width: 100%;
min-height: 58px;
justify-content: center;
border-radius: 14px;
padding: 14px 18px;
font-size: clamp(0.98rem, 1.05vw, 1.08rem);
line-height: 1.24;
background: rgba(18, 24, 42, 0.86);
text-align: center;
}
body.home-gateway-page .home-studio-suite .home-studio-chatbot__card[data-phase="faq"] .home-studio-chatbot__choices button.is-customize {
width: min(100%, 360px);
border-color: rgba(217, 183, 111, 0.32);
background:
linear-gradient(145deg, rgba(217, 183, 111, 0.13), rgba(122, 162, 255, 0.08)),
rgba(13, 18, 34, 0.9);
color: #f6e6bf;
}
body.home-gateway-page .home-studio-suite .home-studio-chatbot__card[data-phase="faq"] .home-studio-chatbot__note[hidden] {
display: none !important;
}
body.home-gateway-page .home-studio-suite .home-studio-chatbot__card[data-phase="faq"] .home-studio-chatbot__note textarea {
min-height: 62px;
}
/* Choice-only voice and phone steps: no textarea, just quick decisions. */
body.home-gateway-page .home-studio-suite .home-studio-chatbot__card--choice-only {
gap: 13px;
padding: clamp(16px, 2vw, 22px) !important;
}
body.home-gateway-page .home-studio-suite .home-studio-chatbot__card--choice-only > p {
max-width: 720px;
font-size: clamp(1.02rem, 1.38vw, 1.22rem);
}
body.home-gateway-page .home-studio-suite .home-studio-chatbot__card--choice-only .home-studio-chatbot__choices {
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
max-width: 820px;
}
body.home-gateway-page .home-studio-suite .home-studio-chatbot__card--choice-only .home-studio-chatbot__choices button {
min-height: 46px;
justify-content: center;
padding: 10px 12px;
border-radius: 14px;
text-align: center;
color: #eef4ff;
background:
linear-gradient(145deg, rgba(122, 162, 255, 0.13), rgba(217, 183, 111, 0.055)),
rgba(9, 13, 25, 0.78);
}
body.home-gateway-page .home-studio-suite .home-studio-chatbot__card--choice-only .home-studio-chatbot__helper {
max-width: 680px;
padding-top: 2px;
}
body.home-gateway-page .home-studio-suite .home-studio-chatbot__card[data-question-id="voice_gender"].home-studio-chatbot__card--choice-only .home-studio-chatbot__choices {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.home-gateway-page .home-studio-suite .home-studio-chatbot__card[data-question-id="voice_gender"].home-studio-chatbot__card--choice-only .home-studio-chatbot__choices button:nth-child(-n+2) {
min-height: 58px;
border-color: rgba(143, 176, 255, 0.42);
background:
linear-gradient(145deg, rgba(122, 162, 255, 0.2), rgba(217, 183, 111, 0.07)),
rgba(11, 16, 30, 0.9);
font-size: 1rem;
}
body.home-gateway-page .home-studio-suite .home-studio-chatbot__card[data-question-id="voice_gender"].home-studio-chatbot__card--choice-only .home-studio-chatbot__choices button:nth-child(n+3) {
min-height: 42px;
color: rgba(246, 230, 191, 0.9);
}
body.home-gateway-page .home-studio-suite .home-studio-chatbot__card[data-question-id="voice_style"].home-studio-chatbot__card--choice-only .home-studio-chatbot__choices {
grid-template-columns: repeat(5, minmax(112px, 1fr));
width: 100%;
max-width: 1040px;
overflow-x: auto;
padding-bottom: 2px;
}
body.home-gateway-page .home-studio-suite .home-studio-chatbot__card[data-question-id="voice_style"].home-studio-chatbot__card--choice-only .home-studio-chatbot__choices button {
width: 100%;
min-height: 48px;
padding-inline: 14px;
white-space: nowrap;
}
@media (max-width: 920px) {
body.home-gateway-page .home-studio-suite .home-studio-chatbot__card[data-question-id="voice_style"].home-studio-chatbot__card--choice-only .home-studio-chatbot__choices {
grid-template-columns: repeat(5, minmax(112px, 1fr));
}
}
/* Every suggested answer in the guided tunnel stays centered. */
body.home-gateway-page .home-studio-suite .home-studio-chatbot__choices {
justify-content: center !important;
justify-items: center !important;
}
body.home-gateway-page .home-studio-suite .home-studio-chatbot__choices button {
justify-content: center !important;
text-align: center !important;
}
body.home-gateway-page .home-studio-suite .home-studio-chatbot__card[data-question-id="followup_frequency"] .home-studio-chatbot__note,
body.home-gateway-page .home-studio-suite .home-studio-chatbot__card[data-question-id="followup_channel"] .home-studio-chatbot__note {
display: none !important;
}
body.home-gateway-page .home-studio-suite .home-studio-chatbot__card[data-question-id="followup_frequency"] .home-studio-chatbot__helper,
body.home-gateway-page .home-studio-suite .home-studio-chatbot__card[data-question-id="followup_channel"] .home-studio-chatbot__helper {
display: none !important;
}
body.home-gateway-page .home-studio-suite .home-studio-chatbot__card[data-question-id="followup_frequency"],
body.home-gateway-page .home-studio-suite .home-studio-chatbot__card[data-question-id="followup_channel"] {
gap: 10px;
padding: clamp(14px, 1.8vw, 18px) !important;
}
body.home-gateway-page .home-studio-suite .home-studio-chatbot__card[data-question-id="followup_frequency"] .home-studio-chatbot__choices {
grid-template-columns: repeat(2, minmax(190px, 260px));
width: min(100%, 560px);
}
body.home-gateway-page .home-studio-suite .home-studio-chatbot__card[data-question-id="followup_channel"] .home-studio-chatbot__choices {
grid-template-columns: repeat(4, minmax(150px, 190px)) !important;
width: min(100%, 820px);
gap: 12px;
}
body.home-gateway-page .home-studio-suite .home-studio-chatbot__card[data-question-id="followup_recipient"] .home-studio-chatbot__choices {
grid-template-columns: repeat(3, minmax(170px, 230px)) !important;
width: min(100%, 780px);
gap: 12px;
}
body.home-gateway-page .home-studio-suite .home-studio-chatbot__card[data-question-id="inbound_opening_phrase"] .home-studio-chatbot__choices,
body.home-gateway-page .home-studio-suite .home-studio-chatbot__card[data-question-id="outbound_opening_phrase"] .home-studio-chatbot__choices {
grid-template-columns: repeat(4, minmax(150px, 220px));
width: min(100%, 900px);
gap: 12px;
}
body.home-gateway-page .home-studio-suite .home-studio-chatbot__card[data-question-id="inbound_opening_phrase"] .home-studio-chatbot__choices button,
body.home-gateway-page .home-studio-suite .home-studio-chatbot__card[data-question-id="outbound_opening_phrase"] .home-studio-chatbot__choices button {
min-height: 58px;
padding-inline: 14px;
}
body.home-gateway-page .home-studio-suite .home-studio-chatbot__card[data-question-id="inbound_opening_phrase"] .home-studio-chatbot__note[hidden],
body.home-gateway-page .home-studio-suite .home-studio-chatbot__card[data-question-id="outbound_opening_phrase"] .home-studio-chatbot__note[hidden] {
display: none !important;
}
@media (max-width: 760px) {
body.home-gateway-page .home-studio-suite .home-studio-chatbot__card[data-question-id="inbound_opening_phrase"] .home-studio-chatbot__choices,
body.home-gateway-page .home-studio-suite .home-studio-chatbot__card[data-question-id="outbound_opening_phrase"] .home-studio-chatbot__choices {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.home-wizard-nav {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 12px;
width: min(100%, 980px);
justify-self: center;
padding: 10px 12px;
border: 1px solid rgba(217, 183, 111, 0.18);
border-radius: 999px;
background:
linear-gradient(135deg, rgba(217, 183, 111, 0.09), rgba(122, 162, 255, 0.045)),
rgba(8, 12, 24, 0.72);
box-shadow: 0 18px 52px rgba(0, 0, 0, 0.2);
}
.home-wizard-nav[hidden] {
display: none !important;
}
.home-wizard-nav button {
justify-self: start;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 38px;
padding: 0 16px;
border: 1px solid rgba(217, 183, 111, 0.22);
border-radius: 999px;
background: rgba(255, 255, 255, 0.045);
color: #f6e6bf;
font-weight: 900;
cursor: pointer;
}
.home-wizard-nav button:hover,
.home-wizard-nav button:focus-visible {
border-color: rgba(240, 216, 147, 0.48);
background: rgba(217, 183, 111, 0.12);
}
.home-wizard-nav__center {
display: grid;
justify-items: center;
gap: 2px;
min-width: 0;
text-align: center;
}
.home-wizard-nav__center strong {
color: #f6e6bf;
font-size: 0.82rem;
font-weight: 950;
letter-spacing: 0.08em;
line-height: 1;
text-transform: uppercase;
}
.home-wizard-nav small {
min-width: 0;
overflow: hidden;
color: rgba(226, 232, 240, 0.72);
font-size: 0.8rem;
font-weight: 900;
letter-spacing: 0.06em;
text-overflow: ellipsis;
text-transform: uppercase;
white-space: nowrap;
}
.home-wizard-nav__spacer {
justify-self: end;
width: 112px;
}
/* Sur la home, la barre n'apparaît qu'une fois le parcours démarré ;
en mode création (is-agent-focus), elle est visible dès l'étape 1. */
body.home-gateway-page .home-gateway[data-home-wizard-stage="activity"]:not(.is-agent-focus) .home-wizard-nav {
display: none !important;
}
@media (max-width: 700px) {
.home-wizard-nav {
grid-template-columns: 1fr;
width: 100%;
border-radius: 16px;
}
.home-wizard-nav button,
.home-wizard-nav__spacer {
justify-self: center;
}
.home-wizard-nav__spacer {
display: none;
}
}
/* Guided home tunnel: keep only the current step visible so the page behaves like a simple wizard. */
body.home-gateway-page .home-gateway[data-home-wizard-stage] [data-home-wizard-step] {
display: none !important;
}
body.home-gateway-page .home-gateway[data-home-wizard-stage="activity"] [data-home-wizard-step="activity"]:not([hidden]),
body.home-gateway-page .home-gateway[data-home-wizard-stage="search"] [data-home-wizard-step="search"]:not([hidden]),
body.home-gateway-page .home-gateway[data-home-wizard-stage="review"] [data-home-wizard-step="review"]:not([hidden]),
body.home-gateway-page .home-gateway[data-home-wizard-stage="studio"] [data-home-wizard-step="studio"]:not([hidden]),
body.home-gateway-page .home-gateway[data-home-wizard-stage="questions"] [data-home-wizard-step="questions"]:not([hidden]),
body.home-gateway-page .home-gateway[data-home-wizard-stage="rules"] [data-home-wizard-step="rules"]:not([hidden]),
body.home-gateway-page .home-gateway[data-home-wizard-stage="test"] [data-home-wizard-step="test"]:not([hidden]),
body.home-gateway-page .home-gateway[data-home-wizard-stage="signup"] [data-home-wizard-step="signup"]:not([hidden]) {
display: grid !important;
animation: homeGatewayStepReveal 200ms ease-out both;
}
body.home-gateway-page .home-gateway[data-home-wizard-stage="studio"] .home-gateway-panel,
body.home-gateway-page .home-gateway[data-home-wizard-stage="questions"] .home-gateway-panel,
body.home-gateway-page .home-gateway[data-home-wizard-stage="rules"] .home-gateway-panel,
body.home-gateway-page .home-gateway[data-home-wizard-stage="test"] .home-gateway-panel,
body.home-gateway-page .home-gateway[data-home-wizard-stage="signup"] .home-gateway-panel {
display: none !important;
}
body.home-gateway-page .home-gateway[data-home-wizard-stage="activity"] .home-studio-suite,
body.home-gateway-page .home-gateway[data-home-wizard-stage="search"] .home-studio-suite,
body.home-gateway-page .home-gateway[data-home-wizard-stage="review"] .home-studio-suite {
display: none !important;
}
body.home-gateway-page .home-gateway.is-agent-focus .home-premium-hero,
body.home-gateway-page .home-gateway.is-agent-focus .home-product-intro,
body.home-gateway-page .home-gateway.is-agent-focus .home-seo-links,
body.home-gateway-page .home-gateway.is-agent-focus .home-site-gateway {
display: none !important;
}
body.home-gateway-page .home-gateway.is-agent-focus .home-gateway-shell {
padding-top: clamp(22px, 4vw, 54px);
}
body.home-gateway-page .home-gateway.is-agent-focus .home-gateway-panel {
margin-top: 0;
}
body.home-gateway-page .home-gateway.is-agent-focus .home-premium-section-head--compact {
max-width: 820px;
margin-inline: auto;
text-align: center;
}
body.home-gateway-page .home-gateway.is-agent-focus .home-gateway-step[data-home-wizard-step="activity"] {
max-width: 820px;
margin-inline: auto;
}
/* Home step 03: cleaner commerce profile confirmation, without public review noise. */
body.home-gateway-page .home-gateway-enrichment {
padding: clamp(18px, 2.4vw, 28px) !important;
border: 1px solid rgba(148, 163, 184, 0.2) !important;
border-radius: 22px !important;
background:
radial-gradient(circle at 12% 0%, rgba(122, 162, 255, 0.13), transparent 32%),
radial-gradient(circle at 100% 12%, rgba(244, 223, 174, 0.09), transparent 28%),
linear-gradient(145deg, rgba(15, 21, 39, 0.94), rgba(9, 13, 25, 0.94)) !important;
box-shadow:
0 24px 74px rgba(0, 0, 0, 0.26),
inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
body.home-gateway-page .home-gateway-enrichment .home-gateway-step {
align-items: start;
margin-bottom: clamp(16px, 2vw, 22px);
}
body.home-gateway-page .home-gateway-enrichment .home-gateway-step > span {
border-color: rgba(244, 223, 174, 0.28);
background:
linear-gradient(145deg, rgba(244, 223, 174, 0.12), rgba(122, 162, 255, 0.06)),
rgba(8, 12, 24, 0.78);
color: #f4dfae;
}
body.home-gateway-page .home-gateway-enrichment .home-gateway-step h2 {
margin: 0;
color: #f8fafc;
font-size: clamp(1.65rem, 2.6vw, 2.35rem);
line-height: 1.05;
}
body.home-gateway-page .home-gateway-enrichment .home-gateway-step p {
max-width: 620px;
margin-top: 4px;
color: rgba(226, 232, 240, 0.68);
font-weight: 760;
}
body.home-gateway-page .home-gateway-recovered--editable {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 12px !important;
}
body.home-gateway-page .home-gateway-recovered--editable label {
position: relative;
display: grid !important;
gap: 10px !important;
min-width: 0;
padding: 14px !important;
border: 1px solid rgba(148, 163, 184, 0.16) !important;
border-radius: 16px !important;
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015)),
rgba(9, 13, 25, 0.72) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}
body.home-gateway-page .home-gateway-recovered--editable label::after {
content: "";
position: absolute;
inset: auto 14px 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(122, 162, 255, 0.22), transparent);
opacity: 0;
transition: opacity 160ms ease;
}
body.home-gateway-page .home-gateway-recovered--editable label:focus-within {
border-color: rgba(122, 162, 255, 0.34) !important;
background:
linear-gradient(145deg, rgba(122, 162, 255, 0.08), rgba(244, 223, 174, 0.025)),
rgba(9, 13, 25, 0.82) !important;
}
body.home-gateway-page .home-gateway-recovered--editable label:focus-within::after {
opacity: 1;
}
body.home-gateway-page .home-gateway-recovered--editable label span {
color: #9fc5ff !important;
font-size: 0.74rem !important;
font-weight: 950 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase;
}
body.home-gateway-page .home-gateway-recovered--editable input,
body.home-gateway-page .home-gateway-recovered--editable textarea {
min-height: 48px !important;
padding: 12px 14px !important;
border: 1px solid rgba(148, 163, 184, 0.18) !important;
border-radius: 13px !important;
background: rgba(5, 9, 19, 0.78) !important;
color: #f8fafc !important;
font-size: 1rem !important;
font-weight: 850 !important;
line-height: 1.42 !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}
body.home-gateway-page .home-gateway-recovered--editable textarea {
resize: vertical;
}
body.home-gateway-page .home-gateway-recovered--editable label:has([data-home-review-hours]) {
grid-column: span 2 !important;
}
body.home-gateway-page .home-gateway-recovered--editable [data-home-review-hours] {
min-height: 154px !important;
white-space: pre-wrap;
}
body.home-gateway-page .home-gateway-recovered--editable label:has([data-home-review-website]) {
align-content: start;
}
body.home-gateway-page .home-gateway-recovered--editable [data-home-review-website] {
min-height: 58px !important;
align-self: start;
}
body.home-gateway-page .home-gateway-recovered--editable input:focus,
body.home-gateway-page .home-gateway-recovered--editable textarea:focus {
border-color: rgba(244, 223, 174, 0.42) !important;
box-shadow:
0 0 0 3px rgba(244, 223, 174, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}
@media (max-width: 900px) {
body.home-gateway-page .home-gateway-recovered--editable {
grid-template-columns: 1fr !important;
}
body.home-gateway-page .home-gateway-recovered--editable label:has([data-home-review-hours]) {
grid-column: auto !important;
}
}
/* Home Studio final recap: make the rule step feel like a ready-to-review commerce profile. */
body.home-gateway-page .home-studio-suite > .home-studio-live__rules.home-studio-rules-panel {
gap: clamp(16px, 2vw, 22px);
padding: clamp(18px, 2.4vw, 28px) !important;
border-color: rgba(148, 163, 184, 0.24) !important;
background:
radial-gradient(circle at 12% 0%, rgba(244, 223, 174, 0.12), transparent 30%),
radial-gradient(circle at 92% 8%, rgba(122, 162, 255, 0.12), transparent 28%),
linear-gradient(145deg, rgba(13, 18, 34, 0.96), rgba(8, 12, 24, 0.94)) !important;
}
body.home-gateway-page .home-studio-rules-panel__head {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto;
align-items: end;
gap: clamp(14px, 2vw, 24px);
padding-bottom: 4px;
}
body.home-gateway-page .home-studio-rules-panel__title {
display: grid;
gap: 7px;
min-width: 0;
}
body.home-gateway-page .home-studio-rules-panel__title > span {
width: max-content;
max-width: 100%;
padding: 7px 12px;
border: 1px solid rgba(244, 223, 174, 0.24);
border-radius: 999px;
background: rgba(244, 223, 174, 0.08);
color: #f4dfae;
font-size: 0.76rem;
font-weight: 950;
letter-spacing: 0.08em;
text-transform: uppercase;
}
body.home-gateway-page .home-studio-rules-panel__title > strong {
color: #f8fafc;
font-size: clamp(1.45rem, 2.8vw, 2.25rem);
line-height: 1.02;
}
body.home-gateway-page .home-studio-rules-panel__title > small {
max-width: 780px;
color: rgba(226, 232, 240, 0.72);
font-size: 0.98rem;
font-weight: 750;
line-height: 1.45;
}
body.home-gateway-page .home-studio-rules-panel__stats {
display: grid;
grid-template-columns: minmax(112px, auto);
gap: 8px;
min-width: min(100%, 150px);
}
body.home-gateway-page .home-studio-rules-panel__stats > span {
display: grid;
gap: 4px;
min-height: 72px;
align-content: center;
justify-items: center;
padding: 10px;
border: 1px solid rgba(148, 163, 184, 0.16);
border-radius: 16px;
background: rgba(255, 255, 255, 0.045);
}
body.home-gateway-page .home-studio-rules-panel__stats strong {
color: #fff2cf;
font-size: 1.28rem;
line-height: 1;
}
body.home-gateway-page .home-studio-rules-panel__stats small {
color: rgba(219, 231, 255, 0.74);
font-size: 0.72rem;
font-weight: 900;
letter-spacing: 0.06em;
text-transform: uppercase;
}
body.home-gateway-page .home-studio-rules-panel__list {
display: block;
column-count: 2;
column-gap: 14px;
}
body.home-gateway-page .home-studio-rules-panel__more,
body.home-gateway-page .home-studio-rules-panel__add-toggle {
justify-self: center;
width: min(100%, 360px);
min-height: 46px;
padding: 0 18px;
border: 1px solid rgba(244, 223, 174, 0.28);
border-radius: 999px;
background:
linear-gradient(145deg, rgba(244, 223, 174, 0.11), rgba(122, 162, 255, 0.055)),
rgba(14, 18, 32, 0.92);
color: #fff2cf;
font: inherit;
font-size: 0.92rem;
font-weight: 950;
cursor: pointer;
}
body.home-gateway-page .home-studio-rules-panel__more {
display: block;
width: 100%;
margin: 4px 0 14px;
break-inside: avoid;
}
body.home-gateway-page .home-studio-rule-card {
display: inline-grid;
align-self: start;
gap: 12px;
width: 100%;
margin: 0 0 12px;
min-width: 0;
padding: 14px;
break-inside: avoid;
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 18px;
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.016)),
rgba(9, 13, 25, 0.78);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
}
body.home-gateway-page .home-studio-rule-card[data-source="validée"] {
border-color: rgba(244, 223, 174, 0.26);
background:
linear-gradient(145deg, rgba(244, 223, 174, 0.07), rgba(122, 162, 255, 0.025)),
rgba(10, 13, 24, 0.82);
}
body.home-gateway-page .home-studio-rule-card__top,
body.home-gateway-page .home-studio-rule-card__actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
body.home-gateway-page .home-studio-rule-card__top span {
display: inline-flex;
width: max-content;
max-width: 100%;
align-items: center;
padding: 6px 10px;
border: 1px solid rgba(122, 162, 255, 0.2);
border-radius: 999px;
background: rgba(122, 162, 255, 0.08);
color: #c9d7ff;
font-size: 0.68rem;
font-weight: 950;
letter-spacing: 0.07em;
text-transform: uppercase;
white-space: nowrap;
}
body.home-gateway-page .home-studio-rule-card[data-source="validée"] .home-studio-rule-card__top span {
border-color: rgba(244, 223, 174, 0.24);
background: rgba(244, 223, 174, 0.09);
color: #f4dfae;
}
body.home-gateway-page .home-studio-rule-card button,
body.home-gateway-page .home-studio-rules-panel__editor button {
border: 1px solid rgba(244, 223, 174, 0.24);
border-radius: 13px;
background:
linear-gradient(145deg, rgba(244, 223, 174, 0.12), rgba(122, 162, 255, 0.06)),
rgba(14, 18, 32, 0.9);
color: #fff2cf;
font: inherit;
font-size: 0.86rem;
font-weight: 950;
cursor: pointer;
}
body.home-gateway-page .home-studio-rule-card [data-rule-delete] {
min-height: 30px;
padding: 0 10px;
border-color: rgba(248, 113, 113, 0.24);
color: #fecaca;
}
body.home-gateway-page .home-studio-rule-card [data-rule-save] {
min-height: 36px;
padding: 0 14px;
margin-left: auto;
}
body.home-gateway-page .home-studio-rule-card label,
body.home-gateway-page .home-studio-rules-panel__editor label {
display: grid;
gap: 6px;
min-width: 0;
}
body.home-gateway-page .home-studio-rule-card label small,
body.home-gateway-page .home-studio-rules-panel__editor label span {
color: rgba(201, 215, 255, 0.78);
font-size: 0.74rem;
font-weight: 950;
letter-spacing: 0.06em;
text-transform: uppercase;
}
body.home-gateway-page .home-studio-rule-card input,
body.home-gateway-page .home-studio-rule-card textarea,
body.home-gateway-page .home-studio-rules-panel__editor input,
body.home-gateway-page .home-studio-rules-panel__editor textarea {
width: 100%;
min-width: 0;
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 13px;
background: rgba(4, 8, 18, 0.82);
color: #f8fafc;
font: inherit;
font-weight: 760;
outline: none;
}
body.home-gateway-page .home-studio-rule-card input,
body.home-gateway-page .home-studio-rules-panel__editor input {
min-height: 42px;
padding: 0 12px;
}
body.home-gateway-page .home-studio-rule-card textarea,
body.home-gateway-page .home-studio-rules-panel__editor textarea {
min-height: 90px;
padding: 12px;
line-height: 1.38;
resize: vertical;
}
body.home-gateway-page .home-studio-rule-card input:focus,
body.home-gateway-page .home-studio-rule-card textarea:focus,
body.home-gateway-page .home-studio-rules-panel__editor input:focus,
body.home-gateway-page .home-studio-rules-panel__editor textarea:focus {
border-color: rgba(244, 223, 174, 0.45);
box-shadow: 0 0 0 3px rgba(244, 223, 174, 0.09);
}
body.home-gateway-page .home-studio-rules-panel__editor {
grid-template-columns: minmax(180px, 0.65fr) minmax(0, 1fr) auto !important;
align-items: end !important;
}
body.home-gateway-page .home-studio-rules-panel__editor[hidden] {
display: none !important;
}
body.home-gateway-page .home-studio-rules-panel__editor-head {
display: grid;
grid-column: 1 / -1;
gap: 4px;
}
body.home-gateway-page .home-studio-rules-panel__editor-head strong {
color: #f8fafc;
font-size: 1.05rem;
}
body.home-gateway-page .home-studio-rules-panel__editor-head span {
color: rgba(226, 232, 240, 0.68);
font-weight: 760;
}
body.home-gateway-page .home-studio-rules-panel__editor > button {
min-height: 48px;
padding: 0 18px;
}
body.home-gateway-page .home-studio-rules-panel__actions {
justify-content: center !important;
}
body.home-gateway-page .home-studio-rules-panel__actions small {
display: none;
}
@media (max-width: 900px) {
body.home-gateway-page .home-studio-rules-panel__head,
body.home-gateway-page .home-studio-rules-panel__list,
body.home-gateway-page .home-studio-rules-panel__editor {
grid-template-columns: 1fr !important;
}
body.home-gateway-page .home-studio-rules-panel__stats {
width: 100%;
min-width: 0;
}
}
/* Final tunnel polish: cleaner first screen, tighter choices, clearer agent recap. */
body.home-gateway-page .home-premium-hero--solo {
padding-block: clamp(42px, 8vw, 104px) clamp(28px, 5vw, 72px) !important;
}
body.home-gateway-page .home-premium-hero--solo .home-gateway-intro {
gap: clamp(16px, 2vw, 24px) !important;
}
body.home-gateway-page .home-premium-actions {
margin-top: 2px;
}
body.home-gateway-page .home-gateway-proof {
width: min(100%, 880px) !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 12px !important;
margin-top: 2px;
padding: 10px;
border: 1px solid rgba(217, 183, 111, 0.14);
border-radius: 22px;
background:
radial-gradient(circle at 10% 0%, rgba(217, 183, 111, 0.11), transparent 38%),
linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
rgba(8, 12, 24, 0.56);
box-shadow: 0 22px 70px rgba(0, 0, 0, 0.2);
}
body.home-gateway-page .home-gateway-proof span {
min-height: 74px;
padding: 14px 15px 14px 34px !important;
border-color: rgba(122, 162, 255, 0.16) !important;
border-radius: 16px !important;
background:
linear-gradient(145deg, rgba(122, 162, 255, 0.09), rgba(217, 183, 111, 0.055)),
rgba(7, 11, 22, 0.7) !important;
}
body.home-gateway-page .home-gateway-proof span::before {
left: 14px !important;
top: 19px !important;
}
body.home-gateway-page .home-gateway-proof strong {
color: #fff7dd !important;
}
body.home-gateway-page .home-gateway-proof small {
color: rgba(226, 232, 240, 0.72) !important;
}
body.home-gateway-page .home-gateway-next p[hidden] {
display: none !important;
}
body.home-gateway-page .home-gateway-next .home-gateway-primary {
margin-top: clamp(12px, 1.6vw, 20px);
}
body.home-gateway-page .home-studio-suite .home-studio-chatbot__card[data-question-id="followup_channel"] .home-studio-chatbot__choices,
body.home-gateway-page .home-studio-suite .home-studio-chatbot__card[data-question-id="followup_recipient"] .home-studio-chatbot__choices,
body.home-gateway-page .home-studio-suite .home-studio-chatbot__card[data-question-id="inbound_opening_phrase"] .home-studio-chatbot__choices,
body.home-gateway-page .home-studio-suite .home-studio-chatbot__card[data-question-id="outbound_opening_phrase"] .home-studio-chatbot__choices {
justify-content: center !important;
justify-items: stretch !important;
}
body.home-gateway-page .home-studio-suite .home-studio-chatbot__card[data-question-id="followup_recipient"] .home-studio-chatbot__note {
width: min(100%, 760px);
}
body.home-gateway-page .home-studio-rules-panel__summary {
display: grid;
gap: 8px;
padding: clamp(15px, 2vw, 20px);
border: 1px solid rgba(217, 183, 111, 0.2);
border-radius: 20px;
background:
radial-gradient(circle at 0% 0%, rgba(217, 183, 111, 0.13), transparent 42%),
linear-gradient(145deg, rgba(122, 162, 255, 0.08), rgba(217, 183, 111, 0.05)),
rgba(7, 11, 22, 0.72);
}
body.home-gateway-page .home-studio-rules-panel__summary span {
width: fit-content;
padding: 6px 10px;
border: 1px solid rgba(217, 183, 111, 0.24);
border-radius: 999px;
color: #f6e6bf;
font-size: 0.72rem;
font-weight: 950;
letter-spacing: 0.08em;
text-transform: uppercase;
}
body.home-gateway-page .home-studio-rules-panel__summary p {
max-width: 980px;
margin: 0;
color: rgba(248, 250, 252, 0.9);
font-size: clamp(1rem, 1.22vw, 1.16rem);
font-weight: 760;
line-height: 1.5;
}
body.home-gateway-page .home-studio-feature-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
width: min(100%, 980px);
margin: 6px auto 14px;
}
body.home-gateway-page .home-studio-feature-toggle {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 10px;
min-height: 70px;
padding: 12px;
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 16px;
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
rgba(8, 12, 24, 0.72);
cursor: pointer;
}
body.home-gateway-page .home-studio-feature-toggle:has(input:checked) {
border-color: rgba(244, 223, 174, 0.58);
background:
radial-gradient(circle at 12% 10%, rgba(244, 223, 174, 0.13), transparent 34%),
linear-gradient(145deg, rgba(244, 223, 174, 0.08), rgba(122, 162, 255, 0.055)),
rgba(12, 16, 30, 0.88);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
}
body.home-gateway-page .home-studio-feature-toggle input {
width: 18px;
height: 18px;
accent-color: #f4dfae;
}
body.home-gateway-page .home-studio-feature-toggle span {
display: grid;
gap: 4px;
min-width: 0;
}
body.home-gateway-page .home-studio-feature-toggle strong {
color: #f8fafc;
font-size: 0.94rem;
line-height: 1.12;
}
body.home-gateway-page .home-studio-feature-toggle small {
width: fit-content;
padding: 3px 7px;
border: 1px solid rgba(122, 162, 255, 0.22);
border-radius: 999px;
color: #c9d7ff;
font-size: 0.66rem;
font-weight: 950;
letter-spacing: 0.05em;
text-transform: uppercase;
}
body.home-gateway-page .home-studio-forwarding-guide {
display: grid;
gap: 16px;
margin-top: 18px;
padding: clamp(16px, 2.2vw, 24px);
border: 1px solid rgba(244, 223, 174, 0.22);
border-radius: 22px;
background:
radial-gradient(circle at 0% 0%, rgba(244, 223, 174, 0.11), transparent 30%),
linear-gradient(145deg, rgba(12, 16, 30, 0.94), rgba(7, 10, 20, 0.95));
}
body.home-gateway-page .home-studio-forwarding-guide[hidden] {
display: none !important;
}
body.home-gateway-page .home-studio-forwarding-guide__head,
body.home-gateway-page .home-studio-forwarding-code {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 14px;
align-items: center;
}
body.home-gateway-page .home-studio-forwarding-guide__head span,
body.home-gateway-page .home-studio-forwarding-code span {
color: #c9d7ff;
font-size: 0.74rem;
font-weight: 950;
letter-spacing: 0.08em;
text-transform: uppercase;
}
body.home-gateway-page .home-studio-forwarding-guide__head h4 {
margin: 4px 0 6px;
color: #f8fafc;
font-size: clamp(1.25rem, 2vw, 1.7rem);
line-height: 1.08;
}
body.home-gateway-page .home-studio-forwarding-guide__head p {
max-width: 720px;
margin: 0;
color: rgba(226, 232, 240, 0.72);
font-weight: 760;
}
body.home-gateway-page .home-studio-forwarding-guide__target {
display: grid;
gap: 5px;
min-width: 170px;
padding: 12px 14px;
border: 1px solid rgba(122, 162, 255, 0.24);
border-radius: 16px;
background: rgba(122, 162, 255, 0.08);
}
body.home-gateway-page .home-studio-forwarding-guide__target small {
color: rgba(201, 215, 255, 0.76);
font-size: 0.7rem;
font-weight: 950;
letter-spacing: 0.07em;
text-transform: uppercase;
}
body.home-gateway-page .home-studio-forwarding-guide__target strong {
color: #fff2cf;
font-size: 1.08rem;
}
body.home-gateway-page .home-studio-forwarding-guide__progress {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
body.home-gateway-page .home-studio-forwarding-guide__progress span {
display: inline-flex;
min-height: 42px;
align-items: center;
justify-content: center;
padding: 0 12px;
border: 1px solid rgba(148, 163, 184, 0.14);
border-radius: 999px;
background: rgba(255, 255, 255, 0.035);
color: rgba(226, 232, 240, 0.58);
font-size: 0.78rem;
font-weight: 950;
letter-spacing: 0.04em;
text-transform: uppercase;
}
body.home-gateway-page .home-studio-forwarding-guide__progress span.is-active {
border-color: rgba(244, 223, 174, 0.5);
background: linear-gradient(135deg, rgba(244, 223, 174, 0.18), rgba(122, 162, 255, 0.12));
color: #fff2cf;
box-shadow: 0 16px 34px rgba(0, 0, 0, 0.24);
}
body.home-gateway-page .home-studio-forwarding-panel {
display: grid;
gap: 14px;
}
body.home-gateway-page .home-studio-forwarding-panel[hidden] {
display: none !important;
}
body.home-gateway-page .home-studio-forwarding-guide__steps,
body.home-gateway-page .home-studio-forwarding-guide__profiles,
body.home-gateway-page .home-studio-forwarding-guide__checks {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
body.home-gateway-page .home-studio-forwarding-guide__question {
display: grid;
gap: 18px;
padding: clamp(18px, 3vw, 28px);
border: 1px solid rgba(217, 183, 111, 0.2);
border-radius: 20px;
background: rgba(217, 183, 111, 0.055);
text-align: center;
}
body.home-gateway-page .home-studio-forwarding-guide__question > span {
color: #f8fafc;
font-size: clamp(1.25rem, 2.4vw, 1.75rem);
line-height: 1.12;
font-weight: 950;
}
body.home-gateway-page .home-studio-forwarding-guide__question > div {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
body.home-gateway-page .home-studio-forwarding-guide__question button {
min-height: 56px;
padding: 0 18px;
border: 1px solid rgba(217, 183, 111, 0.22);
border-radius: 14px;
background: rgba(255, 255, 255, 0.035);
color: #f6e6bf;
font: inherit;
font-weight: 950;
cursor: pointer;
}
body.home-gateway-page .home-studio-forwarding-guide__question button.is-active {
border-color: rgba(122, 162, 255, 0.5);
background: rgba(122, 162, 255, 0.13);
color: #f8fafc;
}
body.home-gateway-page .home-studio-forwarding-guide__profiles {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
body.home-gateway-page .home-studio-forwarding-guide__steps span,
body.home-gateway-page .home-studio-forwarding-guide__profiles button,
body.home-gateway-page .home-studio-forwarding-guide__checks button,
body.home-gateway-page .home-studio-forwarding-guide__note,
body.home-gateway-page .home-studio-forwarding-guide__confirm {
min-width: 0;
padding: 12px;
border: 1px solid rgba(148, 163, 184, 0.16);
border-radius: 15px;
background: rgba(255, 255, 255, 0.035);
}
body.home-gateway-page .home-studio-forwarding-guide__steps span {
display: grid;
gap: 5px;
color: rgba(226, 232, 240, 0.74);
font-size: 0.9rem;
}
body.home-gateway-page .home-studio-forwarding-guide__steps strong {
color: #f8fafc;
}
body.home-gateway-page .home-studio-forwarding-guide__steps em {
font-style: normal;
}
body.home-gateway-page .home-studio-forwarding-guide__profiles button,
body.home-gateway-page .home-studio-forwarding-guide__checks button,
body.home-gateway-page .home-studio-forwarding-code button {
color: #f6e6bf;
font: inherit;
font-weight: 900;
cursor: pointer;
}
body.home-gateway-page .home-studio-forwarding-guide__profiles button {
display: grid;
gap: 5px;
min-height: 90px;
align-content: center;
text-align: center;
}
body.home-gateway-page .home-studio-forwarding-guide__profiles button.is-active {
border-color: rgba(244, 223, 174, 0.44);
background: rgba(244, 223, 174, 0.09);
}
body.home-gateway-page .home-studio-forwarding-guide__profiles small {
color: rgba(226, 232, 240, 0.62);
font-size: 0.74rem;
line-height: 1.25;
}
body.home-gateway-page .home-studio-forwarding-code {
padding: 14px;
border: 1px solid rgba(244, 223, 174, 0.2);
border-radius: 18px;
background: rgba(244, 223, 174, 0.06);
}
body.home-gateway-page .home-studio-forwarding-code > div:last-child {
display: flex;
align-items: center;
gap: 10px;
}
body.home-gateway-page .home-studio-forwarding-code code,
body.home-gateway-page .home-studio-forwarding-guide__checks code {
display: inline-flex;
align-items: center;
min-height: 34px;
padding: 7px 10px;
border-radius: 10px;
background: rgba(3, 6, 14, 0.78);
color: #fff2cf;
font-weight: 950;
}
body.home-gateway-page .home-studio-forwarding-code button {
min-height: 38px;
padding: 0 14px;
border: 1px solid rgba(122, 162, 255, 0.22);
border-radius: 12px;
background: rgba(122, 162, 255, 0.1);
}
body.home-gateway-page .home-studio-forwarding-guide__checks button {
display: grid;
gap: 7px;
text-align: center;
justify-items: center;
}
body.home-gateway-page .home-studio-forwarding-guide__note {
display: grid;
gap: 7px;
color: rgba(226, 232, 240, 0.74);
}
body.home-gateway-page .home-studio-forwarding-guide__note strong {
color: #f8fafc;
}
body.home-gateway-page .home-studio-forwarding-guide__note a {
width: fit-content;
color: #c9d7ff;
font-weight: 900;
}
body.home-gateway-page .home-studio-forwarding-guide__confirm {
display: inline-flex;
width: fit-content;
align-items: center;
gap: 10px;
color: #f8fafc;
font-weight: 900;
}
@media (max-width: 760px) {
body.home-gateway-page .home-gateway-proof {
grid-template-columns: 1fr !important;
padding: 8px;
}
body.home-gateway-page .home-studio-suite .home-studio-chatbot__card[data-question-id="followup_channel"] .home-studio-chatbot__choices,
body.home-gateway-page .home-studio-suite .home-studio-chatbot__card[data-question-id="followup_recipient"] .home-studio-chatbot__choices,
body.home-gateway-page .home-studio-suite .home-studio-chatbot__card[data-question-id="inbound_opening_phrase"] .home-studio-chatbot__choices,
body.home-gateway-page .home-studio-suite .home-studio-chatbot__card[data-question-id="outbound_opening_phrase"] .home-studio-chatbot__choices {
grid-template-columns: 1fr !important;
width: 100%;
}
body.home-gateway-page .home-studio-feature-grid,
.home-studio-connection-step__actions,
body.home-gateway-page .home-studio-forwarding-guide__head,
body.home-gateway-page .home-studio-forwarding-code,
body.home-gateway-page .home-studio-forwarding-guide__steps,
body.home-gateway-page .home-studio-forwarding-guide__question > div,
body.home-gateway-page .home-studio-forwarding-guide__profiles,
body.home-gateway-page .home-studio-forwarding-guide__checks {
grid-template-columns: 1fr;
}
body.home-gateway-page .home-studio-forwarding-code > div:last-child {
align-items: stretch;
flex-direction: column;
}
}
/* Mobile tunnel hardening: keep the agent creation flow readable and touch friendly. */
body.home-gateway-page {
overflow-x: hidden;
}
body.home-gateway-page .home-gateway *,
body.home-gateway-page .home-studio-suite *,
body.home-gateway-page .home-studio-test-suite * {
min-width: 0;
}
body.home-gateway-page .home-gateway a,
body.home-gateway-page .home-studio-suite a,
body.home-gateway-page .home-studio-suite strong,
body.home-gateway-page .home-studio-suite p,
body.home-gateway-page .home-studio-suite span,
body.home-gateway-page .home-studio-suite textarea,
body.home-gateway-page .home-studio-suite input {
overflow-wrap: anywhere;
}
@media (max-width: 1080px) {
body.home-gateway-page .home-gateway-shell,
body.home-gateway-page .home-studio-test-layout {
grid-template-columns: 1fr !important;
}
body.home-gateway-page .home-gateway-intro,
body.home-gateway-page .home-premium-hero .home-gateway-intro {
align-items: center !important;
text-align: center !important;
}
body.home-gateway-page .home-gateway-intro p,
body.home-gateway-page .home-premium-hero .home-gateway-intro p {
margin-inline: auto !important;
}
body.home-gateway-page .home-gateway-panel,
body.home-gateway-page .home-studio-suite,
body.home-gateway-page .home-studio-stage,
body.home-gateway-page .home-studio-live,
body.home-gateway-page .home-studio-test-suite,
body.home-gateway-page .home-studio-signup-step {
width: 100%;
}
body.home-gateway-page .home-studio-live__grid,
body.home-gateway-page .home-studio-feature-grid,
body.home-gateway-page .home-studio-forwarding-guide__profiles {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
body.home-gateway-page .home-studio-test-card--number,
body.home-gateway-page .home-studio-test-card--transcript {
min-height: auto;
}
}
@media (max-width: 820px) {
body.home-gateway-page .site-main {
overflow-x: hidden;
}
body.home-gateway-page .home-gateway {
padding-inline: clamp(12px, 4vw, 20px) !important;
}
body.home-gateway-page .home-premium-hero--solo {
padding-block: 34px 24px !important;
}
body.home-gateway-page .home-premium-hero .home-gateway-intro h1,
body.home-gateway-page .home-premium-hero--solo .home-gateway-intro h1 {
max-width: 10.5ch !important;
font-size: clamp(2.35rem, 11vw, 4.1rem) !important;
line-height: 0.98 !important;
}
body.home-gateway-page .home-premium-actions,
body.home-gateway-page .home-gateway-search form,
body.home-gateway-page .home-gateway-results,
body.home-gateway-page .home-gateway-recovered,
body.home-gateway-page .home-gateway-profile,
body.home-gateway-page .home-gateway-analysis,
body.home-gateway-page .home-gateway-source-grid,
body.home-gateway-page .home-studio-live__grid,
body.home-gateway-page .home-studio-rules-panel__editor,
body.home-gateway-page .home-studio-feature-grid,
body.home-gateway-page .home-studio-forwarding-guide__head,
body.home-gateway-page .home-studio-forwarding-guide__steps,
body.home-gateway-page .home-studio-forwarding-guide__profiles,
body.home-gateway-page .home-studio-forwarding-guide__checks,
body.home-gateway-page .home-studio-forwarding-code,
body.home-gateway-page .home-studio-test-kpis,
body.home-gateway-page .home-studio-test-grid,
body.home-gateway-page .home-studio-signup-step__facts {
grid-template-columns: 1fr !important;
}
body.home-gateway-page .home-premium-actions .btn,
body.home-gateway-page .home-gateway-search .btn,
body.home-gateway-page .home-gateway-primary,
body.home-gateway-page .home-studio-rules-panel__editor > button,
body.home-gateway-page .home-studio-rules-panel__actions .btn,
body.home-gateway-page .home-studio-test-call .btn,
body.home-gateway-page .home-studio-test-actions .btn,
body.home-gateway-page .home-studio-signup-step__actions .btn {
width: 100%;
justify-content: center;
text-align: center;
}
body.home-gateway-page .home-gateway-proof {
grid-template-columns: 1fr !important;
width: 100% !important;
}
body.home-gateway-page .home-gateway-verticals {
grid-template-columns: 1fr !important;
}
body.home-gateway-page .home-gateway-vertical {
min-height: auto;
padding: 14px;
}
body.home-gateway-page .home-gateway-search .home-intake-search__field {
min-height: 58px;
}
body.home-gateway-page .home-gateway-results {
max-height: min(58vh, 520px);
overflow: auto;
padding-right: 2px;
}
body.home-gateway-page .home-gateway-result {
padding: 13px;
}
body.home-gateway-page .home-gateway-profile {
gap: 10px;
}
body.home-gateway-page .home-gateway-profile label,
body.home-gateway-page .home-gateway-profile > div {
padding: 12px;
}
body.home-gateway-page .home-studio-suite {
margin-top: 20px;
padding: clamp(14px, 4vw, 18px) !important;
border-radius: 20px;
}
body.home-gateway-page .home-studio-stage,
body.home-gateway-page .home-studio-live,
body.home-gateway-page .home-studio-live__questions,
body.home-gateway-page .home-studio-live__rules,
body.home-gateway-page .home-studio-test-suite,
body.home-gateway-page .home-studio-signup-step {
padding: clamp(14px, 4vw, 18px) !important;
border-radius: 18px !important;
}
body.home-gateway-page .home-studio-suite .home-studio-live__head {
grid-template-columns: 1fr !important;
gap: 12px;
}
body.home-gateway-page .home-studio-suite .home-studio-live__head strong {
-webkit-line-clamp: 4;
font-size: clamp(1rem, 5vw, 1.25rem) !important;
}
body.home-gateway-page .home-studio-suite .home-studio-live__head em {
justify-self: start;
}
body.home-gateway-page .home-studio-live__section-head,
body.home-gateway-page .home-studio-rules-panel__head,
body.home-gateway-page .home-studio-rule-card__top,
body.home-gateway-page .home-studio-rule-card__actions {
align-items: stretch;
flex-direction: column;
}
body.home-gateway-page .home-studio-live__section-head button,
body.home-gateway-page .home-studio-rules-panel__head button,
body.home-gateway-page .home-studio-rule-card button {
width: 100%;
justify-content: center;
text-align: center;
}
body.home-gateway-page .home-studio-chatbot__head {
grid-template-columns: 1fr !important;
justify-items: center;
text-align: center;
}
body.home-gateway-page .home-studio-chatbot__head::before {
display: none !important;
}
body.home-gateway-page .home-studio-chatbot__title,
body.home-gateway-page .home-studio-chatbot__head > strong {
grid-column: 1 !important;
justify-self: center !important;
}
body.home-gateway-page .home-studio-suite .home-studio-chatbot__title h3,
body.home-gateway-page .home-studio-stage__head h2 {
max-width: 100%;
text-align: center;
}
body.home-gateway-page .home-studio-stage__head {
justify-items: center;
max-width: 100%;
text-align: center;
}
body.home-gateway-page .home-studio-suite .home-studio-chatbot__card {
padding: clamp(16px, 5vw, 20px) !important;
}
body.home-gateway-page .home-studio-suite .home-studio-chatbot__card > p {
font-size: clamp(1rem, 5vw, 1.22rem);
}
body.home-gateway-page .home-studio-suite .home-studio-chatbot__choices,
body.home-gateway-page .home-studio-suite .home-studio-chatbot__card--choice-only .home-studio-chatbot__choices,
body.home-gateway-page .home-studio-suite .home-studio-chatbot__card[data-question-id="voice_gender"].home-studio-chatbot__card--choice-only .home-studio-chatbot__choices,
body.home-gateway-page .home-studio-suite .home-studio-chatbot__card[data-question-id="voice_style"].home-studio-chatbot__card--choice-only .home-studio-chatbot__choices {
grid-template-columns: 1fr !important;
width: 100% !important;
max-width: 100% !important;
}
body.home-gateway-page .home-studio-suite .home-studio-chatbot__choices button {
width: 100%;
min-height: 52px;
padding: 12px 14px;
}
body.home-gateway-page .home-studio-suite .home-studio-chatbot__note,
body.home-gateway-page .home-studio-suite .home-studio-chatbot__note-row {
width: 100%;
}
body.home-gateway-page .home-studio-suite .home-studio-chatbot__note-row {
grid-template-columns: 1fr !important;
}
body.home-gateway-page .home-studio-suite .home-studio-chatbot__note-row button {
min-height: 50px;
}
body.home-gateway-page .home-studio-suite .home-studio-chatbot__message--user,
body.home-gateway-page .home-studio-suite .home-studio-chatbot__message--agent {
width: min(94%, 560px) !important;
max-width: min(94%, 560px) !important;
}
body.home-gateway-page .home-studio-suite .home-studio-chatbot__message--user {
margin-left: auto;
}
body.home-gateway-page .home-studio-suite .home-studio-chatbot__message--agent {
margin-right: auto;
}
body.home-gateway-page .home-studio-table-capacity__head,
body.home-gateway-page .home-studio-table-capacity__mode-switch,
body.home-gateway-page .home-studio-table-capacity__metrics,
body.home-gateway-page .home-studio-table-capacity__zones,
body.home-gateway-page .home-studio-table-capacity__quick,
body.home-gateway-page .home-studio-table-capacity__row,
body.home-gateway-page .home-studio-suite .home-studio-table-capacity__step,
body.home-gateway-page .home-studio-suite .home-studio-table-capacity__step--total {
grid-template-columns: 1fr !important;
}
body.home-gateway-page .home-studio-table-capacity__row > span {
display: none;
}
body.home-gateway-page .home-studio-table-capacity__toggle {
width: 100% !important;
justify-content: center;
}
body.home-gateway-page .home-studio-weekly-schedule__head {
align-items: stretch;
flex-direction: column;
}
body.home-gateway-page .home-studio-weekly-schedule__simple,
body.home-gateway-page .home-studio-weekly-schedule__row {
grid-template-columns: 1fr !important;
}
body.home-gateway-page .home-studio-weekly-schedule__range {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.home-gateway-page .home-studio-weekly-schedule__head button,
body.home-gateway-page .home-studio-weekly-schedule__presets button {
min-height: 40px;
}
body.home-gateway-page .home-studio-test-layout {
gap: 14px;
}
body.home-gateway-page .home-studio-test-card {
padding: 14px;
}
body.home-gateway-page .home-studio-test-card--number {
min-height: auto !important;
justify-items: center;
align-content: center;
padding: clamp(18px, 6vw, 28px) !important;
text-align: center;
}
body.home-gateway-page .home-studio-test-card--number a {
width: 100%;
min-height: 58px;
padding-inline: 12px;
font-size: clamp(1.2rem, 6.4vw, 1.65rem);
}
body.home-gateway-page .home-studio-test-card--number p {
max-width: 100%;
font-size: 1rem;
}
body.home-gateway-page .home-studio-test-call {
width: 100%;
}
body.home-gateway-page .home-studio-live-console {
min-height: auto !important;
padding: 12px;
}
body.home-gateway-page .home-studio-live-actions,
body.home-gateway-page .home-studio-live-checks {
grid-template-columns: 1fr !important;
}
body.home-gateway-page .home-studio-live-status {
grid-template-columns: 42px minmax(0, 1fr);
padding: 10px;
}
body.home-gateway-page .home-studio-live-orb {
width: 42px;
height: 42px;
}
body.home-gateway-page .home-studio-live-transcript,
body.home-gateway-page .home-studio-test-transcript {
min-height: 220px;
max-height: 320px;
}
body.home-gateway-page .home-studio-test-line {
max-width: 96%;
}
body.home-gateway-page .home-studio-test-grid dl div {
grid-template-columns: 1fr;
gap: 3px;
}
body.home-gateway-page .home-studio-signup-step__copy h3 {
font-size: clamp(1.35rem, 7vw, 1.85rem);
}
body.home-gateway-page .home-studio-forwarding-guide__target,
body.home-gateway-page .home-studio-forwarding-guide__confirm {
width: 100%;
}
}
@media (max-width: 480px) {
body.home-gateway-page .home-gateway {
padding-inline: 10px !important;
}
body.home-gateway-page .home-premium-hero--solo {
padding-top: 24px !important;
}
body.home-gateway-page .home-premium-hero .home-gateway-intro h1,
body.home-gateway-page .home-premium-hero--solo .home-gateway-intro h1 {
max-width: 9.8ch !important;
font-size: clamp(2.08rem, 12.2vw, 3rem) !important;
}
body.home-gateway-page .home-premium-hero .home-gateway-intro p,
body.home-gateway-page .home-premium-hero--solo .home-gateway-intro p {
font-size: 0.98rem !important;
}
body.home-gateway-page .home-gateway-panel,
body.home-gateway-page .home-studio-suite,
body.home-gateway-page .home-studio-stage,
body.home-gateway-page .home-studio-live,
body.home-gateway-page .home-studio-test-suite,
body.home-gateway-page .home-studio-signup-step {
border-radius: 16px !important;
}
body.home-gateway-page .home-gateway-proof span {
min-height: auto;
}
body.home-gateway-page .home-studio-suite .home-studio-live__head strong {
-webkit-line-clamp: 5;
}
body.home-gateway-page .home-studio-live__section-head > span,
body.home-gateway-page .home-studio-chatbot__head span,
body.home-gateway-page .home-studio-test-suite__head span,
body.home-gateway-page .home-studio-test-card > span,
body.home-gateway-page .home-studio-signup-step__copy > span {
letter-spacing: 0.04em;
}
body.home-gateway-page .home-studio-weekly-schedule__range {
grid-template-columns: 1fr;
}
body.home-gateway-page .home-studio-live-status {
grid-template-columns: 1fr;
justify-items: center;
text-align: center;
}
body.home-gateway-page .home-studio-test-kpis span,
body.home-gateway-page .home-studio-test-grid article,
body.home-gateway-page .home-studio-rule-card {
padding: 12px;
}
body.home-gateway-page .home-studio-rule-card__top span {
white-space: normal;
}
body.home-gateway-page .home-studio-forwarding-code code,
body.home-gateway-page .home-studio-forwarding-guide__checks code {
width: 100%;
justify-content: center;
text-align: center;
}
}
/* Final home hero alignment: closer to nav, three-line headline, delayed cookie entrance. */
body.home-gateway-page .home-gateway {
padding-top: clamp(18px, 3vw, 42px) !important;
}
body.home-gateway-page .home-premium-hero--solo {
padding-block: clamp(8px, 1.8vw, 24px) clamp(24px, 4vw, 58px) !important;
}
body.home-gateway-page .home-premium-hero--solo .home-gateway-intro {
gap: clamp(13px, 1.6vw, 20px) !important;
}
body.home-gateway-page .home-premium-hero--solo .home-gateway-intro .home-eyebrow {
margin-bottom: clamp(4px, 0.8vw, 10px);
}
body.home-gateway-page .home-premium-hero--solo .home-gateway-intro h1 {
max-width: min(100%, 1120px) !important;
font-size: clamp(3rem, 5vw, 5.5rem) !important;
line-height: 0.94 !important;
}
body.home-gateway-page .home-premium-hero--solo .home-gateway-intro h1 span {
display: block;
white-space: nowrap;
}
@media (max-width: 820px) {
body.home-gateway-page .home-gateway {
padding-top: 16px !important;
}
body.home-gateway-page .home-premium-hero--solo .home-gateway-intro h1 {
font-size: clamp(2.2rem, 10vw, 4.2rem) !important;
}
}
@media (max-width: 520px) {
body.home-gateway-page .home-premium-hero--solo .home-gateway-intro h1 {
font-size: clamp(1.88rem, 9vw, 2.9rem) !important;
}
}
/* Home audit pass: sharper promise and lighter above-the-fold. */
body.home-gateway-page .home-gateway {
padding-top: clamp(8px, 1.8vw, 26px) !important;
}
body.home-gateway-page .home-premium-hero--solo {
padding-block: clamp(6px, 1.4vw, 18px) clamp(22px, 4vw, 54px) !important;
}
body.home-gateway-page .home-premium-hero--solo .home-gateway-proof {
margin-block: clamp(18px, 2.2vw, 30px) clamp(10px, 1.5vw, 22px) !important;
}
body.home-gateway-page .home-gateway-source-fallback {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin-top: 14px;
padding: 14px;
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 16px;
background: rgba(8, 12, 24, 0.58);
}
body.home-gateway-page .home-studio-rules-panel__editor {
grid-template-columns: minmax(220px, 0.7fr) minmax(320px, 1.35fr) minmax(160px, 0.34fr) !important;
align-items: end !important;
gap: 12px !important;
}
body.home-gateway-page .home-studio-rules-panel__editor label {
height: 100%;
}
body.home-gateway-page .home-studio-rules-panel__editor input,
body.home-gateway-page .home-studio-rules-panel__editor textarea,
body.home-gateway-page .home-studio-rules-panel__editor > button {
min-height: 64px !important;
}
body.home-gateway-page .home-studio-rules-panel__editor textarea {
height: 64px !important;
resize: none !important;
}
body.home-gateway-page .home-studio-rules-panel__editor > button {
width: 100%;
align-self: end;
}
@media (max-width: 860px) {
body.home-gateway-page .home-studio-rules-panel__editor {
grid-template-columns: 1fr !important;
}
}
body.home-gateway-page .home-gateway-source-fallback span {
color: rgba(226, 232, 240, 0.74);
font-size: 0.94rem;
font-weight: 850;
}
body.home-gateway-page .home-gateway-source-fallback .btn {
min-height: 42px;
padding-inline: 18px;
white-space: nowrap;
}
body.home-gateway-page .home-intake-status:empty {
display: none !important;
}
body.home-gateway-page .home-gateway-manual {
width: 100%;
min-height: 44px;
margin-top: 12px;
}
body.home-gateway-page .home-studio-test-transcript[hidden],
body.home-gateway-page .home-studio-test-dashboard[hidden],
body.home-gateway-page .home-studio-live-checks[hidden] {
display: none !important;
}
body.home-gateway-page .home-studio-test-card--number.is-unavailable {
opacity: 0.62;
filter: grayscale(0.35);
}
body.home-gateway-page .home-studio-test-card--number a.is-empty {
align-self: center !important;
justify-self: center !important;
width: auto !important;
min-height: 40px !important;
padding: 8px 16px !important;
pointer-events: none;
border-color: rgba(148, 163, 184, 0.22) !important;
background: rgba(148, 163, 184, 0.08) !important;
color: rgba(226, 232, 240, 0.78) !important;
font-size: 0.92rem !important;
line-height: 1.1 !important;
text-align: center !important;
}
body.home-gateway-page .home-studio-test-call fieldset {
display: grid;
gap: 12px;
min-width: 0;
margin: 0;
padding: 0;
border: 0;
}
body.home-gateway-page .home-studio-test-call fieldset:disabled {
cursor: not-allowed;
}
body.home-gateway-page .home-studio-test-call fieldset:disabled label,
body.home-gateway-page .home-studio-test-call fieldset:disabled .btn {
opacity: 0.55;
}
/* Unified tunnel answers: one premium button system across questions. */
body.home-gateway-page .home-studio-chatbot__choices,
body.home-gateway-page .home-studio-chatbot__card[data-phase="faq"] .home-studio-chatbot__choices,
body.home-gateway-page .home-studio-chatbot__card[data-question-id="voice_gender"] .home-studio-chatbot__choices,
body.home-gateway-page .home-studio-chatbot__card[data-question-type^="table_capacity"] .home-studio-chatbot__choices {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(188px, 1fr)) !important;
width: min(100%, 880px) !important;
max-width: 880px !important;
gap: 12px !important;
justify-content: center !important;
justify-items: stretch !important;
margin: clamp(16px, 2vw, 24px) auto 0 !important;
}
body.home-gateway-page .home-studio-chatbot__choices button,
body.home-gateway-page .home-studio-chatbot__card[data-phase="faq"] .home-studio-chatbot__choices button,
body.home-gateway-page .home-studio-chatbot__card[data-phase="faq"] .home-studio-chatbot__choices button.is-customize,
body.home-gateway-page .home-studio-chatbot__card[data-question-id="voice_gender"] .home-studio-chatbot__choices button,
body.home-gateway-page .home-studio-chatbot__card[data-question-id="voice_gender"] .home-studio-chatbot__choices button:nth-child(-n+2),
body.home-gateway-page .home-studio-chatbot__card[data-question-type^="table_capacity"] .home-studio-chatbot__choices button {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
min-width: 0 !important;
min-height: 56px !important;
padding: 10px 18px !important;
border: 1px solid rgba(217, 183, 111, 0.34) !important;
border-radius: 16px !important;
background:
linear-gradient(145deg, rgba(217, 183, 111, 0.13), rgba(122, 162, 255, 0.06)),
rgba(18, 19, 28, 0.88) !important;
color: #f5e7bf !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 16px 34px rgba(0, 0, 0, 0.14) !important;
font: inherit !important;
font-size: clamp(0.92rem, 1vw, 1rem) !important;
font-weight: 950 !important;
line-height: 1.15 !important;
text-align: center !important;
white-space: normal !important;
text-wrap: balance;
}
body.home-gateway-page .home-studio-chatbot__choices button:hover,
body.home-gateway-page .home-studio-chatbot__choices button:focus-visible {
transform: translateY(-1px) !important;
border-color: rgba(244, 223, 174, 0.58) !important;
background:
linear-gradient(145deg, rgba(244, 223, 174, 0.18), rgba(122, 162, 255, 0.09)),
rgba(23, 24, 34, 0.94) !important;
color: #fff4d6 !important;
}
@media (max-width: 560px) {
body.home-gateway-page .home-studio-chatbot__choices,
body.home-gateway-page .home-studio-chatbot__card[data-phase="faq"] .home-studio-chatbot__choices,
body.home-gateway-page .home-studio-chatbot__card[data-question-id="voice_gender"] .home-studio-chatbot__choices,
body.home-gateway-page .home-studio-chatbot__card[data-question-type^="table_capacity"] .home-studio-chatbot__choices {
grid-template-columns: 1fr !important;
gap: 10px !important;
}
}
@media (max-width: 640px) {
body.home-gateway-page .home-gateway-source-fallback {
align-items: stretch;
flex-direction: column;
}
}
/* Compact final agent sheet: show only the useful summary until the user asks for details. */
body.home-gateway-page .home-studio-suite > .home-studio-live__rules.home-studio-rules-panel {
scroll-margin-top: 92px;
}
body.home-gateway-page .home-studio-rule-card {
gap: 0 !important;
padding: 10px !important;
}
body.home-gateway-page .home-studio-rule-card__summary {
width: 100%;
display: grid !important;
grid-template-columns: auto minmax(180px, 0.65fr) minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
min-height: 68px;
padding: 12px 14px !important;
border-radius: 15px !important;
text-align: left;
}
body.home-gateway-page .home-studio-rule-card__summary span {
display: inline-flex;
align-items: center;
width: max-content;
max-width: 100%;
padding: 5px 9px;
border: 1px solid rgba(244, 223, 174, 0.24);
border-radius: 999px;
background: rgba(244, 223, 174, 0.08);
color: #f4dfae;
font-size: 0.66rem;
font-weight: 950;
letter-spacing: 0.06em;
text-transform: uppercase;
white-space: nowrap;
}
body.home-gateway-page .home-studio-rule-card__summary strong {
min-width: 0;
overflow: hidden;
color: #f8fafc;
font-size: 1rem;
font-weight: 950;
text-overflow: ellipsis;
white-space: nowrap;
}
body.home-gateway-page .home-studio-rule-card__summary small {
min-width: 0;
overflow: hidden;
color: rgba(226, 232, 240, 0.72);
font-size: 0.9rem;
font-weight: 760;
text-overflow: ellipsis;
white-space: nowrap;
}
body.home-gateway-page .home-studio-rule-card__summary em {
justify-self: end;
color: #c9d7ff;
font-style: normal;
font-size: 0.82rem;
font-weight: 950;
}
body.home-gateway-page .home-studio-rule-card__details {
display: grid;
gap: 12px;
padding: 12px 4px 4px;
}
body.home-gateway-page .home-studio-rule-card__details[hidden] {
display: none !important;
}
body.home-gateway-page .home-studio-rule-card.is-open {
padding: 12px !important;
}
body.home-gateway-page .home-studio-rule-card.is-open .home-studio-rule-card__summary {
background:
linear-gradient(145deg, rgba(244, 223, 174, 0.1), rgba(122, 162, 255, 0.055)),
rgba(14, 18, 32, 0.94);
}
@media (max-width: 760px) {
body.home-gateway-page .home-studio-rules-panel__list {
column-count: 1;
}
body.home-gateway-page .home-studio-rule-card__summary {
grid-template-columns: 1fr auto;
min-height: 0;
}
body.home-gateway-page .home-studio-rule-card__summary span,
body.home-gateway-page .home-studio-rule-card__summary small {
grid-column: 1 / -1;
}
}
/* Live demo: simplified premium flow */
body.live-demo-body .live-demo-shell {
gap: clamp(18px, 3vw, 28px);
}
body.live-demo-body .live-demo-personalizer {
width: min(100%, 1180px);
margin-inline: auto;
grid-template-columns: minmax(0, 0.7fr) minmax(360px, 1fr);
padding: clamp(18px, 2.8vw, 30px);
border-color: rgba(226, 199, 136, 0.22);
background:
radial-gradient(circle at top left, rgba(226, 199, 136, 0.13), transparent 34%),
linear-gradient(135deg, rgba(17, 24, 39, 0.98), rgba(22, 31, 48, 0.94));
}
body.live-demo-body .live-demo-personalizer__copy h1 {
max-width: 520px;
margin: 0;
color: #f8fafc;
font-size: clamp(2rem, 4vw, 3.6rem);
line-height: 1;
letter-spacing: 0;
}
body.live-demo-body .live-demo-personalizer__copy p {
max-width: 520px;
margin: 0;
color: rgba(226, 232, 240, 0.78);
font-size: clamp(1rem, 1.35vw, 1.12rem);
line-height: 1.55;
}
body.live-demo-body .live-demo-phone {
width: min(100%, 1180px);
margin-top: 0;
grid-template-columns: minmax(0, 0.86fr) minmax(340px, 0.72fr);
border-color: rgba(226, 199, 136, 0.22);
background:
radial-gradient(circle at top right, rgba(226, 199, 136, 0.12), transparent 34%),
linear-gradient(135deg, rgba(17, 24, 39, 0.98), rgba(14, 22, 36, 0.94));
}
body.live-demo-body .live-demo-call-number {
display: grid;
gap: 8px;
max-width: 520px;
margin-top: 6px;
padding: 16px;
border: 1px solid rgba(226, 199, 136, 0.22);
border-radius: 12px;
background: rgba(2, 6, 23, 0.34);
}
body.live-demo-body .live-demo-call-number span {
color: #c7d2fe;
font-size: 0.74rem;
font-weight: 900;
letter-spacing: 0.06em;
text-transform: uppercase;
}
body.live-demo-body .live-demo-call-number a,
body.live-demo-body .live-demo-call-number strong {
width: fit-content;
color: #f8fafc;
font-size: clamp(1.3rem, 2.8vw, 2rem);
font-weight: 950;
text-decoration: none;
}
body.live-demo-body .live-demo-call-number p {
margin: 0;
color: rgba(226, 232, 240, 0.72);
}
body.live-demo-body .live-demo-console {
width: min(100%, 1180px);
margin-inline: auto;
}
body.live-demo-body .voice-panel {
grid-template-columns: minmax(0, 1fr);
padding: clamp(18px, 2.8vw, 28px);
border: 1px solid rgba(226, 199, 136, 0.22);
border-radius: 12px;
background:
radial-gradient(circle at top left, rgba(96, 165, 250, 0.12), transparent 32%),
linear-gradient(135deg, rgba(17, 24, 39, 0.98), rgba(13, 21, 35, 0.96));
}
body.live-demo-body .voice-status-wrap {
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
min-height: 112px;
border-radius: 12px;
}
body.live-demo-body .voice-orb {
border-radius: 999px;
}
body.live-demo-body .voice-actions {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-top: 4px;
}
body.live-demo-body .voice-actions .btn {
width: auto;
min-width: 168px;
min-height: 48px;
border-radius: 12px;
}
body.live-demo-body .voice-actions .btn-primary {
min-width: 260px;
}
body.live-demo-body .voice-checklist[hidden],
body.live-demo-body [data-live-demo-runtime][hidden],
body.live-demo-body [data-live-demo-outcome-section][hidden] {
display: none !important;
}
body.live-demo-body .live-demo-transcript-section,
body.live-demo-body .live-demo-after--simple {
width: min(100%, 1180px);
margin-inline: auto;
}
body.live-demo-body .live-demo-after--simple {
grid-template-columns: 1fr;
border-color: rgba(226, 199, 136, 0.22);
}
body.live-demo-body .live-demo-after--simple .live-demo-after__head {
min-height: 0;
}
body.live-demo-body .live-demo-after--simple .live-demo-after__head p {
max-width: 560px;
}
@media (max-width: 820px) {
body.live-demo-body .live-demo-personalizer,
body.live-demo-body .live-demo-phone {
grid-template-columns: 1fr;
}
body.live-demo-body .voice-status-wrap {
grid-template-columns: 1fr;
}
body.live-demo-body .voice-actions {
flex-direction: column;
}
body.live-demo-body .voice-actions .btn,
body.live-demo-body .voice-actions .btn-primary {
width: 100%;
min-width: 0;
}
}
/* Global responsive finishing pass: keep every public and demo surface readable on phones,
tablets and large screens without changing the underlying templates. */
html,
body {
max-width: 100%;
overflow-x: hidden;
}
.container,
.dashboard-page,
.crm-page,
.sms-page,
.email-dashboard-page,
.calendar-page,
.capacity-page,
.contacts-page,
.billing-page,
.test-agent-page,
.import-page,
.admin-number-page,
.admin-platform,
.admin-batch-page,
.home-gateway-shell,
.live-demo-shell,
.demo-booking-shell {
width: min(100%, var(--container, 1180px));
}
:is(.container, .home-gateway-shell, .live-demo-shell, .demo-booking-shell) {
padding-inline: clamp(16px, 4vw, 28px);
}
:is(.home-use-grid, .home-faq-grid, .home-demo-grid, .home-steps, .home-realtime-grid,
.home-strip__grid, .vertical-proof-strip, .vertical-hero__ready-grid,
.vertical-dashboard-preview, .vertical-integrations-grid, .vertical-pricing-grid,
.vertical-comparison, .demo-booking-kpis, .pricing-feature-grid) {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}
:is(.home-section__head, .legal-hero__card, .vertical-hero__copy, .home-cta__card) {
min-width: 0;
}
:is(.home-section__head h1, .home-section__head h2, .legal-hero h1,
.vertical-hero h1, .home-cta h2, .demo-booking-heading h3,
.live-demo-personalizer__copy h1) {
overflow-wrap: anywhere;
text-wrap: balance;
}
:is(.btn, button, input, select, textarea, .public-menu-link, .menu-icon-link, .nav-auth-link) {
max-width: 100%;
}
:is(input, select, textarea) {
min-width: 0;
}
@media (max-width: 1180px) {
.vertical-hero__grid,
.home-split,
.home-section--split .home-split,
.vertical-signature,
.vertical-calculator__grid,
.pricing-hero,
.pricing-compare,
.pricing-audience,
.live-demo-personalizer,
.live-demo-phone,
.demo-booking-grid {
grid-template-columns: 1fr !important;
}
.vertical-hero__copy,
.vertical-hero__actions,
.vertical-proof-strip {
max-width: 100%;
}
.vertical-hero__copy h1 {
max-width: 18ch;
}
}
@media (max-width: 920px) {
.site-header > .nav,
.site-header .nav {
width: 100%;
padding-inline: 14px;
}
body:not(.app-shell) .site-header .menu {
max-width: min(100%, 560px);
overflow-x: auto;
scrollbar-width: none;
}
body:not(.app-shell) .site-header .menu::-webkit-scrollbar {
display: none;
}
body:not(.app-shell) .site-header .menu a {
flex: 0 0 auto;
white-space: nowrap;
}
.home-hero__actions,
.home-cta__actions,
.vertical-hero__actions,
.demo-booking-launch__actions,
.demo-step-footer,
.demo-booking-submit,
.pricing-hero__actions {
display: flex !important;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
}
.home-hero__actions .btn,
.home-cta__actions .btn,
.vertical-hero__actions .btn,
.demo-booking-launch__actions .btn,
.demo-step-footer .btn,
.demo-booking-submit .btn,
.pricing-hero__actions .btn {
flex: 1 1 220px;
width: auto;
}
}
@media (max-width: 760px) {
:root {
--radius-xl: 20px;
--radius-lg: 16px;
}
body {
-webkit-text-size-adjust: 100%;
}
:is(.home-section, .legal-hero, .vertical-hero, .home-cta, .demo-booking-section) {
padding-block: clamp(32px, 9vw, 56px) !important;
}
:is(.container, .home-gateway-shell, .live-demo-shell, .demo-booking-shell) {
padding-inline: 14px;
}
:is(.legal-hero__card, .home-cta__card, .vertical-live-card, .vertical-page-summary,
.vertical-picker, .vertical-integration-panel, .vertical-roi-card,
.demo-booking-panel, .demo-booking-embed-card, .demo-booking-launch__card,
.live-demo-personalizer, .live-demo-phone, .voice-panel) {
padding: clamp(16px, 5vw, 22px) !important;
border-radius: 16px !important;
}
:is(.legal-hero h1, .vertical-hero__copy h1, .home-section__head h2,
.home-cta h2, .pricing-hero h1) {
font-size: clamp(2rem, 10vw, 3.1rem) !important;
line-height: 1 !important;
max-width: 100% !important;
}
:is(.legal-hero p, .vertical-hero__copy p, .home-section__head p,
.home-cta p, .pricing-hero p) {
font-size: 1rem !important;
line-height: 1.55 !important;
}
:is(.home-use-grid, .home-faq-grid, .home-demo-grid, .home-steps,
.vertical-proof-strip, .vertical-hero__ready-grid, .vertical-dashboard-preview,
.vertical-integrations-grid, .vertical-pricing-grid, .vertical-comparison,
.demo-booking-kpis, .demo-booking-form-grid, .pricing-grid,
.pricing-feature-grid) {
grid-template-columns: 1fr !important;
}
.site-footer__grid,
.site-footer__columns {
grid-template-columns: 1fr !important;
gap: 22px !important;
}
.cookie-banner {
left: 12px !important;
right: 12px !important;
bottom: 12px !important;
width: auto !important;
max-width: none !important;
padding: 14px !important;
border-radius: 16px !important;
}
.cookie-banner__body {
gap: 6px;
}
.cookie-banner__body p {
font-size: 0.9rem !important;
line-height: 1.35 !important;
}
.cookie-banner__actions,
.cookie-modal__actions {
display: grid !important;
grid-template-columns: 1fr !important;
width: 100%;
}
.cookie-banner__actions .btn,
.cookie-modal__actions .btn {
width: 100%;
min-height: 42px;
}
.demo-booking-modal__dialog,
.cookie-modal__dialog,
.human-contact-modal__dialog {
width: min(100% - 20px, 620px) !important;
max-height: calc(100dvh - 20px) !important;
overflow: auto !important;
border-radius: 18px !important;
}
}
@media (max-width: 560px) {
.site-header .logo-brand__image {
height: 40px !important;
}
body:not(.app-shell) .site-header > .nav,
body:not(.app-shell) .site-header .nav {
min-height: 64px;
gap: 8px;
}
.public-menu-link,
.menu-icon-link,
.nav-auth-link {
min-height: 40px !important;
padding-inline: 10px !important;
font-size: 0.84rem !important;
}
.public-menu-link svg,
.menu-icon-link svg {
width: 18px !important;
height: 18px !important;
}
body.home-gateway-page .home-premium-hero--solo .home-gateway-intro h1 {
max-width: 11.5ch !important;
font-size: clamp(2.4rem, 13vw, 3.45rem) !important;
line-height: 0.96 !important;
}
body.home-gateway-page .home-premium-actions {
display: grid !important;
width: 100%;
grid-template-columns: 1fr !important;
}
body.home-gateway-page .home-premium-actions .btn {
width: 100%;
}
body.home-gateway-page .home-gateway-proof {
margin-block: 18px 22px !important;
}
body.home-gateway-page .home-gateway-panel,
body.home-gateway-page .home-studio-suite,
body.home-gateway-page .home-studio-stage,
body.home-gateway-page .home-studio-live,
body.home-gateway-page .home-studio-test-suite,
body.home-gateway-page .home-studio-signup-step {
padding: 16px !important;
border-radius: 18px !important;
}
body.home-gateway-page .home-gateway-verticals {
grid-template-columns: 1fr !important;
}
body.home-gateway-page .home-gateway-search form,
body.live-demo-body .live-demo-business-form,
.vertical-picker form {
grid-template-columns: 1fr !important;
}
body.home-gateway-page .home-studio-chatbot__card,
body.home-gateway-page .home-studio-chatbot__question {
padding: 18px 14px !important;
}
body.home-gateway-page .home-studio-chatbot__question h3,
body.home-gateway-page .home-studio-chatbot__card h3 {
font-size: clamp(1.18rem, 6.2vw, 1.65rem) !important;
line-height: 1.12 !important;
}
body.home-gateway-page .home-studio-chatbot__choices button {
min-height: 52px !important;
padding: 10px 14px !important;
}
body.live-demo-body .voice-actions {
align-items: stretch;
}
body.live-demo-body .voice-actions .btn {
width: 100% !important;
}
}
@media (max-width: 380px) {
:is(.container, .home-gateway-shell, .live-demo-shell, .demo-booking-shell) {
padding-inline: 10px;
}
body.home-gateway-page .home-premium-hero--solo .home-gateway-intro h1 {
font-size: clamp(2rem, 12vw, 2.75rem) !important;
}
.btn,
button {
font-size: 0.92rem;
}
}
/* Mobile booking and footer polish. Kept at the very end to win over modal/iframe styles. */
.demo-slot-empty {
display: none !important;
}
@media (max-width: 720px) {
.demo-booking-modal__dialog {
width: 100vw !important;
height: 100dvh !important;
max-height: 100dvh !important;
margin: 0 !important;
border-radius: 0 !important;
}
.demo-booking-modal__header {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
align-items: center !important;
min-height: 72px !important;
padding: 14px 16px 12px !important;
}
.demo-booking-modal__intro {
gap: 0 !important;
min-width: 0 !important;
}
.demo-booking-modal__intro .home-eyebrow,
.demo-booking-modal__header p,
.demo-booking-modal__badges {
display: none !important;
}
.demo-booking-modal__header h2 {
font-size: clamp(1.5rem, 6.2vw, 1.85rem) !important;
line-height: 1 !important;
letter-spacing: -0.04em !important;
white-space: nowrap !important;
}
.demo-booking-modal__close {
justify-self: end !important;
width: 42px !important;
height: 42px !important;
font-size: 1.45rem !important;
}
.demo-booking-section--embed {
min-height: 0 !important;
padding: 14px 0 24px !important;
}
.demo-booking-section--embed .demo-booking-shell--embed {
padding-inline: 10px !important;
}
.demo-booking-section--embed .demo-booking-embed-card--simple {
width: min(100%, 480px) !important;
padding: 14px !important;
border-radius: 22px !important;
}
.demo-booking-flow-nav {
display: grid !important;
grid-template-columns: 1fr auto !important;
gap: 10px !important;
margin-bottom: 14px !important;
}
.demo-booking-flow-nav .btn {
justify-self: start !important;
width: auto !important;
min-height: 42px !important;
padding: 0 16px !important;
border-radius: 999px !important;
font-size: 0.92rem !important;
}
.demo-booking-flow-nav span {
justify-self: end !important;
display: inline-flex !important;
min-width: 0 !important;
min-height: 42px !important;
align-items: center !important;
justify-content: center !important;
padding: 0 18px !important;
font-size: 0.72rem !important;
}
.demo-booking-section--embed .demo-booking-embed-card--simple .demo-booking-stage__head {
margin-bottom: 14px !important;
}
.demo-booking-section--embed .demo-booking-embed-card--simple .demo-booking-stage__head h3 {
font-size: clamp(1.55rem, 8vw, 2rem) !important;
line-height: 1.06 !important;
}
.demo-booking-section--embed .demo-booking-embed-card--simple .demo-day-grid,
.demo-booking-section--embed .demo-booking-embed-card--simple .demo-slot-grid,
.demo-booking-section--embed .demo-booking-embed-card--simple .demo-period-switch,
.demo-booking-section--embed .demo-booking-embed-card--simple .demo-mode-grid,
.demo-booking-section--embed .demo-booking-embed-card--simple .demo-form-grid {
gap: 10px !important;
}
.demo-booking-section--embed .demo-booking-embed-card--simple .demo-day-tab,
.demo-booking-section--embed .demo-booking-embed-card--simple .demo-period-button,
.demo-booking-section--embed .demo-booking-embed-card--simple .demo-slot-card,
.demo-booking-section--embed .demo-booking-embed-card--simple .demo-mode-card {
min-height: 58px !important;
padding: 13px 16px !important;
border-radius: 18px !important;
text-align: center !important;
}
.demo-booking-section--embed .demo-booking-embed-card--simple .demo-period-button {
color: #f8fafc !important;
font-weight: 950 !important;
background: rgba(255, 255, 255, 0.045) !important;
}
.demo-booking-section--embed .demo-booking-embed-card--simple .demo-period-button.is-active {
color: #0b1020 !important;
background: linear-gradient(135deg, #f4dfae, #8fb2ff) !important;
box-shadow: 0 18px 38px rgba(143, 178, 255, 0.18) !important;
}
.demo-booking-section--embed .demo-booking-embed-card--simple .demo-period-button:disabled {
color: rgba(248, 250, 252, 0.42) !important;
background: rgba(255, 255, 255, 0.025) !important;
}
.demo-booking-section--embed .demo-booking-embed-card--simple .demo-day-tab small,
.demo-booking-section--embed .demo-booking-embed-card--simple .demo-mode-card__body > span {
display: none !important;
}
.demo-booking-section--embed .demo-booking-embed-card--simple .demo-form-grid {
grid-template-columns: 1fr 1fr !important;
}
.demo-booking-section--embed .demo-booking-embed-card--simple .form-group--full,
.demo-booking-section--embed .demo-booking-embed-card--simple .demo-mode-picker {
grid-column: 1 / -1 !important;
}
.demo-booking-section--embed .demo-booking-embed-card--simple .form-group {
gap: 6px !important;
}
.demo-booking-section--embed .demo-booking-embed-card--simple :is(input, select, textarea) {
min-height: 48px !important;
border-radius: 14px !important;
font-size: 0.96rem !important;
}
.demo-booking-section--embed .demo-booking-embed-card--simple .demo-selected-summary {
grid-template-columns: 1fr auto !important;
gap: 10px !important;
padding: 12px !important;
border-radius: 18px !important;
}
.demo-booking-section--embed .demo-booking-embed-card--simple .demo-selected-summary .btn {
width: auto !important;
min-height: 40px !important;
padding-inline: 14px !important;
}
.demo-booking-section--embed .demo-booking-embed-card--simple .demo-reminders {
display: grid !important;
grid-template-columns: auto 1fr 1fr !important;
align-items: center !important;
gap: 8px !important;
padding: 12px !important;
border-radius: 18px !important;
}
.demo-booking-section--embed .demo-booking-embed-card--simple .demo-reminders label {
min-height: 42px !important;
margin: 0 !important;
padding: 0 10px !important;
border-radius: 14px !important;
background: rgba(255, 255, 255, 0.035);
}
.demo-booking-section--embed .demo-booking-embed-card--simple .demo-step-footer,
.demo-booking-section--embed .demo-booking-embed-card--simple .demo-booking-submit {
margin-top: 12px !important;
}
.demo-booking-section--embed .demo-booking-embed-card--simple .demo-step-footer .btn,
.demo-booking-section--embed .demo-booking-embed-card--simple .demo-booking-submit .btn {
width: 100% !important;
min-height: 50px !important;
}
}
@media (max-width: 520px) {
.site-footer {
padding-inline: 18px !important;
}
.site-footer__inner {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 16px !important;
width: 100% !important;
max-width: 100% !important;
padding: 28px 0 18px !important;
box-sizing: border-box !important;
}
.site-footer__brand-block {
gap: 8px !important;
}
.site-footer__logo {
height: 36px !important;
}
.site-footer__pitch {
max-width: 100% !important;
font-size: 0.9rem !important;
line-height: 1.45 !important;
}
.site-footer__links {
grid-template-columns: 1fr 1fr !important;
gap: 12px !important;
}
.site-footer__column {
gap: 7px !important;
}
.site-footer__column nav {
gap: 6px !important;
}
.site-footer__column nav a,
.site-footer__link-button {
font-size: 0.84rem !important;
line-height: 1.15 !important;
}
.site-footer__column nav a:nth-of-type(n+4),
.site-footer__column:nth-child(n+3) nav a:nth-of-type(n+3) {
display: none !important;
}
.site-footer__title {
font-size: 0.72rem !important;
}
.site-footer__meta {
padding-top: 12px !important;
font-size: 0.78rem !important;
}
}
/* Public pages premium simplification pass. Shared by all vertical/category pages except the home tunnel. */
body.landing-refresh:not(.home-gateway-page) .legal-hero,
body.vertical-page:not(.home-gateway-page) .vertical-hero {
padding-block: clamp(56px, 7vw, 96px) !important;
}
body.landing-refresh:not(.home-gateway-page) .legal-hero__card,
body.vertical-page:not(.home-gateway-page) .vertical-hero--compact .vertical-hero__grid {
border-color: rgba(244, 223, 174, 0.24) !important;
background:
linear-gradient(145deg, rgba(244, 223, 174, 0.075), rgba(143, 178, 255, 0.045)),
rgba(12, 17, 32, 0.86) !important;
box-shadow: 0 30px 90px rgba(0, 0, 0, 0.28) !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-hero--compact .vertical-hero__grid {
display: grid !important;
grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr) !important;
gap: clamp(22px, 4vw, 48px) !important;
align-items: center !important;
padding: clamp(28px, 5vw, 58px) !important;
border-radius: 28px !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-hero--compact .vertical-hero__copy h1,
body.landing-refresh:not(.home-gateway-page) .legal-hero__card h1 {
max-width: 12.5ch !important;
font-size: clamp(2.75rem, 6vw, 5.6rem) !important;
line-height: 0.96 !important;
letter-spacing: -0.04em !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-hero__copy p,
body.landing-refresh:not(.home-gateway-page) .legal-hero__card p,
body.landing-refresh:not(.home-gateway-page) .home-section__head p,
body.landing-refresh:not(.home-gateway-page) .home-cta__card p {
max-width: 62ch !important;
font-size: clamp(1rem, 1.35vw, 1.15rem) !important;
line-height: 1.55 !important;
color: rgba(225, 231, 242, 0.76) !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-hero__actions,
body.landing-refresh:not(.home-gateway-page) .home-hero__actions,
body.landing-refresh:not(.home-gateway-page) .home-cta__actions {
display: flex !important;
flex-wrap: wrap !important;
gap: 12px !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-hero__actions .btn,
body.landing-refresh:not(.home-gateway-page) .home-hero__actions .btn,
body.landing-refresh:not(.home-gateway-page) .home-cta__actions .btn {
min-width: 190px !important;
min-height: 50px !important;
justify-content: center !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-page-summary--lean {
min-height: 280px !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
gap: 18px !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-page-summary--lean > strong {
font-size: clamp(1.55rem, 2.6vw, 2.35rem) !important;
line-height: 1.05 !important;
max-width: 14ch !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-page-proof {
display: flex !important;
flex-wrap: wrap !important;
gap: 12px !important;
width: fit-content !important;
max-width: 100% !important;
align-items: center !important;
align-self: flex-start !important;
grid-template-columns: none !important;
margin-top: 22px !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
outline: 0 !important;
background: transparent !important;
box-shadow: none !important;
overflow: visible !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-page-proof span,
body.vertical-page:not(.home-gateway-page) .vertical-page-summary__flow span {
flex: 0 1 auto !important;
min-height: 44px !important;
padding: 12px 16px 12px 34px !important;
border-color: rgba(244, 223, 174, 0.22) !important;
background: rgba(244, 223, 174, 0.06) !important;
color: #f4dfae !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-page-proof span::before {
left: 14px !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-dashboard-preview {
gap: 16px !important;
padding: 0 !important;
border-color: transparent !important;
background: transparent !important;
box-shadow: none !important;
}
body.vertical-page:not(.home-gateway-page) :is(.vertical-integrations-grid, .vertical-dashboard-preview, .vertical-comparison, .vertical-pricing-grid, .home-faq-grid) article,
body.landing-refresh:not(.home-gateway-page) :is(.pricing-plan, .pricing-clarity-card, .pricing-driver, .home-faq-grid article) {
padding: 22px 24px !important;
border-color: rgba(244, 223, 174, 0.16) !important;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)),
rgba(12, 17, 32, 0.82) !important;
box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18) !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-integrations-grid article p,
body.vertical-page:not(.home-gateway-page) .home-faq-grid article p,
body.landing-refresh:not(.home-gateway-page) .home-faq-grid article p,
body.landing-refresh:not(.home-gateway-page) .pricing-clarity-card p,
body.landing-refresh:not(.home-gateway-page) .pricing-driver p {
display: -webkit-box !important;
-webkit-line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-calculator__grid {
align-items: stretch !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-calculator__grid label,
body.vertical-page:not(.home-gateway-page) .vertical-calculator__grid output {
min-width: 0 !important;
padding: 18px !important;
border-color: rgba(244, 223, 174, 0.18) !important;
border-radius: 18px !important;
background: rgba(255, 255, 255, 0.035) !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-calculator__grid label {
grid-template-columns: minmax(0, 1fr) minmax(150px, 0.48fr) !important;
gap: 14px !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-calculator__grid input,
body.vertical-page:not(.home-gateway-page) .vertical-calculator__grid select {
width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-calculator__grid select {
width: 100% !important;
min-height: 46px !important;
margin-top: 0 !important;
padding: 0 36px 0 14px !important;
border: 1px solid rgba(244, 223, 174, 0.2) !important;
border-radius: 14px !important;
background: rgba(8, 13, 26, 0.88) !important;
color: #f7ecd0 !important;
font-weight: 900 !important;
text-overflow: ellipsis !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-calculator__grid output.is-net {
border-color: rgba(244, 223, 174, 0.34) !important;
background:
radial-gradient(circle at top right, rgba(244, 223, 174, 0.14), transparent 12rem),
rgba(12, 17, 32, 0.82) !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-calculator__grid output.is-net span,
body.vertical-page:not(.home-gateway-page) .vertical-calculator__grid output.is-net strong {
color: #f7ecd0 !important;
}
@media (max-width: 760px) {
body.vertical-page:not(.home-gateway-page) .vertical-calculator {
gap: 18px !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-calculator__grid {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 12px !important;
padding: 16px !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-calculator__grid label {
grid-template-columns: 1fr !important;
align-items: stretch !important;
gap: 10px !important;
padding: 16px !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-calculator__grid input,
body.vertical-page:not(.home-gateway-page) .vertical-calculator__grid select {
min-height: 50px !important;
font-size: 1rem !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-calculator__grid output {
gap: 12px !important;
padding: 20px !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-calculator__grid output strong {
font-size: clamp(2.35rem, 12vw, 3.25rem) !important;
line-height: 1 !important;
}
}
body.vertical-page:not(.home-gateway-page) .vertical-roi-card__math {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 10px !important;
margin: 12px 0 !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-roi-card__math div {
display: grid !important;
gap: 4px !important;
padding: 14px !important;
border: 1px solid rgba(244, 223, 174, 0.18) !important;
border-radius: 16px !important;
background: rgba(255, 255, 255, 0.035) !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-roi-card__math small {
color: rgba(244, 223, 174, 0.74) !important;
font-weight: 900 !important;
text-transform: uppercase !important;
letter-spacing: 0.06em !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-roi-card__math b {
color: #ffffff !important;
font-size: 1rem !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-value-strip {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 14px !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-value-strip article {
display: grid !important;
grid-template-columns: auto minmax(0, 1fr) !important;
grid-template-areas:
"number title"
"number text" !important;
column-gap: 14px !important;
row-gap: 4px !important;
align-items: start !important;
min-height: 132px !important;
padding: 20px !important;
border: 1px solid rgba(244, 223, 174, 0.16) !important;
border-radius: 20px !important;
background:
linear-gradient(145deg, rgba(244, 223, 174, 0.08), rgba(255, 255, 255, 0.025)),
rgba(12, 17, 32, 0.82) !important;
box-shadow: 0 18px 48px rgba(0, 0, 0, 0.18) !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-value-strip article > span {
grid-area: number !important;
display: grid !important;
place-items: center !important;
width: 42px !important;
height: 42px !important;
border: 1px solid rgba(244, 223, 174, 0.28) !important;
border-radius: 14px !important;
color: #f7e8bc !important;
background: rgba(244, 223, 174, 0.08) !important;
font-weight: 950 !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-value-strip h3 {
grid-area: title !important;
margin: 0 !important;
color: #ffffff !important;
font-size: clamp(1.05rem, 1.3vw, 1.25rem) !important;
line-height: 1.15 !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-value-strip p {
grid-area: text !important;
margin: 0 !important;
color: rgba(225, 231, 242, 0.72) !important;
font-size: 0.95rem !important;
line-height: 1.45 !important;
}
body.vertical-page--restaurant .restaurant-depth__shell,
body.vertical-page--restaurant .restaurant-command-center__grid {
border: 1px solid rgba(244, 223, 174, 0.18) !important;
border-radius: 28px !important;
padding: clamp(22px, 4vw, 42px) !important;
background:
radial-gradient(circle at top left, rgba(244, 223, 174, 0.12), transparent 20rem),
linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
rgba(11, 15, 29, 0.9) !important;
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.24) !important;
}
body.vertical-page--restaurant .restaurant-depth__head,
body.vertical-page--restaurant .restaurant-command-center__copy {
display: grid !important;
gap: 10px !important;
max-width: 860px !important;
margin-bottom: clamp(18px, 3vw, 28px) !important;
}
body.vertical-page--restaurant .restaurant-depth__head h2,
body.vertical-page--restaurant .restaurant-command-center__copy h2 {
margin: 0 !important;
color: #fff !important;
font-size: clamp(1.9rem, 3.5vw, 3.6rem) !important;
line-height: 0.98 !important;
letter-spacing: -0.03em !important;
max-width: 14ch !important;
}
body.vertical-page--restaurant .restaurant-depth__head p,
body.vertical-page--restaurant .restaurant-command-center__copy p {
margin: 0 !important;
color: rgba(225, 231, 242, 0.74) !important;
font-size: clamp(1rem, 1.25vw, 1.12rem) !important;
line-height: 1.55 !important;
max-width: 68ch !important;
}
body.vertical-page--restaurant .restaurant-depth__grid,
body.vertical-page--restaurant .restaurant-command-center__cards {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 14px !important;
}
body.vertical-page--restaurant .restaurant-depth__grid--wide,
body.vertical-page--restaurant .restaurant-command-center__cards {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
body.vertical-page--restaurant .restaurant-depth__grid article,
body.vertical-page--restaurant .restaurant-command-center__cards article {
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
min-height: 180px !important;
padding: 18px !important;
border: 1px solid rgba(244, 223, 174, 0.16) !important;
border-radius: 20px !important;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.018)),
rgba(10, 14, 27, 0.72) !important;
}
body.vertical-page--restaurant .restaurant-depth__grid article > span,
body.vertical-page--restaurant .restaurant-command-center__cards article > span {
align-self: flex-start !important;
padding: 7px 10px !important;
border: 1px solid rgba(244, 223, 174, 0.28) !important;
border-radius: 999px !important;
color: #f7e8bc !important;
background: rgba(244, 223, 174, 0.08) !important;
font-size: 0.74rem !important;
font-weight: 950 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
}
body.vertical-page--restaurant .restaurant-depth__grid h3,
body.vertical-page--restaurant .restaurant-command-center__cards h3 {
margin: 0 !important;
color: #fff !important;
font-size: 1.15rem !important;
line-height: 1.15 !important;
}
body.vertical-page--restaurant .restaurant-depth__grid p,
body.vertical-page--restaurant .restaurant-command-center__cards p {
margin: 0 !important;
color: rgba(225, 231, 242, 0.72) !important;
line-height: 1.45 !important;
font-size: 0.94rem !important;
}
body.vertical-page--restaurant .restaurant-depth__timeline {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 14px !important;
}
body.vertical-page--restaurant .restaurant-depth__timeline article {
position: relative !important;
min-height: 190px !important;
padding: 22px !important;
border: 1px solid rgba(244, 223, 174, 0.16) !important;
border-radius: 22px !important;
background: rgba(10, 14, 27, 0.78) !important;
}
body.vertical-page--restaurant .restaurant-depth__timeline article:last-child {
border-color: rgba(244, 223, 174, 0.34) !important;
background:
radial-gradient(circle at top right, rgba(244, 223, 174, 0.14), transparent 14rem),
rgba(10, 14, 27, 0.84) !important;
}
body.vertical-page--restaurant .restaurant-depth__timeline span {
color: rgba(244, 223, 174, 0.82) !important;
font-weight: 950 !important;
text-transform: uppercase !important;
letter-spacing: 0.06em !important;
font-size: 0.78rem !important;
}
body.vertical-page--restaurant .restaurant-depth__timeline strong {
display: block !important;
margin: 12px 0 8px !important;
color: #fff !important;
font-size: 1.35rem !important;
line-height: 1.1 !important;
}
body.vertical-page--restaurant .restaurant-depth__timeline p {
margin: 0 !important;
color: rgba(225, 231, 242, 0.72) !important;
line-height: 1.48 !important;
}
body.live-demo-body .voice-actions {
display: flex !important;
gap: 10px !important;
align-items: center !important;
}
body.live-demo-body .voice-actions .btn {
min-height: 48px !important;
flex: 0 0 auto !important;
border-radius: 16px !important;
padding-inline: 18px !important;
}
body.live-demo-body .voice-actions .btn-primary {
min-width: 220px !important;
}
body.live-demo-body .voice-actions .btn-danger:disabled,
body.live-demo-body .voice-actions .btn-secondary:disabled {
display: none !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-page-nav {
margin: -18px auto 18px !important;
position: relative !important;
z-index: 3 !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-page-nav__inner {
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
gap: 10px !important;
padding: 10px !important;
width: min(1120px, calc(100% - 32px)) !important;
border: 1px solid rgba(244, 223, 174, 0.16) !important;
border-radius: 22px !important;
background:
linear-gradient(135deg, rgba(244, 223, 174, 0.08), rgba(114, 146, 255, 0.05)),
rgba(8, 12, 24, 0.72) !important;
box-shadow: 0 22px 70px rgba(0, 0, 0, 0.22) !important;
backdrop-filter: blur(16px) !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-page-nav__inner a {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 42px !important;
padding: 0 15px !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
border-radius: 999px !important;
color: rgba(235, 239, 248, 0.78) !important;
font-size: 0.9rem !important;
font-weight: 850 !important;
text-decoration: none !important;
background: rgba(255, 255, 255, 0.04) !important;
transition: border-color 0.18s ease, color 0.18s ease, transform 0.18s ease, background 0.18s ease !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-page-nav__inner a:hover,
body.vertical-page:not(.home-gateway-page) .vertical-page-nav__inner a.is-active {
color: #fff !important;
border-color: rgba(244, 223, 174, 0.48) !important;
background: rgba(244, 223, 174, 0.12) !important;
transform: translateY(-1px) !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-feature-arguments {
padding-top: 24px !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-capability-arguments {
padding-top: 26px !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-capability-arguments .home-section__head {
max-width: 840px !important;
margin-inline: auto !important;
text-align: center !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-capability-arguments .home-section__head h2 {
max-width: 20ch !important;
margin-inline: auto !important;
font-size: clamp(2.05rem, 3.6vw, 3.85rem) !important;
line-height: 1 !important;
letter-spacing: 0 !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-capability-arguments .home-section__head p {
max-width: 700px !important;
margin-inline: auto !important;
color: rgba(225, 231, 242, 0.72) !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-capability-arguments__grid {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 14px !important;
margin-top: 28px !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-capability-arguments__grid article {
display: grid !important;
grid-template-columns: auto minmax(0, 1fr) !important;
align-items: start !important;
column-gap: 16px !important;
row-gap: 6px !important;
min-height: 148px !important;
padding: 22px !important;
border: 1px solid rgba(244, 223, 174, 0.18) !important;
border-radius: 24px !important;
background:
linear-gradient(135deg, rgba(244, 223, 174, 0.1), transparent 42%),
rgba(12, 16, 31, 0.82) !important;
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.22) !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-capability-arguments__grid article span {
grid-row: span 2 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 92px !important;
min-height: 42px !important;
padding: 0 12px !important;
border: 1px solid rgba(244, 223, 174, 0.34) !important;
border-radius: 999px !important;
color: rgba(244, 223, 174, 0.95) !important;
font-size: 0.75rem !important;
font-weight: 950 !important;
text-transform: uppercase !important;
letter-spacing: 0.05em !important;
background: rgba(244, 223, 174, 0.08) !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-capability-arguments__grid article h3 {
margin: 0 !important;
color: #fff !important;
font-size: clamp(1.15rem, 1.6vw, 1.42rem) !important;
line-height: 1.08 !important;
letter-spacing: 0 !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-capability-arguments__grid article p {
margin: 0 !important;
color: rgba(225, 231, 242, 0.74) !important;
font-size: 0.96rem !important;
line-height: 1.46 !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-feature-arguments .home-section__head {
max-width: 820px !important;
margin-inline: auto !important;
text-align: center !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-feature-arguments .home-section__head h2 {
max-width: 18ch !important;
margin-inline: auto !important;
font-size: clamp(2.1rem, 4vw, 4.1rem) !important;
line-height: 0.98 !important;
letter-spacing: 0 !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-feature-arguments .home-section__head p {
max-width: 680px !important;
margin-inline: auto !important;
color: rgba(225, 231, 242, 0.72) !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-feature-arguments__grid {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 14px !important;
margin-top: 26px !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-feature-arguments__grid article {
min-height: 210px !important;
padding: 22px !important;
border: 1px solid rgba(244, 223, 174, 0.16) !important;
border-radius: 24px !important;
background:
radial-gradient(circle at 100% 0%, rgba(244, 223, 174, 0.11), transparent 12rem),
linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
rgba(11, 15, 29, 0.78) !important;
box-shadow: 0 22px 60px rgba(0, 0, 0, 0.22) !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-feature-arguments__grid article span {
display: inline-flex !important;
width: fit-content !important;
max-width: 100% !important;
margin-bottom: 18px !important;
padding: 7px 10px !important;
border: 1px solid rgba(244, 223, 174, 0.28) !important;
border-radius: 999px !important;
color: rgba(244, 223, 174, 0.92) !important;
font-size: 0.74rem !important;
font-weight: 950 !important;
text-transform: uppercase !important;
letter-spacing: 0.06em !important;
background: rgba(244, 223, 174, 0.08) !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-feature-arguments__grid article h3 {
margin: 0 0 10px !important;
color: #fff !important;
font-size: clamp(1.15rem, 1.6vw, 1.45rem) !important;
line-height: 1.08 !important;
letter-spacing: 0 !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-feature-arguments__grid article p {
margin: 0 !important;
color: rgba(225, 231, 242, 0.74) !important;
line-height: 1.48 !important;
font-size: 0.98rem !important;
}
body.live-demo-body .live-demo-vertical-nav {
margin: 6px 0 22px !important;
}
body.live-demo-body .live-demo-vertical-nav .vertical-page-nav__inner {
width: 100% !important;
}
body.live-demo-body .live-demo-feature-strip {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 12px !important;
margin: 0 0 24px !important;
}
body.live-demo-body .live-demo-feature-strip article {
padding: 18px !important;
border: 1px solid rgba(244, 223, 174, 0.16) !important;
border-radius: 22px !important;
background:
radial-gradient(circle at top right, rgba(244, 223, 174, 0.1), transparent 10rem),
rgba(11, 15, 29, 0.76) !important;
}
body.live-demo-body .live-demo-feature-strip span {
display: block !important;
margin-bottom: 10px !important;
color: rgba(244, 223, 174, 0.86) !important;
font-size: 0.74rem !important;
font-weight: 950 !important;
text-transform: uppercase !important;
letter-spacing: 0.06em !important;
}
body.live-demo-body .live-demo-feature-strip strong {
display: block !important;
color: #fff !important;
font-size: 1.08rem !important;
line-height: 1.12 !important;
}
body.live-demo-body .live-demo-feature-strip p {
margin: 8px 0 0 !important;
color: rgba(225, 231, 242, 0.72) !important;
line-height: 1.42 !important;
font-size: 0.92rem !important;
}
@media (max-width: 860px) {
body.vertical-page:not(.home-gateway-page) .vertical-hero--compact .vertical-hero__grid {
grid-template-columns: 1fr !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-page-summary--lean {
min-height: 0 !important;
}
}
@media (max-width: 640px) {
body.landing-refresh:not(.home-gateway-page) .legal-hero,
body.vertical-page:not(.home-gateway-page) .vertical-hero {
padding-block: 32px !important;
}
body.landing-refresh:not(.home-gateway-page) .legal-hero__card,
body.vertical-page:not(.home-gateway-page) .vertical-hero--compact .vertical-hero__grid,
body.landing-refresh:not(.home-gateway-page) .home-cta__card {
padding: 20px !important;
border-radius: 22px !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-hero--compact .vertical-hero__copy h1,
body.landing-refresh:not(.home-gateway-page) .legal-hero__card h1 {
max-width: 11ch !important;
font-size: clamp(2.25rem, 11vw, 3.15rem) !important;
text-align: left !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-hero__actions,
body.landing-refresh:not(.home-gateway-page) .home-hero__actions,
body.landing-refresh:not(.home-gateway-page) .home-cta__actions,
body.live-demo-body .voice-actions {
display: grid !important;
grid-template-columns: 1fr !important;
width: 100% !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-hero__actions .btn,
body.landing-refresh:not(.home-gateway-page) .home-hero__actions .btn,
body.landing-refresh:not(.home-gateway-page) .home-cta__actions .btn,
body.live-demo-body .voice-actions .btn,
body.live-demo-body .voice-actions .btn-primary {
width: 100% !important;
min-width: 0 !important;
white-space: normal !important;
overflow-wrap: anywhere !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-page-proof span,
body.vertical-page:not(.home-gateway-page) .vertical-page-summary__flow span {
flex: 1 1 100% !important;
text-align: center !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-page-proof {
width: 100% !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-page-summary__flow span {
font-size: 0.72rem !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-roi-card__math {
grid-template-columns: 1fr !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-pricing-grid > article:not(.vertical-roi-card) {
overflow: hidden !important;
padding: 26px 24px !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-pricing-grid > article:not(.vertical-roi-card) h2 {
font-size: clamp(2.15rem, 8.6vw, 2.8rem) !important;
line-height: 1.16 !important;
max-width: 12ch !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-pricing-grid > article:not(.vertical-roi-card) ul {
display: grid !important;
gap: 10px !important;
margin: 18px 0 0 !important;
padding-left: 1.15rem !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-pricing-grid > article:not(.vertical-roi-card) li {
padding-left: 0.25rem !important;
color: rgba(248, 250, 252, 0.9) !important;
font-size: clamp(1.05rem, 4.9vw, 1.28rem) !important;
line-height: 1.42 !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-value-strip {
grid-template-columns: 1fr !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-page-nav {
margin-top: -8px !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-page-nav__inner {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
justify-content: stretch !important;
flex-wrap: initial !important;
overflow: visible !important;
padding: 8px !important;
border-radius: 18px !important;
scroll-snap-type: none !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-page-nav__inner a {
flex: initial !important;
width: 100% !important;
min-width: 0 !important;
min-height: 44px !important;
padding-inline: 10px !important;
line-height: 1.15 !important;
white-space: normal !important;
text-align: center !important;
scroll-snap-align: unset !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-feature-arguments {
padding-top: 10px !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-capability-arguments {
padding-top: 10px !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-capability-arguments .home-section__head {
text-align: left !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-capability-arguments .home-section__head h2,
body.vertical-page:not(.home-gateway-page) .vertical-capability-arguments .home-section__head p {
margin-inline: 0 !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-capability-arguments__grid {
grid-template-columns: 1fr !important;
gap: 10px !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-capability-arguments__grid article {
grid-template-columns: 1fr !important;
min-height: 0 !important;
padding: 18px !important;
border-radius: 20px !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-capability-arguments__grid article span {
grid-row: auto !important;
min-width: 0 !important;
min-height: 34px !important;
width: fit-content !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-feature-arguments .home-section__head {
text-align: left !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-feature-arguments .home-section__head h2,
body.vertical-page:not(.home-gateway-page) .vertical-feature-arguments .home-section__head p {
margin-inline: 0 !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-feature-arguments__grid {
grid-template-columns: 1fr !important;
gap: 10px !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-feature-arguments__grid article {
min-height: 0 !important;
padding: 18px !important;
border-radius: 20px !important;
}
body.live-demo-body .live-demo-feature-strip {
grid-template-columns: 1fr !important;
gap: 10px !important;
}
body.live-demo-body .live-demo-feature-strip article {
padding: 16px !important;
border-radius: 18px !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-value-strip article {
min-height: 0 !important;
}
body.vertical-page--restaurant .restaurant-depth__grid,
body.vertical-page--restaurant .restaurant-depth__grid--wide,
body.vertical-page--restaurant .restaurant-depth__timeline,
body.vertical-page--restaurant .restaurant-command-center__cards {
grid-template-columns: 1fr !important;
}
body.vertical-page--restaurant .restaurant-depth__grid article,
body.vertical-page--restaurant .restaurant-command-center__cards article,
body.vertical-page--restaurant .restaurant-depth__timeline article {
min-height: 0 !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-integrations-grid article p,
body.vertical-page:not(.home-gateway-page) .home-faq-grid article p,
body.landing-refresh:not(.home-gateway-page) .home-faq-grid article p,
body.landing-refresh:not(.home-gateway-page) .pricing-clarity-card p,
body.landing-refresh:not(.home-gateway-page) .pricing-driver p {
-webkit-line-clamp: 2 !important;
}
}
/* Final mobile override for the active acquisition tunnel and live demo. */
@media (max-width: 720px) {
body.landing-page,
body.landing-page main {
width: 100% !important;
max-width: 100% !important;
overflow-x: hidden !important;
}
body.live-demo-body .live-demo-page,
body.live-demo-body .live-demo-shell,
body.home-gateway-page .home-gateway-shell {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
overflow-x: hidden !important;
}
body.live-demo-body .live-demo-shell,
body.home-gateway-page .home-gateway-shell {
padding-inline: 12px !important;
}
body.live-demo-body :is(.live-demo-personalizer, .live-demo-phone, .live-demo-console, .voice-panel, .live-demo-transcript-section, .live-demo-after--simple),
body.home-gateway-page :is(.home-studio-suite, .home-studio-stage, .home-studio-live, .home-studio-test-suite, .home-studio-signup-step, .home-studio-test-card) {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin-inline: auto !important;
box-sizing: border-box !important;
}
body.live-demo-body .live-demo-personalizer,
body.live-demo-body .live-demo-phone,
body.home-gateway-page .home-studio-test-layout,
body.home-gateway-page .home-studio-live__grid {
display: grid !important;
grid-template-columns: 1fr !important;
}
body.live-demo-body .live-demo-personalizer {
padding: 18px !important;
border-radius: 22px !important;
}
body.live-demo-body .live-demo-personalizer__copy h1 {
max-width: 100% !important;
font-size: clamp(2rem, 9vw, 2.65rem) !important;
line-height: 1.04 !important;
}
body.live-demo-body .live-demo-personalizer__copy p,
body.live-demo-body .live-demo-business-status,
body.live-demo-body .live-demo-feature-strip p {
display: -webkit-box !important;
-webkit-box-orient: vertical !important;
-webkit-line-clamp: 2 !important;
overflow: hidden !important;
}
body.live-demo-body .live-demo-business-search form {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 10px !important;
}
body.live-demo-body .live-demo-business-search input,
body.live-demo-body .live-demo-business-search button {
width: 100% !important;
min-width: 0 !important;
}
body.live-demo-body .live-demo-vertical-nav,
body.vertical-page:not(.home-gateway-page) .vertical-page-nav {
width: 100% !important;
max-width: 100% !important;
overflow: hidden !important;
}
body.live-demo-body .live-demo-vertical-nav .vertical-page-nav__inner,
body.vertical-page:not(.home-gateway-page) .vertical-page-nav__inner,
.public-product-nav__inner {
width: calc(100% - 24px) !important;
max-width: calc(100% - 24px) !important;
display: flex !important;
flex-wrap: nowrap !important;
justify-content: flex-start !important;
overflow-x: auto !important;
scrollbar-width: none !important;
}
body.live-demo-body .live-demo-vertical-nav .vertical-page-nav__inner::-webkit-scrollbar,
body.vertical-page:not(.home-gateway-page) .vertical-page-nav__inner::-webkit-scrollbar,
.public-product-nav__inner::-webkit-scrollbar {
display: none !important;
}
body.live-demo-body .live-demo-vertical-nav .vertical-page-nav__inner a,
body.vertical-page:not(.home-gateway-page) .vertical-page-nav__inner a,
.public-product-nav__inner a {
flex: 0 0 auto !important;
white-space: nowrap !important;
}
body.home-gateway-page .home-studio-test-card--number {
display: grid !important;
align-content: center !important;
justify-items: center !important;
text-align: center !important;
gap: 14px !important;
}
body.home-gateway-page .home-studio-test-card--number > a {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: auto !important;
max-width: 100% !important;
min-height: 44px !important;
padding: 10px 16px !important;
font-size: clamp(1.25rem, 7vw, 1.75rem) !important;
line-height: 1 !important;
letter-spacing: 0 !important;
white-space: nowrap !important;
word-break: keep-all !important;
overflow-wrap: normal !important;
}
body.home-gateway-page .home-studio-test-card--number > a.is-empty {
font-size: 0.9rem !important;
line-height: 1.08 !important;
white-space: normal !important;
}
body.home-gateway-page .home-studio-test-card--number p {
max-width: 22rem !important;
margin-inline: auto !important;
font-size: 0.98rem !important;
line-height: 1.42 !important;
}
body.home-gateway-page .home-studio-live__head {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 16px !important;
}
body.home-gateway-page .home-studio-live__head strong {
display: -webkit-box !important;
-webkit-line-clamp: 5 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
font-size: clamp(1.35rem, 7.2vw, 1.85rem) !important;
line-height: 1.1 !important;
}
body.home-gateway-page .home-studio-live__head em {
justify-self: start !important;
width: fit-content !important;
min-width: 72px !important;
min-height: 42px !important;
padding: 10px 16px !important;
white-space: nowrap !important;
}
body.home-gateway-page .home-studio-live__section-head {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 10px !important;
text-align: center !important;
}
body.home-gateway-page .home-studio-live__section-head > span {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
flex-wrap: nowrap !important;
width: 100% !important;
}
body.home-gateway-page .home-studio-live__section-head strong {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex: 0 0 auto !important;
min-width: 34px !important;
height: 34px !important;
padding: 0 10px !important;
white-space: nowrap !important;
word-break: keep-all !important;
overflow-wrap: normal !important;
}
body.home-gateway-page .home-studio-live__section-head button {
width: 100% !important;
min-height: 42px !important;
}
body.home-gateway-page .home-gateway-source-fallback,
body.home-gateway-page .home-gateway-source-grid {
grid-template-columns: 1fr !important;
}
}
@media (max-width: 420px) {
body.live-demo-body .live-demo-shell,
body.home-gateway-page .home-gateway-shell {
padding-inline: 10px !important;
}
body.home-gateway-page .home-studio-test-card--number > a:not(.is-empty) {
font-size: clamp(1.16rem, 6.6vw, 1.46rem) !important;
padding-inline: 12px !important;
}
body.home-gateway-page .home-studio-live__section-head > span {
font-size: 0.95rem !important;
}
}
/* Homepage: short product explanation before the agent builder. */
body.home-gateway-page .home-product-intro {
display: grid;
grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
gap: clamp(18px, 3vw, 28px);
align-items: stretch;
margin: clamp(12px, 2.5vw, 24px) auto clamp(22px, 4vw, 42px);
padding: clamp(18px, 3vw, 28px);
border: 1px solid rgba(244, 223, 174, 0.18);
border-radius: 28px;
background:
radial-gradient(circle at top left, rgba(244, 223, 174, 0.12), transparent 18rem),
linear-gradient(135deg, rgba(18, 25, 42, 0.94), rgba(8, 13, 26, 0.9));
box-shadow: 0 28px 80px rgba(0, 0, 0, 0.28);
}
body.home-gateway-page .home-product-intro__copy {
display: grid;
align-content: center;
gap: 12px;
min-width: 0;
}
body.home-gateway-page .home-product-intro__copy h2 {
max-width: 620px;
margin: 0;
color: #f8fafc;
font-size: clamp(1.9rem, 3.2vw, 3.2rem);
line-height: 1.02;
letter-spacing: 0;
}
body.home-gateway-page .home-product-intro__copy p {
max-width: 560px;
margin: 0;
color: rgba(226, 232, 240, 0.76);
font-size: clamp(1rem, 1.4vw, 1.14rem);
line-height: 1.55;
}
body.home-gateway-page .home-product-intro__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
body.home-gateway-page .home-product-intro__grid article {
display: grid;
align-content: start;
gap: 10px;
min-width: 0;
min-height: 210px;
padding: 18px;
border: 1px solid rgba(148, 163, 184, 0.14);
border-radius: 20px;
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015)),
rgba(10, 15, 28, 0.72);
}
body.home-gateway-page .home-product-intro__grid article span {
display: inline-flex;
align-items: center;
justify-content: center;
width: max-content;
min-width: 46px;
height: 40px;
padding: 0 10px;
border: 1px solid rgba(244, 223, 174, 0.32);
border-radius: 12px;
color: #f4dfae;
font-size: 0.78rem;
font-weight: 950;
line-height: 1;
white-space: nowrap;
background: rgba(244, 223, 174, 0.08);
}
body.home-gateway-page .home-product-intro__grid article strong {
color: #f8fafc;
font-size: 1.08rem;
line-height: 1.18;
}
body.home-gateway-page .home-product-intro__grid article p {
margin: 0;
color: rgba(226, 232, 240, 0.68);
line-height: 1.45;
}
@media (max-width: 980px) {
body.home-gateway-page .home-product-intro {
grid-template-columns: 1fr;
}
}
@media (max-width: 720px) {
body.home-gateway-page .home-product-intro {
padding: 16px !important;
border-radius: 22px !important;
}
body.home-gateway-page .home-product-intro__grid {
grid-template-columns: 1fr !important;
}
body.home-gateway-page .home-product-intro__grid article {
min-height: 0 !important;
padding: 16px !important;
gap: 12px !important;
}
body.home-gateway-page .home-product-intro__grid article span {
min-width: 50px;
height: 42px;
padding-inline: 12px;
}
}
body.home-gateway-page .home-product-intro__visual {
position: relative;
display: grid;
grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
gap: clamp(20px, 3vw, 32px);
align-items: center;
min-width: 0;
}
body.home-gateway-page .home-product-intro__visual::before {
content: "";
position: absolute;
inset: 50% auto auto 47%;
width: min(18vw, 190px);
height: 2px;
transform: translate(-50%, -50%);
border-radius: 999px;
background: linear-gradient(90deg, rgba(96, 165, 250, 0), rgba(124, 92, 255, 0.9), rgba(244, 223, 174, 0));
box-shadow: 0 0 28px rgba(124, 92, 255, 0.35);
}
body.home-gateway-page .home-product-intro__visual::after {
content: "→";
position: absolute;
z-index: 2;
inset: 50% auto auto 48%;
width: 50px;
height: 50px;
display: grid;
place-items: center;
transform: translate(-50%, -50%);
border: 1px solid rgba(244, 223, 174, 0.34);
border-radius: 999px;
color: #fff7df;
font-size: 1.45rem;
font-weight: 950;
background:
radial-gradient(circle at 30% 25%, rgba(255,255,255,0.38), transparent 1.2rem),
linear-gradient(135deg, rgba(31, 124, 255, 0.96), rgba(124, 58, 237, 0.92));
box-shadow: 0 18px 44px rgba(46, 106, 255, 0.28);
animation: homeFlowArrow 1.9s ease-in-out infinite;
}
body.home-gateway-page .home-product-phone,
body.home-gateway-page .home-product-result {
position: relative;
z-index: 1;
min-width: 0;
border: 1px solid rgba(244, 223, 174, 0.18);
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
}
body.home-gateway-page .home-product-phone {
position: relative;
display: grid;
justify-items: center;
justify-self: center;
align-content: center;
gap: clamp(14px, 2.2vw, 20px);
width: min(100%, 244px);
aspect-ratio: 9 / 16.6;
min-height: 0;
padding: clamp(34px, 5vw, 42px) clamp(20px, 3vw, 24px) clamp(34px, 4.5vw, 40px);
border: 1px solid rgba(203, 213, 225, 0.24);
border-radius: 34px;
color: #f8fafc;
text-align: center;
background:
radial-gradient(ellipse at 50% 18%, rgba(124, 92, 255, 0.2), transparent 5.6rem),
radial-gradient(ellipse at 50% 74%, rgba(16, 185, 129, 0.07), transparent 8rem),
linear-gradient(180deg, #101935 0%, #071027 55%, #030714 100%);
box-shadow:
0 30px 80px rgba(0, 0, 0, 0.42),
0 0 0 8px rgba(148, 163, 184, 0.045),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
transform: none;
animation: homeIncomingScreen 3.6s ease-in-out infinite;
}
body.home-gateway-page .home-product-phone__logo {
position: relative;
z-index: 2;
width: 58px;
height: 58px;
display: grid;
place-items: center;
overflow: hidden;
border-radius: 16px;
background: transparent;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28);
}
body.home-gateway-page .home-product-phone__logo img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transform: none;
}
body.home-gateway-page .home-product-phone span {
color: rgba(244, 223, 174, 0.88);
font-size: 0.78rem;
font-weight: 950;
letter-spacing: 0.08em;
text-transform: uppercase;
}
body.home-gateway-page .home-product-phone span {
margin-top: 2px;
color: rgba(244, 223, 174, 0.92);
font-size: 0.84rem;
letter-spacing: 0.11em;
}
body.home-gateway-page .home-product-phone strong {
color: #fff;
font-size: clamp(1.06rem, 1.65vw, 1.25rem);
font-weight: 950;
letter-spacing: 0.02em;
}
body.home-gateway-page .home-product-phone small {
color: rgba(226, 232, 240, 0.58);
font-weight: 800;
max-width: 180px;
line-height: 1.32;
}
body.home-gateway-page .home-product-wave {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
width: min(100%, 186px);
height: 72px;
filter: drop-shadow(0 0 15px rgba(124, 92, 255, 0.48));
}
body.home-gateway-page .home-product-wave i {
display: block;
width: 4px;
height: var(--wave-h, 28px);
border-radius: 999px;
background: linear-gradient(180deg, #60a5fa, #7c3aed 54%, #a78bfa);
transform-origin: center;
animation: homeIncomingWave 1.4s ease-in-out infinite;
}
body.home-gateway-page .home-product-wave i:nth-child(1) { --wave-h: 20px; animation-delay: -0.44s; }
body.home-gateway-page .home-product-wave i:nth-child(2) { --wave-h: 30px; animation-delay: -0.36s; }
body.home-gateway-page .home-product-wave i:nth-child(3) { --wave-h: 42px; animation-delay: -0.28s; }
body.home-gateway-page .home-product-wave i:nth-child(4) { --wave-h: 28px; animation-delay: -0.2s; }
body.home-gateway-page .home-product-wave i:nth-child(5) { --wave-h: 50px; animation-delay: -0.12s; }
body.home-gateway-page .home-product-wave i:nth-child(6) { --wave-h: 36px; animation-delay: -0.04s; }
body.home-gateway-page .home-product-wave i:nth-child(7) { --wave-h: 64px; width: 5px; animation-delay: 0.04s; }
body.home-gateway-page .home-product-wave i:nth-child(8) { --wave-h: 76px; width: 5px; animation-delay: 0.12s; }
body.home-gateway-page .home-product-wave i:nth-child(9) { --wave-h: 56px; animation-delay: 0.04s; }
body.home-gateway-page .home-product-wave i:nth-child(10) { --wave-h: 38px; animation-delay: -0.04s; }
body.home-gateway-page .home-product-wave i:nth-child(11) { --wave-h: 48px; animation-delay: -0.12s; }
body.home-gateway-page .home-product-wave i:nth-child(12) { --wave-h: 34px; animation-delay: -0.2s; }
body.home-gateway-page .home-product-wave i:nth-child(13) { --wave-h: 42px; animation-delay: -0.28s; }
body.home-gateway-page .home-product-wave i:nth-child(14) { --wave-h: 30px; animation-delay: -0.36s; }
body.home-gateway-page .home-product-wave i:nth-child(15) { --wave-h: 20px; animation-delay: -0.44s; }
body.home-gateway-page .home-product-phone__actions {
display: flex;
align-items: center;
justify-content: center;
gap: 36px;
margin-top: 10px;
}
body.home-gateway-page .home-product-phone__actions b {
position: relative;
width: 54px;
height: 54px;
display: grid;
place-items: center;
border-radius: 999px;
box-shadow:
0 18px 34px rgba(0, 0, 0, 0.34),
inset 0 1px 0 rgba(255, 255, 255, 0.32);
will-change: transform, filter, box-shadow;
}
body.home-gateway-page .home-product-phone__actions svg {
width: 25px;
height: 25px;
fill: #fff;
stroke: none;
}
body.home-gateway-page .home-product-phone__actions .is-decline {
background:
radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.35), transparent 1rem),
linear-gradient(135deg, #f87171, #dc2626);
animation: homeCallDecline 2.9s ease-in-out infinite;
}
body.home-gateway-page .home-product-phone__actions .is-decline::before {
content: none;
}
body.home-gateway-page .home-product-phone__actions .is-decline svg {
transform: rotate(135deg);
}
body.home-gateway-page .home-product-phone__actions .is-accept {
background:
radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.38), transparent 1rem),
linear-gradient(135deg, #86efac, #22c55e);
animation: homeCallAccept 2.9s ease-in-out 0.34s infinite;
}
body.home-gateway-page .home-product-phone__actions .is-accept::before {
content: none;
}
body.home-gateway-page .home-product-phone__actions .is-accept svg {
transform: rotate(-16deg);
}
body.home-gateway-page .home-product-result {
position: relative;
display: grid;
justify-items: center;
gap: 18px;
padding: clamp(28px, 4vw, 38px) clamp(22px, 3.8vw, 34px);
border-radius: 34px;
background:
radial-gradient(circle at 50% 0%, rgba(124, 92, 255, 0.2), transparent 10rem),
linear-gradient(180deg, rgba(248, 250, 252, 0.095), rgba(248, 250, 252, 0.052)),
rgba(7, 12, 28, 0.92);
}
body.home-gateway-page .home-product-result::before {
content: "";
position: absolute;
inset: -1px;
pointer-events: none;
border-radius: inherit;
background: linear-gradient(135deg, rgba(244, 223, 174, 0.2), transparent 28%, rgba(124, 92, 255, 0.14));
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
-webkit-mask-composite: xor;
padding: 1px;
}
body.home-gateway-page .home-product-result::after {
content: none;
}
body.home-gateway-page .home-product-result__icon {
width: 72px;
height: 72px;
display: grid;
place-items: center;
border-radius: 999px;
color: #fff;
background:
radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.36), transparent 1.35rem),
linear-gradient(145deg, #7dd3fc 0%, #4f46e5 45%, #2e1aae 100%);
box-shadow:
0 18px 44px rgba(46, 106, 255, 0.32),
0 0 0 8px rgba(124, 92, 255, 0.09),
inset 0 1px 0 rgba(255, 255, 255, 0.34);
}
body.home-gateway-page .home-product-result__icon svg {
width: 34px;
height: 34px;
fill: currentColor;
}
body.home-gateway-page .home-product-result__title {
display: grid;
gap: 2px;
text-align: center;
color: #fff;
font-size: clamp(1.62rem, 3.2vw, 2.45rem);
line-height: 1.02;
font-weight: 950;
}
body.home-gateway-page .home-product-result__title span,
body.home-gateway-page .home-product-result__title b {
display: block;
}
body.home-gateway-page .home-product-result__title b {
color: #8ea7ff;
}
body.home-gateway-page .home-product-result ul {
display: grid;
gap: 12px;
margin: 0;
padding: 4px 0 0;
list-style: none;
width: min(100%, 320px);
}
body.home-gateway-page .home-product-result li {
min-width: 0;
display: grid;
grid-template-columns: 24px minmax(0, 1fr);
align-items: center;
gap: 12px;
padding: 0;
border: 0;
border-radius: 0;
color: rgba(248, 250, 252, 0.94);
font-weight: 850;
background: transparent;
}
body.home-gateway-page .home-product-result li svg {
width: 22px;
height: 22px;
fill: rgba(244, 223, 174, 0.92);
filter: drop-shadow(0 0 10px rgba(244, 223, 174, 0.16));
}
body.home-gateway-page .home-product-result li span {
min-width: 0;
color: rgba(248, 250, 252, 0.94);
font-size: clamp(1rem, 1.35vw, 1.12rem);
line-height: 1.2;
}
body.home-gateway-page .home-product-result__sms {
width: min(100%, 350px);
display: grid;
grid-template-columns: 38px minmax(0, 1fr);
align-items: center;
gap: 12px;
margin-top: 2px;
padding: 15px 16px;
border: 1px solid rgba(142, 167, 255, 0.2);
border-radius: 22px;
color: #eef2ff;
background:
linear-gradient(135deg, rgba(124, 92, 255, 0.18), rgba(244, 223, 174, 0.08)),
rgba(124, 92, 255, 0.08);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
body.home-gateway-page .home-product-result__sms svg {
width: 38px;
height: 38px;
fill: #7c5cff;
filter: drop-shadow(0 0 12px rgba(124, 92, 255, 0.3));
}
body.home-gateway-page .home-product-result__sms span {
color: #f8fafc;
font-size: clamp(1rem, 1.35vw, 1.12rem);
line-height: 1.22;
font-weight: 850;
}
body.home-gateway-page .home-product-intro__grid {
grid-column: 1 / -1;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
body.home-gateway-page .home-product-intro__grid article {
min-height: 150px !important;
}
body.home-gateway-page .home-product-flow span:not(:last-child)::after {
content: "";
position: absolute;
z-index: 2;
top: 50%;
right: -16px;
width: 18px;
height: 2px;
transform: translateY(-50%);
border-radius: 999px;
background: linear-gradient(90deg, rgba(244, 223, 174, 0.44), rgba(124, 92, 255, 0.4));
}
@media (max-width: 980px) {
body.home-gateway-page .home-product-intro__visual,
body.home-gateway-page .home-product-flow {
grid-template-columns: 1fr;
}
body.home-gateway-page .home-product-intro__visual {
gap: 42px;
}
body.home-gateway-page .home-product-intro__visual::before {
display: none;
}
body.home-gateway-page .home-product-intro__visual::after {
display: none;
}
body.home-gateway-page .home-product-intro__grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
@media (max-width: 720px) {
body.home-gateway-page .home-product-intro__grid {
grid-template-columns: 1fr !important;
}
body.home-gateway-page .home-product-phone {
width: min(86vw, 244px);
aspect-ratio: 9 / 16.8;
min-height: 0;
border-radius: 34px;
padding: 34px 20px 34px;
gap: 16px;
margin-bottom: 16px;
transform: none;
box-shadow:
0 28px 80px rgba(0, 0, 0, 0.38),
0 0 0 7px rgba(148, 163, 184, 0.045),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
body.home-gateway-page .home-product-wave {
width: min(100%, 172px);
height: 68px;
gap: 4px;
}
body.home-gateway-page .home-product-phone__actions {
gap: 32px;
margin-top: 12px;
}
body.home-gateway-page .home-product-phone__actions b {
width: 50px;
height: 50px;
}
body.home-gateway-page .home-product-result {
margin-top: 12px;
padding: 44px 20px 24px;
border-radius: 28px;
}
body.home-gateway-page .home-product-result__icon {
width: 66px;
height: 66px;
}
body.home-gateway-page .home-product-result__title {
font-size: clamp(1.7rem, 8vw, 2.15rem);
}
body.home-gateway-page .home-product-result ul {
width: min(100%, 280px);
}
body.home-gateway-page .home-product-result__sms {
width: min(100%, 300px);
}
body.home-gateway-page .home-product-result::after {
content: "↓";
position: absolute;
z-index: 3;
top: -46px;
left: 50%;
width: 52px;
height: 52px;
display: grid;
place-items: center;
transform: translateX(-50%);
border: 1px solid rgba(244, 223, 174, 0.34);
border-radius: 999px;
color: #fff7df;
font-size: 1.45rem;
font-weight: 950;
background:
radial-gradient(circle at 30% 25%, rgba(255,255,255,0.38), transparent 1.2rem),
linear-gradient(135deg, rgba(31, 124, 255, 0.96), rgba(124, 58, 237, 0.92));
box-shadow: 0 18px 44px rgba(46, 106, 255, 0.28);
animation: homeFlowArrowMobile 1.9s ease-in-out infinite;
}
body.home-gateway-page .home-product-flow span:not(:last-child)::after {
top: auto;
right: auto;
bottom: -14px;
left: 31px;
width: 2px;
height: 14px;
transform: none;
background: linear-gradient(180deg, rgba(244, 223, 174, 0.44), rgba(124, 92, 255, 0.4));
}
}
@keyframes homeIncomingScreen {
0%, 100% {
box-shadow:
0 30px 80px rgba(0, 0, 0, 0.42),
0 0 0 8px rgba(148, 163, 184, 0.045),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
border-color: rgba(244, 223, 174, 0.18);
}
50% {
box-shadow:
0 34px 92px rgba(92, 88, 255, 0.24),
0 0 0 8px rgba(124, 92, 255, 0.055),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
border-color: rgba(244, 223, 174, 0.3);
}
}
@keyframes homeIncomingWave {
0%, 100% {
transform: scaleY(0.72);
opacity: 0.82;
}
50% {
transform: scaleY(1.08);
opacity: 1;
}
}
@keyframes homeCallDecline {
0%, 100% {
transform: translateY(0) scale(1);
filter: saturate(1);
box-shadow:
0 18px 34px rgba(0, 0, 0, 0.34),
0 0 0 0 rgba(248, 113, 113, 0),
inset 0 1px 0 rgba(255, 255, 255, 0.32);
}
44% {
transform: translateY(-3px) scale(1.075);
filter: saturate(1.14);
box-shadow:
0 22px 44px rgba(0, 0, 0, 0.38),
0 0 0 9px rgba(248, 113, 113, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.36);
}
}
@keyframes homeCallAccept {
0%, 100% {
transform: translateY(0) scale(1);
filter: saturate(1);
box-shadow:
0 18px 34px rgba(0, 0, 0, 0.34),
0 0 0 0 rgba(34, 197, 94, 0),
inset 0 1px 0 rgba(255, 255, 255, 0.32);
}
44% {
transform: translateY(-3px) scale(1.09);
filter: saturate(1.16);
box-shadow:
0 22px 46px rgba(0, 0, 0, 0.38),
0 0 0 10px rgba(34, 197, 94, 0.14),
inset 0 1px 0 rgba(255, 255, 255, 0.38);
}
}
@keyframes homeFlowArrow {
0%, 100% {
transform: translate(-50%, -50%) scale(1);
}
50% {
transform: translate(-50%, -50%) scale(1.07);
}
}
@keyframes homeFlowArrowMobile {
0%, 100% {
transform: translateX(-50%) scale(1);
}
50% {
transform: translateX(-50%) scale(1.07);
}
}
@media (prefers-reduced-motion: reduce) {
body.home-gateway-page .home-product-phone__logo,
body.home-gateway-page .home-product-phone,
body.home-gateway-page .home-product-phone__actions b,
body.home-gateway-page .home-product-wave i,
body.home-gateway-page .home-product-intro__visual::after,
body.home-gateway-page .home-product-result::after {
animation: none !important;
}
}
/* Homepage: premium discovery sections for key public routes. */
body.home-gateway-page .home-site-gateway.home-discovery-sections {
--home-discovery-gold: #f4dfae;
--home-discovery-gold-soft: rgba(244, 223, 174, 0.18);
--home-discovery-blue: #071225;
position: relative;
isolation: isolate;
display: grid;
gap: 28px;
margin: 54px auto 0;
padding: 34px;
overflow: hidden;
border: 1px solid var(--home-discovery-gold-soft);
border-radius: 30px;
color: #f8fafc;
background:
linear-gradient(135deg, #071225 0%, #0d1931 48%, #050916 100%);
box-shadow: 0 30px 86px rgba(0, 0, 0, 0.34);
}
body.home-gateway-page .home-site-gateway.home-discovery-sections::before {
content: "";
position: absolute;
inset: 1px;
z-index: -1;
border: 1px solid rgba(255, 255, 255, 0.045);
border-radius: 29px;
pointer-events: none;
}
body.home-gateway-page .home-site-gateway.home-discovery-sections::after {
content: "";
position: absolute;
inset: 0 0 auto;
height: 1px;
pointer-events: none;
background: linear-gradient(90deg, transparent, rgba(244, 223, 174, 0.62), transparent);
}
body.home-gateway-page .home-discovery-sections__intro {
display: grid;
gap: 10px;
max-width: 780px;
}
body.home-gateway-page .home-discovery-sections__intro h2 {
margin: 0;
color: #fff7df;
font-size: 2.35rem;
line-height: 1.05;
letter-spacing: 0;
}
body.home-gateway-page .home-discovery-sections__intro p {
max-width: 720px;
margin: 0;
color: rgba(226, 232, 240, 0.74);
font-size: 1.05rem;
line-height: 1.58;
}
body.home-gateway-page .home-discovery-sections__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
body.home-gateway-page .home-discovery-section {
min-width: 0;
}
body.home-gateway-page .home-discovery-section a {
position: relative;
display: grid;
grid-template-columns: 52px minmax(0, 1fr);
grid-template-areas:
"index eyebrow"
"title title"
"body body"
"cta cta";
gap: 12px 14px;
min-width: 0;
min-height: 238px;
height: 100%;
padding: 24px;
overflow: hidden;
border: 1px solid rgba(244, 223, 174, 0.14);
border-radius: 24px;
color: inherit;
text-decoration: none;
background:
linear-gradient(145deg, rgba(255, 247, 223, 0.07), rgba(255, 247, 223, 0.018)),
linear-gradient(180deg, rgba(16, 28, 52, 0.98), rgba(8, 15, 30, 0.98));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}
body.home-gateway-page .home-discovery-section a::before {
content: "";
position: absolute;
inset: 18px auto 18px 0;
width: 3px;
border-radius: 0 999px 999px 0;
background: linear-gradient(180deg, transparent, var(--home-discovery-gold), transparent);
}
body.home-gateway-page .home-discovery-section a:hover,
body.home-gateway-page .home-discovery-section a:focus-visible {
transform: translateY(-3px);
border-color: rgba(244, 223, 174, 0.44);
background:
linear-gradient(145deg, rgba(244, 223, 174, 0.11), rgba(244, 223, 174, 0.025)),
linear-gradient(180deg, rgba(18, 34, 63, 0.99), rgba(9, 17, 34, 0.99));
box-shadow: 0 22px 58px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
body.home-gateway-page .home-discovery-section__index {
grid-area: index;
display: grid;
place-items: center;
width: 52px;
height: 52px;
border: 1px solid rgba(244, 223, 174, 0.34);
border-radius: 16px;
color: #071225;
background: linear-gradient(135deg, #fff7df, var(--home-discovery-gold));
font-size: 0.95rem;
font-weight: 950;
line-height: 1;
letter-spacing: 0;
}
body.home-gateway-page .home-discovery-section__eyebrow {
grid-area: eyebrow;
align-self: center;
color: var(--home-discovery-gold);
font-size: 0.86rem;
font-weight: 950;
line-height: 1.2;
letter-spacing: 0;
text-transform: uppercase;
}
body.home-gateway-page .home-discovery-section h3 {
grid-area: title;
max-width: 520px;
margin: 4px 0 0;
color: #fff7df;
font-size: 1.48rem;
line-height: 1.1;
letter-spacing: 0;
}
body.home-gateway-page .home-discovery-section p {
grid-area: body;
max-width: 560px;
margin: 0;
color: rgba(226, 232, 240, 0.72);
font-size: 1rem;
line-height: 1.55;
}
body.home-gateway-page .home-discovery-section__cta {
grid-area: cta;
align-self: end;
justify-self: start;
margin-top: 10px;
padding: 10px 12px;
border: 1px solid rgba(244, 223, 174, 0.24);
border-radius: 999px;
color: #fff7df;
background: rgba(244, 223, 174, 0.075);
font-size: 0.9rem;
font-weight: 900;
line-height: 1;
letter-spacing: 0;
}
@media (max-width: 980px) {
body.home-gateway-page .home-discovery-sections__grid {
grid-template-columns: 1fr;
}
body.home-gateway-page .home-discovery-section a {
min-height: 210px;
}
}
@media (max-width: 720px) {
body.home-gateway-page .home-site-gateway.home-discovery-sections {
gap: 20px;
margin-top: 34px;
padding: 16px !important;
border-radius: 24px !important;
}
body.home-gateway-page .home-site-gateway.home-discovery-sections::before {
border-radius: 23px;
}
body.home-gateway-page .home-discovery-sections__intro h2 {
font-size: 1.82rem;
}
body.home-gateway-page .home-discovery-sections__intro p {
font-size: 0.98rem;
}
body.home-gateway-page .home-discovery-section a {
grid-template-columns: 46px minmax(0, 1fr);
gap: 10px 12px;
min-height: 0;
padding: 18px;
border-radius: 20px;
}
body.home-gateway-page .home-discovery-section__index {
width: 46px;
height: 46px;
border-radius: 14px;
font-size: 0.88rem;
}
body.home-gateway-page .home-discovery-section h3 {
font-size: 1.22rem;
}
}
/* Final mobile header correction: compact public controls without clipped labels. */
@media (max-width: 560px) {
html.app-mobile-shell body:not(.app-shell) .site-header > .nav,
html.app-mobile-shell body:not(.app-shell) .site-header .nav {
width: 100% !important;
min-height: 66px !important;
grid-template-columns: minmax(0, 1fr) auto auto !important;
gap: 8px !important;
padding: 10px max(12px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left)) !important;
}
html.app-mobile-shell body:not(.app-shell) .site-header .logo-wrap {
min-width: 0 !important;
max-width: 100% !important;
}
html.app-mobile-shell body:not(.app-shell) .site-header .logo-brand,
html.app-mobile-shell body:not(.app-shell) .site-header .logo-brand__image {
max-width: min(42vw, 180px) !important;
}
html.app-mobile-shell body:not(.app-shell) .site-header .logo-brand__image {
height: 38px !important;
object-fit: contain !important;
}
html.app-mobile-shell body:not(.app-shell) .site-header .nav-theme--public {
display: flex !important;
min-width: 0 !important;
}
html.app-mobile-shell body:not(.app-shell) .site-header .nav-theme--public .theme-toggle {
width: 116px !important;
min-width: 116px !important;
height: 42px !important;
min-height: 42px !important;
padding: 4px !important;
overflow: hidden !important;
}
html.app-mobile-shell body:not(.app-shell) .site-header .nav-theme--public .theme-toggle__option {
width: 54px !important;
min-width: 54px !important;
height: 34px !important;
gap: 2px !important;
padding: 0 !important;
}
html.app-mobile-shell body:not(.app-shell) .site-header .nav-theme--public .theme-toggle__option span {
display: inline !important;
font-size: 0.68rem !important;
line-height: 1 !important;
}
html.app-mobile-shell body:not(.app-shell) .site-header .nav-theme--public .theme-toggle__option svg {
width: 18px !important;
height: 18px !important;
}
html.app-mobile-shell body:not(.app-shell) .site-header .nav-actions--public {
gap: 0 !important;
}
html.app-mobile-shell body:not(.app-shell) .site-header .nav-actions--public .nav-auth-link {
width: 42px !important;
min-width: 42px !important;
height: 42px !important;
min-height: 42px !important;
padding: 0 !important;
}
}
/* Vertical pages: keep hero promises readable instead of oversized blocks. */
body.vertical-page:not(.home-gateway-page) .vertical-hero--compact .vertical-hero__copy h1,
body.landing-refresh:not(.home-gateway-page) .legal-hero__card h1 {
max-width: 18ch !important;
font-size: clamp(2rem, 3.25vw, 3.45rem) !important;
line-height: 1.06 !important;
letter-spacing: 0 !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-page-summary--lean strong {
font-size: clamp(1.45rem, 2.05vw, 2rem) !important;
line-height: 1.08 !important;
letter-spacing: 0 !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-hero__copy h1 {
max-width: 15ch !important;
font-size: clamp(2.35rem, 4.15vw, 4.25rem) !important;
line-height: 1.03 !important;
letter-spacing: 0 !important;
}
@media (min-width: 1180px) {
body.vertical-page:not(.home-gateway-page) .vertical-hero--compact .vertical-hero__grid {
grid-template-columns: minmax(0, 1fr) minmax(320px, 0.72fr) !important;
}
}
@media (max-width: 640px) {
body.vertical-page:not(.home-gateway-page) .vertical-hero--compact .vertical-hero__copy h1,
body.landing-refresh:not(.home-gateway-page) .legal-hero__card h1 {
max-width: 14ch !important;
font-size: clamp(1.85rem, 8vw, 2.35rem) !important;
line-height: 1.08 !important;
}
}
@media (max-width: 380px) {
html.app-mobile-shell body:not(.app-shell) .site-header .logo-brand__image {
max-width: min(42vw, 150px) !important;
height: 34px !important;
}
html.app-mobile-shell body:not(.app-shell) .site-header .nav-theme--public .theme-toggle {
width: 84px !important;
min-width: 84px !important;
height: 40px !important;
}
html.app-mobile-shell body:not(.app-shell) .site-header .nav-theme--public .theme-toggle__option {
width: 38px !important;
min-width: 38px !important;
height: 32px !important;
}
html.app-mobile-shell body:not(.app-shell) .site-header .nav-actions--public .nav-auth-link {
width: 40px !important;
min-width: 40px !important;
height: 40px !important;
min-height: 40px !important;
}
}
/* Public cookie banner: compact desktop footprint so it never hides the first product visual. */
@media (min-width: 761px) {
body:not(.app-shell) .cookie-banner {
left: auto !important;
right: 18px !important;
bottom: 18px !important;
grid-template-columns: 1fr !important;
gap: 12px !important;
width: min(560px, calc(100vw - 36px)) !important;
padding: 14px !important;
}
body:not(.app-shell) .cookie-banner__body p {
display: -webkit-box !important;
overflow: hidden !important;
-webkit-box-orient: vertical !important;
-webkit-line-clamp: 2 !important;
font-size: 0.92rem !important;
line-height: 1.35 !important;
}
body:not(.app-shell) .cookie-banner__actions {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
width: 100% !important;
}
body:not(.app-shell) .cookie-banner__actions .btn {
min-height: 42px !important;
padding-inline: 12px !important;
white-space: nowrap !important;
}
body.home-gateway-page:not(.app-shell) .cookie-banner {
left: 18px !important;
right: auto !important;
}
body.marketing-page:not(.app-shell) main .btn-tertiary {
min-width: 0;
white-space: normal;
overflow-wrap: anywhere;
}
}
/* Homepage conversion audit polish: clearer CTA hierarchy, compact nav and unobtrusive cookies. */
body.home-gateway-page .home-premium-actions {
display: grid !important;
grid-template-columns: minmax(220px, auto) minmax(190px, auto) !important;
justify-content: center !important;
}
body.home-gateway-page .home-premium-assistive-cta {
margin: -2px 0 0 !important;
color: rgba(226, 232, 240, 0.7);
font-size: 0.94rem;
font-weight: 750;
line-height: 1.35;
text-align: center;
}
body.home-gateway-page .home-premium-assistive-cta a {
color: #f4dfae;
font-weight: 950;
text-decoration: none;
}
body.home-gateway-page .home-premium-assistive-cta a:hover,
body.home-gateway-page .home-premium-assistive-cta a:focus-visible {
text-decoration: underline;
}
body.home-gateway-page .home-site-gateway.home-discovery-sections {
margin-top: 34px;
}
body.home-gateway-page .home-discovery-section a {
min-height: 210px;
padding: 22px;
}
body.home-gateway-page:not(.app-shell) .cookie-banner {
right: 16px !important;
bottom: 10px !important;
left: 16px !important;
align-items: center !important;
gap: 8px !important;
grid-template-columns: minmax(0, 1fr) auto !important;
width: auto !important;
padding: 8px 10px !important;
border-radius: 14px !important;
}
body.home-gateway-page:not(.app-shell) .cookie-banner__body {
gap: 2px !important;
}
body.home-gateway-page:not(.app-shell) .cookie-banner__body strong {
font-size: 0.9rem !important;
line-height: 1.12 !important;
}
body.home-gateway-page:not(.app-shell) .cookie-banner__body p {
display: block !important;
overflow: hidden !important;
max-width: 100% !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
font-size: 0.78rem !important;
line-height: 1.25 !important;
}
body.home-gateway-page:not(.app-shell) .cookie-banner__actions {
display: flex !important;
flex-wrap: nowrap !important;
gap: 6px !important;
}
body.home-gateway-page:not(.app-shell) .cookie-banner__actions .btn {
flex: 0 0 auto !important;
min-height: 34px !important;
min-width: 112px !important;
padding: 0.42rem 0.32rem !important;
border-radius: 8px !important;
font-size: 0.72rem !important;
line-height: 1 !important;
white-space: nowrap !important;
}
@media (min-width: 1061px) {
.site-header--public .public-menu {
gap: 2px !important;
padding: 4px 8px !important;
}
.site-header--public .public-menu__trigger,
.site-header--public .public-menu-link {
min-height: 44px !important;
padding-inline: 10px !important;
font-size: 0.84rem !important;
}
.site-header--public .nav-theme--public .theme-toggle__option span {
display: none !important;
}
}
@media (max-width: 720px) {
body.home-gateway-page .home-premium-actions {
grid-template-columns: 1fr !important;
}
body.home-gateway-page .home-premium-assistive-cta {
font-size: 0.88rem;
text-align: center;
}
body.home-gateway-page:not(.app-shell) .cookie-banner {
right: 8px !important;
bottom: calc(8px + env(safe-area-inset-bottom)) !important;
left: 8px !important;
grid-template-columns: 1fr !important;
width: auto !important;
padding: 8px !important;
}
body.home-gateway-page:not(.app-shell) .cookie-banner__actions {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
body.home-gateway-page:not(.app-shell) .cookie-banner__actions .btn {
min-width: 0 !important;
min-height: 32px !important;
font-size: 0.68rem !important;
}
}
body.vertical-page:not(.home-gateway-page) .vertical-hero.vertical-hero--compact .vertical-hero__copy h1 {
max-width: 15ch !important;
font-size: clamp(2.35rem, 4.15vw, 4.25rem) !important;
line-height: 1.03 !important;
letter-spacing: 0 !important;
}
.seo-landing-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(260px, 0.32fr);
gap: clamp(1rem, 2vw, 1.5rem);
align-items: start;
}
.seo-landing-main {
display: grid;
gap: 1rem;
}
.seo-landing-card {
min-height: 0;
}
.seo-landing-aside {
position: sticky;
top: 104px;
display: grid;
gap: 1rem;
}
.seo-related-links {
display: grid;
gap: 0.55rem;
}
.seo-related-links a {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 42px;
padding: 0.65rem 0.8rem;
border-radius: 12px;
color: rgba(248, 250, 252, 0.92);
text-decoration: none;
background: rgba(255, 255, 255, 0.055);
border: 1px solid rgba(148, 163, 184, 0.14);
}
.seo-related-links a::after {
content: "->";
color: #93c5fd;
}
.seo-related-links a:hover,
.seo-related-links a:focus-visible {
border-color: rgba(147, 197, 253, 0.45);
background: rgba(37, 99, 235, 0.14);
}
.seo-keyword-chips {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
}
.seo-keyword-chips span {
display: inline-flex;
align-items: center;
min-height: 30px;
padding: 0.28rem 0.62rem;
border-radius: 999px;
color: rgba(226, 232, 240, 0.82);
background: rgba(37, 99, 235, 0.13);
border: 1px solid rgba(147, 197, 253, 0.18);
font-size: max(11px, 0.76rem);
font-weight: 800;
}
body[data-theme="light"] .home-seo-links,
body[data-theme="light"] .seo-related-links a {
background: rgba(255, 255, 255, 0.86);
border-color: rgba(15, 23, 42, 0.09);
}
body[data-theme="light"] .seo-related-links a {
color: #0f172a;
}
body[data-theme="light"] .seo-keyword-chips span {
color: #1e3a8a;
background: rgba(37, 99, 235, 0.09);
border-color: rgba(37, 99, 235, 0.18);
}
@media (max-width: 920px) {
.seo-landing-grid {
grid-template-columns: 1fr;
}
.seo-landing-aside {
position: static;
}
}
/* Public redesign iteration 1: premium reusable call narrative primitives. */
body.landing-refresh:not(.app-shell) {
--public-night: #050816;
--public-ink: #f8fafc;
--public-muted: rgba(226, 232, 240, 0.72);
--public-subtle: rgba(226, 232, 240, 0.54);
--public-line: rgba(148, 163, 184, 0.18);
--public-glass: rgba(12, 18, 34, 0.78);
--public-glass-strong: rgba(18, 24, 44, 0.9);
--public-cyan: #38bdf8;
--public-blue: #5b7cfa;
--public-violet: #7c5cff;
--public-emerald: #43d685;
--public-gold: #f4dfae;
--public-radius-xl: 34px;
--public-radius-lg: 26px;
--public-radius-md: 18px;
--public-shadow: 0 28px 90px rgba(0, 0, 0, 0.36);
}
.public-call-story {
position: relative;
isolation: isolate;
padding: clamp(34px, 6vw, 86px) 0;
}
.public-call-story::before {
content: "";
position: absolute;
inset: 8% auto auto 50%;
z-index: -1;
width: min(680px, 82vw);
height: min(680px, 82vw);
border-radius: 999px;
background:
radial-gradient(circle, rgba(56, 189, 248, 0.22), transparent 58%),
radial-gradient(circle at 68% 28%, rgba(124, 92, 255, 0.2), transparent 46%);
filter: blur(22px);
opacity: 0.72;
transform: translateX(-50%);
pointer-events: none;
}
.public-call-story__shell {
display: grid;
grid-template-columns: minmax(0, 0.88fr) minmax(420px, 1.12fr);
gap: clamp(20px, 4vw, 48px);
align-items: center;
padding: clamp(22px, 4vw, 34px);
border: 1px solid rgba(148, 163, 184, 0.2);
border-radius: var(--public-radius-xl);
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015)),
radial-gradient(circle at 12% 18%, rgba(56, 189, 248, 0.12), transparent 26rem),
radial-gradient(circle at 86% 4%, rgba(124, 92, 255, 0.16), transparent 25rem),
rgba(5, 8, 22, 0.9);
box-shadow: var(--public-shadow);
overflow: hidden;
}
.public-call-story__copy {
display: grid;
gap: clamp(14px, 2vw, 20px);
min-width: 0;
}
.public-call-story__copy h2 {
max-width: 12ch;
color: var(--public-ink);
font-family: "Space Grotesk", "Inter", sans-serif;
font-size: clamp(2.1rem, 4.8vw, 4.9rem);
line-height: 0.98;
letter-spacing: 0;
}
.public-call-story__copy p {
max-width: 58ch;
color: var(--public-muted);
font-size: clamp(1rem, 1.2vw, 1.15rem);
font-weight: 750;
line-height: 1.55;
}
.public-call-story__stage {
position: relative;
display: grid;
grid-template-columns: minmax(170px, 0.84fr) 44px minmax(184px, 1fr);
gap: clamp(10px, 1.5vw, 16px);
align-items: center;
min-width: 0;
}
.public-phone-mockup,
.public-result-card {
position: relative;
min-width: 0;
border: 1px solid rgba(148, 163, 184, 0.22);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.02)),
var(--public-glass);
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.36);
overflow: hidden;
}
.public-phone-mockup {
display: grid;
justify-items: center;
gap: 16px;
aspect-ratio: 0.58;
max-height: 460px;
padding: clamp(18px, 3vw, 28px) clamp(14px, 2.4vw, 24px);
border-radius: 34px;
background:
radial-gradient(circle at 50% 8%, rgba(124, 92, 255, 0.25), transparent 11rem),
linear-gradient(180deg, rgba(18, 31, 76, 0.86), rgba(6, 12, 27, 0.96));
}
.public-phone-mockup::before {
content: "";
position: absolute;
inset: 8px;
border-radius: 28px;
border: 1px solid rgba(255, 255, 255, 0.08);
pointer-events: none;
}
.public-phone-mockup__glow {
position: absolute;
inset: -20% 18% auto;
height: 42%;
border-radius: 999px;
background: rgba(91, 124, 250, 0.22);
filter: blur(34px);
}
.public-phone-mockup__icon {
position: relative;
display: grid;
place-items: center;
width: 58px;
height: 58px;
border-radius: 18px;
background: radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.18), transparent 38%), linear-gradient(135deg, #6f6bff, #16114a);
box-shadow: 0 16px 34px rgba(80, 70, 255, 0.32);
}
.public-phone-mockup__icon img {
width: 38px;
height: 38px;
object-fit: contain;
}
.public-phone-mockup > span {
color: var(--public-gold);
font-size: 0.82rem;
font-weight: 950;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.public-phone-mockup > strong {
max-width: 12ch;
color: var(--public-ink);
font-size: clamp(1.25rem, 2.2vw, 1.8rem);
line-height: 1.14;
text-align: center;
letter-spacing: 0;
}
.public-phone-mockup > small {
max-width: 18ch;
color: var(--public-subtle);
font-weight: 850;
line-height: 1.3;
text-align: center;
}
.public-voice-wave {
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
width: min(170px, 100%);
min-height: 72px;
}
.public-voice-wave i {
display: block;
width: 5px;
height: 28px;
border-radius: 999px;
background: linear-gradient(180deg, var(--public-cyan), var(--public-violet));
box-shadow: 0 0 20px rgba(124, 92, 255, 0.46);
animation: publicCallWave 1.2s ease-in-out infinite;
}
.public-voice-wave i:nth-child(2n) {
height: 42px;
animation-delay: 0.08s;
}
.public-voice-wave i:nth-child(3n) {
height: 58px;
animation-delay: 0.16s;
}
.public-voice-wave i:nth-child(4n) {
height: 36px;
animation-delay: 0.24s;
}
.public-phone-mockup__actions {
display: flex;
gap: 18px;
margin-top: auto;
}
.public-phone-mockup__actions b {
display: grid;
place-items: center;
width: 58px;
height: 58px;
border-radius: 999px;
box-shadow: 0 14px 34px rgba(0, 0, 0, 0.3);
}
.public-phone-mockup__actions svg {
width: 25px;
height: 25px;
fill: currentColor;
}
.public-phone-mockup__actions .is-red {
color: #fff;
background: linear-gradient(135deg, #ff6b6b, #ef233c);
}
.public-phone-mockup__actions .is-green {
color: #fff;
background: linear-gradient(135deg, #6ee7a8, #16a34a);
}
.public-call-story__arrow {
display: grid;
place-items: center;
width: 54px;
height: 54px;
border-radius: 999px;
color: #fff;
font-size: 1.55rem;
font-weight: 950;
background: linear-gradient(135deg, var(--public-cyan), var(--public-violet));
box-shadow: 0 0 34px rgba(91, 124, 250, 0.48);
}
.public-result-card {
display: grid;
gap: 16px;
min-height: 360px;
padding: clamp(22px, 3vw, 34px);
border-radius: 30px;
}
.public-result-card__icon {
display: grid;
place-items: center;
width: 72px;
height: 72px;
border-radius: 999px;
color: #fff;
background:
radial-gradient(circle at 28% 24%, rgba(255, 255, 255, 0.32), transparent 34%),
linear-gradient(135deg, #60a5fa, #5b34f5);
box-shadow: 0 0 0 10px rgba(91, 124, 250, 0.16);
}
.public-result-card__icon svg,
.public-result-card__sms svg {
width: 28px;
height: 28px;
fill: currentColor;
}
.public-result-card > strong {
color: var(--public-ink);
font-family: "Space Grotesk", "Inter", sans-serif;
font-size: clamp(1.8rem, 3vw, 2.7rem);
line-height: 1.02;
letter-spacing: 0;
}
.public-result-card ul {
display: grid;
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
}
.public-result-card li {
display: flex;
align-items: center;
gap: 10px;
color: rgba(248, 250, 252, 0.88);
font-weight: 850;
line-height: 1.3;
}
.public-result-card li::before {
content: "";
flex: 0 0 auto;
width: 9px;
height: 9px;
border-radius: 999px;
background: var(--public-gold);
box-shadow: 0 0 18px rgba(244, 223, 174, 0.48);
}
.public-result-card__sms {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 12px;
align-items: center;
margin-top: auto;
padding: 16px;
border: 1px solid rgba(167, 139, 250, 0.28);
border-radius: 22px;
color: #fff;
background: linear-gradient(135deg, rgba(124, 92, 255, 0.34), rgba(244, 223, 174, 0.08));
}
.public-result-card__sms span {
font-weight: 950;
line-height: 1.15;
}
.public-call-story__cards {
grid-column: 1 / -1;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
}
.public-call-story__cards article {
min-width: 0;
min-height: 172px;
padding: 18px;
border: 1px solid rgba(148, 163, 184, 0.17);
border-radius: 22px;
background:
radial-gradient(circle at 12% 0%, rgba(244, 223, 174, 0.08), transparent 10rem),
rgba(15, 23, 42, 0.64);
}
.public-call-story__cards span {
display: inline-flex;
align-items: center;
min-height: 36px;
margin-bottom: 12px;
padding: 0 11px;
border: 1px solid rgba(244, 223, 174, 0.3);
border-radius: 12px;
color: var(--public-gold);
font-size: 0.75rem;
font-weight: 950;
}
.public-call-story__cards strong {
display: block;
color: var(--public-ink);
font-size: 1.05rem;
line-height: 1.18;
}
.public-call-story__cards p {
margin: 10px 0 0;
color: var(--public-muted);
line-height: 1.45;
font-weight: 700;
}
.public-call-story__flow {
grid-column: 1 / -1;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
align-items: stretch;
}
.public-call-story__flow span {
position: relative;
display: flex;
align-items: center;
gap: 14px;
min-width: 0;
min-height: 72px;
padding: 14px 16px;
border: 1px solid rgba(244, 223, 174, 0.2);
border-radius: 24px;
background: rgba(255, 255, 255, 0.045);
}
.public-call-story__flow span:not(:last-child)::after {
content: "";
position: absolute;
top: 50%;
right: -15px;
width: 16px;
height: 1px;
background: rgba(244, 223, 174, 0.34);
}
.public-call-story__flow b {
display: grid;
place-items: center;
flex: 0 0 auto;
width: 38px;
height: 38px;
border-radius: 999px;
color: #fff;
background: linear-gradient(135deg, rgba(244, 223, 174, 0.22), rgba(124, 92, 255, 0.42));
border: 1px solid rgba(244, 223, 174, 0.28);
}
.public-call-story__flow strong {
min-width: 0;
color: var(--public-ink);
font-size: clamp(0.98rem, 1.1vw, 1.08rem);
line-height: 1.2;
}
body[data-theme="light"] .public-call-story__shell {
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 252, 0.82)),
radial-gradient(circle at 12% 18%, rgba(37, 99, 235, 0.12), transparent 26rem);
border-color: rgba(15, 23, 42, 0.1);
}
body[data-theme="light"] .public-call-story__copy h2,
body[data-theme="light"] .public-result-card > strong,
body[data-theme="light"] .public-call-story__cards strong,
body[data-theme="light"] .public-call-story__flow strong {
color: #0f172a;
}
body[data-theme="light"] .public-call-story__copy p,
body[data-theme="light"] .public-call-story__cards p {
color: rgba(15, 23, 42, 0.68);
}
body[data-theme="light"] .public-result-card,
body[data-theme="light"] .public-call-story__cards article,
body[data-theme="light"] .public-call-story__flow span {
background: rgba(255, 255, 255, 0.78);
border-color: rgba(15, 23, 42, 0.1);
}
body[data-theme="light"] .public-result-card li {
color: rgba(15, 23, 42, 0.78);
}
@keyframes publicCallWave {
0%,
100% {
transform: scaleY(0.58);
opacity: 0.72;
}
50% {
transform: scaleY(1);
opacity: 1;
}
}
@media (max-width: 1080px) {
.public-call-story__shell {
grid-template-columns: 1fr;
}
.public-call-story__copy {
text-align: center;
justify-items: center;
}
.public-call-story__copy h2 {
max-width: 16ch;
}
.public-call-story__stage {
width: min(100%, 760px);
margin-inline: auto;
}
}
@media (max-width: 980px) {
.public-call-story__cards {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 780px) {
.public-call-story__shell {
padding: 18px;
border-radius: 26px;
}
.public-call-story__stage {
grid-template-columns: 1fr;
justify-items: center;
}
.public-phone-mockup {
width: min(100%, 270px);
}
.public-call-story__arrow {
transform: rotate(90deg);
}
.public-result-card {
width: min(100%, 360px);
min-height: 0;
}
.public-call-story__flow {
grid-template-columns: 1fr;
}
.public-call-story__flow span:not(:last-child)::after {
top: auto;
right: auto;
bottom: -15px;
left: 34px;
width: 1px;
height: 16px;
}
}
@media (max-width: 520px) {
.public-call-story {
padding: 28px 0;
}
.public-call-story__shell {
width: calc(100% - 20px);
padding: 14px;
border-radius: 22px;
}
.public-call-story__copy h2 {
max-width: 13ch;
font-size: clamp(2rem, 10vw, 2.8rem);
}
.public-call-story__copy p {
font-size: 0.98rem;
}
.public-call-story__cards {
grid-template-columns: 1fr;
}
.public-call-story__cards article {
min-height: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.public-voice-wave i {
animation: none !important;
transform: none !important;
}
}
/* Public redesign iteration 2: global public navigation and footer. */
.site-header--public {
isolation: isolate;
z-index: 9000 !important;
overflow: visible;
border-bottom: 1px solid rgba(148, 163, 184, 0.16);
background:
radial-gradient(circle at 10% 0%, rgba(45, 212, 191, 0.12), transparent 26rem),
radial-gradient(circle at 86% 0%, rgba(99, 102, 241, 0.16), transparent 24rem),
rgba(5, 9, 22, 0.84);
box-shadow: 0 18px 70px rgba(0, 0, 0, 0.28);
}
.site-header--public > .nav {
min-height: 86px;
gap: 12px;
overflow: visible;
}
.site-header--public .logo-wrap {
flex: 0 0 auto;
}
.site-header--public .logo-brand__image {
height: clamp(42px, 4vw, 52px) !important;
}
.site-header--public .public-menu {
position: relative;
z-index: 2;
display: flex !important;
flex: 1 1 auto;
align-items: center;
justify-content: center;
width: auto;
min-width: 0;
max-width: 820px;
gap: 4px;
padding: 6px;
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 24px;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.032)),
rgba(7, 12, 26, 0.74);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
backdrop-filter: blur(20px);
}
.public-menu__mobile-head,
.public-menu-toggle,
.public-menu-backdrop {
display: none;
}
.public-menu__item {
position: relative;
}
.public-menu__item::after {
content: "";
position: absolute;
top: 100%;
right: -8px;
left: -8px;
height: 18px;
}
.site-header--public .public-menu__trigger,
.site-header--public .public-menu-link {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 0;
min-height: 44px;
padding: 0 12px;
border: 1px solid transparent;
border-radius: 999px;
background: transparent;
color: rgba(226, 232, 240, 0.82);
font-size: 0.9rem;
font-weight: 850;
line-height: 1;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition:
color 0.18s ease,
background 0.18s ease,
border-color 0.18s ease,
box-shadow 0.18s ease,
transform 0.18s ease;
}
.site-header--public .public-menu__trigger {
gap: 7px;
}
.site-header--public .public-menu__trigger::after {
content: "";
width: 7px;
height: 7px;
margin-top: -3px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
opacity: 0.66;
transform: rotate(45deg);
}
.site-header--public .public-menu-link--pricing {
color: #f8fafc;
border-color: rgba(45, 212, 191, 0.26);
background: rgba(45, 212, 191, 0.1);
}
.site-header--public .public-menu__trigger:hover,
.site-header--public .public-menu__trigger:focus-visible,
.site-header--public .public-menu__item:focus-within .public-menu__trigger,
.site-header--public .public-menu__item:hover .public-menu__trigger,
.site-header--public .public-menu-link:hover,
.site-header--public .public-menu-link:focus-visible,
.site-header--public .public-menu-link.is-active {
color: #ffffff;
border-color: rgba(125, 211, 252, 0.32);
background:
linear-gradient(135deg, rgba(45, 212, 191, 0.16), rgba(99, 102, 241, 0.16)),
rgba(255, 255, 255, 0.06);
box-shadow: 0 14px 30px rgba(37, 99, 235, 0.14);
transform: translateY(-1px);
}
.public-menu__panel {
position: absolute;
top: calc(100% + 14px);
left: 0;
z-index: 9100;
display: grid;
width: min(390px, calc(100vw - 32px));
gap: 6px;
padding: 10px;
border: 1px solid rgba(148, 163, 184, 0.2);
border-radius: 22px;
background:
radial-gradient(circle at 18% 0%, rgba(45, 212, 191, 0.14), transparent 14rem),
linear-gradient(180deg, rgba(12, 18, 34, 0.98), rgba(6, 11, 24, 0.98));
box-shadow: 0 26px 80px rgba(0, 0, 0, 0.4);
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(8px) scale(0.98);
transform-origin: top left;
transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}
.public-menu__item--right .public-menu__panel {
left: auto;
right: 0;
transform-origin: top right;
}
.public-menu__item--explore .public-menu__panel {
left: 50%;
transform: translate(-50%, 8px) scale(0.98);
transform-origin: top center;
}
.public-menu__item--discover .public-menu__panel {
right: auto;
left: 50%;
transform: translate(-50%, 8px) scale(0.98);
transform-origin: top center;
}
.public-menu__panel--solutions {
width: min(600px, calc(100vw - 32px));
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.public-menu__panel--explore {
width: min(780px, calc(100vw - 32px));
grid-template-columns: minmax(220px, 0.78fr) minmax(0, 1.6fr);
gap: 10px;
}
.public-menu__panel--discover {
width: min(820px, calc(100vw - 32px));
grid-template-columns: minmax(240px, 0.78fr) minmax(0, 1.45fr);
gap: 10px;
}
.public-menu__item:hover .public-menu__panel,
.public-menu__item:focus-within .public-menu__panel {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0) scale(1);
}
.public-menu__item--explore:hover .public-menu__panel,
.public-menu__item--explore:focus-within .public-menu__panel,
.public-menu__item--discover:hover .public-menu__panel,
.public-menu__item--discover:focus-within .public-menu__panel {
transform: translate(-50%, 0) scale(1);
}
.public-menu__panel-intro {
display: grid;
align-content: start;
gap: 8px;
min-width: 0;
padding: 16px;
border: 1px solid rgba(148, 163, 184, 0.14);
border-radius: 14px;
background:
radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.15), transparent 12rem),
rgba(255, 255, 255, 0.05);
}
.public-menu__panel-intro > span {
color: #5eead4;
font-size: 0.72rem;
font-weight: 900;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.public-menu__panel-intro > strong {
color: #ffffff;
font-size: clamp(1.05rem, 1.4vw, 1.28rem);
line-height: 1.08;
}
.public-menu__panel-intro > small {
color: rgba(203, 213, 225, 0.78);
font-size: 0.84rem;
font-weight: 650;
line-height: 1.45;
}
.public-menu__panel-intro--discover {
background:
radial-gradient(circle at 12% 0%, rgba(244, 223, 174, 0.14), transparent 11rem),
linear-gradient(150deg, rgba(20, 184, 166, 0.09), rgba(99, 102, 241, 0.08)),
rgba(255, 255, 255, 0.048);
}
.public-menu__proof {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 6px;
margin-top: 6px;
}
.public-menu__proof span {
display: grid;
gap: 2px;
min-width: 0;
padding: 9px;
border: 1px solid rgba(148, 163, 184, 0.13);
border-radius: 10px;
background: rgba(2, 6, 23, 0.24);
}
.public-menu__proof strong {
color: #f8fafc;
font-size: 0.82rem;
line-height: 1.1;
}
.public-menu__proof small {
color: rgba(203, 213, 225, 0.7);
font-size: 0.68rem;
line-height: 1.15;
}
.public-menu__panel-grid {
display: grid;
min-width: 0;
gap: 6px;
}
.public-menu__panel-grid--compact,
.public-menu__panel-grid--discover {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.site-header--public .public-menu__panel a {
display: grid;
min-width: 0;
gap: 4px;
padding: 12px;
border: 1px solid rgba(148, 163, 184, 0.12);
border-radius: 8px;
background: rgba(255, 255, 255, 0.045);
color: #f8fafc;
text-decoration: none;
}
.site-header--public .public-menu__panel a:hover,
.site-header--public .public-menu__panel a:focus-visible {
border-color: rgba(45, 212, 191, 0.3);
background: rgba(45, 212, 191, 0.09);
}
.public-menu__panel strong {
color: #ffffff;
font-size: 0.93rem;
line-height: 1.15;
}
.public-menu__panel small {
color: rgba(203, 213, 225, 0.74);
font-size: 0.8rem;
font-weight: 650;
line-height: 1.35;
}
.public-menu__panel a > span {
color: #5eead4;
font-size: 0.7rem;
font-weight: 900;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.site-header--public .nav-theme--public {
flex: 0 0 auto;
}
.site-header--public .nav-actions--public {
flex: 0 0 auto;
}
.site-header--public .nav-auth-link--primary {
min-width: 176px;
}
.site-header--public .nav-auth-link--secondary {
min-width: 124px;
}
.site-footer {
overflow: hidden;
border-top: 1px solid rgba(148, 163, 184, 0.16);
background:
radial-gradient(circle at 12% 0%, rgba(45, 212, 191, 0.13), transparent 28rem),
radial-gradient(circle at 88% 6%, rgba(99, 102, 241, 0.16), transparent 26rem),
linear-gradient(180deg, #050917 0%, #07101f 100%);
}
.site-footer::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image:
linear-gradient(rgba(148, 163, 184, 0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(148, 163, 184, 0.04) 1px, transparent 1px);
background-size: 52px 52px;
mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.65), transparent 72%);
}
.site-footer__inner {
position: relative;
z-index: 1;
grid-template-columns: minmax(260px, 0.82fr) minmax(0, 2fr);
gap: clamp(18px, 3vw, 34px);
padding: clamp(34px, 5vw, 60px) 0 26px;
}
.site-footer__brand-block,
.site-footer__column {
border: 1px solid rgba(148, 163, 184, 0.16);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.032)),
rgba(8, 13, 28, 0.72);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
backdrop-filter: blur(16px);
}
.site-footer__brand-block {
padding: clamp(18px, 2.4vw, 24px);
border-radius: 24px;
}
.site-footer__pitch {
max-width: 36ch;
color: rgba(226, 232, 240, 0.8);
font-weight: 700;
}
.site-footer__cta {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
}
.site-footer__cta-link,
.site-footer__contact-link {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 0 14px;
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 999px;
color: #f8fafc;
font-size: 0.88rem;
font-weight: 900;
text-decoration: none;
cursor: pointer;
}
.site-footer__cta-link {
border-color: rgba(45, 212, 191, 0.34);
background: linear-gradient(135deg, rgba(45, 212, 191, 0.22), rgba(99, 102, 241, 0.2));
}
.site-footer__contact-link {
background: rgba(255, 255, 255, 0.055);
}
button.site-footer__contact-link {
font: inherit;
}
.site-footer__links {
gap: 14px;
}
.site-footer__column {
padding: 18px;
border-radius: 20px;
}
.site-footer__title {
color: #f4dfae;
font-size: 0.76rem;
font-weight: 950;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.site-footer__column nav {
gap: 7px;
}
.site-footer__column nav a,
.site-footer__link-button {
display: inline-flex;
width: fit-content;
max-width: 100%;
min-height: 30px;
align-items: center;
border: 0;
background: transparent;
color: rgba(226, 232, 240, 0.76);
font-size: 0.9rem;
font-weight: 750;
line-height: 1.25;
text-align: left;
text-decoration: none;
cursor: pointer;
}
.site-footer__column nav a:hover,
.site-footer__column nav a:focus-visible,
.site-footer__link-button:hover,
.site-footer__link-button:focus-visible {
color: #ffffff;
}
.site-footer__meta {
color: rgba(203, 213, 225, 0.72);
}
@media (max-width: 1320px) {
.site-header--public .public-menu__trigger,
.site-header--public .public-menu-link {
padding-inline: 11px;
font-size: 0.86rem;
}
.site-header--public .nav-auth-link--secondary {
min-width: 46px;
width: 46px;
padding-inline: 0;
align-items: center;
}
.site-header--public .nav-auth-link--secondary .nav-auth-link__eyebrow,
.site-header--public .nav-auth-link--secondary .nav-auth-link__label {
display: none;
}
.site-header--public .nav-auth-link--secondary .nav-auth-link__icon {
display: inline-flex;
}
}
@media (max-width: 1160px) {
.site-header--public .public-menu {
max-width: 620px;
}
.site-header--public .public-menu-link--home {
display: none;
}
.site-header--public .nav-auth-link--primary {
min-width: 46px;
width: 46px;
padding-inline: 0;
align-items: center;
}
.site-header--public .nav-auth-link--primary .nav-auth-link__eyebrow,
.site-header--public .nav-auth-link--primary .nav-auth-link__label {
display: none;
}
.site-header--public .nav-auth-link--primary .nav-auth-link__icon {
display: inline-flex;
}
}
@media (min-width: 1061px) and (max-width: 1240px) {
.public-menu__item--discover .public-menu__panel {
right: 0;
left: auto;
transform: translateY(8px) scale(0.98);
transform-origin: top right;
}
.public-menu__item--discover:hover .public-menu__panel,
.public-menu__item--discover:focus-within .public-menu__panel {
transform: translateY(0) scale(1);
}
}
@media (max-width: 1060px) {
.site-header--public > .nav,
html.app-mobile-shell body:not(.app-shell) .site-header--public > .nav,
html.app-mobile-shell body:not(.app-shell) .site-header--public .nav {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto auto auto !important;
width: 100% !important;
min-height: 66px !important;
gap: 8px !important;
padding: 10px max(12px, env(safe-area-inset-right)) 10px max(14px, env(safe-area-inset-left)) !important;
}
.public-menu-toggle {
display: inline-flex;
width: 44px;
min-width: 44px;
height: 44px;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 5px;
border: 1px solid rgba(148, 163, 184, 0.2);
border-radius: 999px;
background: rgba(255, 255, 255, 0.07);
color: #f8fafc;
cursor: pointer;
}
.public-menu-toggle span {
display: block;
width: 18px;
height: 2px;
border-radius: 999px;
background: currentColor;
}
.site-header--public .public-menu,
body.landing-page .site-header--public .public-menu,
body.landing-refresh:not(.app-shell) .site-header--public .public-menu,
html.app-mobile-shell body.landing-refresh:not(.app-shell) .site-header--public .public-menu {
position: fixed !important;
z-index: 2200 !important;
inset: 0 0 0 auto !important;
display: block !important;
width: min(430px, calc(100vw - 22px)) !important;
max-width: none !important;
height: 100dvh !important;
max-height: none !important;
padding: max(18px, env(safe-area-inset-top)) 18px 22px !important;
overflow-y: auto !important;
border: 1px solid rgba(148, 163, 184, 0.2) !important;
border-right: 0 !important;
border-radius: 24px 0 0 24px !important;
background:
radial-gradient(circle at 18% 0%, rgba(45, 212, 191, 0.18), transparent 17rem),
linear-gradient(180deg, rgba(7, 12, 26, 0.99), rgba(5, 9, 20, 0.99)) !important;
box-shadow: -30px 0 90px rgba(0, 0, 0, 0.52) !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transform: translateX(105%) !important;
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease !important;
}
body.public-menu-open .site-header--public .public-menu,
html.app-mobile-shell body.public-menu-open.landing-refresh:not(.app-shell) .site-header--public .public-menu {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transform: translateX(0) !important;
}
.public-menu-backdrop:not([hidden]) {
position: fixed;
z-index: 2100;
inset: 0;
display: block;
background: rgba(2, 6, 23, 0.62);
backdrop-filter: blur(8px);
}
.public-menu__mobile-head {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 8px;
margin-bottom: 18px;
}
.public-menu__mobile-head span {
grid-column: 1;
color: #f4dfae;
font-size: 0.72rem;
font-weight: 950;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.public-menu__mobile-head strong {
grid-column: 1;
color: #ffffff;
font-size: 1.35rem;
line-height: 1;
}
.public-menu__mobile-head button {
grid-column: 2;
grid-row: 1 / span 2;
display: grid;
width: 42px;
height: 42px;
place-items: center;
border: 1px solid rgba(148, 163, 184, 0.22);
border-radius: 999px;
background: rgba(255, 255, 255, 0.08);
color: #ffffff;
font-size: 1.45rem;
line-height: 1;
cursor: pointer;
}
.site-header--public .public-menu__item {
position: static;
margin-top: 14px;
}
.site-header--public .public-menu__item::after {
display: none;
}
.site-header--public .public-menu__trigger,
.site-header--public .public-menu-link,
body.landing-page .site-header--public .public-menu > .public-menu-link {
width: 100% !important;
min-width: 0 !important;
height: auto !important;
min-height: 46px !important;
justify-content: flex-start !important;
padding: 0 12px !important;
border-radius: 12px !important;
color: #f8fafc !important;
background: rgba(255, 255, 255, 0.06) !important;
transform: none !important;
}
.site-header--public .public-menu__trigger {
pointer-events: none;
color: #f4dfae !important;
background: transparent !important;
border-color: transparent !important;
padding-inline: 0 !important;
font-size: 0.74rem !important;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.site-header--public .public-menu__trigger::after {
display: none;
}
.site-header--public .public-menu__panel,
.site-header--public .public-menu__panel--solutions,
.site-header--public .public-menu__panel--explore,
.site-header--public .public-menu__panel--discover {
position: static !important;
display: grid !important;
grid-template-columns: 1fr !important;
width: 100% !important;
gap: 8px !important;
margin-top: 8px !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transform: none !important;
}
.site-header--public .public-menu__panel-intro,
.site-header--public .public-menu__panel-grid,
.site-header--public .public-menu__panel-grid--compact,
.site-header--public .public-menu__panel-grid--discover,
.site-header--public .public-menu__proof {
grid-template-columns: 1fr !important;
width: 100% !important;
}
.site-header--public .public-menu__panel-intro {
padding: 12px !important;
}
.site-header--public .public-menu__panel a,
body.landing-page .site-header--public .public-menu .public-menu__panel a,
html.app-mobile-shell body.landing-refresh:not(.app-shell) .site-header--public .public-menu .public-menu__panel a {
display: grid !important;
width: 100% !important;
min-width: 0 !important;
height: auto !important;
min-height: 0 !important;
justify-content: stretch !important;
align-items: start !important;
gap: 4px !important;
padding: 12px !important;
border-radius: 8px !important;
color: #f8fafc !important;
background: rgba(255, 255, 255, 0.052) !important;
}
.site-header--public .nav-theme--public {
grid-column: 3;
}
.site-header--public .nav-actions--public {
grid-column: 4;
}
.site-header--public .nav-actions--public .nav-auth-link--secondary {
display: none;
}
}
@media (max-width: 1060px) {
.site-header--public .public-menu__trigger {
pointer-events: auto !important;
justify-content: space-between !important;
padding: 0 12px !important;
border: 1px solid rgba(244, 223, 174, 0.14) !important;
background: rgba(244, 223, 174, 0.055) !important;
cursor: pointer !important;
}
.site-header--public .public-menu__trigger::after {
display: block !important;
transform: rotate(45deg);
transition: transform 0.18s ease;
}
.site-header--public .public-menu__item.is-mobile-open .public-menu__trigger::after {
margin-top: 2px;
transform: rotate(225deg);
}
.site-header--public .public-menu__panel,
.site-header--public .public-menu__panel--solutions,
.site-header--public .public-menu__panel--explore,
.site-header--public .public-menu__panel--discover {
display: none !important;
}
.site-header--public .public-menu__item.is-mobile-open .public-menu__panel,
.site-header--public .public-menu__item.is-mobile-open .public-menu__panel--solutions,
.site-header--public .public-menu__item.is-mobile-open .public-menu__panel--explore,
.site-header--public .public-menu__item.is-mobile-open .public-menu__panel--discover {
display: grid !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
}
}
@media (max-width: 980px) {
.site-footer__inner {
grid-template-columns: 1fr;
}
.site-footer__links {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.site-footer__column nav a,
.site-footer__link-button {
min-width: 44px;
min-height: 44px;
padding-block: 8px;
}
.site-footer__meta a {
display: inline-flex;
min-width: 44px;
min-height: 44px;
align-items: center;
justify-content: center;
}
}
@media (max-width: 560px) {
html.app-mobile-shell body:not(.app-shell) .site-header--public > .nav,
html.app-mobile-shell body:not(.app-shell) .site-header--public .nav,
body:not(.app-shell) .site-header--public > .nav,
body:not(.app-shell) .site-header--public .nav {
grid-template-columns: minmax(0, 1fr) auto auto !important;
}
html.app-mobile-shell body:not(.app-shell) .site-header--public .nav-theme--public,
body:not(.app-shell) .site-header--public .nav-theme--public {
display: none !important;
}
html.app-mobile-shell body:not(.app-shell) .site-header--public .public-menu-toggle,
body:not(.app-shell) .site-header--public .public-menu-toggle {
grid-column: 2 !important;
grid-row: 1 !important;
}
html.app-mobile-shell body:not(.app-shell) .site-header--public .nav-actions--public,
body:not(.app-shell) .site-header--public .nav-actions--public {
grid-column: 3 !important;
grid-row: 1 !important;
}
html.app-mobile-shell body:not(.app-shell) .site-header--public .logo-brand,
html.app-mobile-shell body:not(.app-shell) .site-header--public .logo-brand__image {
max-width: min(36vw, 150px) !important;
}
.site-footer {
padding-inline: 0 !important;
}
.site-footer__inner {
padding-inline: 14px !important;
}
.site-footer__links {
grid-template-columns: 1fr !important;
}
.site-footer__column nav a:nth-of-type(n+4),
.site-footer__column:nth-child(n+3) nav a:nth-of-type(n+3) {
display: inline-flex !important;
}
}
@media (max-width: 390px) {
.site-header--public .nav-theme--public {
display: none !important;
}
.site-header--public > .nav,
html.app-mobile-shell body:not(.app-shell) .site-header--public > .nav,
html.app-mobile-shell body:not(.app-shell) .site-header--public .nav {
grid-template-columns: minmax(0, 1fr) auto auto !important;
}
.site-header--public .nav-actions--public {
grid-column: 3;
}
}
@media (prefers-reduced-motion: reduce) {
.site-header--public .public-menu,
.site-header--public .public-menu__panel,
.site-header--public .public-menu__trigger,
.site-header--public .public-menu-link {
transition: none !important;
}
}
@media (max-width: 1060px) {
html.app-mobile-shell body:not(.app-shell) .site-header--public,
body:not(.app-shell) .site-header--public {
height: auto !important;
min-height: 66px !important;
}
.site-header--public .logo-wrap {
grid-column: 1 !important;
grid-row: 1 !important;
}
.site-header--public .public-menu-toggle {
grid-column: 2 !important;
grid-row: 1 !important;
}
.site-header--public .nav-theme--public {
grid-column: 3 !important;
grid-row: 1 !important;
}
.site-header--public .nav-actions--public {
grid-column: 4 !important;
grid-row: 1 !important;
width: auto !important;
}
.site-header--public .nav-actions--public .nav-auth-link--secondary {
display: none !important;
}
html.app-mobile-shell body:not(.app-shell) .site-header--public .nav-actions--public .nav-auth-link,
.site-header--public .nav-actions--public .nav-auth-link {
width: 42px !important;
min-width: 42px !important;
height: 42px !important;
min-height: 42px !important;
padding: 0 !important;
}
}
@media (max-width: 390px) {
.site-header--public .nav-actions--public {
grid-column: 3 !important;
}
}
@media (max-width: 1060px) {
html.app-mobile-shell body:not(.app-shell) .site-header--public .nav-actions--public .nav-auth-link.nav-auth-link--secondary,
body:not(.app-shell) .site-header--public .nav-actions--public .nav-auth-link.nav-auth-link--secondary {
display: none !important;
width: 0 !important;
min-width: 0 !important;
height: 0 !important;
min-height: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
}
body.home-gateway-page .site-header--public .public-menu {
display: flex !important;
}
body.home-gateway-page .site-header--public .nav-actions--public .nav-auth-link--primary {
display: inline-flex !important;
}
html.app-mobile-shell body.home-gateway-page.landing-refresh:not(.app-shell) .site-header--public .nav-actions--public .nav-auth-link.nav-auth-link--primary,
body.home-gateway-page .site-header--public .nav-actions--public .nav-auth-link.nav-auth-link--primary {
display: inline-flex !important;
}
@media (max-width: 1060px) {
body.home-gateway-page .site-header--public .public-menu,
html.app-mobile-shell body.home-gateway-page.landing-refresh:not(.app-shell) .site-header--public .public-menu {
display: block !important;
}
}
/* Public redesign iteration 3: homepage narrative and conversion sections. */
body.home-gateway-page .home-gateway-shell {
width: min(calc(100% - 56px), 1220px);
max-width: 1220px !important;
}
body.home-gateway-page .home-premium-hero--visual {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1.06fr) minmax(390px, 0.94fr) !important;
gap: 28px !important;
align-items: center !important;
overflow: hidden;
min-height: 560px !important;
padding: 36px !important;
border: 1px solid rgba(148, 163, 184, 0.22);
border-radius: 32px;
background:
linear-gradient(135deg, rgba(11, 18, 33, 0.98), rgba(11, 16, 30, 0.94) 48%, rgba(16, 24, 44, 0.94)),
#070d19;
box-shadow:
0 34px 110px rgba(2, 6, 23, 0.36),
inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
body.home-gateway-page .home-premium-hero--visual::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(120deg, rgba(94, 234, 212, 0.14), transparent 34%),
linear-gradient(250deg, rgba(124, 92, 255, 0.18), transparent 44%),
linear-gradient(0deg, rgba(244, 223, 174, 0.08), transparent 44%);
}
body.home-gateway-page .home-premium-hero--visual > * {
position: relative;
z-index: 1;
}
body.home-gateway-page .home-premium-hero--visual .home-gateway-intro {
gap: 18px !important;
justify-items: start !important;
width: auto !important;
margin-inline: 0 !important;
text-align: left !important;
}
body.home-gateway-page .home-premium-hero--visual .home-gateway-intro .home-eyebrow {
justify-self: start !important;
margin-inline: 0 !important;
}
body.home-gateway-page .home-premium-hero--visual .home-gateway-intro h1 {
max-width: 14.8ch !important;
margin-inline: 0 !important;
color: #f8fafc;
font-size: clamp(3.4rem, 4.55vw, 4.8rem) !important;
line-height: 0.98 !important;
letter-spacing: 0;
text-align: left !important;
text-wrap: balance;
}
body.home-gateway-page .home-premium-hero--visual .home-gateway-intro h1 span {
display: block;
}
body.home-gateway-page .home-premium-hero--visual .home-gateway-intro p {
max-width: 620px !important;
margin-inline: 0 !important;
color: rgba(226, 232, 240, 0.8);
font-size: 1.05rem;
text-align: left !important;
}
body.home-gateway-page .home-premium-hero--visual .home-premium-actions {
justify-content: flex-start !important;
margin-inline: 0 !important;
}
body.home-gateway-page .home-premium-hero--visual .home-gateway-proof {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 10px !important;
width: 100% !important;
max-width: 640px !important;
margin-inline: 0 !important;
}
body.home-gateway-page .home-premium-hero--visual .home-gateway-proof span {
min-height: 118px !important;
padding: 16px !important;
}
body.home-gateway-page .home-hero-liveboard {
display: grid;
gap: 14px;
min-width: 0;
padding: 18px;
border: 1px solid rgba(148, 163, 184, 0.2);
border-radius: 28px;
background:
linear-gradient(160deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.02)),
rgba(7, 12, 24, 0.74);
box-shadow:
0 26px 90px rgba(2, 6, 23, 0.34),
inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
body.home-gateway-page .home-hero-liveboard__top,
body.home-gateway-page .home-hero-liveboard__footer {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 10px;
}
body.home-gateway-page .home-hero-liveboard__top span,
body.home-gateway-page .home-hero-liveboard__footer span,
body.home-gateway-page .home-hero-result-stack__badge {
display: inline-flex;
align-items: center;
min-height: 30px;
padding: 0 11px;
border: 1px solid rgba(94, 234, 212, 0.22);
border-radius: 999px;
background: rgba(20, 184, 166, 0.1);
color: #99f6e4;
font-size: 0.76rem;
font-weight: 900;
letter-spacing: 0.08em;
text-transform: uppercase;
}
body.home-gateway-page .home-hero-liveboard__top i {
width: 8px;
height: 8px;
margin-right: 8px;
border-radius: 999px;
background: #22c55e;
box-shadow: 0 0 0 5px rgba(34, 197, 94, 0.13);
}
body.home-gateway-page .home-hero-liveboard__top strong {
color: #f8fafc;
font-size: 0.95rem;
}
body.home-gateway-page .home-hero-liveboard__main {
display: grid;
grid-template-columns: minmax(0, 0.84fr) minmax(0, 1fr);
gap: 12px;
align-items: stretch;
}
body.home-gateway-page .home-hero-call-card,
body.home-gateway-page .home-hero-result-stack,
body.home-gateway-page .home-dashboard-card {
min-width: 0;
border: 1px solid rgba(148, 163, 184, 0.18);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.016)),
rgba(10, 16, 31, 0.8);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
body.home-gateway-page .home-hero-call-card__wave i:nth-child(2n) {
height: 62px;
animation-delay: -0.22s;
}
body.home-gateway-page .home-hero-call-card__wave i:nth-child(3n) {
height: 76px;
animation-delay: -0.42s;
}
body.home-gateway-page .home-hero-result-stack ul,
body.home-gateway-page .home-dashboard-card__grid {
display: grid;
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
}
body.home-gateway-page .home-hero-result-stack li strong,
body.home-gateway-page .home-dashboard-card__grid strong,
body.home-gateway-page .home-dashboard-card__summary h3 {
color: #f8fafc;
}
body.home-gateway-page .home-hero-result-stack li span,
body.home-gateway-page .home-dashboard-card__grid small,
body.home-gateway-page .home-dashboard-card__summary p {
color: rgba(226, 232, 240, 0.7);
}
body.home-gateway-page .home-homepage-section {
margin: clamp(28px, 5vw, 64px) auto 0;
}
body.home-gateway-page .home-homepage-section .home-section__head h2,
body.home-gateway-page .home-dashboard-story__copy h2,
body.home-gateway-page .home-trust-panel h2 {
max-width: 840px;
color: #f8fafc;
font-size: 3rem;
line-height: 1.03;
letter-spacing: 0;
}
body.home-gateway-page .home-homepage-section .home-section__head p,
body.home-gateway-page .home-dashboard-story__copy p,
body.home-gateway-page .home-trust-panel p {
max-width: 720px;
color: rgba(226, 232, 240, 0.74);
}
body.home-gateway-page .home-industry-strip__grid,
body.home-gateway-page .home-integration-flow__grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 12px;
}
body.home-gateway-page .home-industry-strip__grid a,
body.home-gateway-page .home-integration-flow__grid article,
body.home-gateway-page .home-trust-panel__items a,
body.home-gateway-page .home-faq-panel details {
min-width: 0;
padding: 18px;
border: 1px solid rgba(148, 163, 184, 0.16);
border-radius: 20px;
color: inherit;
text-decoration: none;
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.014)),
rgba(10, 15, 28, 0.68);
}
body.home-gateway-page .home-industry-strip__grid a {
display: grid;
gap: 9px;
min-height: 170px;
transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}
body.home-gateway-page .home-industry-strip__grid a:hover,
body.home-gateway-page .home-industry-strip__grid a:focus-visible,
body.home-gateway-page .home-trust-panel__items a:hover,
body.home-gateway-page .home-trust-panel__items a:focus-visible {
transform: translateY(-2px);
border-color: rgba(94, 234, 212, 0.34);
background:
linear-gradient(145deg, rgba(94, 234, 212, 0.08), rgba(124, 92, 255, 0.04)),
rgba(12, 18, 34, 0.8);
}
body.home-gateway-page .home-industry-strip__grid span,
body.home-gateway-page .home-integration-flow__grid span {
color: #f4dfae;
font-size: 0.78rem;
font-weight: 900;
letter-spacing: 0.08em;
text-transform: uppercase;
}
body.home-gateway-page .home-industry-strip__grid strong,
body.home-gateway-page .home-integration-flow__grid strong,
body.home-gateway-page .home-trust-panel__items strong,
body.home-gateway-page .home-faq-panel summary {
color: #f8fafc;
font-size: 1.08rem;
line-height: 1.18;
font-weight: 900;
}
body.home-gateway-page .home-industry-strip__grid small,
body.home-gateway-page .home-integration-flow__grid p,
body.home-gateway-page .home-trust-panel__items span,
body.home-gateway-page .home-faq-panel p {
margin: 0;
color: rgba(226, 232, 240, 0.68);
line-height: 1.48;
}
body.home-gateway-page .home-dashboard-story {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1fr);
gap: 28px;
align-items: center;
}
body.home-gateway-page .home-dashboard-story__copy {
display: grid;
gap: 16px;
}
body.home-gateway-page .home-dashboard-story__actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
body.home-gateway-page .home-dashboard-card {
display: grid;
gap: 14px;
padding: 22px;
border-radius: 28px;
}
body.home-gateway-page .home-dashboard-card__bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding-bottom: 12px;
border-bottom: 1px solid rgba(148, 163, 184, 0.16);
}
body.home-gateway-page .home-dashboard-card__bar span,
body.home-gateway-page .home-dashboard-card__summary > span {
color: #99f6e4;
font-size: 0.78rem;
font-weight: 900;
letter-spacing: 0.08em;
text-transform: uppercase;
}
body.home-gateway-page .home-dashboard-card__bar strong {
color: #fff;
font-size: 2.6rem;
line-height: 1;
}
body.home-gateway-page .home-dashboard-card__summary {
display: grid;
gap: 8px;
padding: 18px;
border: 1px solid rgba(244, 223, 174, 0.16);
border-radius: 20px;
background: rgba(244, 223, 174, 0.06);
}
body.home-gateway-page .home-dashboard-card__summary h3 {
margin: 0;
font-size: 1.45rem;
line-height: 1.12;
}
body.home-gateway-page .home-dashboard-card__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.home-gateway-page .home-dashboard-card__grid span {
display: grid;
gap: 4px;
padding: 14px;
border: 1px solid rgba(148, 163, 184, 0.14);
border-radius: 16px;
background: rgba(255, 255, 255, 0.04);
}
body.home-gateway-page .home-integration-flow {
padding: 26px 0;
}
body.home-gateway-page .home-integration-flow__grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
body.home-gateway-page .home-integration-flow__grid article {
display: grid;
gap: 10px;
min-height: 180px;
}
body.home-gateway-page .home-trust-panel {
display: grid;
grid-template-columns: minmax(0, 0.86fr) minmax(0, 1fr);
gap: 28px;
align-items: start;
padding: 28px;
border-top: 1px solid rgba(94, 234, 212, 0.18);
border-bottom: 1px solid rgba(124, 92, 255, 0.18);
background:
linear-gradient(90deg, rgba(94, 234, 212, 0.08), rgba(124, 92, 255, 0.08));
}
body.home-gateway-page .home-trust-panel__items {
display: grid;
gap: 12px;
}
body.home-gateway-page .home-trust-panel__items a {
display: grid;
gap: 6px;
transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}
body.home-gateway-page .home-faq-panel__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
body.home-gateway-page .home-faq-panel details {
display: grid;
gap: 10px;
}
body.home-gateway-page .home-faq-panel summary {
cursor: pointer;
}
body.home-gateway-page .home-faq-panel summary::marker {
color: #99f6e4;
}
body.home-gateway-page .home-faq-panel p {
margin-top: 10px;
}
@keyframes homeHeroWave {
0%, 100% {
transform: scaleY(0.72);
opacity: 0.8;
}
50% {
transform: scaleY(1.08);
opacity: 1;
}
}
@media (max-width: 1180px) {
body.home-gateway-page .home-premium-hero--visual {
grid-template-columns: 1fr !important;
min-height: 0 !important;
}
body.home-gateway-page .home-premium-hero--visual .home-gateway-intro h1 {
max-width: 14ch !important;
font-size: clamp(3rem, 6vw, 3.75rem) !important;
}
body.home-gateway-page .home-industry-strip__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 980px) {
body.home-gateway-page .home-dashboard-story,
body.home-gateway-page .home-trust-panel {
grid-template-columns: 1fr;
}
body.home-gateway-page .home-integration-flow__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 860px) {
body.home-gateway-page .home-gateway-shell {
width: min(calc(100% - 24px), 1220px);
}
body.home-gateway-page .home-premium-hero--visual {
padding: 20px !important;
border-radius: 24px;
}
body.home-gateway-page .home-premium-hero--visual .home-gateway-intro {
justify-items: center !important;
text-align: center !important;
}
body.home-gateway-page .home-premium-hero--visual .home-gateway-intro h1 {
max-width: 100% !important;
font-size: clamp(2.35rem, 9vw, 3rem) !important;
line-height: 0.98 !important;
margin-inline: auto !important;
text-align: center !important;
}
body.home-gateway-page .home-premium-hero--visual .home-gateway-intro p {
font-size: 1rem;
margin-inline: auto !important;
text-align: center !important;
}
body.home-gateway-page .home-premium-hero--visual .home-premium-actions,
body.home-gateway-page .home-dashboard-story__actions {
display: grid;
grid-template-columns: 1fr;
width: 100%;
}
body.home-gateway-page .home-premium-hero--visual .home-premium-actions .btn,
body.home-gateway-page .home-dashboard-story__actions .btn {
width: 100%;
}
body.home-gateway-page .home-premium-hero--visual .home-gateway-proof {
display: none !important;
}
body.home-gateway-page .home-hero-liveboard {
display: none;
}
body.home-gateway-page .home-hero-liveboard__main {
grid-template-columns: 1fr;
}
body.home-gateway-page .home-hero-liveboard__footer {
display: none;
}
body.home-gateway-page .home-hero-result-stack h2,
body.home-gateway-page .home-homepage-section .home-section__head h2,
body.home-gateway-page .home-dashboard-story__copy h2,
body.home-gateway-page .home-trust-panel h2 {
font-size: 2.15rem;
line-height: 1.06;
}
body.home-gateway-page .home-industry-strip__grid,
body.home-gateway-page .home-integration-flow__grid,
body.home-gateway-page .home-faq-panel__grid {
grid-template-columns: 1fr;
}
body.home-gateway-page .home-industry-strip__grid a,
body.home-gateway-page .home-integration-flow__grid article {
min-height: 0;
}
body.home-gateway-page .home-trust-panel {
padding: 20px 0;
}
}
@media (max-width: 430px) {
body.home-gateway-page .home-premium-hero--visual .home-gateway-intro h1 {
font-size: 2.25rem !important;
}
body.home-gateway-page .home-dashboard-card__grid {
grid-template-columns: 1fr;
}
}
/* Public redesign iteration 4A: core product page story blocks. */
.core-product-stage {
position: relative;
margin: clamp(28px, 5vw, 68px) 0;
}
.core-product-stage__grid {
position: relative;
display: grid;
grid-template-columns: minmax(0, 0.92fr) minmax(360px, 1.08fr);
gap: clamp(22px, 4vw, 46px);
align-items: stretch;
min-width: 0;
padding: clamp(22px, 4vw, 42px);
overflow: hidden;
border: 1px solid rgba(148, 163, 184, 0.2);
border-radius: 30px;
background:
radial-gradient(circle at 12% 8%, rgba(94, 234, 212, 0.16), transparent 34%),
radial-gradient(circle at 92% 12%, rgba(124, 92, 255, 0.2), transparent 38%),
linear-gradient(140deg, rgba(8, 13, 26, 0.96), rgba(12, 18, 35, 0.92));
box-shadow:
0 30px 96px rgba(2, 6, 23, 0.34),
inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.core-product-stage__grid::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(90deg, rgba(244, 223, 174, 0.09), transparent 35%),
linear-gradient(270deg, rgba(59, 130, 246, 0.08), transparent 42%);
}
.core-product-stage__grid > * {
position: relative;
z-index: 1;
}
.core-product-stage [id] {
scroll-margin-top: 128px;
}
.core-product-stage__copy {
display: grid;
align-content: center;
gap: 16px;
min-width: 0;
}
.core-product-stage__copy h1,
.core-product-stage__copy h2 {
margin: 0;
max-width: 780px;
color: #f8fafc;
font-size: clamp(2.25rem, 4.7vw, 4.55rem);
line-height: 0.98;
letter-spacing: 0;
}
.core-product-stage__copy p {
margin: 0;
max-width: 680px;
color: rgba(226, 232, 240, 0.76);
font-size: clamp(1rem, 1.4vw, 1.13rem);
line-height: 1.6;
}
.core-product-stage__actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 4px;
}
.core-product-board,
.core-product-toolflow {
min-width: 0;
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 26px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.018)),
rgba(8, 13, 26, 0.7);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.core-product-board {
display: grid;
gap: 16px;
align-content: center;
padding: clamp(18px, 3vw, 28px);
}
.core-product-board__bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.core-product-board__bar span,
.core-product-board article span,
.core-product-toolflow article span {
color: #99f6e4;
font-size: 0.76rem;
font-weight: 900;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.core-product-board__bar strong {
display: inline-flex;
align-items: center;
min-height: 34px;
padding: 0 12px;
border: 1px solid rgba(244, 223, 174, 0.26);
border-radius: 999px;
color: #f4dfae;
background: rgba(244, 223, 174, 0.08);
font-size: 0.82rem;
}
.core-product-board__split {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.core-product-board article,
.core-product-toolflow article {
display: grid;
gap: 8px;
min-width: 0;
padding: 16px;
border: 1px solid rgba(148, 163, 184, 0.15);
border-radius: 18px;
background: rgba(15, 23, 42, 0.56);
}
.core-product-board article strong,
.core-product-toolflow article strong {
color: #f8fafc;
font-size: clamp(1.08rem, 1.6vw, 1.32rem);
line-height: 1.08;
}
.core-product-board article p,
.core-product-toolflow article p,
.core-product-board article small {
margin: 0;
color: rgba(226, 232, 240, 0.68);
line-height: 1.45;
}
.core-product-board article small {
display: inline-flex;
width: fit-content;
min-height: 28px;
align-items: center;
padding: 0 10px;
border-radius: 999px;
background: rgba(96, 165, 250, 0.12);
color: #bfdbfe;
font-weight: 850;
}
.core-product-flow {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
}
.core-product-flow li {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
min-height: 54px;
padding: 10px 12px;
border: 1px solid rgba(148, 163, 184, 0.13);
border-radius: 16px;
background: rgba(255, 255, 255, 0.045);
}
.core-product-flow b {
display: grid;
width: 28px;
height: 28px;
flex: 0 0 28px;
place-items: center;
border-radius: 999px;
color: #0f172a;
background: linear-gradient(135deg, #f4dfae, #bfdbfe);
font-size: 0.82rem;
}
.core-product-flow span {
min-width: 0;
color: rgba(248, 250, 252, 0.9);
font-weight: 850;
line-height: 1.16;
}
.core-product-toolflow {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
padding: clamp(18px, 3vw, 28px);
}
.core-product-toolflow article {
min-height: 156px;
}
body.live-demo-body .core-product-stage {
margin-top: clamp(18px, 4vw, 52px);
}
body.live-demo-body .core-product-stage__grid {
width: 100%;
}
body.live-demo-body .core-product-stage__copy h1 {
font-size: clamp(2.35rem, 5vw, 4.9rem);
}
body.integrations-page .core-product-stage,
body.pricing-page .core-product-stage {
margin-top: clamp(24px, 4vw, 54px);
}
@media (max-width: 980px) {
.core-product-stage__grid {
grid-template-columns: 1fr;
}
.core-product-stage__copy {
text-align: center;
justify-items: center;
}
.core-product-stage__actions {
justify-content: center;
}
}
@media (max-width: 640px) {
.core-product-stage {
margin: 22px 0;
}
.core-product-stage__grid {
padding: 18px;
border-radius: 22px;
}
.core-product-stage__copy h1,
.core-product-stage__copy h2 {
font-size: clamp(2rem, 10vw, 2.8rem);
}
.core-product-stage__actions,
.core-product-board__split,
.core-product-flow,
.core-product-toolflow {
grid-template-columns: 1fr;
}
.core-product-stage__actions {
display: grid;
width: 100%;
}
.core-product-stage__actions .btn {
width: 100%;
white-space: normal;
overflow-wrap: anywhere;
}
.core-product-board__bar {
align-items: flex-start;
flex-direction: column;
}
.core-product-toolflow article {
min-height: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.core-product-stage__grid::before {
background:
linear-gradient(90deg, rgba(244, 223, 174, 0.08), transparent 35%),
linear-gradient(270deg, rgba(59, 130, 246, 0.06), transparent 42%);
}
}
/* Public redesign iteration 4B: decision, examples, calculator and dashboard pages. */
body.comparison-page .core-product-stage,
body.call-examples-page .core-product-stage,
body.missed-call-calculator-page .core-product-stage,
body.dashboard-showcase-page .core-product-stage,
body.demo-booking-page .core-product-stage,
body.vertical-page--comparatif .core-product-stage,
body.vertical-page--exemples-appels .core-product-stage,
body.vertical-page--calculateur-appels-manques .core-product-stage,
body.vertical-page--dashboard-appels-ia .core-product-stage,
body.vertical-page--demo-agent-vocal-ia .core-product-stage {
margin-top: clamp(24px, 4vw, 54px);
}
body.demo-booking-page .core-product-stage + .home-section,
body.call-examples-page .core-product-stage + .home-section,
body.comparison-page .core-product-stage + .legal-section,
body.dashboard-showcase-page .core-product-stage + .home-section,
body.missed-call-calculator-page .core-product-stage + .home-section {
padding-top: clamp(40px, 5vw, 72px);
}
body.comparison-page #comparison-table,
body.call-examples-page #restaurant-call-example,
body.missed-call-calculator-page #calculator-inputs,
body.dashboard-showcase-page #dashboard-proof {
scroll-margin-top: 126px;
}
body.article-page:not(.app-shell) .article-breadcrumb a {
display: inline-flex;
min-height: 40px;
align-items: center;
}
@media (min-width: 900px) and (max-width: 1220px) {
body.restaurant-voice-page .home-cta__actions .btn {
min-width: 216px;
min-height: 44px;
padding-inline: 1rem;
}
}
@media (max-width: 640px) {
body.article-page:not(.app-shell) .article-breadcrumb a,
body.article-page:not(.app-shell) .article-breadcrumb span {
display: inline-flex;
min-height: 40px;
align-items: center;
}
body.landing-refresh.marketing-page:not(.app-shell) .legal-hero .home-hero__actions,
body.landing-refresh.marketing-page:not(.app-shell) .core-product-stage__actions,
body.landing-refresh.marketing-page:not(.app-shell) .home-cta__actions {
display: grid !important;
grid-template-columns: 1fr !important;
width: 100% !important;
}
body.landing-refresh.marketing-page:not(.app-shell) .legal-hero .home-hero__actions .btn,
body.landing-refresh.marketing-page:not(.app-shell) .core-product-stage__actions .btn,
body.landing-refresh.marketing-page:not(.app-shell) .home-cta__actions .btn {
width: 100% !important;
min-width: 0 !important;
white-space: normal !important;
overflow-wrap: anywhere !important;
word-break: normal !important;
}
}
/* Public redesign iteration 4C: trust, FAQ, help and support pages. */
body.about-page .core-product-stage,
body.faq-page .core-product-stage,
body.help-center-page .core-product-stage,
body.support-page .core-product-stage {
margin-top: clamp(24px, 4vw, 54px);
}
body.about-page .public-product-nav,
body.faq-page .public-product-nav,
body.help-center-page .public-product-nav,
body.support-page .public-product-nav {
margin-top: clamp(18px, 3vw, 34px);
}
body.faq-page #faq-questions {
scroll-margin-top: 126px;
}
body.support-page .core-product-stage + .home-section,
body.help-center-page .core-product-stage + .home-section,
body.about-page .core-product-stage + .home-section,
body.faq-page .core-product-stage + .home-section {
padding-top: clamp(40px, 5vw, 72px);
}
body.support-page .core-product-stage__actions .btn,
body.help-center-page .core-product-stage__actions .btn,
body.faq-page .core-product-stage__actions .btn,
body.about-page .core-product-stage__actions .btn {
min-width: min(100%, 190px);
}
body.faq-page .home-faq-grid article {
padding: 0 !important;
overflow: hidden !important;
}
body.faq-page .home-faq-grid .faq-answer-card {
display: grid;
min-height: 100%;
padding: clamp(18px, 2vw, 24px);
}
body.faq-page .home-faq-grid summary {
display: grid;
grid-template-columns: minmax(0, 1fr) 32px;
gap: 12px;
align-items: start;
cursor: pointer;
list-style: none;
}
body.faq-page .home-faq-grid summary::-webkit-details-marker {
display: none;
}
body.faq-page .home-faq-grid summary h3 {
margin: 0 !important;
}
body.faq-page .home-faq-grid summary::after {
content: "+";
display: inline-flex;
width: 32px;
height: 32px;
align-items: center;
justify-content: center;
border: 1px solid rgba(244, 223, 174, 0.26);
border-radius: 999px;
background: rgba(244, 223, 174, 0.08);
color: #f4dfae;
font-weight: 950;
line-height: 1;
}
body.faq-page .home-faq-grid details[open] summary::after {
content: "-";
}
body.faq-page .home-faq-grid details:not([open]) > p {
display: none !important;
}
body.faq-page .home-faq-grid .faq-answer-card > p {
margin-top: 14px !important;
}
body.how-it-works-page .core-product-stage__grid {
height: auto !important;
max-height: none !important;
overflow: visible !important;
overflow-x: visible !important;
overflow-y: visible !important;
}
/* Public redesign iteration 5: main vertical pages. */
body.vertical-page--restaurant {
--vertical-scene-accent: #f4dfae;
--vertical-scene-accent-strong: #ffd985;
--vertical-scene-glow: rgba(244, 223, 174, 0.24);
}
body.vertical-page--hotel {
--vertical-scene-accent: #93c5fd;
--vertical-scene-accent-strong: #bfdbfe;
--vertical-scene-glow: rgba(96, 165, 250, 0.24);
}
body.vertical-page--artisan {
--vertical-scene-accent: #86efac;
--vertical-scene-accent-strong: #bbf7d0;
--vertical-scene-glow: rgba(74, 222, 128, 0.22);
}
body.vertical-page--commerce {
--vertical-scene-accent: #67e8f9;
--vertical-scene-accent-strong: #f0abfc;
--vertical-scene-glow: rgba(103, 232, 249, 0.22);
}
body.vertical-page--services {
--vertical-scene-accent: #c4b5fd;
--vertical-scene-accent-strong: #a7f3d0;
--vertical-scene-glow: rgba(167, 139, 250, 0.24);
}
body.vertical-page:not(.home-gateway-page) .vertical-call-scene {
padding-block: 36px 58px;
}
body.vertical-page:not(.home-gateway-page) .vertical-call-scene__shell {
position: relative;
display: grid;
grid-template-columns: minmax(0, 0.76fr) minmax(0, 1.24fr);
grid-template-areas:
"copy visual"
"timeline timeline";
gap: 26px;
overflow: hidden;
padding: 38px;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 30px;
background:
radial-gradient(circle at 18% 0%, var(--vertical-scene-glow), transparent 23rem),
radial-gradient(circle at 92% 18%, rgba(99, 102, 241, 0.18), transparent 25rem),
linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.018)),
rgba(9, 13, 26, 0.94);
box-shadow: 0 28px 90px rgba(0, 0, 0, 0.3);
}
body.vertical-page:not(.home-gateway-page) .vertical-call-scene__shell::before {
content: "";
position: absolute;
inset: 18px;
pointer-events: none;
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 24px;
}
body.vertical-page:not(.home-gateway-page) .vertical-call-scene__copy {
position: relative;
z-index: 1;
grid-area: copy;
display: grid;
align-content: center;
gap: 16px;
}
body.vertical-page:not(.home-gateway-page) .vertical-call-scene__copy h2 {
max-width: 12ch;
margin: 0;
color: #fff;
font-size: 3.35rem;
line-height: 0.98;
letter-spacing: 0;
}
body.vertical-page:not(.home-gateway-page) .vertical-call-scene__copy p {
max-width: 42rem;
margin: 0;
color: rgba(226, 232, 240, 0.76);
font-size: 1.05rem;
line-height: 1.58;
}
body.vertical-page:not(.home-gateway-page) .vertical-call-scene__chips {
display: flex;
flex-wrap: wrap;
gap: 9px;
}
body.vertical-page:not(.home-gateway-page) .vertical-call-scene__chips span {
display: inline-flex;
align-items: center;
min-height: 34px;
padding-inline: 12px;
border: 1px solid color-mix(in srgb, var(--vertical-scene-accent) 38%, transparent);
border-radius: 999px;
color: var(--vertical-scene-accent-strong);
background: color-mix(in srgb, var(--vertical-scene-accent) 10%, transparent);
font-size: 0.78rem;
font-weight: 900;
letter-spacing: 0;
}
body.vertical-page:not(.home-gateway-page) .vertical-call-scene__visual {
position: relative;
z-index: 1;
grid-area: visual;
display: grid;
grid-template-columns: minmax(230px, 0.9fr) 44px minmax(240px, 0.92fr);
gap: 18px;
align-items: center;
}
body.vertical-page:not(.home-gateway-page) .vertical-call-phone,
body.vertical-page:not(.home-gateway-page) .vertical-call-result,
body.vertical-page:not(.home-gateway-page) .vertical-call-scene__timeline article {
min-width: 0;
border: 1px solid rgba(255, 255, 255, 0.13);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)),
rgba(7, 11, 23, 0.84);
box-shadow: 0 22px 60px rgba(0, 0, 0, 0.24);
backdrop-filter: blur(16px);
}
body.vertical-page:not(.home-gateway-page) .vertical-call-phone {
display: grid;
gap: 16px;
min-height: 390px;
padding: 20px;
border-radius: 28px;
}
body.vertical-page:not(.home-gateway-page) .vertical-call-phone__top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 14px;
}
body.vertical-page:not(.home-gateway-page) .vertical-call-phone__top span,
body.vertical-page:not(.home-gateway-page) .vertical-call-result > span {
color: var(--vertical-scene-accent-strong);
font-size: 0.74rem;
font-weight: 950;
letter-spacing: 0;
text-transform: uppercase;
}
body.vertical-page:not(.home-gateway-page) .vertical-call-phone__top strong {
color: #fff;
font-size: 1.05rem;
line-height: 1.15;
text-align: right;
}
body.vertical-page:not(.home-gateway-page) .vertical-call-phone__wave {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
height: 72px;
}
body.vertical-page:not(.home-gateway-page) .vertical-call-phone__wave span {
width: 7px;
height: 26px;
border-radius: 999px;
background: linear-gradient(180deg, var(--vertical-scene-accent-strong), #7c3aed);
box-shadow: 0 0 20px var(--vertical-scene-glow);
animation: verticalCallWave 1.4s ease-in-out infinite;
}
body.vertical-page:not(.home-gateway-page) .vertical-call-phone__wave span:nth-child(2),
body.vertical-page:not(.home-gateway-page) .vertical-call-phone__wave span:nth-child(5) {
height: 42px;
animation-delay: 0.12s;
}
body.vertical-page:not(.home-gateway-page) .vertical-call-phone__wave span:nth-child(3),
body.vertical-page:not(.home-gateway-page) .vertical-call-phone__wave span:nth-child(4) {
height: 58px;
animation-delay: 0.24s;
}
body.vertical-page:not(.home-gateway-page) .vertical-call-phone__request {
display: grid;
gap: 6px;
padding: 15px;
border: 1px solid color-mix(in srgb, var(--vertical-scene-accent) 28%, transparent);
border-radius: 18px;
background: color-mix(in srgb, var(--vertical-scene-accent) 8%, rgba(255, 255, 255, 0.02));
}
body.vertical-page:not(.home-gateway-page) .vertical-call-phone__request strong {
color: #fff;
font-size: 1.04rem;
line-height: 1.2;
overflow-wrap: anywhere;
}
body.vertical-page:not(.home-gateway-page) .vertical-call-phone__request small {
color: rgba(226, 232, 240, 0.72);
font-size: 0.86rem;
line-height: 1.35;
}
body.vertical-page:not(.home-gateway-page) .vertical-call-phone__transcript {
display: grid;
gap: 9px;
}
body.vertical-page:not(.home-gateway-page) .vertical-call-phone__transcript p {
display: grid;
grid-template-columns: 56px minmax(0, 1fr);
gap: 9px;
margin: 0;
color: rgba(226, 232, 240, 0.74);
font-size: 0.88rem;
line-height: 1.38;
}
body.vertical-page:not(.home-gateway-page) .vertical-call-phone__transcript p span {
color: var(--vertical-scene-accent-strong);
font-size: 0.72rem;
font-weight: 900;
text-transform: uppercase;
}
body.vertical-page:not(.home-gateway-page) .vertical-call-scene__arrow {
display: grid;
place-items: center;
width: 44px;
height: 44px;
border: 1px solid color-mix(in srgb, var(--vertical-scene-accent) 44%, transparent);
border-radius: 999px;
color: #fff;
background:
radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.28), transparent 52%),
linear-gradient(135deg, var(--vertical-scene-accent), #5b5cf6);
box-shadow: 0 16px 36px var(--vertical-scene-glow);
font-weight: 950;
}
body.vertical-page:not(.home-gateway-page) .vertical-call-result {
display: grid;
gap: 13px;
min-height: 320px;
padding: 24px;
border-radius: 26px;
}
body.vertical-page:not(.home-gateway-page) .vertical-call-result h3 {
max-width: 12ch;
margin: 0;
color: #fff;
font-size: 2.05rem;
line-height: 1;
letter-spacing: 0;
}
body.vertical-page:not(.home-gateway-page) .vertical-call-result strong {
color: rgba(255, 255, 255, 0.88);
font-size: 1rem;
line-height: 1.25;
}
body.vertical-page:not(.home-gateway-page) .vertical-call-result ul {
display: grid;
gap: 9px;
margin: 0;
padding: 0;
list-style: none;
}
body.vertical-page:not(.home-gateway-page) .vertical-call-result li {
position: relative;
padding-left: 26px;
color: rgba(226, 232, 240, 0.76);
font-size: 0.95rem;
line-height: 1.34;
}
body.vertical-page:not(.home-gateway-page) .vertical-call-result li::before {
content: "";
position: absolute;
left: 0;
top: 0.42em;
width: 12px;
height: 12px;
border-radius: 999px;
background: var(--vertical-scene-accent);
box-shadow: 0 0 18px var(--vertical-scene-glow);
}
body.vertical-page:not(.home-gateway-page) .vertical-call-result a {
display: inline-flex;
min-height: 44px;
align-items: center;
align-self: end;
justify-self: start;
color: var(--vertical-scene-accent-strong);
font-weight: 900;
text-decoration: none;
}
body.vertical-page:not(.home-gateway-page) .vertical-call-scene__timeline {
position: relative;
z-index: 1;
grid-area: timeline;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
}
body.vertical-page:not(.home-gateway-page) .vertical-call-scene__timeline article {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 12px;
align-items: center;
min-height: 88px;
padding: 16px;
border-radius: 20px;
}
body.vertical-page:not(.home-gateway-page) .vertical-call-scene__timeline span {
display: grid;
place-items: center;
width: 38px;
height: 38px;
border: 1px solid color-mix(in srgb, var(--vertical-scene-accent) 42%, transparent);
border-radius: 999px;
color: #fff;
background: color-mix(in srgb, var(--vertical-scene-accent) 15%, rgba(255, 255, 255, 0.04));
font-weight: 950;
}
body.vertical-page:not(.home-gateway-page) .vertical-call-scene__timeline p {
margin: 0;
color: rgba(226, 232, 240, 0.76);
font-size: 0.95rem;
line-height: 1.36;
}
@keyframes verticalCallWave {
0%,
100% {
transform: scaleY(0.74);
opacity: 0.72;
}
50% {
transform: scaleY(1);
opacity: 1;
}
}
@media (max-width: 1080px) {
body.vertical-page:not(.home-gateway-page) .vertical-call-scene__shell {
grid-template-columns: 1fr;
grid-template-areas:
"copy"
"visual"
"timeline";
}
body.vertical-page:not(.home-gateway-page) .vertical-call-scene__copy h2 {
max-width: 16ch;
font-size: 3rem;
}
}
@media (max-width: 760px) {
body.vertical-page:not(.home-gateway-page) .vertical-call-scene {
padding-block: 24px 38px;
}
body.vertical-page:not(.home-gateway-page) .vertical-call-scene__shell {
width: calc(100% - 28px);
padding: 24px;
border-radius: 24px;
}
body.vertical-page:not(.home-gateway-page) .vertical-call-scene__copy h2 {
font-size: 2.25rem;
line-height: 1.02;
}
body.vertical-page:not(.home-gateway-page) .vertical-call-scene__visual,
body.vertical-page:not(.home-gateway-page) .vertical-call-scene__timeline {
grid-template-columns: 1fr;
}
body.vertical-page:not(.home-gateway-page) .vertical-call-scene__arrow {
justify-self: center;
transform: rotate(90deg);
}
body.vertical-page:not(.home-gateway-page) .vertical-call-phone,
body.vertical-page:not(.home-gateway-page) .vertical-call-result {
min-height: 0;
}
}
@media (max-width: 430px) {
body.vertical-page:not(.home-gateway-page) .vertical-call-scene__shell {
width: calc(100% - 20px);
padding: 18px;
}
body.vertical-page:not(.home-gateway-page) .vertical-call-scene__copy h2 {
font-size: 2rem;
}
body.vertical-page:not(.home-gateway-page) .vertical-call-phone,
body.vertical-page:not(.home-gateway-page) .vertical-call-result,
body.vertical-page:not(.home-gateway-page) .vertical-call-scene__timeline article {
border-radius: 18px;
}
body.vertical-page:not(.home-gateway-page) .vertical-call-phone__transcript p {
grid-template-columns: 1fr;
}
}
@media (prefers-reduced-motion: reduce) {
body.vertical-page:not(.home-gateway-page) .vertical-call-phone__wave span {
animation: none;
}
}
/* Public redesign iteration 6A: vertical subpages. */
body.vertical-page:not(.home-gateway-page) .vertical-subpage-scene {
padding-block: 28px 44px;
}
body.live-demo-body .live-demo-shell .vertical-subpage-scene {
padding-block: 4px 30px;
}
body.live-demo-body .live-demo-shell .vertical-subpage-scene .container {
width: 100%;
padding-inline: 0;
}
body.live-demo-body.vertical-page .live-demo-shell .vertical-subpage-scene__shell {
padding: clamp(42px, 4.4vw, 60px) clamp(44px, 4.6vw, 64px);
}
body.live-demo-body.vertical-page .live-demo-shell .vertical-subpage-scene__copy {
padding-inline-start: clamp(10px, 1.4vw, 24px);
}
body.vertical-page:not(.home-gateway-page) .vertical-subpage-scene__shell {
position: relative;
display: grid;
grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
grid-template-areas:
"copy board"
"timeline timeline";
gap: 24px;
overflow: hidden;
padding: clamp(36px, 3.8vw, 52px);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 28px;
background:
radial-gradient(circle at 12% 10%, var(--vertical-scene-glow), transparent 22rem),
radial-gradient(circle at 84% 2%, rgba(20, 184, 166, 0.15), transparent 24rem),
linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.02)),
rgba(8, 12, 24, 0.94);
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
}
body.vertical-page:not(.home-gateway-page) .vertical-subpage-scene__shell::before {
content: "";
position: absolute;
inset: 16px;
pointer-events: none;
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 22px;
}
body.vertical-page:not(.home-gateway-page) .vertical-subpage-scene__copy,
body.vertical-page:not(.home-gateway-page) .vertical-subpage-scene__board,
body.vertical-page:not(.home-gateway-page) .vertical-subpage-scene__timeline {
position: relative;
z-index: 1;
}
body.vertical-page:not(.home-gateway-page) .vertical-subpage-scene__copy {
grid-area: copy;
display: grid;
align-content: center;
gap: 16px;
min-width: 0;
padding-inline-start: clamp(6px, 1vw, 14px);
}
body.vertical-page:not(.home-gateway-page) .vertical-subpage-scene__copy h2 {
max-width: 13ch;
margin: 0;
color: #fff;
font-size: 2.85rem;
line-height: 1;
letter-spacing: 0;
}
body.vertical-page:not(.home-gateway-page) .vertical-subpage-scene__copy p {
margin: 0;
color: rgba(226, 232, 240, 0.76);
font-size: 1.02rem;
line-height: 1.56;
}
body.vertical-page:not(.home-gateway-page) .vertical-subpage-scene__chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
body.vertical-page:not(.home-gateway-page) .vertical-subpage-scene__chips span {
min-height: 32px;
padding: 8px 11px;
border: 1px solid color-mix(in srgb, var(--vertical-scene-accent) 36%, transparent);
border-radius: 999px;
color: var(--vertical-scene-accent-strong);
background: color-mix(in srgb, var(--vertical-scene-accent) 9%, transparent);
font-size: 0.76rem;
font-weight: 900;
line-height: 1;
letter-spacing: 0;
}
body.vertical-page:not(.home-gateway-page) .vertical-subpage-scene__board {
grid-area: board;
display: grid;
grid-template-columns: minmax(220px, 0.96fr) 42px minmax(230px, 0.9fr);
gap: 16px;
align-items: center;
min-width: 0;
}
body.vertical-page:not(.home-gateway-page) .vertical-subpage-call,
body.vertical-page:not(.home-gateway-page) .vertical-subpage-result,
body.vertical-page:not(.home-gateway-page) .vertical-subpage-scene__timeline article {
min-width: 0;
border: 1px solid rgba(255, 255, 255, 0.13);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.018)),
rgba(7, 11, 23, 0.82);
box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
backdrop-filter: blur(14px);
}
body.vertical-page:not(.home-gateway-page) .vertical-subpage-call {
display: grid;
gap: 13px;
min-height: 334px;
padding: 18px;
border-radius: 24px;
}
body.vertical-page:not(.home-gateway-page) .vertical-subpage-call__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
body.vertical-page:not(.home-gateway-page) .vertical-subpage-call__head span,
body.vertical-page:not(.home-gateway-page) .vertical-subpage-result > span {
color: var(--vertical-scene-accent-strong);
font-size: 0.72rem;
font-weight: 950;
text-transform: uppercase;
letter-spacing: 0;
}
body.vertical-page:not(.home-gateway-page) .vertical-subpage-call__head strong {
color: #fff;
font-size: 1rem;
line-height: 1.12;
text-align: right;
}
body.vertical-page:not(.home-gateway-page) .vertical-subpage-call__wave {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
height: 56px;
}
body.vertical-page:not(.home-gateway-page) .vertical-subpage-call__wave span {
width: 7px;
height: 22px;
border-radius: 999px;
background: linear-gradient(180deg, var(--vertical-scene-accent-strong), #6d5dfc);
box-shadow: 0 0 18px var(--vertical-scene-glow);
animation: verticalCallWave 1.35s ease-in-out infinite;
}
body.vertical-page:not(.home-gateway-page) .vertical-subpage-call__wave span:nth-child(2),
body.vertical-page:not(.home-gateway-page) .vertical-subpage-call__wave span:nth-child(4) {
height: 42px;
animation-delay: 0.12s;
}
body.vertical-page:not(.home-gateway-page) .vertical-subpage-call__wave span:nth-child(3) {
height: 54px;
animation-delay: 0.24s;
}
body.vertical-page:not(.home-gateway-page) .vertical-subpage-call__request {
display: grid;
gap: 6px;
padding: 14px;
border: 1px solid color-mix(in srgb, var(--vertical-scene-accent) 28%, transparent);
border-radius: 17px;
background: color-mix(in srgb, var(--vertical-scene-accent) 8%, rgba(255, 255, 255, 0.02));
}
body.vertical-page:not(.home-gateway-page) .vertical-subpage-call__request strong {
color: #fff;
font-size: 1rem;
line-height: 1.2;
overflow-wrap: anywhere;
}
body.vertical-page:not(.home-gateway-page) .vertical-subpage-call__request small {
color: rgba(226, 232, 240, 0.72);
font-size: 0.84rem;
line-height: 1.34;
}
body.vertical-page:not(.home-gateway-page) .vertical-subpage-call__transcript {
display: grid;
gap: 8px;
}
body.vertical-page:not(.home-gateway-page) .vertical-subpage-call__transcript p {
display: grid;
grid-template-columns: 52px minmax(0, 1fr);
gap: 8px;
margin: 0;
color: rgba(226, 232, 240, 0.74);
font-size: 0.84rem;
line-height: 1.34;
}
body.vertical-page:not(.home-gateway-page) .vertical-subpage-call__transcript span {
color: var(--vertical-scene-accent-strong);
font-size: max(11px, 0.68rem);
font-weight: 900;
text-transform: uppercase;
}
body.vertical-page:not(.home-gateway-page) .vertical-subpage-scene__arrow {
display: grid;
place-items: center;
width: 42px;
height: 42px;
border: 1px solid color-mix(in srgb, var(--vertical-scene-accent) 44%, transparent);
border-radius: 999px;
color: #fff;
background:
radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.28), transparent 52%),
linear-gradient(135deg, var(--vertical-scene-accent), #5b5cf6);
box-shadow: 0 14px 34px var(--vertical-scene-glow);
font-weight: 950;
}
body.vertical-page:not(.home-gateway-page) .vertical-subpage-result {
display: grid;
gap: 12px;
min-height: 292px;
padding: 22px;
border-radius: 24px;
}
body.vertical-page:not(.home-gateway-page) .vertical-subpage-result h3 {
max-width: 12ch;
margin: 0;
color: #fff;
font-size: 1.86rem;
line-height: 1;
letter-spacing: 0;
}
body.vertical-page:not(.home-gateway-page) .vertical-subpage-result strong {
color: rgba(255, 255, 255, 0.88);
font-size: 0.96rem;
line-height: 1.24;
}
body.vertical-page:not(.home-gateway-page) .vertical-subpage-result ul {
display: grid;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
}
body.vertical-page:not(.home-gateway-page) .vertical-subpage-result li {
position: relative;
padding-left: 24px;
color: rgba(226, 232, 240, 0.76);
font-size: 0.9rem;
line-height: 1.32;
}
body.vertical-page:not(.home-gateway-page) .vertical-subpage-result li::before {
content: "";
position: absolute;
left: 0;
top: 0.42em;
width: 11px;
height: 11px;
border-radius: 999px;
background: var(--vertical-scene-accent);
box-shadow: 0 0 16px var(--vertical-scene-glow);
}
body.vertical-page:not(.home-gateway-page) .vertical-subpage-result a {
align-self: end;
justify-self: start;
color: var(--vertical-scene-accent-strong);
font-size: 0.93rem;
font-weight: 900;
text-decoration: none;
}
body.vertical-page:not(.home-gateway-page) .vertical-subpage-result a:hover,
body.vertical-page:not(.home-gateway-page) .vertical-subpage-result a:focus-visible {
text-decoration: underline;
}
body.vertical-page:not(.home-gateway-page) .vertical-subpage-scene__timeline {
grid-area: timeline;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
min-width: 0;
}
body.vertical-page:not(.home-gateway-page) .vertical-subpage-scene__timeline article {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 11px;
align-items: center;
min-height: 76px;
padding: 14px;
border-radius: 18px;
}
body.vertical-page:not(.home-gateway-page) .vertical-subpage-scene__timeline span {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border: 1px solid color-mix(in srgb, var(--vertical-scene-accent) 42%, transparent);
border-radius: 999px;
color: #fff;
background: color-mix(in srgb, var(--vertical-scene-accent) 15%, rgba(255, 255, 255, 0.04));
font-weight: 950;
}
body.vertical-page:not(.home-gateway-page) .vertical-subpage-scene__timeline p {
margin: 0;
color: rgba(226, 232, 240, 0.76);
font-size: 0.9rem;
line-height: 1.34;
}
@media (max-width: 1080px) {
body.live-demo-body.vertical-page .live-demo-shell .vertical-subpage-scene__shell {
padding: 36px;
}
body.live-demo-body.vertical-page .live-demo-shell .vertical-subpage-scene__copy {
padding-inline-start: 4px;
}
body.vertical-page:not(.home-gateway-page) .vertical-subpage-scene__shell {
grid-template-columns: 1fr;
grid-template-areas:
"copy"
"board"
"timeline";
}
body.vertical-page:not(.home-gateway-page) .vertical-subpage-scene__copy h2 {
max-width: 18ch;
font-size: 2.55rem;
}
}
@media (max-width: 760px) {
body.vertical-page:not(.home-gateway-page) .vertical-subpage-scene {
padding-block: 18px 34px;
}
body.live-demo-body.vertical-page .live-demo-shell .vertical-subpage-scene__shell {
padding: 26px 22px;
}
body.vertical-page:not(.home-gateway-page) .vertical-subpage-scene__shell {
width: calc(100% - 28px);
padding: 26px;
border-radius: 23px;
}
body.vertical-page:not(.home-gateway-page) .vertical-subpage-scene__copy h2 {
font-size: 2.05rem;
line-height: 1.02;
}
body.vertical-page:not(.home-gateway-page) .vertical-subpage-scene__board,
body.vertical-page:not(.home-gateway-page) .vertical-subpage-scene__timeline {
grid-template-columns: 1fr;
}
body.vertical-page:not(.home-gateway-page) .vertical-subpage-scene__arrow {
justify-self: center;
transform: rotate(90deg);
}
body.vertical-page:not(.home-gateway-page) .vertical-subpage-call,
body.vertical-page:not(.home-gateway-page) .vertical-subpage-result {
min-height: 0;
}
}
@media (max-width: 430px) {
body.vertical-page:not(.home-gateway-page) .vertical-subpage-scene__shell {
width: calc(100% - 20px);
padding: 20px;
}
body.vertical-page:not(.home-gateway-page) .vertical-subpage-scene__copy h2 {
font-size: 1.9rem;
}
body.vertical-page:not(.home-gateway-page) .vertical-subpage-call,
body.vertical-page:not(.home-gateway-page) .vertical-subpage-result,
body.vertical-page:not(.home-gateway-page) .vertical-subpage-scene__timeline article {
border-radius: 17px;
}
body.vertical-page:not(.home-gateway-page) .vertical-subpage-call__transcript p {
grid-template-columns: 1fr;
}
}
@media (prefers-reduced-motion: reduce) {
body.vertical-page:not(.home-gateway-page) .vertical-subpage-call__wave span {
animation: none;
}
}
/* Public redesign iteration 7A: dedicated SEO product scenes. */
/* Public redesign iteration 7B: dynamic SEO product pages reuse product scenes. */
.seo-product-scene {
--seo-scene-accent: #5eead4;
--seo-scene-accent-strong: #a7f3d0;
--seo-scene-glow: rgba(45, 212, 191, 0.24);
--seo-scene-ink: #f8fafc;
--seo-scene-muted: rgba(226, 232, 240, 0.76);
padding-block: 18px 50px;
background:
radial-gradient(circle at 16% 10%, color-mix(in srgb, var(--seo-scene-accent) 20%, transparent), transparent 30%),
radial-gradient(circle at 88% 20%, rgba(129, 140, 248, 0.18), transparent 34%);
}
.seo-product-scene--violet {
--seo-scene-accent: #8b5cf6;
--seo-scene-accent-strong: #c4b5fd;
--seo-scene-glow: rgba(139, 92, 246, 0.28);
}
.seo-product-scene--cyan {
--seo-scene-accent: #22d3ee;
--seo-scene-accent-strong: #a5f3fc;
--seo-scene-glow: rgba(34, 211, 238, 0.24);
}
.seo-product-scene--emerald {
--seo-scene-accent: #34d399;
--seo-scene-accent-strong: #bbf7d0;
--seo-scene-glow: rgba(52, 211, 153, 0.24);
}
.seo-product-scene--amber {
--seo-scene-accent: #fbbf24;
--seo-scene-accent-strong: #fde68a;
--seo-scene-glow: rgba(251, 191, 36, 0.2);
}
.seo-product-scene--rose {
--seo-scene-accent: #fb7185;
--seo-scene-accent-strong: #fecdd3;
--seo-scene-glow: rgba(251, 113, 133, 0.22);
}
.seo-product-scene__shell {
position: relative;
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.34fr);
grid-template-areas:
"copy board"
"cards cards"
"timeline timeline";
gap: 20px;
padding: clamp(22px, 3vw, 34px);
border: 1px solid rgba(148, 163, 184, 0.2);
border-radius: 34px;
background:
linear-gradient(135deg, rgba(15, 23, 42, 0.94), rgba(8, 13, 26, 0.96)),
radial-gradient(circle at 72% 16%, var(--seo-scene-glow), transparent 40%);
box-shadow: 0 26px 80px rgba(2, 6, 23, 0.36);
overflow: hidden;
}
.seo-product-scene__shell::before {
content: "";
position: absolute;
inset: -40% auto auto 48%;
width: 360px;
height: 360px;
border-radius: 999px;
background: radial-gradient(circle, var(--seo-scene-glow), transparent 68%);
pointer-events: none;
}
.seo-product-scene__copy,
.seo-product-scene__board,
.seo-product-scene__cards,
.seo-product-scene__timeline {
position: relative;
z-index: 1;
}
.seo-product-scene__copy {
grid-area: copy;
display: grid;
align-content: center;
gap: 14px;
min-width: 0;
}
.seo-product-scene__copy h2 {
max-width: 13ch;
margin: 0;
color: var(--seo-scene-ink);
font-size: clamp(2.2rem, 4.1vw, 4.25rem);
line-height: 0.98;
letter-spacing: 0;
}
.seo-product-scene__copy p {
max-width: 56ch;
margin: 0;
color: var(--seo-scene-muted);
font-size: 1.03rem;
line-height: 1.6;
}
.seo-product-scene__board {
grid-area: board;
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
gap: 16px;
align-items: center;
}
.seo-product-call,
.seo-product-result,
.seo-product-scene__cards article,
.seo-product-scene__timeline article {
border-color: rgba(148, 163, 184, 0.22);
background:
linear-gradient(145deg, rgba(15, 23, 42, 0.92), rgba(2, 6, 23, 0.78)),
radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--seo-scene-accent) 15%, transparent), transparent 58%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 18px 50px rgba(2, 6, 23, 0.24);
}
.seo-product-call {
display: grid;
gap: 16px;
min-height: 326px;
padding: 22px;
border-radius: 28px;
}
.seo-product-call__badge {
display: flex;
align-items: center;
gap: 10px;
color: var(--seo-scene-accent-strong);
font-size: 0.78rem;
font-weight: 950;
text-transform: uppercase;
}
.seo-product-call__badge span {
width: 42px;
height: 42px;
border-radius: 15px;
background:
radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.85), transparent 12%),
radial-gradient(circle at 58% 58%, #fff, transparent 10%),
linear-gradient(135deg, var(--seo-scene-accent), #4f46e5);
box-shadow: 0 14px 34px var(--seo-scene-glow);
}
.seo-product-call__number {
color: #fff;
font-size: clamp(1.42rem, 2.4vw, 2rem);
font-weight: 950;
line-height: 1.08;
text-align: center;
overflow-wrap: anywhere;
}
.seo-product-call__wave {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
min-height: 62px;
}
.seo-product-call__wave span {
width: 7px;
height: 24px;
border-radius: 999px;
background: linear-gradient(180deg, var(--seo-scene-accent-strong), var(--seo-scene-accent));
box-shadow: 0 0 18px var(--seo-scene-glow);
animation: verticalCallWave 1.35s ease-in-out infinite;
}
.seo-product-call__wave span:nth-child(2),
.seo-product-call__wave span:nth-child(4) {
height: 42px;
animation-delay: 0.12s;
}
.seo-product-call__wave span:nth-child(3) {
height: 58px;
animation-delay: 0.24s;
}
.seo-product-call__transcript {
display: grid;
gap: 9px;
}
.seo-product-call__transcript p {
display: grid;
gap: 5px;
margin: 0;
padding: 12px;
border: 1px solid rgba(148, 163, 184, 0.14);
border-radius: 16px;
color: rgba(226, 232, 240, 0.84);
background: rgba(15, 23, 42, 0.54);
font-size: 0.9rem;
line-height: 1.34;
}
.seo-product-call__transcript span {
color: var(--seo-scene-accent-strong);
font-size: max(11px, 0.68rem);
font-weight: 950;
text-transform: uppercase;
}
.seo-product-call__transcript .seo-product-call__line {
color: inherit;
font-size: inherit;
font-weight: inherit;
text-transform: none;
}
.seo-product-scene__arrow {
display: grid;
place-items: center;
width: 42px;
height: 42px;
border: 1px solid color-mix(in srgb, var(--seo-scene-accent) 44%, transparent);
border-radius: 999px;
color: #fff;
background:
radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.24), transparent 52%),
linear-gradient(135deg, var(--seo-scene-accent), #4f46e5);
box-shadow: 0 14px 34px var(--seo-scene-glow);
font-weight: 950;
}
.seo-product-result {
display: grid;
gap: 14px;
min-height: 326px;
padding: 24px;
border-radius: 28px;
}
.seo-product-result > span {
justify-self: start;
padding: 7px 10px;
border: 1px solid color-mix(in srgb, var(--seo-scene-accent) 38%, transparent);
border-radius: 999px;
color: var(--seo-scene-accent-strong);
background: color-mix(in srgb, var(--seo-scene-accent) 12%, transparent);
font-size: 0.72rem;
font-weight: 950;
text-transform: uppercase;
}
.seo-product-result h3 {
max-width: 12ch;
margin: 0;
color: #fff;
font-size: clamp(1.9rem, 3vw, 2.65rem);
line-height: 0.98;
letter-spacing: 0;
overflow-wrap: anywhere;
}
.seo-product-result ul {
display: grid;
gap: 9px;
margin: 0;
padding: 0;
list-style: none;
}
.seo-product-result li {
position: relative;
padding-left: 24px;
color: rgba(226, 232, 240, 0.78);
font-size: 0.94rem;
line-height: 1.34;
}
.seo-product-result li::before {
content: "";
position: absolute;
left: 0;
top: 0.43em;
width: 11px;
height: 11px;
border-radius: 999px;
background: var(--seo-scene-accent);
box-shadow: 0 0 16px var(--seo-scene-glow);
}
.seo-product-result strong {
align-self: end;
color: var(--seo-scene-accent-strong);
font-size: 0.94rem;
line-height: 1.34;
}
.seo-product-scene__cards {
grid-area: cards;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
}
.seo-product-scene__cards article {
display: grid;
gap: 8px;
min-height: 150px;
padding: 18px;
border-radius: 20px;
}
.seo-product-scene__cards span {
color: var(--seo-scene-accent-strong);
font-size: 0.72rem;
font-weight: 950;
text-transform: uppercase;
}
.seo-product-scene__cards h3 {
margin: 0;
color: #fff;
font-size: 1.02rem;
line-height: 1.17;
}
.seo-product-scene__cards p {
margin: 0;
color: rgba(226, 232, 240, 0.72);
font-size: 0.92rem;
line-height: 1.42;
}
.seo-product-scene__timeline {
grid-area: timeline;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
}
.seo-product-scene__timeline article {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 12px;
align-items: center;
min-height: 78px;
padding: 15px;
border-radius: 18px;
}
.seo-product-scene__timeline span {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border: 1px solid color-mix(in srgb, var(--seo-scene-accent) 42%, transparent);
border-radius: 999px;
color: #fff;
background: color-mix(in srgb, var(--seo-scene-accent) 15%, rgba(255, 255, 255, 0.04));
font-weight: 950;
}
.seo-product-scene__timeline p {
margin: 0;
color: rgba(226, 232, 240, 0.76);
font-size: 0.9rem;
line-height: 1.34;
}
@media (max-width: 1100px) {
.seo-product-scene__shell {
grid-template-columns: 1fr;
grid-template-areas:
"copy"
"board"
"cards"
"timeline";
}
.seo-product-scene__copy h2 {
max-width: 18ch;
}
}
@media (max-width: 860px) {
.seo-product-scene__board,
.seo-product-scene__cards {
grid-template-columns: 1fr;
}
.seo-product-scene__arrow {
justify-self: center;
transform: rotate(90deg);
}
.seo-product-call,
.seo-product-result,
.seo-product-scene__cards article {
min-height: 0;
}
}
@media (max-width: 760px) {
.seo-product-scene {
padding-block: 12px 34px;
}
.seo-product-scene__shell {
width: calc(100% - 28px);
padding: 20px;
border-radius: 24px;
}
.seo-product-scene__copy h2 {
font-size: 2.05rem;
line-height: 1.03;
}
.seo-product-scene__timeline {
grid-template-columns: 1fr;
}
}
@media (max-width: 430px) {
.seo-product-scene__shell {
width: calc(100% - 20px);
padding: 17px;
}
.seo-product-call,
.seo-product-result,
.seo-product-scene__cards article,
.seo-product-scene__timeline article {
border-radius: 17px;
}
}
@media (prefers-reduced-motion: reduce) {
.seo-product-call__wave span {
animation: none;
}
}
/* iPad 11 and tablet polish: keep public pages dense, readable and without native rails. */
@media (min-width: 721px) and (max-width: 1100px) {
html,
body {
max-width: 100%;
overflow-x: hidden;
}
body.landing-page :is(section, article, div, form, nav, ul, li, fieldset),
body.marketing-page :is(section, article, div, form, nav, ul, li, fieldset) {
min-width: 0;
}
body.landing-page :is(h1, h2, h3, p, strong, span, small, a, button, label, input, textarea),
body.marketing-page :is(h1, h2, h3, p, strong, span, small, a, button, label, input, textarea) {
max-width: 100%;
overflow-wrap: anywhere;
}
body.landing-page :is(.container, .legal-hero__card, .home-section__inner, .live-demo-shell,
.demo-booking-shell, .seo-product-scene__shell, .pricing-plans-shell,
.pricing-clarity__shell, .public-feature-bridge .container),
body.marketing-page :is(.container, .legal-hero__card, .home-section__inner) {
width: min(100% - 32px, var(--container, 1180px));
max-width: calc(100% - 32px);
}
body.landing-refresh:not(.home-gateway-page) .legal-hero {
padding-block: clamp(26px, 4vw, 54px);
}
body.landing-refresh:not(.home-gateway-page) .legal-hero__card {
padding: clamp(30px, 5vw, 54px);
border-radius: 28px;
}
body.landing-refresh:not(.home-gateway-page) .legal-hero__card h1 {
max-width: 13.5ch;
font-size: clamp(3rem, 6.2vw, 4.7rem);
line-height: 0.98;
text-wrap: balance;
}
body.landing-refresh:not(.home-gateway-page) .legal-hero__card p {
max-width: 68ch;
}
body.landing-refresh:not(.home-gateway-page) .home-hero__actions,
body.landing-refresh:not(.home-gateway-page) .home-cta__actions,
body.landing-refresh:not(.home-gateway-page) .marketing-inline-actions,
body.live-demo-body .voice-actions,
body.home-gateway-page .home-premium-actions {
display: flex;
flex-wrap: wrap;
align-items: stretch;
justify-content: center;
gap: 12px;
}
body.landing-refresh:not(.home-gateway-page) .home-hero__actions .btn,
body.landing-refresh:not(.home-gateway-page) .home-cta__actions .btn,
body.landing-refresh:not(.home-gateway-page) .marketing-inline-actions .btn,
body.live-demo-body .voice-actions .btn,
body.home-gateway-page .home-premium-actions .btn {
flex: 1 1 208px;
min-width: 0;
max-width: 320px;
min-height: 52px;
justify-content: center;
text-align: center;
white-space: normal;
}
.public-product-nav__inner {
width: calc(100% - 32px);
gap: 8px;
}
.public-product-nav a {
min-height: 44px;
padding-inline: 13px;
white-space: normal;
text-align: center;
}
.public-feature-bridge__grid,
.seo-product-scene__cards,
.seo-product-scene__timeline {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.live-demo-body .live-demo-scenario-options,
body.live-demo-body .live-demo-proof-grid,
body.live-demo-body .live-demo-output-grid,
body.live-demo-body .live-demo-steps {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.live-demo-body :is(.live-demo-personalizer, .live-demo-console, .live-demo-after-grid, .demo-phone-card) {
max-width: 100%;
}
body.live-demo-body .live-demo-scenario-options button {
min-width: 0;
}
}
/* iPad 11 polish for the homepage and guided agent builder. */
@media (min-width: 721px) and (max-width: 1220px) {
body.home-gateway-page .home-gateway {
padding-block: clamp(22px, 3.2vw, 38px) clamp(38px, 5vw, 66px);
}
body.home-gateway-page .home-gateway-shell {
width: min(calc(100% - 44px), 1060px) !important;
max-width: 1060px !important;
gap: clamp(22px, 3vw, 34px);
}
body.home-gateway-page .home-premium-hero--solo {
padding-block: clamp(12px, 2vw, 22px) clamp(26px, 4vw, 44px) !important;
}
body.home-gateway-page .home-premium-hero--solo .home-gateway-intro {
gap: 16px !important;
}
body.home-gateway-page .home-premium-hero--solo .home-gateway-intro h1 {
max-width: min(100%, 13.4ch) !important;
font-size: clamp(3.25rem, 7.1vw, 5.3rem) !important;
line-height: 0.96 !important;
text-wrap: balance;
}
body.home-gateway-page .home-premium-hero--solo .home-gateway-intro h1 span {
white-space: normal !important;
}
body.home-gateway-page .home-premium-hero--solo .home-gateway-intro p {
max-width: 680px !important;
font-size: clamp(1rem, 1.7vw, 1.12rem) !important;
}
body.home-gateway-page .home-premium-actions {
width: min(100%, 720px);
margin-inline: auto;
}
body.home-gateway-page .home-premium-actions .btn {
flex: 1 1 260px;
min-height: 54px;
}
body.home-gateway-page .home-premium-assistive-cta {
margin-top: -4px;
}
body.home-gateway-page .home-gateway-proof {
width: min(100%, 860px) !important;
max-width: 860px !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
body.home-gateway-page .home-gateway-proof span {
min-height: 104px;
padding: 15px 14px;
}
body.home-gateway-page .home-product-intro {
grid-template-columns: minmax(0, 1fr) !important;
margin-block: 12px 30px;
padding: 22px;
border-radius: 24px;
}
body.home-gateway-page .home-product-intro__copy {
align-content: start;
justify-items: start;
}
body.home-gateway-page .home-product-intro__copy h2 {
max-width: 15ch;
font-size: clamp(2rem, 4.4vw, 3rem);
}
body.home-gateway-page .home-product-intro__visual {
min-height: 0;
grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1fr);
align-items: stretch;
padding: 18px;
}
body.home-gateway-page .home-product-intro__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
body.home-gateway-page .home-product-intro__grid article {
min-height: 0;
padding: 14px;
border-radius: 18px;
}
body.home-gateway-page .home-gateway-panel {
gap: 18px;
padding: clamp(18px, 2.6vw, 26px);
border-radius: 22px;
}
body.home-gateway-page .home-gateway-panel .home-premium-section-head--compact {
display: grid;
justify-items: start;
gap: 7px;
text-align: left;
}
body.home-gateway-page .home-gateway-panel .home-premium-section-head--compact h2 {
max-width: 16ch;
font-size: clamp(2rem, 4vw, 3rem);
line-height: 1;
}
body.home-gateway-page .home-gateway-panel .home-premium-section-head--compact p {
max-width: 62ch;
margin-inline: 0;
}
body.home-gateway-page .home-gateway-step {
grid-template-columns: 42px minmax(0, 1fr);
gap: 12px;
}
body.home-gateway-page .home-gateway-step > span {
width: 42px;
height: 42px;
}
body.home-gateway-page .home-gateway-step h2 {
font-size: clamp(1.22rem, 2.2vw, 1.55rem);
}
body.home-gateway-page .home-gateway-verticals {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 12px !important;
overflow: visible !important;
}
body.home-gateway-page .home-gateway-vertical {
display: grid;
grid-template-columns: 44px minmax(0, 1fr);
grid-template-rows: auto auto;
align-items: start;
min-height: 128px;
padding: 14px;
gap: 10px 12px;
border-radius: 18px;
}
body.home-gateway-page .home-gateway-vertical .home-intake-vertical__icon {
width: 44px;
height: 44px;
}
body.home-gateway-page .home-gateway-vertical .home-intake-vertical__text {
min-width: 0;
}
body.home-gateway-page .home-gateway-vertical .home-intake-vertical__text small {
display: block !important;
line-height: 1.32;
}
body.home-gateway-page .home-gateway-vertical__cta {
grid-column: 1 / -1;
justify-self: start;
align-self: end;
padding-top: 2px;
}
body.home-gateway-page .home-gateway-search {
padding: 16px;
border-radius: 18px;
}
body.home-gateway-page .home-gateway-search form {
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(160px, auto) !important;
gap: 10px !important;
align-items: stretch;
}
body.home-gateway-page .home-gateway-search .home-intake-search__field,
body.home-gateway-page .home-gateway-search .btn {
min-height: 54px;
}
body.home-gateway-page .home-gateway-results {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
body.home-gateway-page .home-gateway-recovered--editable {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
body.home-gateway-page .home-gateway-recovered--editable label {
min-width: 0;
}
body.home-gateway-page .home-gateway-recovered--editable label:nth-child(4),
body.home-gateway-page .home-gateway-recovered--editable label:nth-child(5) {
grid-column: 1 / -1;
}
body.home-gateway-page .home-gateway-recovered--editable input,
body.home-gateway-page .home-gateway-recovered--editable textarea {
width: 100%;
min-width: 0;
}
body.home-gateway-page .home-gateway-next {
grid-template-columns: minmax(0, 1fr) minmax(210px, auto);
align-items: center;
gap: 10px 16px;
padding: 16px;
border-radius: 18px;
}
body.home-gateway-page .home-gateway-next > span,
body.home-gateway-page .home-gateway-next h2,
body.home-gateway-page .home-gateway-next p {
grid-column: 1;
}
body.home-gateway-page .home-gateway-next .btn {
grid-column: 2;
grid-row: 1 / span 3;
min-height: 52px;
align-self: center;
}
body.home-gateway-page .home-studio-stage,
body.home-gateway-page .home-studio-live,
body.home-gateway-page .home-studio-test-suite,
body.home-gateway-page .home-studio-signup-step {
border-radius: 22px;
padding: clamp(18px, 2.6vw, 24px);
}
body.home-gateway-page .home-gateway-source-grid,
body.home-gateway-page .home-studio-test-layout,
body.home-gateway-page .home-studio-live__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
body.home-gateway-page .home-gateway-source-card {
border-radius: 18px;
}
body.home-gateway-page .home-studio-test-kpis {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
body.home-gateway-page .home-studio-test-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 721px) and (max-width: 900px) {
body.home-gateway-page .home-gateway-shell {
width: min(calc(100% - 32px), 820px) !important;
}
body.home-gateway-page .home-premium-hero--solo .home-gateway-intro h1 {
max-width: 12.4ch !important;
font-size: clamp(3.05rem, 8.4vw, 4.55rem) !important;
}
body.home-gateway-page .home-gateway-proof {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 8px;
}
body.home-gateway-page .home-gateway-proof span {
display: flex !important;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
gap: 6px;
min-height: 112px;
padding: 13px 12px;
}
body.home-gateway-page .home-gateway-proof span::before {
flex: 0 0 auto;
align-self: flex-start;
justify-self: auto;
margin: 0 0 2px;
}
body.home-gateway-page .home-gateway-proof strong,
body.home-gateway-page .home-gateway-proof small {
display: block;
width: 100%;
overflow-wrap: normal !important;
word-break: normal !important;
hyphens: none;
}
body.home-gateway-page .home-gateway-proof strong {
font-size: 0.91rem;
}
body.home-gateway-page .home-gateway-proof small {
font-size: 0.76rem;
line-height: 1.28;
}
body.home-gateway-page .home-product-intro__visual {
grid-template-columns: 1fr;
}
body.home-gateway-page .home-product-phone,
body.home-gateway-page .home-product-result {
max-width: 100%;
}
body.home-gateway-page .home-product-intro__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.home-gateway-page .home-gateway-verticals {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
body.home-gateway-page .home-gateway-search form,
body.home-gateway-page .home-gateway-recovered--editable,
body.home-gateway-page .home-gateway-source-grid,
body.home-gateway-page .home-studio-test-layout,
body.home-gateway-page .home-studio-live__grid {
grid-template-columns: 1fr !important;
}
body.home-gateway-page .home-gateway-next {
grid-template-columns: 1fr;
}
body.home-gateway-page .home-gateway-next > span,
body.home-gateway-page .home-gateway-next h2,
body.home-gateway-page .home-gateway-next p,
body.home-gateway-page .home-gateway-next .btn {
grid-column: 1;
grid-row: auto;
}
body.home-gateway-page .home-gateway-next .btn {
width: 100%;
}
}
/* iPad 11 landscape: make the public homepage read as one premium screen per section. */
@media (min-width: 1000px) and (max-width: 1220px) and (orientation: landscape) {
html:has(body.home-gateway-page) {
scroll-padding-top: 78px;
}
body.home-gateway-page .site-main {
scroll-snap-type: y proximity;
}
body.home-gateway-page .home-gateway {
padding-block: 10px 24px !important;
}
body.home-gateway-page .home-gateway-shell {
--ipad-home-screen: calc(100svh - 124px);
gap: 22px !important;
}
body.home-gateway-page .home-premium-hero--solo,
body.home-gateway-page .home-product-intro,
body.home-gateway-page .home-site-gateway.home-discovery-sections,
body.home-gateway-page .home-homepage-section,
body.home-gateway-page #create-agent {
min-height: var(--ipad-home-screen);
scroll-margin-top: 78px;
scroll-snap-align: start;
}
body.home-gateway-page .home-premium-hero--solo {
align-content: center;
block-size: var(--ipad-home-screen) !important;
height: var(--ipad-home-screen) !important;
min-height: var(--ipad-home-screen) !important;
padding-block: 16px !important;
}
body.home-gateway-page #top .home-gateway-shell > .home-premium-hero--solo {
block-size: var(--ipad-home-screen) !important;
height: var(--ipad-home-screen) !important;
min-block-size: var(--ipad-home-screen) !important;
min-height: var(--ipad-home-screen) !important;
}
body.home-gateway-page .home-premium-hero--solo .home-gateway-intro {
gap: 14px !important;
}
body.home-gateway-page .home-premium-hero--solo .home-gateway-intro h1 {
max-width: 13.2ch !important;
font-size: clamp(4.25rem, 6vw, 5rem) !important;
line-height: 0.94 !important;
}
body.home-gateway-page .home-premium-hero--solo .home-gateway-intro p {
max-width: 700px !important;
font-size: 1.03rem !important;
line-height: 1.42 !important;
}
body.home-gateway-page .home-gateway-proof {
max-width: 820px !important;
gap: 10px !important;
}
body.home-gateway-page .home-gateway-proof span {
min-height: 92px !important;
padding: 13px !important;
}
body.home-gateway-page .home-product-intro {
grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr) !important;
grid-template-areas:
"copy visual"
"grid grid"
"flow flow";
align-content: center;
gap: 12px 18px;
margin-block: 0 !important;
padding: 16px !important;
border-radius: 22px !important;
}
body.home-gateway-page .home-product-intro__copy {
grid-area: copy;
align-content: end;
gap: 9px;
}
body.home-gateway-page .home-product-intro__copy h2 {
max-width: 11.5ch;
font-size: clamp(2.2rem, 3.1vw, 2.85rem);
line-height: 0.98;
}
body.home-gateway-page .home-product-intro__copy p {
max-width: 33ch;
font-size: 0.96rem;
line-height: 1.42;
}
body.home-gateway-page .home-product-intro__visual {
grid-area: visual;
grid-template-columns: minmax(170px, 0.72fr) minmax(0, 1fr);
align-items: center;
min-height: 0 !important;
height: min(398px, calc(var(--ipad-home-screen) - 214px));
padding: 14px !important;
}
body.home-gateway-page .home-product-phone {
width: min(100%, 190px);
padding: 28px 16px 30px;
gap: 11px;
border-radius: 28px;
}
body.home-gateway-page .home-product-phone__logo {
width: 48px;
height: 48px;
border-radius: 14px;
}
body.home-gateway-page .home-product-wave {
height: 48px;
width: min(100%, 142px);
}
body.home-gateway-page .home-product-wave i:nth-child(8) {
--wave-h: 50px;
}
body.home-gateway-page .home-product-phone__actions {
gap: 20px;
margin-top: 2px;
}
body.home-gateway-page .home-product-phone__actions b {
width: 42px;
height: 42px;
}
body.home-gateway-page .home-product-result {
gap: 11px;
padding: 18px;
border-radius: 24px;
}
body.home-gateway-page .home-product-result__icon {
width: 54px;
height: 54px;
}
body.home-gateway-page .home-product-result__title {
font-size: 1.72rem;
line-height: 0.96;
}
body.home-gateway-page .home-product-result ul {
gap: 8px;
}
body.home-gateway-page .home-product-result li {
padding: 10px;
border-radius: 14px;
}
body.home-gateway-page .home-product-intro__grid {
grid-area: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 9px;
}
body.home-gateway-page .home-product-intro__grid article {
min-height: 0 !important;
gap: 7px;
padding: 12px;
border-radius: 15px;
}
body.home-gateway-page .home-product-intro__grid article span {
height: 32px;
min-width: 40px;
font-size: 0.72rem;
}
body.home-gateway-page .home-product-intro__grid article strong {
font-size: 0.98rem;
}
body.home-gateway-page .home-product-intro__grid article p {
font-size: 0.86rem;
line-height: 1.33;
}
body.home-gateway-page .home-site-gateway.home-discovery-sections {
align-content: center;
gap: 16px;
margin-block: 0 !important;
padding: 18px !important;
border-radius: 24px !important;
}
body.home-gateway-page .home-discovery-sections__intro {
gap: 9px;
}
body.home-gateway-page .home-discovery-sections__intro h2 {
max-width: 16ch;
font-size: clamp(2.45rem, 3.8vw, 3.35rem);
line-height: 0.98;
}
body.home-gateway-page .home-discovery-sections__intro p {
max-width: 58ch;
font-size: 0.98rem;
line-height: 1.42;
}
body.home-gateway-page .home-discovery-sections__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
body.home-gateway-page .home-discovery-section a {
grid-template-columns: 42px minmax(0, 1fr);
gap: 9px 11px;
min-height: 158px;
padding: 15px;
border-radius: 18px;
}
body.home-gateway-page .home-discovery-section__index {
width: 42px;
height: 42px;
border-radius: 13px;
font-size: 0.84rem;
}
body.home-gateway-page .home-discovery-section__eyebrow {
font-size: 0.76rem;
}
body.home-gateway-page .home-discovery-section h3 {
margin-top: 0;
font-size: 1.12rem;
line-height: 1.12;
}
body.home-gateway-page .home-discovery-section p {
font-size: 0.88rem;
line-height: 1.34;
}
body.home-gateway-page .home-discovery-section__cta {
margin-top: 0;
padding: 8px 10px;
font-size: 0.78rem;
}
body.home-gateway-page .home-homepage-section {
display: grid;
align-content: center;
margin-block: 0 !important;
padding-block: 18px;
}
body.home-gateway-page .home-homepage-section .home-section__head {
gap: 10px;
margin-bottom: 16px;
}
body.home-gateway-page .home-homepage-section .home-section__head h2,
body.home-gateway-page .home-dashboard-story__copy h2,
body.home-gateway-page .home-trust-panel h2 {
max-width: 15ch;
font-size: clamp(2.35rem, 3.55vw, 3.1rem);
line-height: 0.98;
}
body.home-gateway-page .home-homepage-section .home-section__head p,
body.home-gateway-page .home-dashboard-story__copy p,
body.home-gateway-page .home-trust-panel p {
max-width: 58ch;
font-size: 0.98rem;
line-height: 1.42;
}
body.home-gateway-page .home-industry-strip__grid {
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 10px;
}
body.home-gateway-page .home-industry-strip__grid a {
min-height: 150px;
padding: 15px;
border-radius: 18px;
}
body.home-gateway-page .home-dashboard-story {
grid-template-columns: minmax(0, 0.84fr) minmax(340px, 1fr);
gap: 20px;
padding-block: 18px;
}
body.home-gateway-page .home-dashboard-story__copy {
gap: 12px;
}
body.home-gateway-page .home-dashboard-card {
gap: 10px;
padding: 18px;
border-radius: 22px;
}
body.home-gateway-page .home-dashboard-card__bar strong {
font-size: 2.1rem;
}
body.home-gateway-page .home-dashboard-card__summary {
padding: 14px;
border-radius: 16px;
}
body.home-gateway-page .home-dashboard-card__summary h3 {
font-size: 1.24rem;
}
body.home-gateway-page .home-dashboard-card__grid span {
padding: 11px;
border-radius: 14px;
}
body.home-gateway-page .home-integration-flow {
padding-block: 18px;
}
body.home-gateway-page .home-integration-flow__grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
}
body.home-gateway-page .home-integration-flow__grid article {
min-height: 150px;
padding: 15px;
border-radius: 18px;
}
body.home-gateway-page .home-trust-panel {
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
align-items: center;
gap: 20px;
padding: 22px;
border-radius: 22px;
}
body.home-gateway-page .home-trust-panel__items {
gap: 10px;
}
body.home-gateway-page .home-trust-panel__items a {
padding: 15px;
border-radius: 18px;
}
body.home-gateway-page .home-faq-panel__grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
}
body.home-gateway-page .home-faq-panel details {
align-content: start;
padding: 15px;
border-radius: 18px;
}
body.home-gateway-page .home-faq-panel summary {
font-size: 1rem;
}
body.home-gateway-page .home-faq-panel p {
font-size: 0.9rem;
line-height: 1.35;
}
body.home-gateway-page #create-agent {
align-content: center;
gap: 14px;
margin-block: 0 !important;
padding: 18px !important;
border-radius: 24px !important;
}
body.home-gateway-page #create-agent .home-premium-section-head--compact {
padding: 16px 18px;
border-radius: 18px;
background: rgba(14, 116, 144, 0.12);
}
body.home-gateway-page #create-agent .home-premium-section-head--compact h2 {
max-width: 15ch;
font-size: clamp(2.2rem, 3.4vw, 3rem);
}
body.home-gateway-page #create-agent .home-premium-section-head--compact p {
max-width: 56ch;
font-size: 0.98rem;
}
body.home-gateway-page #create-agent .home-gateway-step {
gap: 12px;
}
body.home-gateway-page #create-agent .home-gateway-verticals {
grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
gap: 10px !important;
}
body.home-gateway-page #create-agent .home-gateway-vertical {
grid-template-columns: 42px minmax(0, 1fr);
min-height: 132px;
padding: 13px;
border-radius: 18px;
}
body.home-gateway-page #create-agent .home-gateway-vertical .home-intake-vertical__icon {
width: 42px;
height: 42px;
}
body.home-gateway-page #create-agent .home-gateway-vertical .home-intake-vertical__text strong {
font-size: 1rem;
}
body.home-gateway-page #create-agent .home-gateway-vertical .home-intake-vertical__text small {
font-size: 0.84rem;
line-height: 1.3;
}
body.home-gateway-page #create-agent .home-gateway-vertical__cta {
font-size: 0.72rem;
}
}
/* Pixel polish follow-up 2026-07-11 - final public edge cases. */
@media (min-width: 900px) and (max-width: 1220px) {
body.landing-refresh.industry-page.restaurant-voice-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-cta__card {
display: grid !important;
grid-template-columns: 1fr !important;
align-items: start !important;
justify-items: stretch !important;
text-align: center !important;
}
body.landing-refresh.industry-page.restaurant-voice-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-cta__actions {
display: grid !important;
grid-template-columns: repeat(2, minmax(220px, 1fr)) !important;
width: min(720px, calc(100vw - 96px)) !important;
margin-inline: auto !important;
align-items: stretch !important;
justify-content: stretch !important;
gap: 12px !important;
}
body.landing-refresh.industry-page.restaurant-voice-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-cta__actions .btn {
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
min-height: 46px !important;
padding-inline: 1rem !important;
white-space: normal !important;
overflow-wrap: anywhere !important;
word-break: normal !important;
}
body.landing-refresh.industry-page.restaurant-voice-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-cta__actions .btn:last-child {
grid-column: 1 / -1 !important;
justify-self: center !important;
width: min(100%, 360px) !important;
}
}
@media (max-width: 760px) {
body.vertical-page:not(.home-gateway-page) #vertical-pricing-decision .vertical-pricing-grid {
width: min(100% - 24px, var(--container, 1180px)) !important;
max-width: calc(100% - 24px) !important;
}
body.vertical-page:not(.home-gateway-page) #vertical-pricing-decision .vertical-pricing-grid > article:not(.vertical-roi-card) {
overflow: visible !important;
padding: 30px clamp(24px, 6.6vw, 30px) !important;
}
body.vertical-page:not(.home-gateway-page) #vertical-pricing-decision .vertical-pricing-grid > article:not(.vertical-roi-card) h2 {
max-width: min(100%, 19ch) !important;
font-size: clamp(1.65rem, 6vw, 2.1rem) !important;
line-height: 1.18 !important;
}
body.vertical-page:not(.home-gateway-page) #vertical-pricing-decision .vertical-pricing-grid > article:not(.vertical-roi-card) ul {
display: grid !important;
gap: 8px !important;
margin: 18px 0 0 !important;
padding-left: 0 !important;
list-style: none !important;
}
body.vertical-page:not(.home-gateway-page) #vertical-pricing-decision .vertical-pricing-grid > article:not(.vertical-roi-card) li {
position: relative !important;
padding-left: 18px !important;
color: rgba(248, 250, 252, 0.9) !important;
font-size: clamp(1rem, 4.2vw, 1.14rem) !important;
line-height: 1.46 !important;
}
body.vertical-page:not(.home-gateway-page) #vertical-pricing-decision .vertical-pricing-grid > article:not(.vertical-roi-card) li::before {
content: "" !important;
position: absolute !important;
left: 0 !important;
top: 0.72em !important;
width: 4px !important;
height: 4px !important;
border-radius: 999px !important;
background: currentColor !important;
}
}
@media (max-width: 767px) {
body.legal-notice-page .legal-card a:not(.btn) {
display: inline-flex !important;
min-height: 44px !important;
align-items: center !important;
padding-block: 8px !important;
overflow-wrap: anywhere !important;
}
}
body.missed-call-calculator-page:not([data-theme="light"]) .calculator-form .calculator-field input,
body.missed-call-calculator-page:not([data-theme="light"]) .calculator-form .calculator-field select {
color: #fff !important;
-webkit-text-fill-color: #fff !important;
}
body.missed-call-calculator-page .calculator-form .calculator-field select {
min-width: 0 !important;
text-overflow: clip !important;
}
body.missed-call-calculator-page .calculator-form .calculator-field select option {
color: #0f172a;
background: #fff;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator {
display: grid !important;
grid-template-columns: minmax(280px, 0.76fr) minmax(0, 1.24fr) !important;
gap: clamp(22px, 3vw, 38px) !important;
align-items: start !important;
padding: clamp(22px, 3vw, 34px) !important;
border: 1px solid rgba(244, 223, 174, 0.18) !important;
border-radius: 28px !important;
background:
linear-gradient(135deg, rgba(30, 41, 59, 0.62), rgba(8, 13, 26, 0.88) 46%, rgba(13, 35, 45, 0.6)),
rgba(7, 12, 24, 0.9) !important;
box-shadow: 0 26px 72px rgba(0, 0, 0, 0.26) !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator__copy {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 20px;
max-width: 430px;
min-width: 0;
min-height: 100%;
padding: 4px 0;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator__copy .home-eyebrow {
align-self: flex-start;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator__copy h2 {
max-width: 20ch;
margin: 0;
font-size: clamp(2rem, 3.1vw, 2.85rem);
line-height: 1.08;
letter-spacing: 0;
text-wrap: balance;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator__copy p {
max-width: 42ch;
margin: 0;
color: rgba(226, 232, 240, 0.74);
font-size: 1rem;
line-height: 1.58;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator__points {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 8px;
max-width: none;
margin: 0;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator__points span {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
min-height: 52px;
padding: 11px 12px;
border: 1px solid rgba(244, 223, 174, 0.14);
border-radius: 14px;
background: rgba(255, 255, 255, 0.035);
color: rgba(226, 232, 240, 0.82);
font-size: 0.84rem;
font-weight: 850;
line-height: 1.25;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator__points b {
display: grid;
place-items: center;
width: 30px;
height: 30px;
border-radius: 999px;
color: #07101f;
background: #f7ecd0;
font-size: 0.84rem;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator__surface {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 14px !important;
align-items: start !important;
min-width: 0 !important;
padding: clamp(16px, 2vw, 22px) !important;
border: 1px solid rgba(125, 211, 252, 0.2) !important;
border-radius: 24px !important;
background:
linear-gradient(180deg, rgba(22, 33, 54, 0.94), rgba(9, 15, 28, 0.94)),
rgba(12, 18, 34, 0.84) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.055),
0 22px 58px rgba(0, 0, 0, 0.22) !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator__panel-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
grid-column: 1 / -1;
min-width: 0;
padding-bottom: 12px;
border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator__panel-head span {
color: #99f6e4;
font-size: 0.74rem;
font-weight: 950;
letter-spacing: 0.08em;
text-transform: uppercase;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator__panel-head strong {
min-width: 0;
color: #f7ecd0;
font-size: 0.94rem;
font-weight: 950;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator__inputs {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 10px !important;
align-content: start !important;
min-width: 0 !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator__inputs label {
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(104px, 118px) !important;
align-content: center !important;
align-items: center !important;
gap: 12px !important;
min-width: 0 !important;
min-height: 72px !important;
padding: 12px 14px !important;
border: 1px solid rgba(244, 223, 174, 0.16) !important;
border-radius: 14px !important;
background: rgba(255, 255, 255, 0.04) !important;
color: rgba(226, 232, 240, 0.88) !important;
line-height: 1.2 !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator__inputs label > span {
min-width: 0 !important;
color: rgba(226, 232, 240, 0.86) !important;
font-size: 0.82rem !important;
font-weight: 900 !important;
line-height: 1.25 !important;
overflow-wrap: normal !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator__inputs input,
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator__inputs select {
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
min-height: 50px !important;
margin: 0 !important;
padding: 0 12px !important;
border: 1px solid rgba(244, 223, 174, 0.2) !important;
border-radius: 14px !important;
background: rgba(8, 13, 26, 0.88) !important;
color: #fff !important;
-webkit-text-fill-color: #fff !important;
font-size: 1.08rem !important;
font-weight: 950 !important;
text-align: center !important;
text-overflow: clip !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator__inputs select {
padding-inline: 12px 30px !important;
text-align: left !important;
text-overflow: clip !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator__inputs select option {
color: #0f172a;
background: #fff;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator__results {
display: grid !important;
grid-template-columns: minmax(0, 1.18fr) repeat(2, minmax(0, 0.91fr)) !important;
gap: 10px !important;
align-content: stretch !important;
min-width: 0 !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator__result {
display: grid !important;
align-content: space-between !important;
gap: 8px !important;
min-width: 0 !important;
min-height: 112px !important;
padding: 16px !important;
border: 1px solid rgba(244, 223, 174, 0.16) !important;
border-radius: 16px !important;
background: rgba(255, 255, 255, 0.04) !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator__result span {
color: rgba(226, 232, 240, 0.84) !important;
font-size: 0.88rem !important;
font-weight: 850 !important;
line-height: 1.25 !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator__result strong {
color: #fff !important;
font-size: clamp(2rem, 3vw, 2.45rem) !important;
line-height: 0.96 !important;
letter-spacing: 0 !important;
overflow-wrap: anywhere !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator__result--net {
min-height: 130px !important;
border-color: rgba(244, 223, 174, 0.34) !important;
background:
linear-gradient(180deg, rgba(25, 31, 47, 0.96), rgba(8, 13, 25, 0.96)) !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator__result--net span,
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator__result--net strong {
color: #f7ecd0 !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator__result--net strong {
font-size: clamp(2.55rem, 4.2vw, 3.35rem) !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-integrations-grid article p,
body.vertical-page:not(.home-gateway-page) .home-faq-grid article p,
body.landing-refresh:not(.home-gateway-page) .home-faq-grid article p,
body.landing-refresh:not(.home-gateway-page) .pricing-clarity-card p,
body.landing-refresh:not(.home-gateway-page) .pricing-driver p {
display: block !important;
-webkit-line-clamp: unset !important;
-webkit-box-orient: initial !important;
height: auto !important;
max-height: none !important;
overflow: visible !important;
overflow-y: visible !important;
}
@media (max-width: 1100px) {
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator {
grid-template-columns: 1fr !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator__copy {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
gap: 14px 24px;
max-width: none;
min-height: 0;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator__copy h2 {
max-width: 28ch;
font-size: 2.25rem;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator__copy p {
max-width: 54ch;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator__points {
grid-column: 2;
grid-row: 1 / span 3;
max-width: none;
}
}
@media (max-width: 980px) {
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator__results {
grid-template-columns: 1fr !important;
}
}
@media (max-width: 760px) {
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator {
width: min(100% - 24px, var(--container, 1180px)) !important;
max-width: calc(100% - 24px) !important;
gap: 18px !important;
padding: 16px !important;
border-radius: 24px !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator__copy {
display: flex;
gap: 13px;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator__copy h2 {
font-size: 1.9rem;
max-width: none;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator__copy p {
font-size: 0.98rem;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator__points {
grid-template-columns: 1fr;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator__points span {
min-height: 0;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator__surface {
grid-template-columns: 1fr !important;
padding: 12px !important;
border-radius: 20px !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator__panel-head {
align-items: flex-start;
flex-direction: column;
gap: 5px;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator__inputs label,
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator__result,
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator__result--net {
min-height: 0 !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator__inputs label {
grid-template-columns: minmax(0, 1fr) minmax(104px, 112px) !important;
gap: 8px !important;
padding: 12px !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator__inputs {
grid-template-columns: 1fr !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator__result strong {
font-size: 2.25rem !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator__result--net strong {
font-size: 2.8rem !important;
}
}
/* Premium public home refresh: deeper night-blue staging with restrained gold accents. */
body.home-gateway-page {
--home-premium-ink: #f8fbff;
--home-premium-muted: #c3cbe0;
--home-premium-soft: rgba(204, 214, 235, 0.78);
--home-premium-line: rgba(130, 158, 205, 0.22);
--home-premium-line-strong: rgba(239, 211, 143, 0.38);
--home-premium-card: rgba(10, 19, 43, 0.82);
--home-premium-card-2: rgba(17, 31, 61, 0.72);
--home-premium-gold: #f3d58a;
--home-premium-gold-strong: #ffefb7;
--home-premium-blue: #66d8ff;
--home-premium-shadow: 0 24px 80px rgba(1, 6, 21, 0.42);
}
body.home-gateway-page .home-gateway {
background:
linear-gradient(180deg, rgba(3, 9, 25, 0.98) 0%, rgba(7, 15, 36, 0.98) 43%, rgba(5, 12, 29, 0.99) 100%),
repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 72px);
}
body.home-gateway-page .home-gateway-shell > :is(.home-premium-hero--solo, .home-product-intro, .home-site-gateway, .home-homepage-section, #create-agent) {
position: relative;
overflow: hidden;
isolation: isolate;
}
body.home-gateway-page .home-gateway-shell > :is(.home-premium-hero--solo, .home-product-intro, .home-site-gateway, .home-dashboard-story, .home-integration-flow, .home-trust-panel, .home-faq-panel, #create-agent)::before {
content: "";
position: absolute;
inset: 0;
z-index: -2;
pointer-events: none;
background:
linear-gradient(135deg, rgba(102, 216, 255, 0.12), transparent 32%),
linear-gradient(315deg, rgba(243, 213, 138, 0.11), transparent 28%),
linear-gradient(180deg, rgba(13, 30, 63, 0.92), rgba(7, 14, 34, 0.96));
}
body.home-gateway-page .home-gateway-shell > :is(.home-premium-hero--solo, .home-product-intro, .home-site-gateway, .home-dashboard-story, .home-integration-flow, .home-trust-panel, .home-faq-panel, #create-agent)::after {
content: "";
position: absolute;
inset: 1px;
z-index: -1;
pointer-events: none;
border-radius: inherit;
border: 1px solid rgba(255, 255, 255, 0.055);
background:
linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.04), transparent),
repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 32px);
opacity: 0.8;
}
body.home-gateway-page .home-premium-hero--solo,
body.home-gateway-page .home-product-intro,
body.home-gateway-page .home-site-gateway.home-discovery-sections,
body.home-gateway-page .home-dashboard-story,
body.home-gateway-page .home-integration-flow,
body.home-gateway-page .home-trust-panel,
body.home-gateway-page .home-faq-panel,
body.home-gateway-page #create-agent {
border: 1px solid var(--home-premium-line);
box-shadow: var(--home-premium-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
body.home-gateway-page .home-premium-hero--solo {
background: transparent !important;
}
body.home-gateway-page .home-voice-demo-strip {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(260px, 0.56fr);
gap: 18px;
align-items: stretch;
padding: clamp(18px, 2.4vw, 28px);
border: 1px solid rgba(243, 213, 138, 0.28);
border-radius: 8px;
background:
linear-gradient(135deg, rgba(243, 213, 138, 0.12), rgba(102, 216, 255, 0.06) 46%, transparent),
rgba(7, 15, 36, 0.78);
box-shadow: var(--home-premium-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
body.home-gateway-page .home-voice-demo-strip__copy {
display: grid;
align-content: center;
gap: 10px;
}
body.home-gateway-page .home-voice-demo-strip__copy h2 {
margin: 0;
color: var(--home-premium-ink);
font-size: clamp(1.9rem, 3.2vw, 3.1rem);
line-height: 1;
text-wrap: balance;
}
body.home-gateway-page .home-voice-demo-strip__copy p {
margin: 0;
max-width: 58ch;
color: var(--home-premium-muted);
line-height: 1.55;
}
body.home-gateway-page .home-voice-demo-strip__number {
display: grid;
align-content: center;
gap: 10px;
min-width: 0;
padding: 18px;
border: 1px solid rgba(255, 255, 255, 0.11);
border-radius: 8px;
background: rgba(255, 255, 255, 0.055);
}
body.home-gateway-page .home-voice-demo-strip__number span,
body.home-gateway-page .home-voice-demo-strip__flow span {
color: var(--home-premium-soft);
font-size: 0.78rem;
font-weight: 850;
text-transform: uppercase;
}
body.home-gateway-page .home-voice-demo-strip__number strong {
color: var(--home-premium-gold-strong);
font-size: clamp(1.35rem, 2.2vw, 2.15rem);
line-height: 1;
overflow-wrap: anywhere;
}
body.home-gateway-page .home-voice-demo-strip__flow {
grid-column: 1 / -1;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
}
body.home-gateway-page .home-voice-demo-strip__flow li {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 10px;
align-items: center;
min-height: 54px;
padding: 10px 12px;
border: 1px solid rgba(255, 255, 255, 0.095);
border-radius: 8px;
background: rgba(255, 255, 255, 0.04);
}
body.home-gateway-page .home-voice-demo-strip__flow b {
display: inline-grid;
place-items: center;
width: 30px;
height: 30px;
border-radius: 999px;
color: #081226;
background: linear-gradient(135deg, #ffedb4, #69dcff 66%, #7280ff);
}
body.home-gateway-page .home-eyebrow,
body.home-gateway-page .home-section__eyebrow {
color: var(--home-premium-gold-strong);
border-color: var(--home-premium-line-strong);
background:
linear-gradient(135deg, rgba(243, 213, 138, 0.18), rgba(102, 216, 255, 0.08)),
rgba(10, 18, 39, 0.8);
box-shadow: 0 12px 34px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
body.home-gateway-page .home-gateway-intro h1,
body.home-gateway-page .home-product-intro__copy h2,
body.home-gateway-page .home-discovery-sections__intro h2,
body.home-gateway-page .home-section__head h2,
body.home-gateway-page .home-dashboard-story__copy h2,
body.home-gateway-page .home-trust-panel h2,
body.home-gateway-page .home-premium-section-head h2 {
color: var(--home-premium-ink);
text-wrap: balance;
text-shadow: 0 20px 55px rgba(0, 0, 0, 0.38);
}
body.home-gateway-page .home-gateway-intro p,
body.home-gateway-page .home-product-intro__copy p,
body.home-gateway-page .home-discovery-sections__intro p,
body.home-gateway-page .home-section__head p,
body.home-gateway-page .home-dashboard-story__copy p,
body.home-gateway-page .home-trust-panel p,
body.home-gateway-page .home-premium-section-head p {
color: var(--home-premium-muted);
}
body.home-gateway-page .home-premium-actions .btn-primary,
body.home-gateway-page .home-dashboard-story__actions .btn-primary,
body.home-gateway-page #create-agent .btn-primary {
color: #091225;
border-color: rgba(255, 239, 183, 0.74);
background: linear-gradient(135deg, #ffe9a6 0%, #99d7ff 58%, #6b7dff 100%);
box-shadow: 0 20px 48px rgba(102, 216, 255, 0.18), 0 16px 36px rgba(243, 213, 138, 0.16);
}
body.home-gateway-page .home-premium-actions .btn-secondary,
body.home-gateway-page .home-dashboard-story__actions .btn-secondary,
body.home-gateway-page .home-premium-actions .btn-tertiary {
color: var(--home-premium-ink);
border-color: rgba(255, 255, 255, 0.14);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
body.home-gateway-page .home-premium-actions .btn:hover,
body.home-gateway-page .home-premium-actions .btn:focus-visible,
body.home-gateway-page .home-dashboard-story__actions .btn:hover,
body.home-gateway-page .home-dashboard-story__actions .btn:focus-visible {
transform: translateY(-2px);
}
body.home-gateway-page .home-premium-assistive-cta {
color: rgba(232, 237, 250, 0.8);
}
body.home-gateway-page .home-premium-assistive-cta a {
color: var(--home-premium-gold-strong);
text-decoration: none;
border-bottom: 1px solid rgba(243, 213, 138, 0.44);
}
body.home-gateway-page .home-gateway-proof {
padding: 10px;
border: 1px solid rgba(243, 213, 138, 0.18);
border-radius: 24px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.025));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.075), 0 20px 54px rgba(0, 0, 0, 0.24);
}
body.home-gateway-page .home-gateway-proof span {
border-color: rgba(255, 255, 255, 0.105);
background: rgba(7, 15, 36, 0.62);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
body.home-gateway-page .home-gateway-proof span::before,
body.home-gateway-page .home-product-intro__grid article::before {
box-shadow: 0 0 0 6px rgba(102, 216, 255, 0.07), 0 0 26px rgba(102, 216, 255, 0.36);
}
body.home-gateway-page :is(.home-product-intro__visual, .home-product-result, .home-dashboard-card, .home-discovery-section a, .home-industry-strip__grid a, .home-integration-flow__grid article, .home-trust-panel__items a, .home-faq-panel details, #create-agent .home-gateway-vertical, #create-agent .home-premium-section-head--compact) {
border-color: rgba(255, 255, 255, 0.105);
background:
linear-gradient(160deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.025)),
rgba(11, 20, 44, 0.72);
box-shadow: 0 18px 46px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
body.home-gateway-page :is(.home-discovery-section a, .home-industry-strip__grid a, .home-integration-flow__grid article, .home-trust-panel__items a, .home-faq-panel details, #create-agent .home-gateway-vertical) {
transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
}
body.home-gateway-page :is(.home-discovery-section a, .home-industry-strip__grid a, .home-trust-panel__items a, #create-agent .home-gateway-vertical):hover,
body.home-gateway-page :is(.home-discovery-section a, .home-industry-strip__grid a, .home-trust-panel__items a, #create-agent .home-gateway-vertical):focus-visible {
transform: translateY(-3px);
border-color: rgba(243, 213, 138, 0.36);
background:
linear-gradient(160deg, rgba(243, 213, 138, 0.12), rgba(102, 216, 255, 0.06)),
rgba(14, 25, 52, 0.86);
box-shadow: 0 24px 54px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(243, 213, 138, 0.08);
}
body.home-gateway-page .home-discovery-section__index,
body.home-gateway-page .home-product-result__icon,
body.home-gateway-page #create-agent .home-gateway-vertical .home-intake-vertical__icon {
color: #081226;
border-color: rgba(255, 239, 183, 0.72);
background: linear-gradient(135deg, #ffedb4, #69dcff 66%, #7280ff);
box-shadow: 0 16px 34px rgba(102, 216, 255, 0.22);
}
body.home-gateway-page .home-product-phone {
background:
linear-gradient(180deg, rgba(10, 20, 48, 0.98), rgba(4, 9, 25, 0.98)),
repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 36px);
border-color: rgba(255, 255, 255, 0.12);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 24px 52px rgba(0, 0, 0, 0.38);
}
body.home-gateway-page .home-product-result li,
body.home-gateway-page .home-product-result__sms,
body.home-gateway-page .home-dashboard-card__summary,
body.home-gateway-page .home-dashboard-card__grid span,
body.home-gateway-page .home-product-flow,
body.home-gateway-page .home-product-flow span {
border-color: rgba(255, 255, 255, 0.095);
background: rgba(255, 255, 255, 0.045);
}
body.home-gateway-page .home-product-result__title b,
body.home-gateway-page .home-product-intro__grid article span,
body.home-gateway-page .home-industry-strip__grid span,
body.home-gateway-page .home-integration-flow__grid span {
color: var(--home-premium-gold-strong);
}
body.home-gateway-page .home-dashboard-card__bar strong,
body.home-gateway-page .home-dashboard-card__summary h3 {
color: var(--home-premium-gold-strong);
}
body.home-gateway-page .home-dashboard-card__summary {
border-left: 3px solid rgba(243, 213, 138, 0.68);
}
body.home-gateway-page .home-trust-panel__items strong,
body.home-gateway-page .home-faq-panel summary,
body.home-gateway-page .home-discovery-section h3,
body.home-gateway-page .home-industry-strip__grid strong,
body.home-gateway-page .home-integration-flow__grid strong,
body.home-gateway-page #create-agent .home-gateway-vertical .home-intake-vertical__text strong {
color: var(--home-premium-ink);
}
body.home-gateway-page .home-trust-panel__items span,
body.home-gateway-page .home-faq-panel p,
body.home-gateway-page .home-discovery-section p,
body.home-gateway-page .home-industry-strip__grid small,
body.home-gateway-page .home-integration-flow__grid p,
body.home-gateway-page #create-agent .home-gateway-vertical .home-intake-vertical__text small {
color: var(--home-premium-soft);
}
@media (min-width: 1000px) and (max-width: 1220px) and (orientation: landscape) {
html:has(body.home-gateway-page) {
scroll-padding-top: 88px !important;
}
body.home-gateway-page .home-gateway-shell {
gap: 18px !important;
}
body.home-gateway-page .home-voice-demo-strip {
grid-template-columns: minmax(0, 1fr) minmax(240px, 0.48fr);
gap: 12px !important;
padding: 18px !important;
}
body.home-gateway-page .home-voice-demo-strip__flow {
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 8px !important;
}
body.home-gateway-page .home-voice-demo-strip__flow li {
grid-template-columns: 1fr;
justify-items: center;
text-align: center;
min-height: 76px;
}
body.home-gateway-page .home-gateway-shell::after {
content: "";
display: block;
min-height: 430px;
}
body.home-gateway-page .home-premium-hero--solo,
body.home-gateway-page .home-product-intro,
body.home-gateway-page .home-site-gateway.home-discovery-sections,
body.home-gateway-page .home-homepage-section,
body.home-gateway-page #create-agent {
border-radius: 28px !important;
scroll-margin-top: 0 !important;
}
body.home-gateway-page .home-premium-hero--solo .home-gateway-intro h1 {
max-width: 12.8ch !important;
font-size: clamp(3.65rem, 5.1vw, 4.35rem) !important;
line-height: 0.98 !important;
}
body.home-gateway-page .home-premium-hero--solo .home-gateway-intro {
max-width: 920px;
margin-inline: auto;
gap: 12px !important;
}
body.home-gateway-page .home-gateway-proof {
max-width: 790px !important;
padding: 8px !important;
border-radius: 22px !important;
}
body.home-gateway-page .home-gateway-proof span {
min-height: 74px !important;
padding: 12px 14px !important;
border-radius: 17px !important;
}
body.home-gateway-page .home-gateway-proof strong {
font-size: 0.92rem !important;
}
body.home-gateway-page .home-gateway-proof small {
font-size: 0.78rem !important;
line-height: 1.28 !important;
}
body.home-gateway-page .home-product-intro,
body.home-gateway-page .home-site-gateway.home-discovery-sections,
body.home-gateway-page #create-agent {
padding: 22px !important;
}
body.home-gateway-page .home-homepage-section {
padding: 22px !important;
}
body.home-gateway-page .home-industry-strip__grid a,
body.home-gateway-page .home-integration-flow__grid article,
body.home-gateway-page .home-trust-panel__items a,
body.home-gateway-page .home-faq-panel details {
border-radius: 20px;
}
body.home-gateway-page .home-premium-actions .btn {
min-height: 50px !important;
border-radius: 15px !important;
}
body.home-gateway-page .home-premium-assistive-cta {
margin-top: 0 !important;
}
body.home-gateway-page:not(.app-shell) .cookie-banner {
left: 50% !important;
right: auto !important;
bottom: 12px !important;
width: min(900px, calc(100vw - 36px)) !important;
transform: translateX(-50%) !important;
grid-template-columns: minmax(0, 1fr) auto !important;
padding: 8px 10px !important;
border-radius: 18px !important;
border-color: rgba(243, 213, 138, 0.24) !important;
background:
linear-gradient(180deg, rgba(12, 22, 48, 0.94), rgba(5, 10, 26, 0.94)) !important;
box-shadow: 0 18px 48px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
backdrop-filter: blur(18px) !important;
}
body.home-gateway-page:not(.app-shell) .cookie-banner__body p {
max-width: 430px !important;
}
body.home-gateway-page:not(.app-shell) .cookie-banner__actions .btn {
min-width: 96px !important;
min-height: 32px !important;
border-radius: 10px !important;
}
}
/* iPad 11 hero refinement: denser title rhythm and unobtrusive consent bar. */
@media (min-width: 1000px) and (max-width: 1220px) and (orientation: landscape) {
body.home-gateway-page .home-premium-hero--solo {
padding-block: 12px 20px !important;
}
body.home-gateway-page .home-premium-hero--solo .home-gateway-intro {
gap: 10px !important;
}
body.home-gateway-page .home-premium-hero--solo .home-gateway-intro .home-eyebrow {
margin-bottom: 2px;
padding: 8px 14px;
font-size: 0.72rem;
}
body.home-gateway-page .home-premium-hero--solo .home-gateway-intro h1 {
max-width: 13.7ch !important;
font-size: clamp(3.35rem, 4.72vw, 4.05rem) !important;
line-height: 0.94 !important;
}
body.home-gateway-page .home-premium-hero--solo .home-gateway-intro h1 span:nth-child(3),
body.home-gateway-page .home-premium-hero--solo .home-gateway-intro h1 span:nth-child(4) {
display: inline;
}
body.home-gateway-page .home-premium-hero--solo .home-gateway-intro h1 span:nth-child(3)::after {
content: " ";
}
body.home-gateway-page .home-premium-hero--solo .home-gateway-intro p {
max-width: 640px !important;
font-size: 0.95rem !important;
line-height: 1.34 !important;
}
body.home-gateway-page .home-premium-actions {
margin-top: 2px !important;
}
body.home-gateway-page .home-premium-actions .btn {
min-height: 46px !important;
padding-block: 0.7rem !important;
}
body.home-gateway-page .home-premium-assistive-cta {
font-size: 0.88rem !important;
}
body.home-gateway-page .home-gateway-proof {
margin-top: 10px !important;
max-width: 760px !important;
padding: 7px !important;
}
body.home-gateway-page .home-gateway-proof span {
min-height: 64px !important;
padding: 10px 12px !important;
}
body.home-gateway-page .home-gateway-proof small {
display: none !important;
}
body.home-gateway-page:not(.app-shell) .cookie-banner {
bottom: 10px !important;
width: min(740px, calc(100vw - 56px)) !important;
grid-template-columns: minmax(0, 1fr) auto !important;
padding: 7px 9px !important;
}
body.home-gateway-page:not(.app-shell) .cookie-banner__body strong {
font-size: 0.82rem !important;
}
body.home-gateway-page:not(.app-shell) .cookie-banner__body p {
max-width: 250px !important;
font-size: 0.68rem !important;
}
body.home-gateway-page:not(.app-shell) .cookie-banner__actions .btn {
min-width: 82px !important;
min-height: 28px !important;
padding: 0.34rem 0.28rem !important;
font-size: 0.66rem !important;
}
}
/* Final homepage section-heading fit for iPad demo mode.
These three bands are labels inside dense sections, not hero titles. */
@media (min-width: 1000px) and (max-width: 1220px) and (orientation: landscape) {
body.home-gateway-page .home-integration-flow .home-section__head h2,
body.home-gateway-page .home-faq-panel .home-section__head h2 {
max-width: 100% !important;
font-size: clamp(1.48rem, 2.06vw, 1.72rem) !important;
line-height: 1.02 !important;
white-space: nowrap !important;
}
body.home-gateway-page .home-integration-flow .home-section__head p {
max-width: 31ch !important;
font-size: 0.84rem !important;
line-height: 1.28 !important;
}
body.home-gateway-page #create-agent .home-premium-section-head--compact h2 {
max-width: 100% !important;
font-size: clamp(1.5rem, 2.02vw, 1.78rem) !important;
line-height: 1 !important;
white-space: nowrap !important;
}
body.home-gateway-page #create-agent .home-premium-section-head--compact p {
font-size: 0.82rem !important;
line-height: 1.25 !important;
}
}
/* Homepage section-title polish.
Keep these late overrides small so the public home remains quick to tune. */
body.home-gateway-page .home-integration-flow .home-section__head,
body.home-gateway-page .home-faq-panel .home-section__head {
position: relative;
align-self: stretch;
justify-content: center;
padding: clamp(18px, 2.6vw, 28px);
border: 1px solid rgba(243, 213, 138, 0.18);
border-radius: 24px;
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.022)),
rgba(6, 14, 33, 0.62);
box-shadow:
0 22px 54px rgba(0, 0, 0, 0.22),
inset 0 1px 0 rgba(255, 255, 255, 0.075);
}
body.home-gateway-page .home-integration-flow .home-section__head::after,
body.home-gateway-page .home-faq-panel .home-section__head::after {
content: "";
position: absolute;
inset: auto 24px 18px 24px;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(243, 213, 138, 0.5), transparent);
opacity: 0.8;
}
body.home-gateway-page .home-integration-flow .home-section__head h2,
body.home-gateway-page .home-faq-panel .home-section__head h2 {
max-width: 12.6ch;
margin: 0;
font-size: clamp(2rem, 3.1vw, 3rem);
line-height: 0.98;
}
body.home-gateway-page .home-integration-flow .home-section__head p {
max-width: 34ch;
}
body.home-gateway-page .home-faq-panel .home-section__head {
justify-content: start;
}
body.home-gateway-page .home-faq-panel .home-section__head h2 {
max-width: 11ch;
}
body.home-gateway-page #create-agent .home-premium-section-head--compact {
position: relative;
border-color: rgba(243, 213, 138, 0.2);
}
body.home-gateway-page #create-agent .home-premium-section-head--compact::before {
content: "";
position: absolute;
inset: 10px auto 10px 10px;
width: 4px;
border-radius: 999px;
background: linear-gradient(180deg, #ffefb7, #66d8ff);
opacity: 0.9;
}
body.home-gateway-page #create-agent .home-premium-section-head--compact h2 {
max-width: 14ch;
margin: 0;
font-size: clamp(1.85rem, 2.8vw, 2.7rem);
line-height: 0.98;
}
body.home-gateway-page #create-agent .home-premium-section-head--compact p {
max-width: 38ch;
}
@media (min-width: 1000px) and (max-width: 1220px) and (orientation: landscape) {
body.home-gateway-page .home-integration-flow .home-section__head,
body.home-gateway-page .home-faq-panel .home-section__head {
padding: 18px !important;
border-radius: 20px !important;
}
body.home-gateway-page .home-integration-flow .home-section__head::after,
body.home-gateway-page .home-faq-panel .home-section__head::after {
inset-inline: 18px;
bottom: 14px;
}
body.home-gateway-page .home-integration-flow .home-section__head h2,
body.home-gateway-page .home-faq-panel .home-section__head h2 {
max-width: 9.8ch !important;
font-size: clamp(2rem, 2.65vw, 2.42rem) !important;
line-height: 0.98 !important;
}
body.home-gateway-page .home-integration-flow .home-section__head p {
max-width: 27ch !important;
font-size: 0.86rem !important;
}
body.home-gateway-page .home-faq-panel .home-section__head h2 {
max-width: 9ch !important;
}
body.home-gateway-page #create-agent .home-premium-section-head--compact {
grid-template-columns: auto minmax(210px, 0.58fr) minmax(250px, 1fr) !important;
padding: 13px 16px 13px 22px !important;
}
body.home-gateway-page #create-agent .home-premium-section-head--compact h2 {
max-width: 9.6ch !important;
font-size: clamp(1.72rem, 2vw, 2rem) !important;
}
body.home-gateway-page #create-agent .home-premium-section-head--compact p {
max-width: 34ch !important;
font-size: 0.84rem !important;
}
}
/* Décroche.ai — Section « effet WOW » de la homepage.
Scénario 19h45 + démo vocale incontournable (bouton + numéro à appeler).
Bleu nuit / doré, lisible à distance sur iPad 11" paysage. */
body.home-gateway-page .home-wow-story {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
gap: clamp(24px, 3vw, 44px);
align-items: center;
}
body.home-gateway-page .home-wow-story__copy {
display: grid;
gap: 14px;
justify-items: start;
}
body.home-gateway-page .home-wow-story__copy h2 {
margin: 0;
max-width: 21ch;
font-size: clamp(1.7rem, 2.6vw, 2.4rem);
line-height: 1.08;
}
body.home-gateway-page .home-wow-story__lead {
margin: 0;
max-width: 46ch;
color: rgba(226, 232, 240, 0.82);
font-size: clamp(0.98rem, 1.2vw, 1.08rem);
line-height: 1.5;
}
body.home-gateway-page .home-wow-steps {
display: grid;
gap: 9px;
margin: 6px 0 0;
padding: 0;
list-style: none;
}
body.home-gateway-page .home-wow-steps li {
display: grid;
grid-template-columns: 30px minmax(0, 1fr);
gap: 12px;
align-items: start;
}
body.home-gateway-page .home-wow-steps b {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border: 1px solid rgba(243, 213, 138, 0.4);
border-radius: 50%;
background: rgba(243, 213, 138, 0.1);
color: #f3d58a;
font-size: 0.85rem;
font-weight: 900;
}
body.home-gateway-page .home-wow-steps strong {
display: block;
color: #f8fbff;
font-size: 0.98rem;
line-height: 1.25;
}
body.home-gateway-page .home-wow-steps small {
display: block;
color: rgba(226, 232, 240, 0.62);
font-size: 0.84rem;
line-height: 1.35;
}
body.home-gateway-page .home-wow-cta {
display: flex;
flex-wrap: wrap;
gap: 14px;
align-items: stretch;
margin-top: 10px;
}
body.home-gateway-page .home-wow-cta .btn {
min-height: 52px;
}
body.home-gateway-page .home-wow-callline {
display: grid;
align-content: center;
gap: 2px;
min-height: 52px;
padding: 8px 18px;
border: 1px solid rgba(243, 213, 138, 0.34);
border-radius: 16px;
background: linear-gradient(135deg, rgba(243, 213, 138, 0.12), rgba(102, 216, 255, 0.05));
text-decoration: none;
}
body.home-gateway-page .home-wow-callline span {
color: rgba(239, 231, 214, 0.72);
font-size: 0.76rem;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
}
body.home-gateway-page .home-wow-callline strong {
color: #f3d58a;
font-size: 1.12rem;
font-weight: 900;
letter-spacing: 0.06em;
font-variant-numeric: tabular-nums;
}
body.home-gateway-page .home-wow-callline:hover,
body.home-gateway-page .home-wow-callline:focus-visible {
border-color: rgba(243, 213, 138, 0.55);
background: linear-gradient(135deg, rgba(243, 213, 138, 0.18), rgba(102, 216, 255, 0.08));
}
body.home-gateway-page .home-wow-story__proof {
display: grid;
gap: 14px;
}
body.home-gateway-page .home-wow-chat {
display: grid;
gap: 10px;
padding: 18px;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 22px;
background:
linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)),
rgba(5, 12, 29, 0.72);
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}
body.home-gateway-page .home-wow-chat__tag {
justify-self: start;
padding: 4px 11px;
border: 1px solid rgba(102, 216, 255, 0.3);
border-radius: 999px;
color: #9adcff;
font-size: 0.72rem;
font-weight: 900;
letter-spacing: 0.05em;
text-transform: uppercase;
}
body.home-gateway-page .home-wow-bubble {
margin: 0;
max-width: 88%;
padding: 10px 14px;
border-radius: 16px;
font-size: 0.92rem;
line-height: 1.42;
}
body.home-gateway-page .home-wow-bubble--client {
justify-self: start;
border: 1px solid rgba(102, 216, 255, 0.22);
border-bottom-left-radius: 6px;
background: rgba(102, 216, 255, 0.09);
color: #e6f6ff;
}
body.home-gateway-page .home-wow-bubble--agent {
justify-self: end;
border: 1px solid rgba(243, 213, 138, 0.26);
border-bottom-right-radius: 6px;
background: rgba(243, 213, 138, 0.09);
color: #fdf6e4;
}
body.home-gateway-page .home-wow-summary {
display: grid;
gap: 5px;
padding: 16px 18px;
border: 1px solid rgba(243, 213, 138, 0.32);
border-radius: 20px;
background:
linear-gradient(135deg, rgba(243, 213, 138, 0.14), rgba(102, 216, 255, 0.04)),
rgba(7, 17, 31, 0.72);
}
body.home-gateway-page .home-wow-summary > span {
color: #f3d58a;
font-size: 0.72rem;
font-weight: 900;
letter-spacing: 0.07em;
text-transform: uppercase;
}
body.home-gateway-page .home-wow-summary strong {
color: #f8fbff;
font-size: 1.08rem;
}
body.home-gateway-page .home-wow-summary p {
margin: 0;
color: rgba(226, 232, 240, 0.85);
font-size: 0.92rem;
line-height: 1.45;
}
body.home-gateway-page .home-wow-summary small {
color: rgba(226, 232, 240, 0.55);
font-size: 0.78rem;
}
/* iPad 11" paysage : deux colonnes équilibrées, tailles tactiles. */
@media (min-width: 1000px) and (max-width: 1220px) and (orientation: landscape) {
body.home-gateway-page .home-wow-story {
grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr) !important;
gap: 30px !important;
}
body.home-gateway-page .home-wow-story__copy h2 {
font-size: 1.9rem;
}
body.home-gateway-page .home-wow-cta .btn,
body.home-gateway-page .home-wow-callline {
min-height: 48px;
}
}
/* Tablette portrait et mobile : une colonne, la preuve sous le récit. */
@media (max-width: 999px) {
body.home-gateway-page .home-wow-story {
grid-template-columns: 1fr;
gap: 26px;
}
}
@media (max-width: 560px) {
body.home-gateway-page .home-wow-cta {
width: 100%;
}
body.home-gateway-page .home-wow-cta .btn,
body.home-gateway-page .home-wow-callline {
width: 100%;
justify-content: center;
text-align: center;
justify-items: center;
}
body.home-gateway-page .home-wow-bubble {
max-width: 100%;
}
}
/* Thème clair */
body[data-theme="light"].home-gateway-page .home-wow-chat {
background: #ffffff;
border-color: rgba(15, 23, 42, 0.1);
box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08);
}
body[data-theme="light"].home-gateway-page .home-wow-bubble--client {
background: rgba(30, 115, 216, 0.08);
color: #16324f;
}
body[data-theme="light"].home-gateway-page .home-wow-bubble--agent {
background: rgba(180, 138, 39, 0.1);
color: #4d3a10;
}
body[data-theme="light"].home-gateway-page .home-wow-summary {
background: linear-gradient(135deg, rgba(244, 223, 174, 0.3), rgba(219, 234, 254, 0.5)), #ffffff;
border-color: rgba(180, 138, 39, 0.35);
}
body[data-theme="light"].home-gateway-page .home-wow-summary strong {
color: #142033;
}
body[data-theme="light"].home-gateway-page .home-wow-summary p {
color: #334155;
}
body[data-theme="light"].home-gateway-page .home-wow-story__lead,
body[data-theme="light"].home-gateway-page .home-wow-steps small {
color: #475569;
}
body[data-theme="light"].home-gateway-page .home-wow-steps strong {
color: #142033;
}
body[data-theme="light"].home-gateway-page .home-wow-callline strong {
color: #7c5b13;
}
/* Décroche.ai public home refinement for iPad 11 landscape.
Loaded after the main stylesheet so this file stays small and fast to iterate. */
body.home-gateway-page .home-hero-showcase {
display: none;
}
@media (min-width: 1000px) and (max-width: 1220px) and (orientation: landscape) {
html:has(body.home-gateway-page) {
scroll-padding-top: 12px !important;
}
body.home-gateway-page .home-gateway {
padding-block: 12px 36px !important;
}
body.home-gateway-page .home-gateway-shell {
--ipad-home-screen: calc(100svh - 132px);
gap: 28px !important;
}
body.home-gateway-page .home-premium-hero--solo,
body.home-gateway-page .home-product-intro,
body.home-gateway-page .home-site-gateway.home-discovery-sections,
body.home-gateway-page .home-homepage-section,
body.home-gateway-page #create-agent {
border-radius: 28px !important;
scroll-margin-top: 0 !important;
}
/* Seul le héro garde l'effet plein écran ; les autres sections épousent
leur contenu avec un rythme vertical constant (fin des bandes vides). */
body.home-gateway-page .home-premium-hero--solo {
min-height: var(--ipad-home-screen) !important;
height: var(--ipad-home-screen);
}
body.home-gateway-page .home-product-intro,
body.home-gateway-page .home-site-gateway.home-discovery-sections,
body.home-gateway-page .home-homepage-section,
body.home-gateway-page #create-agent {
min-height: 0 !important;
height: auto !important;
padding-block: 52px !important;
align-content: center;
}
/* Entrée studio invisible hors étapes Studio : elle ne doit pas creuser de vide. */
body.home-gateway-page .home-gateway:not([data-home-wizard-stage="studio"]):not([data-home-wizard-stage="questions"]):not([data-home-wizard-stage="rules"]):not([data-home-wizard-stage="test"]):not([data-home-wizard-stage="signup"]) .home-studio-entry {
display: none !important;
}
body.home-gateway-page .home-gateway[data-home-wizard-stage="studio"] .home-studio-entry,
body.home-gateway-page .home-gateway[data-home-wizard-stage="questions"] .home-studio-entry,
body.home-gateway-page .home-gateway[data-home-wizard-stage="rules"] .home-studio-entry,
body.home-gateway-page .home-gateway[data-home-wizard-stage="test"] .home-studio-entry,
body.home-gateway-page .home-gateway[data-home-wizard-stage="signup"] .home-studio-entry {
display: grid !important;
}
body.home-gateway-page .home-gateway-shell > *:last-child {
margin-bottom: 0 !important;
}
/* Le spacer décoratif de fin de shell (::after 160px) n'a plus lieu
d'être avec des sections compactes. */
body.home-gateway-page .home-gateway-shell::after {
content: none !important;
}
body.home-gateway-page .home-premium-hero--solo {
display: grid !important;
grid-template-columns: minmax(0, 0.96fr) minmax(320px, 0.72fr) !important;
gap: 28px !important;
align-content: center;
align-items: center;
padding-block: 24px 28px !important;
padding-inline: 46px !important;
}
body.home-gateway-page .home-premium-hero--solo .home-gateway-intro {
justify-items: start !important;
text-align: left !important;
gap: 11px !important;
max-width: 620px;
margin-inline: 0;
}
body.home-gateway-page .home-premium-hero--solo .home-eyebrow {
margin-bottom: 2px;
padding: 8px 14px;
font-size: 0.72rem;
}
body.home-gateway-page .home-premium-hero--solo .home-gateway-intro h1 {
max-width: 15.8ch !important;
font-size: clamp(3.15rem, 4.35vw, 3.92rem) !important;
line-height: 0.96 !important;
}
body.home-gateway-page .home-premium-hero--solo .home-gateway-intro h1 span:nth-child(3),
body.home-gateway-page .home-premium-hero--solo .home-gateway-intro h1 span:nth-child(4) {
display: inline;
}
body.home-gateway-page .home-premium-hero--solo .home-gateway-intro h1 span:nth-child(3)::after {
content: " ";
}
body.home-gateway-page .home-premium-hero--solo .home-gateway-intro p {
max-width: 520px !important;
font-size: 0.95rem !important;
line-height: 1.34 !important;
}
body.home-gateway-page .home-premium-actions {
margin-top: 2px !important;
}
body.home-gateway-page .home-premium-actions .btn {
min-height: 50px !important;
padding-block: 0.7rem !important;
border-radius: 15px !important;
}
body.home-gateway-page .home-premium-assistive-cta {
margin-top: 0 !important;
font-size: 0.88rem !important;
}
body.home-gateway-page .home-gateway-proof {
margin-top: 8px !important;
max-width: 548px !important;
padding: 7px !important;
border-radius: 22px !important;
}
body.home-gateway-page .home-gateway-proof span {
min-height: 58px !important;
padding: 9px 10px !important;
border-radius: 17px !important;
}
body.home-gateway-page .home-gateway-proof strong {
font-size: 0.92rem !important;
}
body.home-gateway-page .home-gateway-proof small {
display: none !important;
}
body.home-gateway-page .home-hero-showcase {
display: grid;
gap: 12px;
width: min(100%, 360px);
justify-self: end;
padding: 14px;
border: 1px solid rgba(243, 213, 138, 0.18);
border-radius: 30px;
background:
linear-gradient(160deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03)),
rgba(5, 12, 29, 0.72);
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
body.home-gateway-page .home-hero-showcase__phone {
position: relative;
min-height: 268px;
display: grid;
align-content: center;
justify-items: center;
gap: 14px;
padding: 18px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 26px;
background:
radial-gradient(circle at 50% 26%, rgba(102, 216, 255, 0.18), transparent 34%),
linear-gradient(180deg, rgba(13, 25, 58, 0.96), rgba(4, 9, 24, 0.98));
}
body.home-gateway-page .home-hero-showcase__phone::before {
content: "";
position: absolute;
inset: 18px 84px auto;
height: 8px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.1);
}
body.home-gateway-page .home-hero-showcase__status {
width: 100%;
display: flex;
justify-content: space-between;
color: rgba(248, 251, 255, 0.78);
font-size: 0.78rem;
font-weight: 900;
text-transform: uppercase;
}
body.home-gateway-page .home-hero-showcase__phone img {
width: 86px;
height: 86px;
border-radius: 25px;
box-shadow: 0 18px 48px rgba(85, 110, 255, 0.34);
}
body.home-gateway-page .home-hero-showcase__phone p {
max-width: 230px;
margin: 0;
color: #f8fbff;
font-size: 1.16rem;
line-height: 1.24;
font-weight: 850;
text-align: center;
}
body.home-gateway-page .home-hero-showcase__output {
display: grid;
gap: 4px;
padding: 14px;
border: 1px solid rgba(243, 213, 138, 0.22);
border-radius: 20px;
background: rgba(255, 255, 255, 0.06);
}
body.home-gateway-page .home-hero-showcase__output span {
color: #ffefb7;
font-size: 0.72rem;
font-weight: 950;
text-transform: uppercase;
}
body.home-gateway-page .home-hero-showcase__output strong {
color: #ffffff;
font-size: 1.08rem;
}
body.home-gateway-page .home-hero-showcase__output small {
color: rgba(204, 214, 235, 0.78);
font-weight: 750;
}
body.home-gateway-page .home-hero-showcase__chips {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
body.home-gateway-page .home-hero-showcase__chips span {
min-height: 34px;
display: grid;
place-items: center;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 999px;
color: rgba(248, 251, 255, 0.86);
background: rgba(255, 255, 255, 0.055);
font-size: 0.76rem;
font-weight: 900;
}
body.home-gateway-page .home-product-intro,
body.home-gateway-page .home-site-gateway.home-discovery-sections,
body.home-gateway-page #create-agent {
padding: 28px !important;
}
body.home-gateway-page .home-product-intro__visual {
height: min(360px, calc(var(--ipad-home-screen) - 190px)) !important;
}
body.home-gateway-page .home-product-intro {
gap: 10px 18px !important;
padding: 18px !important;
}
body.home-gateway-page .home-product-intro__copy h2 {
font-size: clamp(2rem, 2.8vw, 2.55rem) !important;
line-height: 1 !important;
}
body.home-gateway-page .home-product-intro__copy p {
font-size: 0.9rem !important;
line-height: 1.34 !important;
}
body.home-gateway-page .home-product-phone {
width: min(100%, 168px) !important;
padding: 22px 14px 24px !important;
border-radius: 26px !important;
}
body.home-gateway-page .home-product-result {
padding: 14px !important;
}
body.home-gateway-page .home-product-result__title {
font-size: 1.45rem !important;
}
body.home-gateway-page .home-product-result li {
padding: 8px 10px !important;
}
body.home-gateway-page .home-product-intro__grid article {
padding: 10px !important;
}
body.home-gateway-page .home-product-intro__grid article p {
display: none !important;
}
/* Product section: iPad-specific refonte.
The desktop composition overlaps on 11" landscape, so the iPad layout becomes
a clean left narrative + right call/result card + compact timeline. */
body.home-gateway-page .home-product-intro {
grid-template-columns: minmax(270px, 0.76fr) minmax(0, 1.24fr) !important;
grid-template-rows: auto !important;
grid-template-areas:
"copy visual" !important;
align-items: center !important;
gap: 16px 24px !important;
padding: 34px 30px 30px !important;
overflow: hidden !important;
}
body.home-gateway-page .home-product-intro__copy {
grid-area: copy !important;
align-content: end !important;
gap: 12px !important;
}
body.home-gateway-page .home-product-intro__copy .home-eyebrow {
width: max-content;
max-width: 100%;
font-size: 0.68rem !important;
}
body.home-gateway-page .home-product-intro__copy h2 {
max-width: 10.8ch !important;
font-size: clamp(2.4rem, 3.25vw, 3rem) !important;
line-height: 0.95 !important;
}
body.home-gateway-page .home-product-intro__copy p {
max-width: 31ch !important;
font-size: 0.93rem !important;
line-height: 1.42 !important;
}
body.home-gateway-page .home-product-intro__visual {
grid-area: visual !important;
align-self: center !important;
height: 480px !important;
min-height: 0 !important;
display: grid !important;
grid-template-columns: 210px minmax(0, 1fr) !important;
gap: 52px !important;
align-items: center !important;
padding: 20px !important;
overflow: hidden !important;
border: 1px solid rgba(243, 213, 138, 0.14);
border-radius: 28px;
background:
radial-gradient(circle at 20% 18%, rgba(86, 214, 255, 0.12), transparent 16rem),
linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
rgba(3, 9, 24, 0.42);
}
body.home-gateway-page .home-product-intro__visual::before {
inset: 50% auto auto calc(20px + 210px + 26px) !important;
width: 72px !important;
opacity: 0.75;
}
body.home-gateway-page .home-product-intro__visual::after {
inset: 50% auto auto calc(20px + 210px + 26px) !important;
width: 44px !important;
height: 44px !important;
font-size: 1.12rem !important;
}
body.home-gateway-page .home-product-phone {
width: 196px !important;
justify-self: center !important;
padding: 30px 15px 26px !important;
border-radius: 28px !important;
gap: 12px !important;
}
body.home-gateway-page .home-product-phone__logo {
width: 46px !important;
height: 46px !important;
border-radius: 14px !important;
}
body.home-gateway-page .home-product-phone strong {
max-width: 100% !important;
white-space: nowrap !important;
font-size: 0.98rem !important;
line-height: 1.12 !important;
}
body.home-gateway-page .home-product-wave {
height: 54px !important;
width: 134px !important;
}
body.home-gateway-page .home-product-phone__actions {
gap: 22px !important;
margin-top: 2px !important;
}
body.home-gateway-page .home-product-phone__actions b {
width: 42px !important;
height: 42px !important;
}
body.home-gateway-page .home-product-result {
width: 100% !important;
align-self: center !important;
justify-content: center !important;
gap: 12px !important;
padding: 18px !important;
border-radius: 24px !important;
}
body.home-gateway-page .home-product-result__icon {
width: 48px !important;
height: 48px !important;
}
body.home-gateway-page .home-product-result__icon svg {
width: 24px !important;
height: 24px !important;
}
body.home-gateway-page .home-product-result__title {
font-size: 1.58rem !important;
line-height: 1 !important;
}
body.home-gateway-page .home-product-result ul {
width: 100% !important;
gap: 8px !important;
padding-top: 0 !important;
}
body.home-gateway-page .home-product-result li {
min-height: 40px;
padding: 8px 10px !important;
border-radius: 14px !important;
background: rgba(255, 255, 255, 0.055) !important;
}
body.home-gateway-page .home-product-result li span,
body.home-gateway-page .home-product-result__sms span {
font-size: 0.92rem !important;
}
body.home-gateway-page .home-product-result__sms {
width: 100% !important;
margin-top: 0 !important;
padding: 11px 12px !important;
border-radius: 16px !important;
}
body.home-gateway-page .home-product-result__sms svg {
width: 30px !important;
height: 30px !important;
}
body.home-gateway-page .home-product-intro__grid {
display: none !important;
}
body.home-gateway-page .home-site-gateway.home-discovery-sections {
align-content: center !important;
gap: 16px !important;
padding: 28px !important;
}
body.home-gateway-page .home-discovery-sections__intro {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 18px !important;
}
body.home-gateway-page .home-discovery-sections__intro h2 {
display: none !important;
}
body.home-gateway-page .home-discovery-sections__intro p {
max-width: 58ch !important;
margin: 0 !important;
font-size: 0.9rem !important;
line-height: 1.35 !important;
text-align: right !important;
}
body.home-gateway-page .home-discovery-sections__grid {
gap: 10px !important;
}
body.home-gateway-page .home-discovery-section a {
min-height: 0 !important;
padding: 16px !important;
gap: 8px !important;
}
body.home-gateway-page .home-discovery-section__index {
width: 42px !important;
height: 42px !important;
font-size: 0.86rem !important;
}
body.home-gateway-page .home-discovery-section h3 {
font-size: 1.05rem !important;
line-height: 1.12 !important;
}
body.home-gateway-page .home-discovery-section p {
font-size: 0.82rem !important;
line-height: 1.34 !important;
}
body.home-gateway-page .home-discovery-section__cta {
width: max-content !important;
max-width: 100% !important;
min-height: 28px !important;
padding: 0.38rem 0.72rem !important;
border-radius: 999px !important;
font-size: 0.72rem !important;
}
body.home-gateway-page .home-industry-strip {
display: grid !important;
grid-template-columns: minmax(260px, 0.74fr) minmax(0, 1.26fr) !important;
align-content: center !important;
align-items: center !important;
gap: 26px !important;
padding: 34px 28px !important;
}
body.home-gateway-page .home-industry-strip .home-section__head {
margin: 0 !important;
max-width: 330px !important;
align-items: start !important;
text-align: left !important;
gap: 12px !important;
}
body.home-gateway-page .home-industry-strip .home-section__head h2 {
max-width: 10.6ch !important;
font-size: clamp(2.35rem, 3.25vw, 3rem) !important;
line-height: 0.96 !important;
}
body.home-gateway-page .home-industry-strip .home-section__head p {
max-width: 31ch !important;
font-size: 0.94rem !important;
line-height: 1.42 !important;
}
body.home-gateway-page .home-industry-strip__grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 12px !important;
align-self: center !important;
}
body.home-gateway-page .home-industry-strip__grid a {
min-height: 116px !important;
padding: 15px !important;
gap: 7px !important;
border-radius: 18px !important;
}
body.home-gateway-page .home-industry-strip__grid a:nth-child(5) {
grid-column: span 2;
min-height: 98px !important;
}
body.home-gateway-page .home-industry-strip__grid span {
font-size: 0.68rem !important;
}
body.home-gateway-page .home-industry-strip__grid strong {
max-width: 18ch !important;
font-size: 1.02rem !important;
line-height: 1.08 !important;
}
body.home-gateway-page .home-industry-strip__grid small {
font-size: 0.82rem !important;
line-height: 1.34 !important;
}
body.home-gateway-page .home-integration-flow {
display: grid !important;
grid-template-columns: minmax(270px, 0.68fr) minmax(0, 1.32fr) !important;
align-content: center !important;
align-items: center !important;
gap: 26px !important;
padding: 34px 28px !important;
}
body.home-gateway-page .home-integration-flow .home-section__head {
margin: 0 !important;
max-width: 340px !important;
align-items: start !important;
text-align: left !important;
gap: 12px !important;
}
body.home-gateway-page .home-integration-flow .home-section__head h2 {
max-width: 100% !important;
font-size: clamp(1.52rem, 2.12vw, 1.74rem) !important;
line-height: 1.02 !important;
white-space: nowrap !important;
}
body.home-gateway-page .home-integration-flow .home-section__head p {
max-width: 30ch !important;
font-size: 0.93rem !important;
line-height: 1.4 !important;
}
body.home-gateway-page .home-integration-flow__grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 12px !important;
align-self: center !important;
}
body.home-gateway-page .home-integration-flow__grid article {
min-height: 126px !important;
padding: 15px !important;
gap: 7px !important;
border-radius: 18px !important;
}
body.home-gateway-page .home-integration-flow__grid span {
font-size: 0.68rem !important;
}
body.home-gateway-page .home-integration-flow__grid strong {
font-size: 1.02rem !important;
line-height: 1.08 !important;
}
body.home-gateway-page .home-integration-flow__grid p {
font-size: 0.82rem !important;
line-height: 1.34 !important;
}
body.home-gateway-page .home-faq-panel {
display: grid !important;
grid-template-columns: minmax(260px, 0.65fr) minmax(0, 1.35fr) !important;
align-content: center !important;
align-items: center !important;
gap: 24px !important;
padding: 34px 28px !important;
}
body.home-gateway-page .home-faq-panel .home-section__head {
margin: 0 !important;
max-width: 315px !important;
align-items: start !important;
text-align: left !important;
gap: 12px !important;
}
body.home-gateway-page .home-faq-panel .home-section__head h2 {
max-width: 100% !important;
font-size: clamp(1.52rem, 2.12vw, 1.74rem) !important;
line-height: 1.02 !important;
white-space: nowrap !important;
}
body.home-gateway-page .home-faq-panel__grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 10px !important;
align-items: start !important;
}
body.home-gateway-page .home-faq-panel details {
min-height: 0 !important;
height: auto !important;
padding: 14px 15px !important;
gap: 7px !important;
border-radius: 18px !important;
}
body.home-gateway-page .home-faq-panel summary {
font-size: 0.96rem !important;
line-height: 1.16 !important;
}
body.home-gateway-page .home-faq-panel p {
font-size: 0.82rem !important;
line-height: 1.34 !important;
}
body.home-gateway-page .home-faq-panel details:not([open]) {
min-height: 70px !important;
}
body.home-gateway-page .home-faq-panel details:not([open]) p {
display: none !important;
}
body.home-gateway-page #create-agent .home-premium-section-head--compact {
display: grid !important;
grid-template-columns: auto minmax(260px, 0.78fr) minmax(280px, 1fr) !important;
align-items: center !important;
gap: 14px 18px !important;
margin: 0 !important;
padding: 14px 16px !important;
border-radius: 20px !important;
}
body.home-gateway-page #create-agent .home-premium-section-head--compact span {
width: max-content !important;
white-space: nowrap !important;
}
body.home-gateway-page #create-agent .home-premium-section-head--compact h2 {
max-width: 16ch !important;
font-size: clamp(1.52rem, 2.08vw, 1.82rem) !important;
line-height: 1 !important;
white-space: nowrap !important;
}
body.home-gateway-page #create-agent .home-premium-section-head--compact p {
max-width: 42ch !important;
margin: 0 !important;
font-size: 0.88rem !important;
line-height: 1.32 !important;
}
body.home-gateway-page .home-gateway-shell::after {
content: "";
display: block;
min-height: 160px;
}
body.home-gateway-page:not(.app-shell) .cookie-banner {
left: 50% !important;
right: auto !important;
bottom: 8px !important;
width: min(560px, calc(100vw - 48px)) !important;
transform: translateX(-50%) !important;
grid-template-columns: max-content auto !important;
align-items: center !important;
gap: 8px !important;
padding: 6px 8px !important;
border-radius: 999px !important;
border-color: rgba(243, 213, 138, 0.24) !important;
background: linear-gradient(180deg, rgba(12, 22, 48, 0.94), rgba(5, 10, 26, 0.94)) !important;
box-shadow: 0 18px 48px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
backdrop-filter: blur(18px) !important;
}
body.home-gateway-page:not(.app-shell) .cookie-banner__body {
min-width: 0 !important;
}
body.home-gateway-page:not(.app-shell) .cookie-banner__body strong {
font-size: 0.82rem !important;
white-space: nowrap !important;
}
body.home-gateway-page:not(.app-shell) .cookie-banner__body p {
display: none !important;
}
body.home-gateway-page:not(.app-shell) .cookie-banner__actions {
gap: 5px !important;
}
body.home-gateway-page:not(.app-shell) .cookie-banner__actions .btn {
min-width: 74px !important;
min-height: 27px !important;
padding: 0.32rem 0.32rem !important;
border-radius: 999px !important;
font-size: 0.63rem !important;
}
}
/* Final iPad title polish: section labels must read like compact demo panels,
not secondary hero blocks. */
@media (min-width: 1000px) and (max-width: 1220px) and (orientation: landscape) {
body.home-gateway-page .home-product-intro {
grid-template-columns: minmax(320px, 0.88fr) minmax(0, 1.12fr) !important;
gap: 16px 28px !important;
padding: 34px 34px 30px !important;
}
body.home-gateway-page .home-product-intro__copy {
max-width: 340px !important;
}
body.home-gateway-page .home-product-intro__copy h2 {
max-width: 12.8ch !important;
font-size: clamp(2.04rem, 2.55vw, 2.42rem) !important;
line-height: 1 !important;
}
body.home-gateway-page .home-product-intro__copy p {
max-width: 34ch !important;
}
body.home-gateway-page .home-industry-strip .home-section__head {
max-width: 340px !important;
}
body.home-gateway-page .home-industry-strip .home-section__head h2 {
max-width: 11.5ch !important;
font-size: clamp(2.02rem, 2.55vw, 2.36rem) !important;
line-height: 1.02 !important;
}
body.home-gateway-page .home-industry-strip .home-section__head p {
max-width: 36ch !important;
font-size: 0.88rem !important;
line-height: 1.34 !important;
}
}
/* Public footer: iPad landscape should feel like a compact closing panel, not
a tall wall of links. */
@media (min-width: 1000px) and (max-width: 1220px) and (orientation: landscape) {
body:not(.app-shell) .site-footer {
border-top-color: rgba(243, 213, 138, 0.18) !important;
background:
radial-gradient(circle at 10% 8%, rgba(214, 180, 106, 0.13), transparent 24rem),
radial-gradient(circle at 90% 0%, rgba(102, 216, 255, 0.12), transparent 24rem),
linear-gradient(180deg, #050917 0%, #07111f 100%) !important;
}
body:not(.app-shell) .site-footer__inner {
grid-template-columns: 1fr !important;
gap: 10px !important;
width: min(100% - 28px, 1160px) !important;
padding: 22px 0 16px !important;
}
body:not(.app-shell) .site-footer__brand-block {
display: grid !important;
grid-template-columns: minmax(190px, max-content) minmax(0, 1fr) max-content !important;
align-items: center !important;
gap: 14px !important;
min-height: 90px !important;
padding: 13px 16px !important;
border-radius: 20px !important;
border-color: rgba(243, 213, 138, 0.18) !important;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.026)),
rgba(8, 13, 28, 0.76) !important;
}
body:not(.app-shell) .site-footer__brand {
align-self: center !important;
}
body:not(.app-shell) .site-footer__logo {
height: 34px !important;
max-width: 206px !important;
}
body:not(.app-shell) .site-footer__pitch {
max-width: 56ch !important;
margin: 0 !important;
font-size: 0.84rem !important;
line-height: 1.28 !important;
}
body:not(.app-shell) .site-footer__cta {
align-self: center !important;
justify-content: flex-end !important;
flex-wrap: nowrap !important;
gap: 7px !important;
}
body:not(.app-shell) .site-footer__cta-link,
body:not(.app-shell) .site-footer__contact-link {
min-height: 36px !important;
padding: 0 11px !important;
font-size: 0.72rem !important;
white-space: nowrap !important;
}
body:not(.app-shell) .site-footer__links {
display: grid !important;
grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.08fr) minmax(0, 0.98fr) minmax(0, 1.42fr) !important;
align-items: start !important;
gap: 8px !important;
}
body:not(.app-shell) .site-footer__column {
display: grid !important;
grid-template-rows: auto 1fr !important;
gap: 9px !important;
align-self: start !important;
min-height: 0 !important;
padding: 12px !important;
border-radius: 16px !important;
border-color: rgba(243, 213, 138, 0.13) !important;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.028)),
rgba(8, 13, 28, 0.7) !important;
}
body:not(.app-shell) .site-footer__column:nth-child(4) {
border-color: rgba(243, 213, 138, 0.18) !important;
}
body:not(.app-shell) .site-footer__title {
display: inline-flex !important;
width: max-content !important;
min-height: 22px !important;
align-items: center !important;
padding: 0 8px !important;
border: 1px solid rgba(243, 213, 138, 0.2) !important;
border-radius: 999px !important;
background: rgba(243, 213, 138, 0.08) !important;
font-size: 0.66rem !important;
letter-spacing: 0 !important;
}
body:not(.app-shell) .site-footer__column nav {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 6px !important;
margin-top: 0 !important;
}
body:not(.app-shell) .site-footer__column:nth-child(4) nav {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
body:not(.app-shell) .site-footer__column nav a,
body:not(.app-shell) .site-footer__link-button {
width: 100% !important;
min-height: 28px !important;
padding: 5px 7px !important;
border: 1px solid rgba(148, 163, 184, 0.1) !important;
border-radius: 10px !important;
background: rgba(255, 255, 255, 0.035) !important;
font-size: 0.68rem !important;
line-height: 1.08 !important;
text-align: left !important;
text-decoration: none !important;
overflow-wrap: anywhere !important;
}
body:not(.app-shell) .site-footer__link-button {
justify-content: flex-start !important;
}
body:not(.app-shell) .site-footer__meta {
margin: 0 !important;
padding-top: 10px !important;
border-top: 1px solid rgba(243, 213, 138, 0.16) !important;
font-size: 0.74rem !important;
text-align: center !important;
}
body[data-theme="light"]:not(.app-shell) .site-footer {
background:
radial-gradient(circle at 10% 8%, rgba(37, 99, 235, 0.13), transparent 24rem),
radial-gradient(circle at 90% 0%, rgba(214, 180, 106, 0.14), transparent 24rem),
linear-gradient(180deg, #ffffff 0%, #eef4fb 100%) !important;
}
body[data-theme="light"]:not(.app-shell) .site-footer__brand-block,
body[data-theme="light"]:not(.app-shell) .site-footer__column {
border-color: rgba(15, 23, 42, 0.1) !important;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(239, 246, 255, 0.9)),
#ffffff !important;
box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08) !important;
}
body[data-theme="light"]:not(.app-shell) .site-footer__column nav a,
body[data-theme="light"]:not(.app-shell) .site-footer__link-button {
border-color: rgba(15, 23, 42, 0.08) !important;
background: rgba(15, 23, 42, 0.035) !important;
}
}
/* iPad 11 landscape polish for dynamic SEO landing pages. */
@media (min-width: 721px) and (max-width: 1220px) {
body.landing-refresh.legal-page.seo-landing-page:not(.app-shell) .legal-hero.seo-landing-hero {
padding: 34px 0 18px !important;
}
body.landing-refresh.legal-page.seo-landing-page:not(.app-shell) .seo-landing-hero .legal-hero__card {
width: min(calc(100% - 88px), 920px);
max-width: 920px !important;
padding: 30px 38px !important;
gap: 11px !important;
border-radius: 28px !important;
}
body.landing-refresh.legal-page.seo-landing-page:not(.app-shell) .seo-landing-hero .legal-hero__card h1 {
max-width: 15ch;
font-size: clamp(2.7rem, 4.2vw, 3.65rem) !important;
line-height: 1.01 !important;
letter-spacing: 0 !important;
}
body.landing-refresh.legal-page.seo-landing-page:not(.app-shell) .seo-landing-hero .legal-hero__card p {
max-width: 66ch !important;
font-size: 0.96rem !important;
line-height: 1.44 !important;
}
body.landing-refresh.legal-page.seo-landing-page:not(.app-shell) .home-hero__actions {
justify-content: flex-start !important;
gap: 12px !important;
margin-top: 12px !important;
}
body.landing-refresh.legal-page.seo-landing-page:not(.app-shell) .home-hero__actions .btn {
flex: 0 1 190px;
min-width: 0 !important;
min-height: 46px !important;
padding-inline: 18px !important;
justify-content: center !important;
text-align: center !important;
white-space: normal !important;
}
body.seo-landing-page .seo-product-scene {
padding-block: 8px 28px;
}
body.seo-landing-page .seo-product-scene__shell {
width: min(calc(100% - 44px), 1110px);
max-width: 1110px;
grid-template-columns: minmax(0, 0.74fr) minmax(0, 1.26fr);
gap: 14px;
padding: 20px;
border-radius: 26px;
}
body.seo-landing-page .seo-product-scene__copy {
gap: 10px;
}
body.seo-landing-page .seo-product-scene__copy h2 {
max-width: 13ch;
font-size: clamp(2.18rem, 3.25vw, 2.9rem);
line-height: 1;
letter-spacing: 0;
}
body.seo-landing-page .seo-product-scene__copy p {
font-size: 0.94rem;
line-height: 1.42;
}
body.seo-landing-page .seo-product-scene__board {
gap: 10px;
}
body.seo-landing-page .seo-product-call,
body.seo-landing-page .seo-product-result {
min-height: 252px;
padding: 15px;
gap: 9px;
border-radius: 20px;
}
body.seo-landing-page .seo-product-call__badge span {
width: 32px;
height: 32px;
border-radius: 11px;
}
body.seo-landing-page .seo-product-call__number {
font-size: clamp(1.22rem, 1.86vw, 1.52rem);
}
body.seo-landing-page .seo-product-call__wave {
min-height: 38px;
}
body.seo-landing-page .seo-product-call__wave span {
height: 16px;
}
body.seo-landing-page .seo-product-call__wave span:nth-child(2),
body.seo-landing-page .seo-product-call__wave span:nth-child(4) {
height: 28px;
}
body.seo-landing-page .seo-product-call__wave span:nth-child(3) {
height: 40px;
}
body.seo-landing-page .seo-product-call__transcript {
gap: 6px;
}
body.seo-landing-page .seo-product-call__transcript p {
padding: 8px;
font-size: 0.8rem;
line-height: 1.26;
}
body.seo-landing-page .seo-product-scene__arrow {
width: 34px;
height: 34px;
}
body.seo-landing-page .seo-product-result h3 {
max-width: 12.5ch;
font-size: clamp(1.52rem, 2.18vw, 1.95rem);
line-height: 1;
letter-spacing: 0;
}
body.seo-landing-page .seo-product-result li,
body.seo-landing-page .seo-product-result strong {
font-size: 0.82rem;
line-height: 1.26;
}
body.seo-landing-page .seo-product-scene__cards {
gap: 10px;
}
body.seo-landing-page .seo-product-scene__cards article {
min-height: 108px;
padding: 12px;
border-radius: 16px;
}
body.seo-landing-page .seo-product-scene__cards h3 {
font-size: 0.92rem;
}
body.seo-landing-page .seo-product-scene__cards p {
font-size: 0.8rem;
line-height: 1.3;
}
body.seo-landing-page .seo-product-scene__timeline {
gap: 10px;
}
body.seo-landing-page .seo-product-scene__timeline article {
min-height: 54px;
padding: 10px;
border-radius: 15px;
}
body.seo-landing-page .public-call-story {
padding-block: 24px 30px;
}
body.seo-landing-page .public-call-story__shell {
width: min(calc(100% - 44px), 1110px);
max-width: 1110px;
grid-template-columns: minmax(0, 0.74fr) minmax(0, 1.26fr);
gap: 16px;
padding: 20px;
border-radius: 26px;
}
body.seo-landing-page .public-call-story__copy {
gap: 10px;
}
body.seo-landing-page .public-call-story__copy h2 {
max-width: 13ch;
font-size: clamp(2.18rem, 3.4vw, 3rem);
line-height: 1;
letter-spacing: 0;
}
body.seo-landing-page .public-call-story__copy p {
font-size: 0.92rem;
line-height: 1.4;
}
body.seo-landing-page .public-call-story__stage {
grid-template-columns: minmax(148px, 0.78fr) 32px minmax(176px, 1fr);
gap: 8px;
}
body.seo-landing-page .public-phone-mockup {
max-height: 292px;
padding: 15px 12px;
gap: 8px;
border-radius: 24px;
}
body.seo-landing-page .public-phone-mockup::before {
border-radius: 20px;
}
body.seo-landing-page .public-phone-mockup__icon {
width: 42px;
height: 42px;
border-radius: 14px;
}
body.seo-landing-page .public-phone-mockup__icon img {
width: 28px;
height: 28px;
}
body.seo-landing-page .public-phone-mockup > span {
font-size: 0.72rem;
letter-spacing: 0.08em;
}
body.seo-landing-page .public-phone-mockup > strong {
font-size: clamp(1.06rem, 1.7vw, 1.34rem);
}
body.seo-landing-page .public-voice-wave {
min-height: 40px;
}
body.seo-landing-page .public-voice-wave i {
height: 17px;
}
body.seo-landing-page .public-voice-wave i:nth-child(2n) {
height: 27px;
}
body.seo-landing-page .public-voice-wave i:nth-child(3n) {
height: 36px;
}
body.seo-landing-page .public-phone-mockup__actions {
gap: 12px;
}
body.seo-landing-page .public-phone-mockup__actions b {
width: 40px;
height: 40px;
}
body.seo-landing-page .public-call-story__arrow {
width: 36px;
height: 36px;
font-size: 1.1rem;
}
body.seo-landing-page .public-result-card {
min-height: 242px;
padding: 16px;
gap: 9px;
border-radius: 22px;
}
body.seo-landing-page .public-result-card__icon {
width: 48px;
height: 48px;
}
body.seo-landing-page .public-result-card > strong {
font-size: clamp(1.24rem, 1.78vw, 1.62rem);
line-height: 1.04;
letter-spacing: 0;
}
body.seo-landing-page .public-result-card ul {
gap: 6px;
}
body.seo-landing-page .public-result-card li {
font-size: 0.8rem;
line-height: 1.2;
}
body.seo-landing-page .public-result-card__sms {
padding: 11px;
border-radius: 16px;
}
body.seo-landing-page .public-call-story__cards {
gap: 10px;
}
body.seo-landing-page .public-call-story__cards article {
min-height: 110px;
padding: 12px;
border-radius: 16px;
}
body.seo-landing-page .public-call-story__cards span {
min-height: 26px;
margin-bottom: 7px;
}
body.seo-landing-page .public-call-story__cards strong {
font-size: 0.92rem;
}
body.seo-landing-page .public-call-story__cards p {
margin-top: 6px;
font-size: 0.8rem;
line-height: 1.28;
}
body.seo-landing-page .public-call-story__flow {
gap: 10px;
}
body.seo-landing-page .public-call-story__flow span {
min-height: 52px;
padding: 10px 12px;
border-radius: 16px;
}
body.seo-landing-page .public-call-story__flow b {
width: 30px;
height: 30px;
}
body.seo-landing-page .public-call-story__flow strong {
font-size: 0.88rem;
}
body.seo-landing-page .seo-landing-grid {
width: min(calc(100% - 44px), 1110px);
max-width: 1110px;
grid-template-columns: minmax(0, 1fr) 300px;
gap: 18px;
padding-inline: 0;
}
body.seo-landing-page .seo-landing-body {
padding-block: 24px 28px;
}
body.seo-landing-page .seo-landing-main {
gap: 14px;
}
body.seo-landing-page .seo-landing-card,
body.seo-landing-page .seo-landing-aside {
border-radius: 20px;
}
body.seo-landing-page .seo-landing-card {
min-height: 0;
gap: 9px;
padding: 16px;
}
body.seo-landing-page .seo-landing-card h2,
body.seo-landing-page .seo-landing-aside h2 {
font-size: 1.03rem;
line-height: 1.12;
}
body.seo-landing-page .seo-landing-card p,
body.seo-landing-page .seo-landing-card li {
font-size: 0.85rem;
line-height: 1.31;
}
body.seo-landing-page .seo-landing-card ul {
gap: 5px;
padding-left: 1rem;
}
body.seo-landing-page .seo-landing-aside {
top: 92px;
padding: 18px;
gap: 12px;
}
body.seo-landing-page .seo-related-links a {
min-height: 36px;
padding: 0.5rem 0.66rem;
border-radius: 12px;
font-size: 0.84rem;
line-height: 1.16;
}
body.seo-landing-page .seo-keyword-chips span {
min-height: 24px;
padding: 0.22rem 0.52rem;
font-size: max(11px, 0.68rem);
}
body.seo-landing-page .seo-landing-faq {
padding-block: 22px 72px;
}
body.seo-landing-page .home-cta {
min-height: 0;
padding-block: 38px;
}
}
/* Décroche.ai creation wizard refinement.
Loaded after the iPad home layer so the create-agent panel stays easy to tune. */
body.home-gateway-page #create-agent {
--wizard-gold: #f2d58a;
--wizard-blue: #66d8ff;
}
body.home-gateway-page #create-agent .home-premium-section-head--compact {
padding-left: clamp(28px, 3vw, 40px);
}
body.home-gateway-page #create-agent .home-premium-section-head--compact::before {
left: clamp(12px, 1.4vw, 18px);
}
body.home-gateway-page #create-agent .home-gateway-step {
justify-self: center;
}
body.home-gateway-page #create-agent .home-gateway-vertical {
display: grid;
grid-template-rows: auto 1fr auto;
gap: 10px;
}
body.home-gateway-page #create-agent .home-gateway-vertical .home-intake-vertical__text {
min-width: 0;
}
body.home-gateway-page #create-agent .home-gateway-vertical__cta {
width: max-content;
max-width: 100%;
min-height: 30px;
display: inline-grid;
place-items: center;
padding: 0.42rem 0.72rem;
border: 1px solid color-mix(in srgb, var(--home-intake-accent) 40%, rgba(255, 255, 255, 0.16));
border-radius: 999px;
color: #07111f;
background: linear-gradient(135deg, var(--wizard-gold), color-mix(in srgb, var(--home-intake-accent) 44%, #ffffff));
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
white-space: nowrap;
letter-spacing: 0;
}
body.home-gateway-page #create-agent .home-gateway-vertical:hover .home-gateway-vertical__cta,
body.home-gateway-page #create-agent .home-gateway-vertical:focus-visible .home-gateway-vertical__cta,
body.home-gateway-page #create-agent .home-gateway-vertical.is-selected .home-gateway-vertical__cta {
transform: translateY(-1px);
}
body.home-gateway-page .home-studio-entry.is-analysis-ready .home-gateway-analysis {
display: none !important;
}
body.home-gateway-page .home-studio-live__actions[hidden] {
display: none !important;
}
body.home-gateway-page .home-studio-live__actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin-top: 14px;
padding: 14px 16px;
border: 1px solid rgba(242, 213, 138, 0.24);
border-radius: 16px;
background:
linear-gradient(135deg, rgba(242, 213, 138, 0.14), rgba(102, 216, 255, 0.06)),
rgba(7, 17, 31, 0.72);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
body.home-gateway-page .home-studio-live__actions span {
min-width: 0;
color: #f8e9c6;
font-size: 0.88rem;
font-weight: 800;
line-height: 1.25;
}
body.home-gateway-page .home-studio-live__actions .btn {
flex: 0 0 auto;
min-height: 42px;
padding-inline: 16px;
white-space: nowrap;
}
@media (min-width: 1000px) and (max-width: 1220px) and (orientation: landscape) {
/* Chips « Choisir » : doré premium uniforme (l'accent métier reste sur
l'icône), fini l'arc-en-ciel menthe/rose. */
body.home-gateway-page #create-agent .home-gateway-vertical__cta {
border-color: rgba(244, 223, 174, 0.5) !important;
background: linear-gradient(135deg, #f8e9c6, #f4dfae 55%, #e9cf96) !important;
color: #171c30 !important;
}
body.home-gateway-page .home-wizard-nav {
grid-template-columns: minmax(118px, 0.58fr) minmax(220px, auto) minmax(42px, 0.58fr) !important;
width: min(100%, 1004px) !important;
min-height: 56px !important;
margin: 0 auto 14px !important;
padding: 8px 12px !important;
scroll-margin-top: 96px !important;
border-radius: 22px !important;
border-color: rgba(243, 213, 138, 0.2) !important;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025)),
rgba(7, 17, 31, 0.78) !important;
box-shadow:
0 18px 48px rgba(0, 0, 0, 0.22),
inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}
body.home-gateway-page .home-wizard-nav button {
min-height: 40px !important;
padding: 0 16px !important;
border-radius: 999px !important;
justify-self: start !important;
background: linear-gradient(135deg, rgba(243, 213, 138, 0.13), rgba(102, 216, 255, 0.06)) !important;
}
body.home-gateway-page .home-wizard-nav__center {
min-width: 220px !important;
justify-self: center !important;
gap: 2px !important;
}
body.home-gateway-page .home-wizard-nav__center strong {
font-size: 0.86rem !important;
letter-spacing: 0 !important;
}
body.home-gateway-page .home-wizard-nav small {
max-width: 24ch !important;
font-size: 0.72rem !important;
letter-spacing: 0 !important;
}
body.home-gateway-page .home-wizard-nav__spacer {
display: block !important;
justify-self: end !important;
width: 40px !important;
height: 40px !important;
border: 1px solid rgba(243, 213, 138, 0.14) !important;
border-radius: 999px !important;
background: linear-gradient(135deg, rgba(243, 213, 138, 0.12), rgba(102, 216, 255, 0.08)) !important;
opacity: 0.62 !important;
}
body.home-gateway-page .home-gateway[data-home-wizard-stage="studio"] .home-studio-entry,
body.home-gateway-page .home-gateway[data-home-wizard-stage="questions"] .home-studio-entry,
body.home-gateway-page .home-gateway[data-home-wizard-stage="rules"] .home-studio-entry,
body.home-gateway-page .home-gateway[data-home-wizard-stage="test"] .home-studio-entry,
body.home-gateway-page .home-gateway[data-home-wizard-stage="signup"] .home-studio-entry {
display: grid !important;
width: min(100%, 1004px) !important;
margin: 0 auto !important;
scroll-margin-top: 96px !important;
}
body.home-gateway-page .home-studio-live__actions {
margin-top: 10px !important;
padding: 12px 14px !important;
border-radius: 14px !important;
}
body.home-gateway-page #create-agent {
align-content: center !important;
gap: 18px !important;
padding: 32px 28px !important;
}
body.home-gateway-page #create-agent .home-premium-section-head--compact {
width: min(100%, 850px);
justify-self: center;
grid-template-columns: max-content minmax(260px, 0.78fr) minmax(230px, 0.86fr) !important;
gap: 12px 18px !important;
padding: 13px 18px 13px 38px !important;
border-radius: 21px !important;
}
body.home-gateway-page #create-agent .home-premium-section-head--compact::before {
left: 16px;
top: 12px;
bottom: 12px;
width: 3px;
}
body.home-gateway-page #create-agent .home-premium-section-head--compact span {
font-size: 0.66rem !important;
letter-spacing: 0.08em !important;
}
body.home-gateway-page #create-agent .home-premium-section-head--compact h2 {
max-width: 15ch !important;
font-size: 1.86rem !important;
line-height: 0.98 !important;
white-space: nowrap !important;
}
body.home-gateway-page #create-agent .home-premium-section-head--compact p {
max-width: 29ch !important;
font-size: 0.82rem !important;
line-height: 1.28 !important;
}
body.home-gateway-page #create-agent .home-gateway-step {
grid-template-columns: 42px minmax(0, auto) !important;
gap: 12px !important;
align-items: center !important;
}
body.home-gateway-page #create-agent .home-gateway-step h2 {
font-size: 1.6rem !important;
}
body.home-gateway-page #create-agent .home-gateway-step p {
margin-top: 1px !important;
font-size: 0.88rem !important;
}
body.home-gateway-page #create-agent .home-gateway-verticals {
grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
gap: 10px !important;
width: min(100%, 930px);
justify-self: center;
}
body.home-gateway-page #create-agent .home-gateway-vertical {
min-height: 164px !important;
padding: 13px !important;
border-radius: 18px !important;
}
body.home-gateway-page #create-agent .home-gateway-vertical .home-intake-vertical__icon {
width: 42px !important;
height: 42px !important;
border-radius: 13px !important;
}
body.home-gateway-page #create-agent .home-gateway-vertical .home-intake-vertical__text strong {
font-size: 0.96rem !important;
line-height: 1.06 !important;
}
body.home-gateway-page #create-agent .home-gateway-vertical .home-intake-vertical__text small {
margin-top: 4px;
font-size: 0.78rem !important;
line-height: 1.24 !important;
}
body.home-gateway-page #create-agent .home-gateway-vertical__cta {
min-height: 28px;
padding: 0.35rem 0.66rem;
font-size: 0.68rem !important;
}
body.home-gateway-page .home-gateway[data-home-wizard-stage="search"] #create-agent {
align-content: start !important;
justify-content: center !important;
gap: 16px !important;
padding: 42px 28px 34px !important;
}
body.home-gateway-page .home-gateway[data-home-wizard-stage="search"] #create-agent .home-premium-section-head--compact {
width: min(100%, 720px) !important;
grid-template-columns: max-content minmax(0, 1fr) !important;
grid-template-areas:
"eyebrow title"
"eyebrow copy" !important;
gap: 5px 16px !important;
padding: 10px 18px 10px 36px !important;
border-radius: 18px !important;
}
body.home-gateway-page .home-gateway[data-home-wizard-stage="search"] #create-agent .home-premium-section-head--compact h2 {
max-width: none !important;
font-size: 1.52rem !important;
white-space: nowrap !important;
}
body.home-gateway-page .home-gateway[data-home-wizard-stage="search"] #create-agent .home-premium-section-head--compact p {
max-width: 52ch !important;
font-size: 0.8rem !important;
}
body.home-gateway-page .home-gateway[data-home-wizard-stage="search"] #create-agent .home-gateway-step--search {
width: min(100%, 560px) !important;
margin: 0 auto !important;
justify-content: center !important;
}
body.home-gateway-page .home-gateway[data-home-wizard-stage="search"] #create-agent .home-gateway-step--search h2 {
font-size: 1.44rem !important;
}
body.home-gateway-page .home-gateway[data-home-wizard-stage="search"] #create-agent .home-gateway-search {
width: min(100%, 900px) !important;
max-width: 900px !important;
padding: 18px !important;
border-radius: 22px !important;
background: linear-gradient(160deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03)), rgba(7, 17, 38, 0.72) !important;
border: 1px solid rgba(243, 213, 138, 0.16) !important;
box-shadow: 0 20px 48px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}
body.home-gateway-page .home-gateway[data-home-wizard-stage="search"] #create-agent .home-gateway-search form {
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(150px, 190px) !important;
align-items: stretch !important;
gap: 10px !important;
}
body.home-gateway-page .home-gateway[data-home-wizard-stage="search"] #create-agent .home-gateway-search .home-intake-search__field,
body.home-gateway-page .home-gateway[data-home-wizard-stage="search"] #create-agent .home-gateway-search .btn {
min-height: 50px !important;
}
body.home-gateway-page .home-gateway[data-home-wizard-stage="search"] #create-agent .home-gateway-manual {
margin-top: 10px !important;
min-height: 48px !important;
}
body.home-gateway-page .home-gateway[data-home-wizard-stage="review"] #create-agent {
align-content: start !important;
grid-template-columns: minmax(0, 1fr) minmax(230px, 260px) !important;
gap: 16px !important;
padding: 28px !important;
}
body.home-gateway-page .home-gateway[data-home-wizard-stage="review"] #create-agent > .home-premium-section-head--compact {
display: none !important;
}
body.home-gateway-page .home-gateway[data-home-wizard-stage="review"] #create-agent .home-gateway-enrichment {
grid-column: 1 !important;
align-self: start !important;
width: 100% !important;
padding: 16px !important;
border-radius: 20px !important;
}
body.home-gateway-page .home-gateway[data-home-wizard-stage="review"] #create-agent .home-gateway-enrichment .home-gateway-step {
grid-template-columns: 36px minmax(0, 1fr) !important;
align-items: center !important;
margin-bottom: 12px !important;
}
body.home-gateway-page .home-gateway[data-home-wizard-stage="review"] #create-agent .home-gateway-enrichment .home-gateway-step > span {
width: 36px !important;
height: 36px !important;
font-size: 0.84rem !important;
}
body.home-gateway-page .home-gateway[data-home-wizard-stage="review"] #create-agent .home-gateway-enrichment .home-gateway-step h2 {
font-size: 1.46rem !important;
line-height: 1.02 !important;
}
body.home-gateway-page .home-gateway[data-home-wizard-stage="review"] #create-agent .home-gateway-enrichment .home-gateway-step p {
margin-top: 2px !important;
font-size: 0.82rem !important;
line-height: 1.26 !important;
}
body.home-gateway-page .home-gateway[data-home-wizard-stage="review"] #create-agent .home-gateway-recovered--editable {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 10px !important;
}
body.home-gateway-page .home-gateway[data-home-wizard-stage="review"] #create-agent .home-gateway-recovered--editable label {
gap: 6px !important;
padding: 10px !important;
border-radius: 14px !important;
}
body.home-gateway-page .home-gateway[data-home-wizard-stage="review"] #create-agent .home-gateway-recovered--editable label span {
font-size: 0.66rem !important;
letter-spacing: 0.075em !important;
}
body.home-gateway-page .home-gateway[data-home-wizard-stage="review"] #create-agent .home-gateway-recovered--editable label:has([data-home-review-hours]) {
grid-column: 1 / -1 !important;
}
body.home-gateway-page .home-gateway[data-home-wizard-stage="review"] #create-agent .home-gateway-recovered--editable label:has([data-home-review-website]) {
grid-column: auto !important;
}
body.home-gateway-page .home-gateway[data-home-wizard-stage="review"] #create-agent .home-gateway-recovered--editable input,
body.home-gateway-page .home-gateway[data-home-wizard-stage="review"] #create-agent .home-gateway-recovered--editable textarea {
min-height: 42px !important;
padding: 9px 12px !important;
border-radius: 11px !important;
font-size: 0.92rem !important;
line-height: 1.3 !important;
}
body.home-gateway-page .home-gateway[data-home-wizard-stage="review"] #create-agent .home-gateway-recovered--editable [data-home-review-hours] {
min-height: 108px !important;
resize: none !important;
}
body.home-gateway-page .home-gateway[data-home-wizard-stage="review"] #create-agent .home-gateway-recovered--editable [data-home-review-website] {
min-height: 42px !important;
}
body.home-gateway-page .home-gateway[data-home-wizard-stage="review"] #create-agent .home-gateway-next {
grid-column: 2 !important;
align-self: start !important;
display: grid !important;
grid-template-columns: 1fr !important;
gap: 12px !important;
padding: 16px !important;
border-radius: 20px !important;
}
body.home-gateway-page .home-gateway[data-home-wizard-stage="review"] #create-agent .home-gateway-next > span,
body.home-gateway-page .home-gateway[data-home-wizard-stage="review"] #create-agent .home-gateway-next h2,
body.home-gateway-page .home-gateway[data-home-wizard-stage="review"] #create-agent .home-gateway-next p,
body.home-gateway-page .home-gateway[data-home-wizard-stage="review"] #create-agent .home-gateway-next .btn {
grid-column: 1 !important;
grid-row: auto !important;
}
body.home-gateway-page .home-gateway[data-home-wizard-stage="review"] #create-agent .home-gateway-next h2 {
font-size: 1.08rem !important;
line-height: 1.08 !important;
}
body.home-gateway-page .home-gateway[data-home-wizard-stage="review"] #create-agent .home-gateway-next p {
font-size: 0.82rem !important;
line-height: 1.35 !important;
}
body.home-gateway-page .home-gateway[data-home-wizard-stage="review"] #create-agent .home-gateway-next .btn {
width: 100% !important;
min-height: 46px !important;
}
}
@media (min-width: 640px) and (max-width: 999px) {
body.home-gateway-page #create-agent .home-gateway-vertical__cta {
min-height: 32px;
padding-inline: 0.78rem;
}
}
/* Homepage title fit.
Late layer for section headers that must feel integrated in dense panels. */
body.home-gateway-page .home-integration-flow .home-section__head,
body.home-gateway-page .home-faq-panel .home-section__head {
width: min(100%, 900px);
max-width: none !important;
display: grid !important;
grid-template-columns: max-content minmax(190px, 0.58fr) minmax(280px, 1fr);
grid-template-areas: "eyebrow title copy";
align-items: center !important;
justify-self: center;
justify-content: center !important;
justify-items: start;
gap: 12px 20px !important;
padding: clamp(13px, 1.35vw, 17px) clamp(18px, 2vw, 24px) clamp(13px, 1.35vw, 17px) clamp(24px, 2.4vw, 32px) !important;
text-align: left !important;
border: 1px solid rgba(243, 213, 138, 0.18) !important;
border-radius: 24px !important;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.072), rgba(255, 255, 255, 0.025)),
rgba(7, 17, 31, 0.68) !important;
box-shadow: 0 18px 42px rgba(0, 0, 0, 0.18) !important;
}
body.home-gateway-page .home-integration-flow .home-section__head::after,
body.home-gateway-page .home-faq-panel .home-section__head::after {
inset: 10px auto 10px 10px;
width: 4px;
height: auto;
border-radius: 999px;
background: linear-gradient(180deg, rgba(255, 239, 183, 0.98), rgba(102, 216, 255, 0.92));
opacity: 0.88;
}
body.home-gateway-page .home-integration-flow .home-section__head .home-eyebrow,
body.home-gateway-page .home-faq-panel .home-section__head .home-eyebrow {
grid-area: eyebrow;
margin: 0 !important;
white-space: nowrap;
align-self: center;
}
body.home-gateway-page .home-integration-flow .home-section__head h2,
body.home-gateway-page .home-faq-panel .home-section__head h2 {
grid-area: title;
max-width: 16ch !important;
margin: 0 !important;
font-size: clamp(1.36rem, 1.62vw, 1.74rem) !important;
line-height: 1.06 !important;
white-space: normal !important;
text-wrap: balance !important;
}
body.home-gateway-page .home-integration-flow .home-section__head p,
body.home-gateway-page .home-faq-panel .home-section__head p {
grid-area: copy;
max-width: 40ch !important;
margin: 0 !important;
font-size: clamp(0.82rem, 0.95vw, 0.92rem) !important;
line-height: 1.35 !important;
}
body.home-gateway-page #create-agent .home-premium-section-head--compact {
width: min(100%, 840px);
justify-self: center;
display: grid !important;
grid-template-columns: max-content minmax(190px, 0.58fr) minmax(300px, 1fr) !important;
grid-template-areas: "eyebrow title copy";
align-items: center !important;
gap: 9px 20px !important;
padding: 13px 20px 13px 34px !important;
}
body.home-gateway-page #create-agent .home-premium-section-head--compact span {
grid-area: eyebrow;
white-space: nowrap;
}
body.home-gateway-page #create-agent .home-premium-section-head--compact h2 {
grid-area: title;
max-width: 17ch !important;
margin: 0 !important;
font-size: clamp(1.42rem, 1.68vw, 1.78rem) !important;
line-height: 1.06 !important;
white-space: normal !important;
text-wrap: balance !important;
}
body.home-gateway-page #create-agent .home-premium-section-head--compact p {
grid-area: copy;
max-width: 44ch !important;
margin: 0 !important;
}
@media (min-width: 1000px) and (max-width: 1220px) and (orientation: landscape) {
body.home-gateway-page .home-integration-flow,
body.home-gateway-page .home-faq-panel {
grid-template-columns: minmax(255px, 0.56fr) minmax(0, 1.44fr) !important;
grid-template-rows: minmax(0, auto) !important;
align-content: center !important;
align-items: center !important;
gap: 24px !important;
padding: 42px 40px !important;
}
body.home-gateway-page .home-integration-flow .home-section__head,
body.home-gateway-page .home-faq-panel .home-section__head {
width: auto !important;
min-height: 0 !important;
align-self: center !important;
display: grid !important;
grid-template-columns: 1fr !important;
grid-template-areas:
"eyebrow"
"title"
"copy" !important;
align-items: flex-start !important;
justify-content: center !important;
gap: 9px !important;
padding: 17px 18px 17px 24px !important;
border-radius: 20px !important;
background:
linear-gradient(135deg, rgba(243, 213, 138, 0.1), rgba(111, 231, 238, 0.028)),
rgba(6, 15, 31, 0.68) !important;
box-shadow: none !important;
}
body.home-gateway-page .home-integration-flow .home-section__head::after,
body.home-gateway-page .home-faq-panel .home-section__head::after {
inset: 12px auto 12px 10px !important;
width: 3px !important;
}
body.home-gateway-page .home-integration-flow .home-section__head h2,
body.home-gateway-page .home-faq-panel .home-section__head h2 {
max-width: 16ch !important;
font-size: clamp(1.3rem, 1.55vw, 1.5rem) !important;
line-height: 1.07 !important;
white-space: normal !important;
text-wrap: balance !important;
}
body.home-gateway-page .home-integration-flow .home-section__head p,
body.home-gateway-page .home-faq-panel .home-section__head p {
max-width: 30ch !important;
font-size: 0.82rem !important;
line-height: 1.3 !important;
}
body.home-gateway-page .home-integration-flow__grid,
body.home-gateway-page .home-faq-panel__grid {
width: auto !important;
justify-self: center !important;
align-self: center !important;
}
body.home-gateway-page #create-agent .home-premium-section-head--compact {
width: min(100%, 720px) !important;
grid-template-columns: max-content minmax(0, 1fr) !important;
grid-template-areas:
"eyebrow title"
"eyebrow copy" !important;
gap: 5px 18px !important;
padding: 12px 20px 12px 34px !important;
border-radius: 21px !important;
}
body.home-gateway-page #create-agent .home-premium-section-head--compact h2 {
max-width: none !important;
font-size: clamp(1.3rem, 1.45vw, 1.48rem) !important;
line-height: 1.08 !important;
white-space: nowrap !important;
text-wrap: normal !important;
}
body.home-gateway-page #create-agent .home-premium-section-head--compact p {
max-width: 54ch !important;
font-size: 0.8rem !important;
line-height: 1.28 !important;
}
}
@media (max-width: 860px) {
body.home-gateway-page .home-integration-flow .home-section__head,
body.home-gateway-page .home-faq-panel .home-section__head,
body.home-gateway-page #create-agent .home-premium-section-head--compact {
grid-template-columns: 1fr !important;
grid-template-areas:
"eyebrow"
"title"
"copy";
justify-items: start !important;
}
body.home-gateway-page .home-integration-flow .home-section__head h2,
body.home-gateway-page .home-faq-panel .home-section__head h2,
body.home-gateway-page #create-agent .home-premium-section-head--compact h2 {
max-width: 16ch !important;
white-space: normal !important;
}
}
/* Décroche.ai — Bandeau « phase pilote » de la homepage.
Preuve honnête (pas de faux témoignages) + conditions d'essai visibles. */
body.home-gateway-page .home-pilot-strip {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
gap: clamp(22px, 3vw, 40px);
align-items: center;
}
body.home-gateway-page .home-pilot-strip__copy {
display: grid;
gap: 10px;
justify-items: start;
}
body.home-gateway-page .home-pilot-strip__copy h2 {
margin: 0;
max-width: 20ch;
font-size: clamp(1.5rem, 2.3vw, 2.05rem);
line-height: 1.1;
}
body.home-gateway-page .home-pilot-strip__copy p {
margin: 0;
max-width: 48ch;
color: rgba(226, 232, 240, 0.8);
font-size: 0.96rem;
line-height: 1.5;
}
body.home-gateway-page .home-pilot-strip__terms {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin: 0;
padding: 0;
list-style: none;
}
body.home-gateway-page .home-pilot-strip__terms li {
display: grid;
align-content: center;
gap: 3px;
min-height: 74px;
padding: 13px 16px;
border: 1px solid rgba(243, 213, 138, 0.24);
border-radius: 16px;
background:
linear-gradient(135deg, rgba(243, 213, 138, 0.09), rgba(102, 216, 255, 0.03)),
rgba(7, 17, 31, 0.6);
}
body.home-gateway-page .home-pilot-strip__terms strong {
color: #f8fbff;
font-size: 0.95rem;
line-height: 1.2;
}
body.home-gateway-page .home-pilot-strip__terms small {
color: rgba(226, 232, 240, 0.62);
font-size: 0.8rem;
line-height: 1.3;
}
@media (max-width: 999px) {
body.home-gateway-page .home-pilot-strip {
grid-template-columns: 1fr;
gap: 20px;
}
}
@media (max-width: 560px) {
body.home-gateway-page .home-pilot-strip__terms {
grid-template-columns: 1fr;
}
body.home-gateway-page .home-pilot-strip__terms li {
min-height: 0;
}
}
/* Thème clair */
body[data-theme="light"].home-gateway-page .home-pilot-strip__terms li {
background: linear-gradient(135deg, rgba(244, 223, 174, 0.24), rgba(219, 234, 254, 0.4)), #ffffff;
border-color: rgba(180, 138, 39, 0.3);
}
body[data-theme="light"].home-gateway-page .home-pilot-strip__terms strong {
color: #142033;
}
body[data-theme="light"].home-gateway-page .home-pilot-strip__terms small,
body[data-theme="light"].home-gateway-page .home-pilot-strip__copy p {
color: #475569;
}
/* Décroche.ai live demo refinement for iPad 11 landscape.
Kept separate from the global stylesheet for faster field-demo iterations. */
@media (min-width: 1000px) and (max-width: 1220px) and (orientation: landscape) {
html:has(body.live-demo-body) {
scroll-padding-top: 12px !important;
}
body.live-demo-body .live-demo-page {
padding: 18px 0 42px !important;
}
body.live-demo-body .live-demo-page > .container {
width: min(100% - 48px, 1110px) !important;
}
body.live-demo-body .core-product-stage--demo {
min-height: calc(100svh - 132px) !important;
display: grid !important;
align-content: center !important;
padding: 30px 32px !important;
border-radius: 28px !important;
}
body.live-demo-body .core-product-stage--demo .core-product-stage__grid {
grid-template-columns: minmax(0, 0.92fr) minmax(360px, 0.78fr) !important;
gap: 28px !important;
align-items: center !important;
}
body.live-demo-body .core-product-stage--demo .core-product-stage__copy {
gap: 14px !important;
}
body.live-demo-body .core-product-stage--demo h1 {
max-width: 11.5ch !important;
font-size: clamp(3.1rem, 4.1vw, 3.76rem) !important;
line-height: 0.97 !important;
}
body.live-demo-body .core-product-stage--demo p {
max-width: 42ch !important;
font-size: 0.98rem !important;
line-height: 1.42 !important;
}
body.live-demo-body .core-product-stage__actions {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 10px !important;
max-width: 430px !important;
}
body.live-demo-body .core-product-stage__actions .btn {
min-height: 44px !important;
padding: 0.72rem 0.9rem !important;
border-radius: 14px !important;
}
body.live-demo-body .core-product-stage__actions .btn-tertiary {
grid-column: 1 / -1 !important;
}
body.live-demo-body .core-product-board {
padding: 20px !important;
border-radius: 24px !important;
}
body.live-demo-body .core-product-board__split {
gap: 10px !important;
}
body.live-demo-body .core-product-board__split article {
min-height: 0 !important;
padding: 14px !important;
border-radius: 16px !important;
}
body.live-demo-body .core-product-board__split article strong {
font-size: 1.15rem !important;
line-height: 1.08 !important;
}
body.live-demo-body .core-product-board__split article p {
font-size: 0.84rem !important;
line-height: 1.34 !important;
}
body.live-demo-body .core-product-flow {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 8px !important;
}
body.live-demo-body .core-product-flow li {
min-height: 58px !important;
border-radius: 16px !important;
}
/* La 3e étape porte le libellé le plus long ("Réservation ou espace
client") : pleine largeur pour éviter que le texte déborde de la pastille. */
body.live-demo-body .core-product-flow li:nth-child(3) {
grid-column: 1 / -1 !important;
}
body.live-demo-body .public-vertical-tabs {
margin-block: 28px 18px !important;
}
body.live-demo-body .public-vertical-tabs__shell {
display: grid !important;
grid-template-columns: minmax(270px, 0.68fr) minmax(0, 1.32fr) !important;
align-items: center !important;
gap: 22px !important;
padding: 24px 26px !important;
border-radius: 26px !important;
}
body.live-demo-body .public-vertical-tabs__head {
gap: 10px !important;
}
body.live-demo-body .public-vertical-tabs__head h2 {
max-width: 14ch !important;
font-size: clamp(1.95rem, 2.45vw, 2.35rem) !important;
line-height: 1 !important;
}
body.live-demo-body .public-vertical-tabs__head p {
max-width: 31ch !important;
font-size: 0.88rem !important;
line-height: 1.36 !important;
}
body.live-demo-body .public-vertical-tabs__badge {
justify-self: start !important;
}
body.live-demo-body .public-vertical-tabs__nav {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 10px !important;
}
body.live-demo-body .public-vertical-tabs__nav a {
min-height: 86px !important;
padding: 13px !important;
border-radius: 16px !important;
}
body.live-demo-body .public-vertical-tabs__nav strong {
font-size: 0.94rem !important;
line-height: 1.08 !important;
}
body.live-demo-body .public-vertical-tabs__nav small {
display: -webkit-box !important;
-webkit-box-orient: vertical !important;
-webkit-line-clamp: 2 !important;
overflow: hidden !important;
font-size: 0.78rem !important;
line-height: 1.25 !important;
}
body.live-demo-body .live-demo-shell {
width: min(100%, 1110px) !important;
display: grid !important;
grid-template-columns: minmax(590px, 1.18fr) minmax(360px, 0.82fr) !important;
gap: 16px !important;
align-items: stretch !important;
}
body.live-demo-body .live-demo-personalizer {
grid-column: 1 / -1 !important;
grid-template-columns: minmax(240px, 0.58fr) minmax(0, 1fr) !important;
align-items: center !important;
gap: 16px !important;
min-height: 164px !important;
padding: 18px !important;
border-radius: 22px !important;
}
body.live-demo-body .live-demo-personalizer__copy {
gap: 7px !important;
}
body.live-demo-body .live-demo-personalizer__copy h2 {
max-width: 14ch !important;
font-size: clamp(1.75rem, 2.25vw, 2.08rem) !important;
line-height: 1 !important;
}
body.live-demo-body .live-demo-personalizer__copy p,
body.live-demo-body .live-demo-business-status {
display: -webkit-box !important;
-webkit-box-orient: vertical !important;
-webkit-line-clamp: 2 !important;
overflow: hidden !important;
font-size: 0.86rem !important;
line-height: 1.34 !important;
}
body.live-demo-body .live-demo-business-search {
gap: 8px !important;
}
body.live-demo-body .live-demo-business-search form {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
gap: 10px !important;
}
body.live-demo-body .live-demo-business-search input,
body.live-demo-body .live-demo-business-search button {
min-height: 44px !important;
border-radius: 14px !important;
}
body.live-demo-body .live-demo-business-selected {
min-height: 48px !important;
padding: 12px 14px !important;
border-radius: 14px !important;
}
body.live-demo-body .live-demo-phone,
body.live-demo-body .live-demo-console {
width: 100% !important;
min-height: 450px !important;
margin: 0 !important;
border-radius: 24px !important;
}
body.live-demo-body .live-demo-phone {
grid-column: 1 !important;
display: grid !important;
/* Colonne du formulaire assez large pour le widget Turnstile (300px
fixe) : sinon le formulaire déborde et se fait clipper. */
grid-template-columns: minmax(0, 1fr) 336px !important;
align-content: start !important;
align-items: stretch !important;
gap: 14px !important;
padding: 18px !important;
}
body.live-demo-body .live-demo-phone__copy {
gap: 8px !important;
align-content: start !important;
}
body.live-demo-body .live-demo-phone__copy h2 {
max-width: 12.5ch !important;
font-size: clamp(1.82rem, 2.35vw, 2.22rem) !important;
line-height: 1 !important;
}
body.live-demo-body .live-demo-phone__copy > p {
max-width: 36ch !important;
display: -webkit-box !important;
-webkit-box-orient: vertical !important;
-webkit-line-clamp: 2 !important;
overflow: hidden !important;
font-size: 0.9rem !important;
line-height: 1.36 !important;
}
body.live-demo-body .live-demo-phone__points {
gap: 8px !important;
}
body.live-demo-body .live-demo-phone__points span {
min-height: 30px !important;
padding-inline: 10px !important;
border-radius: 999px !important;
font-size: 0.76rem !important;
}
body.live-demo-body .live-demo-call-number {
max-width: 100% !important;
padding: 12px 13px !important;
border-radius: 16px !important;
}
body.live-demo-body .live-demo-call-number a,
body.live-demo-body .live-demo-call-number strong {
white-space: nowrap !important;
font-size: clamp(1.42rem, 2.05vw, 1.72rem) !important;
letter-spacing: -0.02em !important;
}
body.live-demo-body .live-demo-call-number p {
font-size: 0.82rem !important;
line-height: 1.3 !important;
}
body.live-demo-body .live-demo-phone__form {
align-self: stretch !important;
display: grid !important;
align-content: center !important;
padding: 16px !important;
border-radius: 18px !important;
}
body.live-demo-body .live-demo-phone__form h3 {
margin-bottom: 8px !important;
font-size: 1rem !important;
line-height: 1.12 !important;
}
body.live-demo-body .live-demo-phone__form .auth-form {
gap: 8px !important;
}
body.live-demo-body .live-demo-phone__form .form-group {
gap: 5px !important;
}
body.live-demo-body .live-demo-phone__form input,
body.live-demo-body .live-demo-phone__form .btn {
min-height: 40px !important;
border-radius: 13px !important;
font-size: 0.88rem !important;
}
body.live-demo-body .live-demo-phone__form p {
margin-top: 8px !important;
font-size: 0.74rem !important;
line-height: 1.25 !important;
}
body.live-demo-body .live-demo-console {
grid-column: 2 !important;
display: grid !important;
grid-template-rows: minmax(0, 1fr) !important;
align-content: stretch !important;
}
/* Une fois la session lancée, la transcription occupe toute la largeur
au lieu de laisser la colonne de droite vide. */
body.live-demo-body .live-demo-transcript-section {
grid-column: 1 / -1 !important;
}
/* Blocs propres aux démos métier (restaurant, hôtel…) : pleine largeur,
sinon ils sont écrasés dans les deux colonnes du shell. */
body.live-demo-body .live-demo-vertical-nav,
body.live-demo-body .live-demo-feature-strip,
body.live-demo-body .vertical-subpage-scene {
grid-column: 1 / -1 !important;
}
body.live-demo-body .live-demo-feature-strip {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
body.live-demo-body .live-demo-transcript-panel {
width: 100% !important;
max-width: none !important;
}
/* Chaîne de remplissage vertical : min-height en % ne se résout pas dans
une carte dimensionnée par min-height, on étire donc via la grille. */
body.live-demo-body .live-demo-console__main {
display: grid !important;
grid-template-rows: minmax(0, 1fr) !important;
}
body.live-demo-body .live-demo-console__main,
body.live-demo-body .voice-panel {
min-height: 100% !important;
}
body.live-demo-body .voice-panel {
display: grid !important;
grid-template-rows: auto 1fr auto !important;
align-content: stretch !important;
gap: 12px !important;
padding: 18px !important;
border-radius: 24px !important;
}
body.live-demo-body .voice-status-wrap {
min-height: 126px !important;
margin: 0 !important;
padding: 14px !important;
border-radius: 20px !important;
}
body.live-demo-body .voice-orb {
width: 66px !important;
height: 66px !important;
}
body.live-demo-body .voice-actions {
align-self: end !important;
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 10px !important;
margin: 0 !important;
}
body.live-demo-body .voice-actions .btn {
min-height: 46px !important;
border-radius: 14px !important;
}
body.live-demo-body .voice-actions #startSessionBtn {
grid-column: 1 / -1 !important;
}
/* "Couper" est masqué tant qu'il est désactivé : "Réinitialiser" prend
alors toute la largeur au lieu de laisser une cellule vide. */
body.live-demo-body .voice-actions #stopSessionBtn:disabled + #resetTranscriptBtn {
grid-column: 1 / -1 !important;
}
body.live-demo-body .voice-runtime-strip span {
min-height: 28px !important;
border-radius: 999px !important;
font-size: 0.78rem !important;
}
body.live-demo-body:not(.app-shell) .cookie-banner {
left: 50% !important;
right: auto !important;
bottom: 10px !important;
width: min(720px, calc(100vw - 56px)) !important;
transform: translateX(-50%) !important;
grid-template-columns: minmax(0, 1fr) auto !important;
gap: 8px !important;
padding: 7px 9px !important;
border-radius: 18px !important;
background: linear-gradient(180deg, rgba(12, 22, 48, 0.94), rgba(5, 10, 26, 0.94)) !important;
box-shadow: 0 18px 48px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
backdrop-filter: blur(18px) !important;
}
body.live-demo-body:not(.app-shell) .cookie-banner__body strong {
font-size: 0.82rem !important;
}
body.live-demo-body:not(.app-shell) .cookie-banner__body p {
max-width: 250px !important;
font-size: 0.68rem !important;
line-height: 1.25 !important;
}
body.live-demo-body:not(.app-shell) .cookie-banner__actions .btn {
min-width: 82px !important;
min-height: 28px !important;
padding: 0.34rem 0.28rem !important;
border-radius: 10px !important;
font-size: 0.66rem !important;
}
}
/* iPad demo focus: keep vertical switching available, but make it a compact
shortcut so the voice demo appears faster during a field presentation. */
@media (min-width: 1000px) and (max-width: 1220px) and (orientation: landscape) {
body.live-demo-body .public-vertical-tabs {
margin-block: 16px 14px !important;
padding-block: 0 !important;
}
body.live-demo-body .public-vertical-tabs__shell {
grid-template-columns: minmax(230px, 0.42fr) minmax(0, 1.58fr) !important;
gap: 14px !important;
padding: 14px 16px !important;
border-radius: 22px !important;
}
body.live-demo-body .public-vertical-tabs__head {
align-items: center !important;
gap: 8px !important;
}
body.live-demo-body .public-vertical-tabs__head h2 {
max-width: 100% !important;
margin-top: 0.2rem !important;
font-size: clamp(1.22rem, 1.55vw, 1.48rem) !important;
line-height: 1.02 !important;
}
body.live-demo-body .public-vertical-tabs__head p {
display: none !important;
}
body.live-demo-body .public-vertical-tabs__badge {
min-height: 30px !important;
padding: 6px 10px !important;
font-size: 0.68rem !important;
}
body.live-demo-body .public-vertical-tabs__nav {
grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
gap: 8px !important;
}
body.live-demo-body .public-vertical-tabs__nav a {
min-height: 54px !important;
padding: 9px 7px !important;
border-radius: 14px !important;
justify-items: center !important;
}
body.live-demo-body .public-vertical-tabs__nav strong {
max-width: 100% !important;
font-size: 0.84rem !important;
line-height: 1.08 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
body.live-demo-body .public-vertical-tabs__nav small {
display: none !important;
}
body.live-demo-body .live-demo-personalizer {
min-height: 134px !important;
padding: 15px 16px !important;
grid-template-columns: minmax(225px, 0.48fr) minmax(0, 1fr) !important;
}
body.live-demo-body .live-demo-personalizer__copy h2 {
max-width: 100% !important;
font-size: clamp(1.42rem, 1.82vw, 1.68rem) !important;
line-height: 1.02 !important;
}
body.live-demo-body .live-demo-personalizer__copy p {
-webkit-line-clamp: 2 !important;
}
}
/* Public dashboard showcase.
Dedicated finish layer for the iPad demo view and the public proof dashboard. */
body.dashboard-showcase-page {
--showcase-night: #07111f;
--showcase-panel: #0b1d33;
--showcase-card: #0f253f;
--showcase-gold: #d6b46a;
--showcase-gold-soft: #f2d58a;
--showcase-text: #f8fafc;
--showcase-muted: #cbd5e1;
--showcase-line: rgba(214, 180, 106, 0.22);
}
body.dashboard-showcase-page .dashboard-visual {
border-color: var(--showcase-line);
background:
radial-gradient(circle at 86% 10%, rgba(242, 213, 138, 0.15), transparent 30%),
linear-gradient(145deg, rgba(15, 37, 63, 0.98), rgba(7, 17, 31, 0.98));
box-shadow:
0 32px 74px rgba(0, 0, 0, 0.32),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
body.dashboard-showcase-page .dashboard-visual__eyebrow {
color: var(--showcase-gold-soft);
background: rgba(214, 180, 106, 0.13);
}
body.dashboard-showcase-page .dashboard-visual__eyebrow::before {
background: var(--showcase-gold-soft);
box-shadow: 0 0 0 0.28rem rgba(214, 180, 106, 0.14);
}
body.dashboard-showcase-page .dashboard-metric,
body.dashboard-showcase-page .dashboard-panel {
border-color: rgba(255, 255, 255, 0.1);
background:
linear-gradient(160deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025)),
rgba(7, 17, 31, 0.72);
}
body.dashboard-showcase-page .dashboard-metric span {
color: rgba(242, 213, 138, 0.92);
}
body.dashboard-showcase-page .dashboard-chip {
white-space: nowrap;
}
body.dashboard-showcase-page .dashboard-checklist div {
align-items: center;
}
@media (min-width: 900px) and (max-width: 1220px) and (orientation: landscape) {
body.dashboard-showcase-page .public-vertical-tabs {
margin-bottom: 12px !important;
}
body.dashboard-showcase-page .legal-hero {
padding-block: 38px 28px !important;
}
body.dashboard-showcase-page .legal-hero__card h1 {
max-width: 13ch;
font-size: clamp(3.1rem, 5vw, 4.4rem) !important;
line-height: 0.95 !important;
}
body.dashboard-showcase-page .core-product-stage {
margin-top: 28px !important;
}
body.dashboard-showcase-page .core-product-stage__grid {
min-height: auto !important;
gap: 22px !important;
padding-block: 34px !important;
}
body.dashboard-showcase-page .core-product-stage__copy h2 {
font-size: clamp(2.2rem, 3.35vw, 3rem) !important;
line-height: 0.98 !important;
}
body.dashboard-showcase-page .core-product-stage__copy p {
max-width: 42ch !important;
font-size: 0.96rem !important;
line-height: 1.45 !important;
}
body.dashboard-showcase-page .core-product-stage__actions {
gap: 10px !important;
}
body.dashboard-showcase-page .core-product-stage__actions .btn {
min-height: 42px !important;
padding: 0.68rem 0.9rem !important;
font-size: 0.9rem !important;
}
body.dashboard-showcase-page #dashboard-proof {
width: min(100%, 1110px) !important;
margin-inline: auto !important;
padding-block: 0 !important;
}
body.dashboard-showcase-page .core-product-stage + .home-section {
padding-block: 28px !important;
}
body.dashboard-showcase-page #dashboard-proof .home-section__head {
display: grid !important;
grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr) !important;
align-items: end !important;
gap: 18px !important;
max-width: 1054px !important;
margin-bottom: 12px !important;
text-align: left !important;
}
body.dashboard-showcase-page #dashboard-proof .home-section__head h2 {
max-width: 20ch !important;
margin: 0 !important;
font-size: clamp(1.75rem, 2.7vw, 2.28rem) !important;
line-height: 0.98 !important;
letter-spacing: -0.035em !important;
}
body.dashboard-showcase-page #dashboard-proof .home-section__head p {
max-width: 42ch !important;
margin: 0 !important;
font-size: 0.88rem !important;
line-height: 1.36 !important;
}
body.dashboard-showcase-page .dashboard-visual {
gap: 10px !important;
padding: 14px !important;
border-radius: 24px !important;
}
body.dashboard-showcase-page .dashboard-visual__top {
display: grid !important;
grid-template-columns: minmax(0, 1fr) max-content !important;
align-items: center !important;
gap: 12px !important;
padding-bottom: 9px !important;
}
body.dashboard-showcase-page .dashboard-visual__eyebrow {
padding: 0.32rem 0.62rem !important;
font-size: 0.68rem !important;
}
body.dashboard-showcase-page .dashboard-visual__note {
max-width: 44ch !important;
margin-top: 5px !important;
font-size: 0.84rem !important;
line-height: 1.28 !important;
}
body.dashboard-showcase-page .dashboard-chips {
max-width: 360px;
justify-content: end;
gap: 6px !important;
}
body.dashboard-showcase-page .dashboard-chip {
padding: 0.27rem 0.56rem !important;
font-size: 0.68rem !important;
line-height: 1.1 !important;
}
body.dashboard-showcase-page .dashboard-visual__metrics {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 8px !important;
}
body.dashboard-showcase-page .dashboard-metric {
min-height: 0 !important;
padding: 10px 11px !important;
border-radius: 15px !important;
}
body.dashboard-showcase-page .dashboard-metric span {
margin-bottom: 6px !important;
font-size: 0.66rem !important;
}
body.dashboard-showcase-page .dashboard-metric strong {
font-size: 1.28rem !important;
line-height: 1 !important;
}
body.dashboard-showcase-page .dashboard-metric small {
display: none !important;
}
body.dashboard-showcase-page .dashboard-visual__grid {
display: grid !important;
grid-template-columns: minmax(0, 1.05fr) minmax(220px, 0.72fr) minmax(220px, 0.72fr) !important;
grid-template-areas:
"call recap next" !important;
gap: 10px !important;
align-items: stretch !important;
}
body.dashboard-showcase-page .dashboard-visual__grid > .dashboard-call {
grid-area: call;
}
body.dashboard-showcase-page .dashboard-visual__grid > article:nth-child(2) {
grid-area: recap;
}
body.dashboard-showcase-page .dashboard-visual__grid > article:nth-child(3) {
grid-area: next;
}
body.dashboard-showcase-page .dashboard-panel {
padding: 12px !important;
border-radius: 17px !important;
}
body.dashboard-showcase-page .dashboard-panel h3 {
margin-bottom: 8px !important;
font-size: 0.98rem !important;
line-height: 1.18 !important;
}
body.dashboard-showcase-page .dashboard-panel p {
font-size: 0.82rem !important;
line-height: 1.32 !important;
}
body.dashboard-showcase-page .dashboard-call > p {
display: none !important;
}
body.dashboard-showcase-page .dashboard-call {
gap: 10px !important;
}
body.dashboard-showcase-page .dashboard-call__header {
align-items: start !important;
}
body.dashboard-showcase-page .dashboard-call__header strong {
display: block;
margin-top: 2px;
font-size: 1.02rem !important;
line-height: 1.18 !important;
}
body.dashboard-showcase-page .dashboard-transcript {
gap: 6px !important;
}
body.dashboard-showcase-page .dashboard-transcript div {
padding: 7px 9px !important;
border-radius: 12px !important;
font-size: 0.74rem !important;
line-height: 1.22 !important;
}
body.dashboard-showcase-page .dashboard-transcript div:nth-child(3) {
display: none !important;
}
body.dashboard-showcase-page .dashboard-checklist {
gap: 7px !important;
margin-top: 8px !important;
}
body.dashboard-showcase-page .dashboard-checklist div {
padding: 7px 9px !important;
border-radius: 13px !important;
font-size: 0.79rem !important;
line-height: 1.2 !important;
}
body.dashboard-showcase-page .dashboard-checklist strong {
max-width: 58%;
text-align: right;
line-height: 1.18 !important;
}
body.dashboard-showcase-page .public-feature-bridge {
padding-block: 34px !important;
}
body.dashboard-showcase-page .public-feature-bridge .container {
max-width: 1110px !important;
}
body.dashboard-showcase-page .public-feature-bridge .home-section__head {
display: grid !important;
grid-template-columns: minmax(0, 0.64fr) minmax(0, 1fr) !important;
align-items: end !important;
gap: 18px !important;
max-width: 1060px !important;
margin-bottom: 16px !important;
text-align: left !important;
}
body.dashboard-showcase-page .public-feature-bridge .home-section__head h2 {
max-width: 14ch !important;
margin: 0 !important;
font-size: clamp(1.78rem, 2.8vw, 2.45rem) !important;
line-height: 1 !important;
letter-spacing: -0.035em !important;
}
body.dashboard-showcase-page .public-feature-bridge .home-section__head p {
max-width: 44ch !important;
margin: 0 !important;
font-size: 0.86rem !important;
line-height: 1.34 !important;
}
body.dashboard-showcase-page .public-feature-bridge__grid {
grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
gap: 9px !important;
margin-top: 0 !important;
}
body.dashboard-showcase-page .public-feature-bridge article {
min-height: 124px !important;
padding: 14px 12px !important;
border-radius: 18px !important;
}
body.dashboard-showcase-page .public-feature-bridge span {
margin-bottom: 8px !important;
font-size: 0.62rem !important;
letter-spacing: 0.06em !important;
}
body.dashboard-showcase-page .public-feature-bridge strong {
font-size: 0.92rem !important;
line-height: 1.12 !important;
}
body.dashboard-showcase-page .public-feature-bridge p {
display: none !important;
}
}
@media (max-width: 720px) {
body.dashboard-showcase-page .dashboard-chip {
white-space: normal;
}
}
/* iPad landscape polish for the public call examples page.
The template already carries page-specific styles; this late layer keeps the
demo version compact without changing the content or backend behavior. */
@media (min-width: 1000px) and (max-width: 1220px) and (orientation: landscape) {
body.call-examples-page .legal-hero {
padding-block: 34px 18px !important;
overflow: hidden !important;
}
body.call-examples-page .legal-hero__card {
min-height: 0 !important;
gap: 14px !important;
padding: 32px 42px !important;
border-radius: 30px !important;
}
body.call-examples-page .legal-hero__card h1 {
max-width: 15ch !important;
font-size: clamp(3rem, 4.35vw, 4.1rem) !important;
line-height: 0.98 !important;
letter-spacing: -0.045em !important;
}
body.call-examples-page .legal-hero__card p {
max-width: 58ch !important;
font-size: 0.98rem !important;
line-height: 1.48 !important;
}
body.call-examples-page .home-hero__actions {
margin-top: 0 !important;
}
body.call-examples-page .public-product-nav {
margin-block: 8px !important;
}
body.call-examples-page .public-vertical-tabs {
margin: 0 !important;
padding: 8px 0 !important;
}
body.call-examples-page .public-vertical-tabs__shell {
display: grid !important;
grid-template-columns: minmax(180px, 0.22fr) minmax(0, 1fr) !important;
align-items: center !important;
gap: 12px !important;
padding: 12px 14px !important;
border-radius: 24px !important;
}
body.call-examples-page .public-vertical-tabs__head {
display: grid !important;
gap: 5px !important;
align-items: center !important;
}
body.call-examples-page .public-vertical-tabs__head .home-eyebrow {
margin: 0 !important;
font-size: 0.62rem !important;
}
body.call-examples-page .public-vertical-tabs__head h2 {
max-width: 12ch !important;
margin: 0 !important;
font-size: 1.08rem !important;
line-height: 1.08 !important;
letter-spacing: 0 !important;
}
body.call-examples-page .public-vertical-tabs__head p,
body.call-examples-page .public-vertical-tabs__badge,
body.call-examples-page .public-vertical-tabs__nav small {
display: none !important;
}
body.call-examples-page .public-vertical-tabs__nav {
display: grid !important;
grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
gap: 8px !important;
align-items: stretch !important;
}
body.call-examples-page .public-vertical-tabs__nav a {
min-width: 0 !important;
min-height: 50px !important;
justify-content: center !important;
padding: 9px 7px !important;
border-radius: 16px !important;
text-align: center !important;
}
body.call-examples-page .public-vertical-tabs__nav strong {
font-size: 0.79rem !important;
line-height: 1.05 !important;
}
body.call-examples-page .core-product-stage {
margin-top: 12px !important;
padding-block: 34px !important;
}
body.call-examples-page .core-product-stage__grid {
min-height: 0 !important;
grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr) !important;
gap: 24px !important;
align-items: center !important;
}
body.call-examples-page .core-product-stage__copy {
gap: 14px !important;
}
body.call-examples-page .core-product-stage__copy h2 {
max-width: 13ch !important;
font-size: clamp(2.25rem, 3.7vw, 3.35rem) !important;
line-height: 0.98 !important;
letter-spacing: -0.045em !important;
}
body.call-examples-page .core-product-stage__copy p {
max-width: 42ch !important;
font-size: 0.95rem !important;
line-height: 1.48 !important;
}
body.call-examples-page .core-product-stage__actions {
gap: 8px !important;
}
body.call-examples-page .core-product-stage__actions .btn {
min-height: 44px !important;
padding-inline: 15px !important;
font-size: 0.86rem !important;
}
body.call-examples-page .core-product-toolflow {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 12px !important;
}
body.call-examples-page .core-product-toolflow article {
min-height: 0 !important;
padding: 16px !important;
border-radius: 20px !important;
}
body.call-examples-page .core-product-toolflow article p {
font-size: 0.82rem !important;
line-height: 1.38 !important;
}
body.call-examples-page .home-section {
padding-block: 34px !important;
}
body.call-examples-page .home-section__head {
max-width: 790px !important;
margin-bottom: 18px !important;
}
body.call-examples-page .home-section__head h2 {
max-width: 18ch !important;
margin-inline: auto !important;
margin-bottom: 8px !important;
font-size: clamp(1.95rem, 3.1vw, 2.72rem) !important;
line-height: 1 !important;
letter-spacing: -0.035em !important;
}
body.call-examples-page .home-section__head p {
max-width: 62ch !important;
margin-inline: auto !important;
font-size: 0.92rem !important;
line-height: 1.42 !important;
}
body.call-examples-page .home-split,
body.call-examples-page .home-split--reverse {
grid-template-columns: minmax(290px, 0.9fr) minmax(0, 1.1fr) !important;
gap: 18px !important;
align-items: stretch !important;
}
body.call-examples-page .home-phone {
padding: 13px !important;
border-radius: 26px !important;
}
body.call-examples-page .home-phone__screen {
padding: 14px !important;
border-radius: 21px !important;
}
body.call-examples-page .home-phone__header {
margin-bottom: 11px !important;
padding-bottom: 10px !important;
}
body.call-examples-page .home-phone__header strong {
font-size: 0.93rem !important;
}
body.call-examples-page .home-phone__header small {
font-size: 0.76rem !important;
}
body.call-examples-page .home-phone__bubble {
max-width: 92% !important;
padding: 11px 12px !important;
border-radius: 17px !important;
font-size: 0.84rem !important;
line-height: 1.36 !important;
}
body.call-examples-page .home-phone__bubble + .home-phone__bubble {
margin-top: 8px !important;
}
body.call-examples-page .home-phone__result {
margin-top: 11px !important;
padding: 12px 13px !important;
border-radius: 17px !important;
}
body.call-examples-page .home-phone__result strong {
margin-top: 5px !important;
font-size: 0.86rem !important;
line-height: 1.28 !important;
}
body.call-examples-page .home-demo-grid {
gap: 10px !important;
}
body.call-examples-page .home-demo-grid article {
min-height: 0 !important;
padding: 15px 16px !important;
border-radius: 20px !important;
}
body.call-examples-page .home-demo-grid article span,
body.call-examples-page .home-use-grid article span {
margin-bottom: 7px !important;
font-size: 0.66rem !important;
}
body.call-examples-page .home-demo-grid article h3 {
margin-bottom: 7px !important;
font-size: 1rem !important;
line-height: 1.12 !important;
}
body.call-examples-page .home-demo-grid article p {
font-size: 0.82rem !important;
line-height: 1.38 !important;
}
body.call-examples-page .home-use-grid {
grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
gap: 10px !important;
}
body.call-examples-page .home-use-grid article {
min-height: 0 !important;
padding: 16px 14px !important;
border-radius: 20px !important;
}
body.call-examples-page .home-use-grid article h3 {
margin-bottom: 7px !important;
font-size: 0.98rem !important;
line-height: 1.12 !important;
}
body.call-examples-page .home-use-grid article p {
font-size: 0.78rem !important;
line-height: 1.34 !important;
}
body.call-examples-page .marketing-inline-actions {
margin-top: 16px !important;
gap: 9px !important;
}
body.call-examples-page .marketing-inline-actions .btn {
min-height: 42px !important;
padding-inline: 13px !important;
font-size: 0.82rem !important;
}
}
/* iPad landscape polish for the public restaurant page. */
@media (min-width: 1000px) and (max-width: 1220px) and (orientation: landscape) {
body.restaurant-voice-page .home-section--split {
padding-block: 40px !important;
}
body.restaurant-voice-page .home-section--split .home-split {
grid-template-columns: minmax(0, 1.12fr) minmax(340px, 0.88fr) !important;
align-items: center !important;
gap: 28px !important;
}
body.restaurant-voice-page .home-section--split .home-section__head {
max-width: 640px !important;
margin-bottom: 18px !important;
}
body.restaurant-voice-page .home-section--split .home-section__head h2 {
max-width: 14ch !important;
margin-bottom: 10px !important;
font-size: clamp(2.05rem, 3.4vw, 3rem) !important;
line-height: 0.98 !important;
letter-spacing: -0.04em !important;
}
body.restaurant-voice-page .home-section--split .home-section__head p {
max-width: 52ch !important;
font-size: 0.94rem !important;
line-height: 1.42 !important;
}
body.restaurant-voice-page .home-section--split .home-demo-grid {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 10px !important;
}
body.restaurant-voice-page .home-section--split .home-demo-grid article {
min-height: 128px !important;
padding: 16px 14px !important;
border-radius: 20px !important;
}
body.restaurant-voice-page .home-section--split .home-demo-grid article span {
margin-bottom: 9px !important;
font-size: 0.64rem !important;
}
body.restaurant-voice-page .home-section--split .home-demo-grid article h3 {
margin-bottom: 0 !important;
font-size: 0.98rem !important;
line-height: 1.1 !important;
}
body.restaurant-voice-page .home-section--split .home-demo-grid article p {
display: none !important;
}
body.restaurant-voice-page .home-section--split .home-phone {
max-width: 390px !important;
justify-self: end !important;
padding: 14px !important;
border-radius: 30px !important;
}
body.restaurant-voice-page .home-section--split .home-phone__screen {
padding: 16px !important;
border-radius: 24px !important;
}
body.restaurant-voice-page .home-section--split .home-phone__header {
margin-bottom: 12px !important;
padding-bottom: 10px !important;
}
body.restaurant-voice-page .home-section--split .home-phone__bubble {
max-width: 94% !important;
padding: 11px 12px !important;
font-size: 0.83rem !important;
line-height: 1.36 !important;
}
body.restaurant-voice-page .home-section--split .home-phone__bubble + .home-phone__bubble {
margin-top: 8px !important;
}
body.restaurant-voice-page .home-section--split .home-phone__result {
margin-top: 12px !important;
padding: 12px !important;
border-radius: 18px !important;
}
body.restaurant-voice-page .home-section--split .home-phone__result strong {
font-size: 0.86rem !important;
line-height: 1.25 !important;
}
}
/* iPad 11 landscape polish for long-form public legal, trust, guide and blog pages. */
@media (min-width: 1000px) and (max-width: 1220px) {
body.landing-refresh.legal-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-hero {
padding: 24px 0 10px;
}
body.landing-refresh.legal-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-hero__card {
max-width: min(100% - 72px, 1000px);
gap: 12px;
padding: 30px 40px;
border-radius: 22px;
}
body.landing-refresh.legal-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-hero__card h1 {
max-width: 940px;
font-size: clamp(2.35rem, 3.75vw, 3.08rem);
line-height: 1.03;
letter-spacing: 0;
text-wrap: balance;
}
body.landing-refresh.legal-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-hero__card p {
max-width: 780px;
font-size: 0.96rem;
line-height: 1.44;
}
body.landing-refresh.legal-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-updated {
margin: 0;
font-size: 0.82rem;
line-height: 1.3;
}
body.landing-refresh.legal-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-hero .home-hero__actions,
body.landing-refresh.legal-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-cta__actions,
body.landing-refresh.legal-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .marketing-inline-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: flex-start;
margin-top: 2px;
}
body.landing-refresh.legal-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-hero .home-hero__actions .btn,
body.landing-refresh.legal-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-cta__actions .btn,
body.landing-refresh.legal-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .marketing-inline-actions .btn {
min-width: 0;
min-height: 44px;
flex: 0 1 auto;
padding: 0.72rem 1rem;
font-size: 0.88rem;
line-height: 1.16;
}
body.demo-booking-page.landing-refresh.legal-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-hero .home-hero__actions .btn,
body.pricing-page.landing-refresh.legal-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-hero .home-hero__actions .btn {
min-height: 58px;
padding-inline: 1.35rem;
font-size: 1.02rem;
}
body.landing-refresh.legal-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-section,
body.landing-refresh.legal-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-section,
body.landing-refresh.legal-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-cta {
padding-top: 32px;
padding-bottom: 46px;
}
body.landing-refresh.legal-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-section__head {
max-width: 860px;
gap: 8px;
margin-bottom: 18px;
}
body.landing-refresh.legal-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-section__head h2,
body.landing-refresh.legal-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-cta h2 {
max-width: 840px;
margin-bottom: 8px;
font-size: clamp(1.75rem, 3vw, 2.35rem);
line-height: 1.04;
letter-spacing: 0;
text-wrap: balance;
}
body.landing-refresh.legal-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-section__head p,
body.landing-refresh.legal-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-cta p {
max-width: 76ch;
font-size: 0.94rem;
line-height: 1.44;
}
body.landing-refresh.legal-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid,
body.landing-refresh.legal-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid--three,
body.landing-refresh.legal-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-use-grid,
body.landing-refresh.legal-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-faq-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
body.landing-refresh.legal-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid--support {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
body.landing-refresh.legal-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-card,
body.landing-refresh.legal-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-use-grid article,
body.landing-refresh.legal-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-faq-grid article,
body.landing-refresh.legal-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-steps article {
min-height: 0;
gap: 9px;
padding: 16px;
border-radius: 8px;
}
body.landing-refresh.legal-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-card h2,
body.landing-refresh.legal-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-use-grid h3,
body.landing-refresh.legal-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-faq-grid h3,
body.landing-refresh.legal-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-steps h3 {
margin-bottom: 4px;
font-size: 1rem;
line-height: 1.16;
letter-spacing: 0;
}
body.landing-refresh.legal-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-card p,
body.landing-refresh.legal-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-card li,
body.landing-refresh.legal-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-use-grid p,
body.landing-refresh.legal-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-faq-grid p,
body.landing-refresh.legal-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-steps p {
font-size: 0.88rem;
line-height: 1.38;
}
body.landing-refresh.legal-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-card ul {
gap: 6px;
padding-left: 1rem;
font-size: 0.88rem;
line-height: 1.38;
}
body.cookies-page:not(.app-shell) .legal-grid--support .legal-card:nth-child(2),
body.cookies-page:not(.app-shell) .legal-grid--support .legal-card:nth-child(5),
body.cookies-page:not(.app-shell) .legal-grid--support .legal-card:nth-child(8) {
grid-column: span 2;
}
body.cookies-page:not(.app-shell) .legal-grid--support code,
body.guide-page:not(.app-shell) code {
font-size: 0.82em;
overflow-wrap: anywhere;
word-break: break-word;
}
body.blog-index-page:not(.app-shell) .guide-card-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
body.blog-index-page:not(.app-shell) .guide-card-grid article {
grid-template-rows: auto auto 1fr auto auto;
min-height: 0;
gap: 7px;
padding: 13px;
border-radius: 8px;
}
body.blog-index-page:not(.app-shell) .guide-card-grid article > span {
font-size: 0.66rem;
line-height: 1.1;
letter-spacing: 0.07em;
}
body.blog-index-page:not(.app-shell) .guide-card-grid article h3 {
display: -webkit-box;
overflow: hidden;
margin: 0;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
font-size: 0.9rem;
line-height: 1.12;
}
body.blog-index-page:not(.app-shell) .guide-card-grid article p {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
font-size: 0.76rem;
line-height: 1.24;
}
body.blog-index-page:not(.app-shell) .guide-meta {
gap: 0.38rem;
font-size: 0.72rem;
line-height: 1.15;
}
body.blog-index-page:not(.app-shell) .guide-card-grid article .btn {
width: 100%;
min-height: 34px;
margin-top: 0;
padding: 0.5rem 0.68rem;
font-size: 0.76rem;
line-height: 1.12;
}
body.blog-index-page:not(.app-shell) .legal-hero {
padding-top: 18px;
padding-bottom: 6px;
}
body.blog-index-page:not(.app-shell) .legal-hero__card {
max-width: min(100% - 88px, 1060px);
gap: 10px;
padding: 24px 40px;
}
body.blog-index-page:not(.app-shell) .legal-hero__card h1 {
max-width: 910px;
font-size: clamp(2.08rem, 3.1vw, 2.58rem);
line-height: 1.01;
}
body.blog-index-page:not(.app-shell) .legal-hero__card p {
max-width: 790px;
font-size: 0.9rem;
line-height: 1.34;
}
body.blog-index-page:not(.app-shell) .legal-hero .home-hero__actions {
gap: 8px;
margin-top: 0;
}
body.blog-index-page:not(.app-shell) .legal-hero .home-hero__actions .btn {
min-height: 38px;
padding: 0.62rem 0.86rem;
font-size: 0.8rem;
}
body.blog-index-page:not(.app-shell) .home-section,
body.blog-index-page:not(.app-shell) .home-cta {
padding-top: 24px;
padding-bottom: 34px;
}
body.blog-index-page:not(.app-shell) .home-section__head {
max-width: 760px;
gap: 6px;
margin-bottom: 14px;
}
body.blog-index-page:not(.app-shell) .home-section__head h2,
body.blog-index-page:not(.app-shell) .home-cta h2 {
max-width: 760px;
margin-bottom: 6px;
font-size: clamp(1.44rem, 2.35vw, 1.92rem);
line-height: 1.04;
}
body.blog-index-page:not(.app-shell) .home-use-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
}
body.blog-index-page:not(.app-shell) .home-use-grid article {
min-height: 0;
gap: 7px;
padding: 13px;
}
body.blog-index-page:not(.app-shell) .home-use-grid article > span {
margin-bottom: 10px;
font-size: 0.68rem;
line-height: 1.1;
}
body.blog-index-page:not(.app-shell) .home-use-grid h3 {
margin-bottom: 2px;
font-size: 0.88rem;
line-height: 1.13;
}
body.blog-index-page:not(.app-shell) .home-use-grid p,
body.blog-index-page:not(.app-shell) .home-cta p {
font-size: 0.74rem;
line-height: 1.23;
}
body.blog-index-page:not(.app-shell) .home-use-grid .btn {
width: 100%;
min-height: 34px;
padding: 0.5rem 0.66rem;
font-size: 0.74rem;
line-height: 1.12;
}
body.blog-index-page:not(.app-shell) .home-cta__card {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(230px, 0.32fr);
align-items: center;
gap: 18px;
padding: 22px 26px;
}
body.blog-index-page:not(.app-shell) .home-cta__actions {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 8px;
margin: 0;
}
body.blog-index-page:not(.app-shell) .home-cta__actions .btn {
width: 100%;
min-height: 36px;
padding: 0.52rem 0.72rem;
font-size: 0.78rem;
line-height: 1.12;
}
body.landing-refresh.legal-page.tested-scenarios-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-hero__card h1 {
line-height: 1.08;
min-height: 3.3em;
}
body.landing-refresh.legal-page.tested-scenarios-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-section .home-demo-grid {
grid-template-columns: minmax(0, 1fr);
gap: 9px;
}
body.landing-refresh.legal-page.tested-scenarios-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-section .home-demo-grid > article {
display: grid;
grid-template-columns: minmax(92px, 0.32fr) minmax(180px, 0.5fr) minmax(0, 1fr) minmax(128px, auto);
grid-template-areas: "eyebrow title body action";
align-items: center;
gap: 8px 14px;
min-height: 0;
padding: 13px 14px;
border-radius: 8px;
}
body.landing-refresh.legal-page.tested-scenarios-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-section .home-demo-grid > article > span {
grid-area: eyebrow;
margin: 0;
font-size: 0.72rem;
line-height: 1.12;
}
body.landing-refresh.legal-page.tested-scenarios-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-section .home-demo-grid > article > h3 {
grid-area: title;
margin: 0;
font-size: 0.98rem;
line-height: 1.12;
}
body.landing-refresh.legal-page.tested-scenarios-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-section .home-demo-grid > article > p {
grid-area: body;
display: -webkit-box;
overflow: hidden;
margin: 0;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
font-size: 0.82rem;
line-height: 1.28;
}
body.landing-refresh.legal-page.tested-scenarios-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-section .home-demo-grid > article > .btn {
grid-area: action;
justify-self: end;
width: 100%;
min-width: 128px;
min-height: 36px;
padding: 0.56rem 0.7rem;
font-size: 0.78rem;
line-height: 1.1;
}
body.landing-refresh.legal-page.tested-scenarios-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-section .home-faq-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
}
body.landing-refresh.legal-page.tested-scenarios-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-section:has(.home-faq-grid) .home-section__head {
display: grid;
grid-template-columns: minmax(190px, 0.42fr) minmax(0, 1fr);
align-items: center;
gap: 8px 18px;
max-width: 100%;
margin-bottom: 14px;
padding: 13px 16px;
text-align: left;
border: 1px solid rgba(148, 163, 184, 0.16);
border-radius: 8px;
background:
linear-gradient(135deg, rgba(242, 213, 138, 0.08), rgba(56, 189, 248, 0.04)),
rgba(15, 23, 42, 0.58);
}
body.landing-refresh.legal-page.tested-scenarios-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-section:has(.home-faq-grid) .home-section__head .home-eyebrow {
grid-column: 1;
}
body.landing-refresh.legal-page.tested-scenarios-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-section:has(.home-faq-grid) .home-section__head h2 {
grid-column: 1;
max-width: 18ch;
margin: 0;
font-size: 1.36rem;
line-height: 1.08;
}
body.landing-refresh.legal-page.tested-scenarios-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-section:has(.home-faq-grid) .home-section__head p {
grid-column: 2;
grid-row: 1 / span 2;
max-width: 68ch;
margin: 0;
font-size: 0.86rem;
line-height: 1.32;
}
body.landing-refresh.legal-page.tested-scenarios-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-section .home-faq-grid article {
gap: 7px;
padding: 12px 13px;
}
body.landing-refresh.legal-page.tested-scenarios-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-section .home-faq-grid h3 {
font-size: 0.9rem;
line-height: 1.12;
}
body.landing-refresh.legal-page.tested-scenarios-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-section .home-faq-grid p {
display: block;
overflow: visible;
-webkit-box-orient: initial;
-webkit-line-clamp: initial;
font-size: 0.79rem;
line-height: 1.28;
}
body.landing-refresh.legal-page.tested-scenarios-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-section:has(.home-faq-grid) .marketing-inline-actions {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin-top: 12px;
}
body.landing-refresh.legal-page.tested-scenarios-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-section:has(.home-faq-grid) .marketing-inline-actions .btn {
width: 100%;
min-height: 36px;
padding: 0.5rem 0.56rem;
font-size: 0.72rem;
line-height: 1.1;
white-space: normal;
}
body.landing-refresh.legal-page.tested-scenarios-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-section:has(.home-faq-grid) {
padding-top: 26px;
padding-bottom: 36px;
}
body.landing-refresh.legal-page.tested-scenarios-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-cta {
padding-top: 26px;
padding-bottom: 32px;
}
body.landing-refresh.legal-page.tested-scenarios-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-section:has(.home-use-grid) {
padding-top: 28px;
padding-bottom: 34px;
}
body.landing-refresh.legal-page.tested-scenarios-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-use-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
}
body.landing-refresh.legal-page.tested-scenarios-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-use-grid article {
gap: 7px;
padding: 13px;
}
body.landing-refresh.legal-page.tested-scenarios-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-use-grid h3 {
font-size: 0.92rem;
line-height: 1.14;
}
body.landing-refresh.legal-page.tested-scenarios-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-use-grid p {
font-size: 0.78rem;
line-height: 1.26;
}
body.landing-refresh.legal-page.tested-scenarios-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-cta__card {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(210px, 0.28fr);
align-items: center;
gap: 18px;
padding: 22px 26px;
}
body.landing-refresh.legal-page.tested-scenarios-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-cta h2 {
max-width: 720px;
font-size: clamp(1.55rem, 2.3vw, 1.95rem);
line-height: 1.08;
}
body.landing-refresh.legal-page.tested-scenarios-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-cta p {
max-width: 68ch;
font-size: 0.86rem;
line-height: 1.34;
}
body.landing-refresh.legal-page.tested-scenarios-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-cta__actions {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 8px;
margin: 0;
}
body.landing-refresh.legal-page.tested-scenarios-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-cta__actions .btn {
width: 100%;
min-height: 36px;
padding: 0.52rem 0.72rem;
font-size: 0.76rem;
line-height: 1.12;
}
body.landing-refresh.legal-page.industry-playbooks-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-section > .container {
display: grid;
gap: 14px;
}
body.landing-refresh.legal-page.industry-playbooks-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-section > .container > .home-section__head {
display: grid;
grid-template-columns: minmax(190px, 0.42fr) minmax(0, 1fr);
align-items: center;
justify-items: start;
max-width: 100%;
margin: 0;
padding: 13px 16px;
text-align: left;
border: 1px solid rgba(148, 163, 184, 0.16);
border-radius: 8px;
background:
radial-gradient(circle at 12% 0%, rgba(56, 189, 248, 0.14), transparent 12rem),
rgba(15, 23, 42, 0.58);
}
body.landing-refresh.legal-page.industry-playbooks-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-section > .container > .home-section__head .home-eyebrow {
grid-column: 1;
}
body.landing-refresh.legal-page.industry-playbooks-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-section > .container > .home-section__head h2 {
grid-column: 1;
max-width: 13ch;
margin: 0;
font-size: clamp(1.3rem, 2vw, 1.65rem);
line-height: 1.02;
}
body.landing-refresh.legal-page.industry-playbooks-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-section > .container > .home-section__head p {
grid-column: 2;
grid-row: 1 / span 2;
max-width: 66ch;
margin: 0;
font-size: 0.88rem;
line-height: 1.34;
}
body.landing-refresh.legal-page.industry-playbooks-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-section > .container > .legal-grid {
grid-template-columns: 1fr;
gap: 9px;
}
body.landing-refresh.legal-page.industry-playbooks-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-section > .container > .legal-grid > .legal-card {
display: grid;
grid-template-columns: minmax(210px, 0.7fr) minmax(0, 1.15fr) minmax(150px, 0.48fr);
grid-template-areas:
"eyebrow list actions"
"title list actions"
"body list actions";
gap: 6px 14px;
align-items: start;
padding: 13px 14px;
border-radius: 8px;
}
body.landing-refresh.legal-page.industry-playbooks-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-section > .container > .legal-grid > .legal-card > .home-eyebrow {
grid-area: eyebrow;
width: max-content;
}
body.landing-refresh.legal-page.industry-playbooks-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-section > .container > .legal-grid > .legal-card > h2 {
grid-area: title;
max-width: 24ch;
margin: 0;
font-size: 1.02rem;
line-height: 1.12;
}
body.landing-refresh.legal-page.industry-playbooks-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-section > .container > .legal-grid > .legal-card > p {
grid-area: body;
margin: 0;
font-size: 0.82rem;
line-height: 1.28;
}
body.landing-refresh.legal-page.industry-playbooks-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-section > .container > .legal-grid > .legal-card > ul {
grid-area: list;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 5px 16px;
margin: 0;
padding-left: 0.95rem;
font-size: 0.78rem;
line-height: 1.24;
}
body.landing-refresh.legal-page.industry-playbooks-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-section > .container > .legal-grid > .legal-card .marketing-inline-actions {
grid-area: actions;
display: grid;
grid-template-columns: 1fr;
gap: 6px;
align-self: stretch;
margin-top: 0;
}
body.landing-refresh.legal-page.industry-playbooks-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-section > .container > .legal-grid > .legal-card .marketing-inline-actions .btn {
width: 100%;
min-height: 34px;
padding: 0.48rem 0.62rem;
font-size: 0.73rem;
line-height: 1.1;
}
body.pilot-case-studies-page:not(.app-shell) .pilot-proof-strip {
grid-template-columns: 1fr repeat(2, minmax(0, 0.72fr));
gap: 9px;
margin-top: 16px;
padding: 10px;
}
body.pilot-case-studies-page:not(.app-shell) .pilot-proof-strip__intro {
grid-row: span 2;
}
body.pilot-case-studies-page:not(.app-shell) .pilot-proof-strip__intro,
body.pilot-case-studies-page:not(.app-shell) .pilot-proof-strip__item {
min-height: 82px;
padding: 13px;
border-radius: 8px;
}
body.pilot-case-studies-page:not(.app-shell) .pilot-proof-strip__intro strong,
body.pilot-case-studies-page:not(.app-shell) .pilot-proof-strip__item strong {
font-size: 1.42rem;
}
body.pilot-case-studies-page:not(.app-shell) .pilot-proof-ladder {
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 8px;
margin-top: 14px;
}
body.pilot-case-studies-page:not(.app-shell) .pilot-proof-ladder__step {
min-height: 132px;
gap: 7px;
padding: 12px;
border-radius: 8px;
}
body.pilot-case-studies-page:not(.app-shell) .pilot-proof-ladder__step h3 {
font-size: 0.88rem;
line-height: 1.14;
}
body.pilot-case-studies-page:not(.app-shell) .pilot-proof-ladder__step p {
font-size: 0.78rem;
line-height: 1.32;
}
body.pilot-case-studies-page:not(.app-shell) .legal-grid {
grid-template-columns: 1fr;
gap: 14px;
}
body.pilot-case-studies-page:not(.app-shell) .legal-card {
padding: 18px;
}
body.pilot-case-studies-page:not(.app-shell) .legal-card ul {
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 24px;
}
body.pilot-case-studies-page:not(.app-shell) .pilot-metrics {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
margin: 4px 0;
}
body.pilot-case-studies-page:not(.app-shell) .pilot-metric {
min-height: 68px;
gap: 2px;
padding: 10px;
border-radius: 8px;
}
body.pilot-case-studies-page:not(.app-shell) .pilot-metric strong {
font-size: 1.28rem;
}
body.pilot-case-studies-page:not(.app-shell) .pilot-metric span,
body.pilot-case-studies-page:not(.app-shell) .pilot-proof-note {
font-size: 0.78rem;
line-height: 1.3;
}
body.guide-page:not(.app-shell) .comparison-table-wrap--operator-codes {
max-width: 100%;
margin-top: 14px;
overflow: hidden;
border-radius: 8px;
}
body.guide-page:not(.app-shell) .comparison-table--operator-codes {
table-layout: fixed;
font-size: 0.78rem;
line-height: 1.24;
}
body.guide-page:not(.app-shell) .comparison-table--operator-codes th,
body.guide-page:not(.app-shell) .comparison-table--operator-codes td {
padding: 9px 10px;
line-height: 1.24;
vertical-align: top;
}
body.guide-page:not(.app-shell) .comparison-table--operator-codes thead th {
font-size: 0.72rem;
letter-spacing: 0.02em;
}
body.guide-page:not(.app-shell) .comparison-table--operator-codes tbody th {
width: 17%;
font-size: 0.82rem;
}
body.guide-page:not(.app-shell) .comparison-table--operator-codes td:nth-child(2) {
width: 25%;
}
body.guide-page:not(.app-shell) .comparison-table--operator-codes td:nth-child(5) {
font-size: 0.76rem;
}
body.guide-page:not(.app-shell) .comparison-table--operator-codes code {
font-size: 0.72rem;
line-height: 1.18;
white-space: normal;
word-break: break-word;
}
body.guide-page:not(.app-shell) .comparison-table-wrap--operator-codes + .home-use-grid,
body.guide-page:not(.app-shell) .comparison-table-wrap--operator-codes + .home-use-grid + .home-faq-grid,
body.guide-page:not(.app-shell) .home-use-grid[style] {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.guide-page:not(.app-shell) .comparison-table-wrap--operator-codes + .home-use-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
margin-top: 14px;
}
body.guide-page:not(.app-shell) .comparison-table-wrap--operator-codes + .home-use-grid article {
gap: 6px;
padding: 12px;
}
body.guide-page:not(.app-shell) .comparison-table-wrap--operator-codes + .home-use-grid article h3 {
font-size: 0.94rem;
line-height: 1.12;
}
body.guide-page:not(.app-shell) .comparison-table-wrap--operator-codes + .home-use-grid article p {
display: -webkit-box;
overflow: hidden;
margin: 0;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
font-size: 0.78rem;
line-height: 1.25;
}
body.guide-page:not(.app-shell) .comparison-table-wrap--operator-codes + .home-use-grid article p + p {
-webkit-line-clamp: 2;
}
body.guide-page:not(.app-shell) .comparison-table-wrap--operator-codes + .home-use-grid + .home-faq-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 9px;
margin-top: 14px;
}
body.guide-page:not(.app-shell) .comparison-table-wrap--operator-codes + .home-use-grid + .home-faq-grid article {
gap: 6px;
padding: 12px;
}
body.guide-page:not(.app-shell) .comparison-table-wrap--operator-codes + .home-use-grid + .home-faq-grid h3 {
font-size: 0.9rem;
line-height: 1.12;
}
body.guide-page:not(.app-shell) .comparison-table-wrap--operator-codes + .home-use-grid + .home-faq-grid p {
font-size: 0.76rem;
line-height: 1.26;
}
body.guide-page:not(.app-shell) .comparison-table-wrap--operator-codes ~ .home-cta__card {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(260px, 0.54fr);
align-items: center;
gap: 14px;
margin-top: 14px;
padding: 16px;
border-radius: 8px;
}
body.guide-page:not(.app-shell) .comparison-table-wrap--operator-codes ~ .home-cta__card h2 {
max-width: 28ch;
font-size: 1.2rem;
line-height: 1.08;
}
body.guide-page:not(.app-shell) .comparison-table-wrap--operator-codes ~ .home-cta__card p {
max-width: 66ch;
font-size: 0.82rem;
line-height: 1.32;
}
body.guide-page:not(.app-shell) .comparison-table-wrap--operator-codes ~ .home-cta__card .home-cta__actions {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
margin: 0;
}
body.guide-page:not(.app-shell) .comparison-table-wrap--operator-codes ~ .home-cta__card .btn {
min-height: 36px;
padding: 0.56rem 0.7rem;
font-size: 0.78rem;
}
body.article-page:not(.app-shell) .legal-hero {
padding-top: 18px;
padding-bottom: 8px;
}
body.article-page:not(.app-shell) .legal-hero__card {
max-width: min(100% - 88px, 1060px);
gap: 10px;
padding: 24px 40px;
}
body.article-page:not(.app-shell) .article-breadcrumb {
gap: 0.38rem;
margin-bottom: 2px;
font-size: 0.76rem;
line-height: 1.18;
}
body.article-page:not(.app-shell) .legal-hero__card h1 {
max-width: 900px;
font-size: clamp(2rem, 3.05vw, 2.52rem);
line-height: 1.02;
}
body.article-page:not(.app-shell) .legal-hero__card p {
max-width: 780px;
font-size: 0.88rem;
line-height: 1.32;
}
body.article-page:not(.app-shell) .legal-hero .home-hero__actions {
gap: 8px;
margin-top: 0;
}
body.article-page:not(.app-shell) .legal-hero .home-hero__actions .btn {
min-height: 38px;
padding: 0.62rem 0.86rem;
font-size: 0.8rem;
line-height: 1.12;
}
body.article-page:not(.app-shell) .home-section,
body.article-page:not(.app-shell) .home-cta {
padding-top: 24px;
padding-bottom: 34px;
}
body.article-page:not(.app-shell) .home-section__head {
max-width: 800px;
gap: 6px;
margin-bottom: 14px;
}
body.article-page:not(.app-shell) .home-section__head h2,
body.article-page:not(.app-shell) .home-cta h2 {
max-width: 800px;
margin-bottom: 6px;
font-size: clamp(1.36rem, 2.25vw, 1.86rem);
line-height: 1.04;
}
body.article-page:not(.app-shell) .home-section__head p,
body.article-page:not(.app-shell) .home-cta p {
font-size: 0.8rem;
line-height: 1.28;
}
body.article-page:not(.app-shell) .scenario-grid {
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 9px;
}
body.article-page:not(.app-shell) .scenario-grid article {
min-height: 0;
padding: 11px;
border-radius: 8px;
display: grid;
grid-template-rows: auto auto 1fr;
gap: 5px;
}
body.article-page:not(.app-shell) .scenario-grid article span,
body.article-page:not(.app-shell) .scenario-card span,
body.article-page:not(.app-shell) .scenario-checklist span {
margin-bottom: 0;
font-size: 0.64rem;
line-height: 1.1;
letter-spacing: 0.08em;
}
body.article-page:not(.app-shell) .scenario-grid article h3 {
margin: 0;
font-size: 0.82rem;
line-height: 1.12;
}
body.article-page:not(.app-shell) .scenario-grid article p {
display: -webkit-box;
overflow: hidden;
margin: 0;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
font-size: 0.7rem;
line-height: 1.22;
}
body.article-page:not(.app-shell) .home-split {
grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
gap: 12px;
}
body.article-page:not(.app-shell) .scenario-card,
body.article-page:not(.app-shell) .scenario-checklist {
min-height: 0;
padding: 15px;
border-radius: 8px;
}
body.article-page:not(.app-shell) .scenario-card h2,
body.article-page:not(.app-shell) .scenario-checklist h2 {
margin: 6px 0;
font-size: 1.08rem;
line-height: 1.12;
}
body.article-page:not(.app-shell) .scenario-card p,
body.article-page:not(.app-shell) .scenario-checklist li {
font-size: 0.76rem;
line-height: 1.25;
}
body.article-page:not(.app-shell) .scenario-checklist ul {
margin-top: 8px;
padding-left: 0.95rem;
}
body.article-page:not(.app-shell) .scenario-checklist li + li {
margin-top: 0.42rem;
}
body.article-page:not(.app-shell) .marketing-inline-actions {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
margin-top: 12px;
}
body.article-page:not(.app-shell) .marketing-inline-actions--center {
grid-template-columns: repeat(3, minmax(0, 1fr));
max-width: 620px;
margin-inline: auto;
}
body.article-page:not(.app-shell) .marketing-inline-actions .btn {
width: 100%;
min-height: 36px;
padding: 0.52rem 0.66rem;
font-size: 0.76rem;
line-height: 1.12;
}
body.article-page:not(.app-shell) .home-steps {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 9px;
}
body.article-page:not(.app-shell) .home-steps article,
body.article-page:not(.app-shell) .home-use-grid article,
body.article-page:not(.app-shell) .home-faq-grid article {
min-height: 0;
gap: 6px;
padding: 12px;
}
body.article-page:not(.app-shell) .home-use-grid,
body.article-page:not(.app-shell) .home-faq-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
}
body.article-page:not(.app-shell) .home-steps h3,
body.article-page:not(.app-shell) .home-use-grid h3,
body.article-page:not(.app-shell) .home-faq-grid h3 {
font-size: 0.86rem;
line-height: 1.12;
}
body.article-page:not(.app-shell) .home-steps p,
body.article-page:not(.app-shell) .home-use-grid p,
body.article-page:not(.app-shell) .home-faq-grid p {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
font-size: 0.72rem;
line-height: 1.22;
}
body.article-page:not(.app-shell) .home-cta__card {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(230px, 0.32fr);
align-items: center;
gap: 18px;
padding: 22px 26px;
}
body.article-page:not(.app-shell) .home-cta__actions {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 8px;
margin: 0;
}
body.article-page:not(.app-shell) .home-cta__actions .btn {
width: 100%;
min-height: 36px;
padding: 0.52rem 0.72rem;
font-size: 0.78rem;
line-height: 1.12;
}
body.landing-refresh.legal-page.article-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-section--quiet .home-section__head {
display: grid;
grid-template-columns: minmax(160px, 0.32fr) minmax(0, 1fr);
align-items: center;
gap: 8px 18px;
max-width: 100%;
margin-bottom: 14px;
padding: 12px 16px;
text-align: left;
border: 1px solid rgba(148, 163, 184, 0.16);
border-radius: 8px;
background:
linear-gradient(135deg, rgba(242, 213, 138, 0.08), rgba(56, 189, 248, 0.04)),
rgba(15, 23, 42, 0.58);
}
body.landing-refresh.legal-page.article-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-section--quiet .home-section__head .home-eyebrow {
grid-column: 1;
width: fit-content;
}
body.landing-refresh.legal-page.article-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-section--quiet .home-section__head h2 {
grid-column: 2;
grid-row: 1 / span 2;
max-width: 800px;
margin: 0;
font-size: clamp(1.22rem, 1.95vw, 1.62rem);
line-height: 1.04;
}
body.landing-refresh.legal-page.article-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-steps article,
body.landing-refresh.legal-page.article-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-use-grid article,
body.landing-refresh.legal-page.article-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-faq-grid article {
min-height: 0;
gap: 6px;
padding: 12px;
}
body.landing-refresh.legal-page.article-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-steps article > span,
body.landing-refresh.legal-page.article-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-use-grid article > span,
body.landing-refresh.legal-page.article-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-faq-grid article > span {
margin-bottom: 4px;
font-size: 0.66rem;
line-height: 1.1;
}
body.landing-refresh.legal-page.article-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-steps h3,
body.landing-refresh.legal-page.article-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-use-grid h3,
body.landing-refresh.legal-page.article-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-faq-grid h3 {
font-size: 0.86rem;
line-height: 1.12;
}
body.landing-refresh.legal-page.article-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-steps p,
body.landing-refresh.legal-page.article-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-use-grid p,
body.landing-refresh.legal-page.article-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-faq-grid p {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
font-size: 0.72rem;
line-height: 1.22;
}
body.landing-refresh.legal-page.article-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .scenario-card .marketing-inline-actions,
body.landing-refresh.legal-page.article-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .marketing-inline-actions--center {
display: grid;
gap: 8px;
margin-top: 12px;
}
body.landing-refresh.legal-page.article-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .scenario-card .marketing-inline-actions {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.landing-refresh.legal-page.article-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .marketing-inline-actions--center {
grid-template-columns: repeat(3, minmax(0, 1fr));
max-width: 680px;
margin-inline: auto;
}
body.landing-refresh.legal-page.article-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .marketing-inline-actions .btn {
width: 100%;
min-height: 36px;
padding: 0.52rem 0.66rem;
font-size: 0.76rem;
line-height: 1.12;
}
body.landing-refresh.legal-page.pilot-case-studies-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid {
grid-template-columns: minmax(0, 1fr);
gap: 10px;
}
body.landing-refresh.legal-page.pilot-case-studies-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .pilot-proof-strip {
grid-template-columns: minmax(210px, 1.18fr) repeat(4, minmax(0, 1fr));
gap: 8px;
margin-top: 14px;
padding: 9px;
}
body.landing-refresh.legal-page.pilot-case-studies-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .pilot-proof-strip__intro {
grid-row: auto;
}
body.landing-refresh.legal-page.pilot-case-studies-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .pilot-proof-strip__intro,
body.landing-refresh.legal-page.pilot-case-studies-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .pilot-proof-strip__item {
min-height: 74px;
padding: 10px 12px;
}
body.landing-refresh.legal-page.pilot-case-studies-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .pilot-proof-strip__intro strong,
body.landing-refresh.legal-page.pilot-case-studies-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .pilot-proof-strip__item strong {
font-size: 1.18rem;
}
body.landing-refresh.legal-page.pilot-case-studies-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .pilot-proof-strip__intro span,
body.landing-refresh.legal-page.pilot-case-studies-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .pilot-proof-strip__item span {
font-size: 0.72rem;
line-height: 1.22;
}
body.landing-refresh.legal-page.pilot-case-studies-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .pilot-proof-ladder {
gap: 7px;
margin-top: 10px;
}
body.landing-refresh.legal-page.pilot-case-studies-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .pilot-proof-ladder__step {
min-height: 112px;
gap: 5px;
padding: 10px;
}
body.landing-refresh.legal-page.pilot-case-studies-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .pilot-proof-ladder__step span {
min-height: 24px;
padding-inline: 8px;
font-size: 0.66rem;
}
body.landing-refresh.legal-page.pilot-case-studies-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .pilot-proof-ladder__step h3 {
font-size: 0.8rem;
}
body.landing-refresh.legal-page.pilot-case-studies-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .pilot-proof-ladder__step p {
font-size: 0.72rem;
line-height: 1.22;
}
body.landing-refresh.legal-page.pilot-case-studies-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-card {
display: grid;
grid-template-columns: minmax(220px, 0.9fr) minmax(230px, 0.92fr) minmax(270px, 1.12fr);
grid-template-areas:
"kicker metrics actions"
"title metrics actions"
"body list list"
"note list list";
align-items: start;
gap: 8px 14px;
padding: 14px;
}
body.landing-refresh.legal-page.pilot-case-studies-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-card > .home-eyebrow {
grid-area: kicker;
width: fit-content;
}
body.landing-refresh.legal-page.pilot-case-studies-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-card > h2 {
grid-area: title;
margin: 0;
font-size: 0.96rem;
line-height: 1.14;
}
body.landing-refresh.legal-page.pilot-case-studies-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-card > p:not(.pilot-proof-note) {
grid-area: body;
margin: 0;
font-size: 0.78rem;
line-height: 1.3;
}
body.landing-refresh.legal-page.pilot-case-studies-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-card ul {
grid-area: list;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 5px 18px;
align-content: start;
margin: 0;
padding-left: 0.95rem;
}
body.landing-refresh.legal-page.pilot-case-studies-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-card li {
font-size: 0.76rem;
line-height: 1.24;
}
body.landing-refresh.legal-page.pilot-case-studies-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .pilot-metrics {
grid-area: metrics;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-self: stretch;
gap: 6px;
margin: 0;
}
body.landing-refresh.legal-page.pilot-case-studies-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .pilot-metric {
min-height: 54px;
gap: 1px;
padding: 8px;
}
body.landing-refresh.legal-page.pilot-case-studies-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .pilot-metric strong {
font-size: 1.12rem;
}
body.landing-refresh.legal-page.pilot-case-studies-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .pilot-metric span {
font-size: 0.7rem;
line-height: 1.18;
}
body.landing-refresh.legal-page.pilot-case-studies-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .pilot-proof-note {
grid-area: note;
margin: 0;
padding: 9px 10px;
font-size: 0.74rem;
line-height: 1.24;
}
body.landing-refresh.legal-page.pilot-case-studies-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .marketing-inline-actions {
grid-area: actions;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 6px;
align-self: stretch;
margin: 0;
}
body.landing-refresh.legal-page.pilot-case-studies-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .marketing-inline-actions .btn {
width: 100%;
min-height: 34px;
padding: 0.48rem 0.62rem;
font-size: 0.74rem;
line-height: 1.12;
}
body.landing-refresh.legal-page.caller-transparency-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-section,
body.landing-refresh.legal-page.caller-transparency-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-cta {
padding-top: 26px;
padding-bottom: 36px;
}
body.landing-refresh.legal-page.caller-transparency-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-section__head {
max-width: 760px;
gap: 6px;
margin-bottom: 14px;
}
body.landing-refresh.legal-page.caller-transparency-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-section__head h2,
body.landing-refresh.legal-page.caller-transparency-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-cta h2 {
max-width: 760px;
font-size: clamp(1.48rem, 2.45vw, 2rem);
line-height: 1.05;
}
body.landing-refresh.legal-page.caller-transparency-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-faq-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
}
body.landing-refresh.legal-page.caller-transparency-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-faq-grid article {
min-height: 0;
gap: 7px;
padding: 13px;
}
body.landing-refresh.legal-page.caller-transparency-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-faq-grid h3 {
font-size: 0.92rem;
line-height: 1.14;
}
body.landing-refresh.legal-page.caller-transparency-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-faq-grid p {
font-size: 0.78rem;
line-height: 1.32;
}
body.landing-refresh.legal-page.caller-transparency-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-use-grid article {
min-height: 0;
}
body.landing-refresh.legal-page.caller-transparency-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-steps {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
}
body.landing-refresh.legal-page.caller-transparency-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-steps article {
min-height: 0;
padding: 14px;
}
body.landing-refresh.legal-page.caller-transparency-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-cta__card {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(240px, 0.38fr);
align-items: center;
gap: 20px;
padding: 22px 26px;
}
body.landing-refresh.legal-page.caller-transparency-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-cta__actions {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 8px;
margin: 0;
}
body.landing-refresh.legal-page.caller-transparency-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-cta__actions .btn {
width: 100%;
min-height: 38px;
padding: 0.58rem 0.72rem;
font-size: 0.8rem;
}
body.landing-refresh.legal-page.status-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-hero {
padding-top: 18px;
padding-bottom: 6px;
}
body.landing-refresh.legal-page.status-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-hero__card {
max-width: min(100% - 88px, 1060px);
gap: 10px;
padding: 24px 40px;
}
body.landing-refresh.legal-page.status-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-hero__card h1 {
max-width: 860px;
font-size: clamp(2.08rem, 3.1vw, 2.58rem);
line-height: 1.01;
}
body.landing-refresh.legal-page.status-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-hero__card p {
max-width: 780px;
font-size: 0.9rem;
line-height: 1.34;
}
body.landing-refresh.legal-page.status-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-hero .home-hero__actions {
gap: 8px;
margin-top: 0;
}
body.landing-refresh.legal-page.status-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-hero .home-hero__actions .btn {
min-height: 38px;
padding: 0.62rem 0.86rem;
font-size: 0.8rem;
}
body.landing-refresh.legal-page.status-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-section,
body.landing-refresh.legal-page.status-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-section,
body.landing-refresh.legal-page.status-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-cta {
padding-top: 24px;
padding-bottom: 34px;
}
body.landing-refresh.legal-page.status-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid--support,
body.landing-refresh.legal-page.status-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-faq-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
}
body.landing-refresh.legal-page.status-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid--support .legal-card,
body.landing-refresh.legal-page.status-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-faq-grid article {
min-height: 0;
gap: 7px;
padding: 13px;
}
body.landing-refresh.legal-page.status-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid--support .legal-card h2,
body.landing-refresh.legal-page.status-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-faq-grid h3 {
margin-bottom: 2px;
font-size: 0.9rem;
line-height: 1.13;
}
body.landing-refresh.legal-page.status-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-updated {
font-size: 0.72rem;
line-height: 1.18;
}
body.landing-refresh.legal-page.status-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid--support .legal-card p,
body.landing-refresh.legal-page.status-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-faq-grid p,
body.landing-refresh.legal-page.status-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-cta p {
font-size: 0.75rem;
line-height: 1.24;
}
body.landing-refresh.legal-page.status-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid--support .legal-card .btn {
width: 100%;
min-height: 36px;
margin-top: 4px;
padding: 0.52rem 0.66rem;
font-size: 0.76rem;
line-height: 1.12;
}
body.landing-refresh.legal-page.status-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-section__head {
max-width: 760px;
gap: 6px;
margin-bottom: 14px;
}
body.landing-refresh.legal-page.status-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-section__head h2,
body.landing-refresh.legal-page.status-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-cta h2 {
max-width: 760px;
margin-bottom: 6px;
font-size: clamp(1.46rem, 2.35vw, 1.95rem);
line-height: 1.04;
}
body.landing-refresh.legal-page.status-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-cta__card {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(230px, 0.32fr);
align-items: center;
gap: 18px;
padding: 22px 26px;
}
body.landing-refresh.legal-page.status-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-cta__actions {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 8px;
margin: 0;
}
body.landing-refresh.legal-page.status-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-cta__actions .btn {
width: 100%;
min-height: 36px;
padding: 0.52rem 0.72rem;
font-size: 0.78rem;
line-height: 1.12;
}
body.landing-refresh.legal-page.onboarding-playbook-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-hero {
padding-top: 18px;
padding-bottom: 6px;
}
body.landing-refresh.legal-page.onboarding-playbook-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-hero__card {
max-width: min(100% - 88px, 1060px);
gap: 10px;
padding: 24px 40px;
}
body.landing-refresh.legal-page.onboarding-playbook-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-hero__card h1 {
max-width: 900px;
font-size: clamp(2.08rem, 3.1vw, 2.56rem);
line-height: 1.01;
}
body.landing-refresh.legal-page.onboarding-playbook-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-hero__card p {
max-width: 790px;
font-size: 0.9rem;
line-height: 1.34;
}
body.landing-refresh.legal-page.onboarding-playbook-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-hero .home-hero__actions {
gap: 8px;
margin-top: 0;
}
body.landing-refresh.legal-page.onboarding-playbook-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-hero .home-hero__actions .btn {
min-height: 38px;
padding: 0.62rem 0.86rem;
font-size: 0.8rem;
}
body.landing-refresh.legal-page.onboarding-playbook-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-section,
body.landing-refresh.legal-page.onboarding-playbook-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-cta {
padding-top: 24px;
padding-bottom: 34px;
}
body.landing-refresh.legal-page.onboarding-playbook-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-section__head {
max-width: 760px;
gap: 6px;
margin-bottom: 14px;
}
body.landing-refresh.legal-page.onboarding-playbook-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-section__head h2,
body.landing-refresh.legal-page.onboarding-playbook-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-cta h2 {
max-width: 760px;
margin-bottom: 6px;
font-size: clamp(1.44rem, 2.35vw, 1.92rem);
line-height: 1.04;
}
body.landing-refresh.legal-page.onboarding-playbook-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-section__head p,
body.landing-refresh.legal-page.onboarding-playbook-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-cta p {
font-size: 0.8rem;
line-height: 1.28;
}
body.landing-refresh.legal-page.onboarding-playbook-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-steps {
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 10px;
}
body.landing-refresh.legal-page.onboarding-playbook-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-faq-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
}
body.landing-refresh.legal-page.onboarding-playbook-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-demo-grid {
gap: 10px;
}
body.landing-refresh.legal-page.onboarding-playbook-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-steps article,
body.landing-refresh.legal-page.onboarding-playbook-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-faq-grid article,
body.landing-refresh.legal-page.onboarding-playbook-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-demo-grid article {
min-height: 0;
gap: 7px;
padding: 13px;
}
body.landing-refresh.legal-page.onboarding-playbook-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-steps article > span,
body.landing-refresh.legal-page.onboarding-playbook-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-demo-grid article > span {
margin-bottom: 10px;
font-size: 0.68rem;
line-height: 1.1;
}
body.landing-refresh.legal-page.onboarding-playbook-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-steps h3,
body.landing-refresh.legal-page.onboarding-playbook-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-faq-grid h3,
body.landing-refresh.legal-page.onboarding-playbook-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-demo-grid h3 {
margin-bottom: 2px;
font-size: 0.88rem;
line-height: 1.13;
}
body.landing-refresh.legal-page.onboarding-playbook-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-steps p,
body.landing-refresh.legal-page.onboarding-playbook-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-faq-grid p,
body.landing-refresh.legal-page.onboarding-playbook-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-demo-grid p {
font-size: 0.74rem;
line-height: 1.23;
}
body.landing-refresh.legal-page.onboarding-playbook-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .container.home-split {
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: stretch;
gap: 12px;
}
body.landing-refresh.legal-page.onboarding-playbook-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-split .legal-card {
gap: 8px;
padding: 14px;
}
body.landing-refresh.legal-page.onboarding-playbook-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-split .legal-card h2 {
margin-bottom: 2px;
font-size: 0.96rem;
line-height: 1.14;
}
body.landing-refresh.legal-page.onboarding-playbook-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-split .legal-card ul {
gap: 4px;
padding-left: 0.9rem;
}
body.landing-refresh.legal-page.onboarding-playbook-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-split .legal-card li {
font-size: 0.74rem;
line-height: 1.22;
}
body.landing-refresh.legal-page.onboarding-playbook-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .marketing-inline-actions {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
margin-top: 12px;
}
body.landing-refresh.legal-page.onboarding-playbook-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .marketing-inline-actions .btn {
width: 100%;
min-height: 36px;
padding: 0.52rem 0.62rem;
font-size: 0.74rem;
line-height: 1.12;
}
body.landing-refresh.legal-page.onboarding-playbook-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-cta__card {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(230px, 0.32fr);
align-items: center;
gap: 18px;
padding: 22px 26px;
}
body.landing-refresh.legal-page.onboarding-playbook-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-cta__actions {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 8px;
margin: 0;
}
body.landing-refresh.legal-page.onboarding-playbook-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-cta__actions .btn {
width: 100%;
min-height: 36px;
padding: 0.52rem 0.72rem;
font-size: 0.78rem;
line-height: 1.12;
}
body.landing-refresh.legal-page.guardrails-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-hero {
padding-top: 18px;
padding-bottom: 6px;
}
body.landing-refresh.legal-page.guardrails-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-hero__card {
max-width: min(100% - 88px, 1060px);
gap: 10px;
padding: 24px 40px;
}
body.landing-refresh.legal-page.guardrails-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-hero__card h1 {
max-width: 920px;
font-size: clamp(2.12rem, 3.2vw, 2.68rem);
line-height: 1.01;
}
body.landing-refresh.legal-page.guardrails-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-hero__card p {
max-width: 820px;
font-size: 0.9rem;
line-height: 1.34;
}
body.landing-refresh.legal-page.guardrails-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-hero .home-hero__actions {
gap: 8px;
margin-top: 0;
}
body.landing-refresh.legal-page.guardrails-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-hero .home-hero__actions .btn {
min-height: 38px;
padding: 0.62rem 0.86rem;
font-size: 0.8rem;
}
body.landing-refresh.legal-page.guardrails-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-section,
body.landing-refresh.legal-page.guardrails-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-cta {
padding-top: 24px;
padding-bottom: 34px;
}
body.landing-refresh.legal-page.guardrails-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-section__head {
max-width: 760px;
gap: 6px;
margin-bottom: 14px;
}
body.landing-refresh.legal-page.guardrails-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-section__head h2,
body.landing-refresh.legal-page.guardrails-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-cta h2 {
max-width: 760px;
margin-bottom: 6px;
font-size: clamp(1.46rem, 2.35vw, 1.95rem);
line-height: 1.04;
}
body.landing-refresh.legal-page.guardrails-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-use-grid,
body.landing-refresh.legal-page.guardrails-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-steps {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
}
body.landing-refresh.legal-page.guardrails-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-use-grid article:first-child {
grid-column: span 2;
}
body.landing-refresh.legal-page.guardrails-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-use-grid article:nth-child(n+2) {
grid-column: span 1;
}
body.landing-refresh.legal-page.guardrails-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-faq-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
}
body.landing-refresh.legal-page.guardrails-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-use-grid article,
body.landing-refresh.legal-page.guardrails-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-faq-grid article,
body.landing-refresh.legal-page.guardrails-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-steps article {
min-height: 0;
gap: 7px;
padding: 13px;
}
body.landing-refresh.legal-page.guardrails-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-use-grid article > span,
body.landing-refresh.legal-page.guardrails-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-steps article > span {
margin-bottom: 12px;
font-size: 0.72rem;
line-height: 1.1;
}
body.landing-refresh.legal-page.guardrails-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-use-grid h3,
body.landing-refresh.legal-page.guardrails-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-faq-grid h3,
body.landing-refresh.legal-page.guardrails-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-steps h3 {
margin-bottom: 2px;
font-size: 0.9rem;
line-height: 1.13;
}
body.landing-refresh.legal-page.guardrails-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-use-grid p,
body.landing-refresh.legal-page.guardrails-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-faq-grid p,
body.landing-refresh.legal-page.guardrails-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-steps p,
body.landing-refresh.legal-page.guardrails-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-cta p {
font-size: 0.76rem;
line-height: 1.25;
}
body.landing-refresh.legal-page.guardrails-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-cta__card {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(230px, 0.32fr);
align-items: center;
gap: 18px;
padding: 22px 26px;
}
body.landing-refresh.legal-page.guardrails-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-cta__actions {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 8px;
margin: 0;
}
body.landing-refresh.legal-page.guardrails-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-cta__actions .btn {
width: 100%;
min-height: 36px;
padding: 0.52rem 0.72rem;
font-size: 0.78rem;
line-height: 1.12;
}
body.landing-refresh.legal-page.subprocessors-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-hero {
padding-top: 18px;
padding-bottom: 6px;
}
body.landing-refresh.legal-page.subprocessors-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-hero__card {
gap: 10px;
padding: 24px 40px;
}
body.landing-refresh.legal-page.subprocessors-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-hero__card h1 {
max-width: 900px;
font-size: clamp(2.22rem, 3.35vw, 2.78rem);
line-height: 1;
}
body.landing-refresh.legal-page.subprocessors-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-hero__card p {
max-width: 760px;
font-size: 0.9rem;
line-height: 1.34;
}
body.landing-refresh.legal-page.subprocessors-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-hero .home-hero__actions .btn {
min-height: 38px;
padding: 0.62rem 0.92rem;
font-size: 0.82rem;
}
body.landing-refresh.legal-page.subprocessors-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-section {
padding-top: 20px;
padding-bottom: 36px;
}
body.landing-refresh.legal-page.subprocessors-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid--support {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
}
body.landing-refresh.legal-page.subprocessors-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid--support .legal-card {
gap: 7px;
min-height: 0;
padding: 12px;
}
body.landing-refresh.legal-page.subprocessors-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid--support .legal-card h2 {
margin-bottom: 2px;
font-size: 0.92rem;
line-height: 1.14;
}
body.landing-refresh.legal-page.subprocessors-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid--support .legal-card p,
body.landing-refresh.legal-page.subprocessors-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid--support .legal-card li {
font-size: 0.74rem;
line-height: 1.22;
}
body.landing-refresh.legal-page.subprocessors-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid--support .legal-card ul {
gap: 4px;
padding-left: 0.88rem;
}
body.landing-refresh.legal-page.subprocessors-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid--support .legal-card:nth-child(7) {
grid-column: span 2;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 10px 18px;
}
body.landing-refresh.legal-page.subprocessors-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid--support .legal-card:nth-child(7) h2,
body.landing-refresh.legal-page.subprocessors-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid--support .legal-card:nth-child(7) p {
grid-column: 1;
}
body.landing-refresh.legal-page.subprocessors-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid--support .legal-card:nth-child(7) .btn {
grid-column: 2;
grid-row: 1 / span 2;
min-height: 38px;
padding: 0.58rem 0.82rem;
white-space: nowrap;
}
body.landing-refresh.legal-page.accessibility-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-hero {
padding-top: 18px;
padding-bottom: 6px;
}
body.landing-refresh.legal-page.accessibility-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-hero__card {
gap: 10px;
padding: 24px 38px;
}
body.landing-refresh.legal-page.accessibility-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-hero__card h1 {
max-width: 910px;
font-size: clamp(2.22rem, 3.35vw, 2.78rem);
line-height: 1.01;
}
body.landing-refresh.legal-page.accessibility-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-hero__card p {
max-width: 770px;
font-size: 0.9rem;
line-height: 1.34;
}
body.landing-refresh.legal-page.accessibility-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-hero .home-hero__actions {
gap: 8px;
margin-top: 0;
}
body.landing-refresh.legal-page.accessibility-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-hero .home-hero__actions .btn {
min-height: 38px;
padding: 0.62rem 0.9rem;
font-size: 0.82rem;
}
body.landing-refresh.legal-page.accessibility-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-section {
padding-top: 24px;
padding-bottom: 34px;
}
body.landing-refresh.legal-page.accessibility-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid--support {
gap: 10px;
}
body.landing-refresh.legal-page.accessibility-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid--support .legal-card {
gap: 7px;
min-height: 0;
padding: 14px;
}
body.landing-refresh.legal-page.accessibility-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid--support .legal-card h2 {
margin-bottom: 2px;
font-size: 0.94rem;
line-height: 1.14;
}
body.landing-refresh.legal-page.accessibility-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid--support .legal-card p,
body.landing-refresh.legal-page.accessibility-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid--support .legal-card li {
font-size: 0.78rem;
line-height: 1.25;
}
body.landing-refresh.legal-page.accessibility-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid--support .legal-card ul {
gap: 4px;
padding-left: 0.9rem;
}
body.landing-refresh.legal-page.accessibility-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid--support .legal-card .btn {
min-height: 36px;
width: max-content;
max-width: 100%;
padding: 0.54rem 0.78rem;
font-size: 0.78rem;
line-height: 1.12;
}
body.landing-refresh.legal-page.accessibility-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-section--quiet,
body.landing-refresh.legal-page.accessibility-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-cta {
padding-top: 24px;
padding-bottom: 34px;
}
body.landing-refresh.legal-page.accessibility-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-section__head {
display: grid;
grid-template-columns: minmax(300px, 0.62fr) minmax(0, 1fr);
align-items: center;
gap: 10px 28px;
max-width: 1102px;
margin-bottom: 14px;
text-align: left;
}
body.landing-refresh.legal-page.accessibility-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-section__head .home-eyebrow,
body.landing-refresh.legal-page.accessibility-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-section__head h2 {
grid-column: 1;
}
body.landing-refresh.legal-page.accessibility-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-section__head h2,
body.landing-refresh.legal-page.accessibility-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-cta h2 {
max-width: 760px;
margin: 0;
font-size: clamp(1.46rem, 2.35vw, 1.95rem);
line-height: 1.04;
}
body.landing-refresh.legal-page.accessibility-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-section__head p {
grid-column: 2;
grid-row: 1 / span 2;
max-width: 66ch;
margin: 0;
font-size: 0.82rem;
line-height: 1.3;
}
body.landing-refresh.legal-page.accessibility-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-faq-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
}
body.landing-refresh.legal-page.accessibility-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-faq-grid article {
gap: 7px;
min-height: 0;
padding: 12px;
}
body.landing-refresh.legal-page.accessibility-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-faq-grid h3 {
margin-bottom: 2px;
font-size: 0.9rem;
line-height: 1.13;
}
body.landing-refresh.legal-page.accessibility-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-faq-grid p,
body.landing-refresh.legal-page.accessibility-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-cta p {
font-size: 0.76rem;
line-height: 1.25;
}
body.landing-refresh.legal-page.accessibility-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-faq-grid p {
display: block;
overflow: visible;
-webkit-line-clamp: initial;
-webkit-box-orient: initial;
}
body.landing-refresh.legal-page.accessibility-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-cta__card {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(245px, 0.32fr);
align-items: center;
gap: 18px;
padding: 22px 26px;
border-radius: 22px;
}
body.landing-refresh.legal-page.accessibility-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-cta__actions {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 8px;
margin: 0;
}
body.landing-refresh.legal-page.accessibility-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-cta__actions .btn {
width: 100%;
min-height: 36px;
padding: 0.52rem 0.72rem;
font-size: 0.78rem;
line-height: 1.12;
}
body.landing-refresh.legal-page.security-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-hero {
padding-top: 18px;
padding-bottom: 6px;
}
body.landing-refresh.legal-page.security-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-hero__card {
gap: 9px;
padding: 24px 38px;
}
body.landing-refresh.legal-page.security-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-hero__card h1 {
max-width: 900px;
font-size: clamp(2.18rem, 3.28vw, 2.74rem);
line-height: 1.01;
}
body.landing-refresh.legal-page.security-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-hero__card p:not(.legal-updated) {
max-width: 790px;
font-size: 0.9rem;
line-height: 1.34;
}
body.landing-refresh.legal-page.security-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-updated {
font-size: 0.76rem;
line-height: 1.2;
}
body.landing-refresh.legal-page.security-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-hero .home-hero__actions {
gap: 8px;
margin-top: 0;
}
body.landing-refresh.legal-page.security-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-hero .home-hero__actions .btn {
min-height: 38px;
padding: 0.62rem 0.9rem;
font-size: 0.82rem;
}
body.landing-refresh.legal-page.security-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-section {
padding-top: 24px;
padding-bottom: 34px;
}
body.landing-refresh.legal-page.security-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-section--compact {
padding-top: 24px;
padding-bottom: 30px;
}
body.landing-refresh.legal-page.security-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-section--compact .home-section__head {
display: grid;
grid-template-columns: minmax(300px, 0.62fr) minmax(0, 1fr);
align-items: center;
gap: 10px 28px;
max-width: 1102px;
margin-bottom: 14px;
text-align: left;
}
body.landing-refresh.legal-page.security-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-section--compact .home-section__head .home-eyebrow,
body.landing-refresh.legal-page.security-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-section--compact .home-section__head h2 {
grid-column: 1;
}
body.landing-refresh.legal-page.security-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-section--compact .home-section__head h2 {
max-width: 760px;
margin: 0;
font-size: clamp(1.48rem, 2.35vw, 1.95rem);
line-height: 1.04;
}
body.landing-refresh.legal-page.security-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-section--compact .home-section__head p {
grid-column: 2;
grid-row: 1 / span 2;
max-width: 66ch;
margin: 0;
font-size: 0.82rem;
line-height: 1.3;
}
body.landing-refresh.legal-page.security-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-section--compact .legal-grid--three {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
body.landing-refresh.legal-page.security-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-section--compact .legal-card {
gap: 7px;
min-height: 0;
padding: 12px;
}
body.landing-refresh.legal-page.security-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-section:not(.legal-section--compact) .legal-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
}
body.landing-refresh.legal-page.security-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-section:not(.legal-section--compact) .legal-card {
gap: 7px;
min-height: 0;
padding: 12px;
}
body.landing-refresh.legal-page.security-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-card h2 {
margin-bottom: 2px;
font-size: 0.9rem;
line-height: 1.14;
}
body.landing-refresh.legal-page.security-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-card p,
body.landing-refresh.legal-page.security-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-card li {
font-size: 0.74rem;
line-height: 1.22;
}
body.landing-refresh.legal-page.security-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-card ul {
gap: 4px;
padding-left: 0.88rem;
}
body.landing-refresh.legal-page.security-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-card .btn {
min-height: 34px;
width: max-content;
max-width: 100%;
padding: 0.5rem 0.68rem;
font-size: 0.74rem;
line-height: 1.12;
}
body.landing-refresh.legal-page.security-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-section:not(.legal-section--compact) .legal-card:nth-child(6),
body.landing-refresh.legal-page.security-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-section:not(.legal-section--compact) .legal-card:nth-child(9),
body.landing-refresh.legal-page.security-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-section:not(.legal-section--compact) .legal-card:nth-child(10) {
grid-column: span 2;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 8px 14px;
}
body.landing-refresh.legal-page.security-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-section:not(.legal-section--compact) .legal-card:nth-child(6) h2,
body.landing-refresh.legal-page.security-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-section:not(.legal-section--compact) .legal-card:nth-child(6) p,
body.landing-refresh.legal-page.security-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-section:not(.legal-section--compact) .legal-card:nth-child(9) h2,
body.landing-refresh.legal-page.security-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-section:not(.legal-section--compact) .legal-card:nth-child(9) p,
body.landing-refresh.legal-page.security-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-section:not(.legal-section--compact) .legal-card:nth-child(10) h2,
body.landing-refresh.legal-page.security-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-section:not(.legal-section--compact) .legal-card:nth-child(10) p {
grid-column: 1;
}
body.landing-refresh.legal-page.security-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-section:not(.legal-section--compact) .legal-card:nth-child(6) .btn,
body.landing-refresh.legal-page.security-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-section:not(.legal-section--compact) .legal-card:nth-child(9) .btn,
body.landing-refresh.legal-page.security-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-section:not(.legal-section--compact) .legal-card:nth-child(10) .btn {
grid-column: 2;
width: 100%;
min-width: 142px;
white-space: nowrap;
}
body.landing-refresh.legal-page.privacy-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-hero {
padding-top: 18px;
padding-bottom: 6px;
}
body.landing-refresh.legal-page.privacy-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-hero__card {
gap: 9px;
padding: 24px 38px;
}
body.landing-refresh.legal-page.privacy-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-hero__card h1 {
max-width: 900px;
font-size: clamp(2.18rem, 3.28vw, 2.74rem);
line-height: 1.12;
}
body.landing-refresh.legal-page.privacy-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-hero__card p:not(.legal-updated) {
max-width: 790px;
font-size: 0.9rem;
line-height: 1.34;
}
body.landing-refresh.legal-page.privacy-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-updated {
font-size: 0.76rem;
line-height: 1.2;
}
body.landing-refresh.legal-page.privacy-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-hero .home-hero__actions {
gap: 8px;
margin-top: 0;
}
body.landing-refresh.legal-page.privacy-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-hero .home-hero__actions .btn {
min-height: 38px;
padding: 0.62rem 0.9rem;
font-size: 0.82rem;
}
body.landing-refresh.legal-page.privacy-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-section {
padding-top: 24px;
padding-bottom: 34px;
}
body.landing-refresh.legal-page.privacy-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-section > .container > .home-section__head {
display: grid;
grid-template-columns: minmax(300px, 0.62fr) minmax(0, 1fr);
align-items: center;
gap: 10px 28px;
max-width: 1102px;
margin-bottom: 14px;
text-align: left;
}
body.landing-refresh.legal-page.privacy-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-section > .container > .home-section__head .home-eyebrow,
body.landing-refresh.legal-page.privacy-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-section > .container > .home-section__head h2 {
grid-column: 1;
}
body.landing-refresh.legal-page.privacy-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-section > .container > .home-section__head h2 {
max-width: 760px;
margin: 0;
font-size: clamp(1.48rem, 2.35vw, 1.95rem);
line-height: 1.12;
}
body.landing-refresh.legal-page.privacy-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-section > .container > .home-section__head p {
grid-column: 2;
grid-row: 1 / span 2;
max-width: 66ch;
margin: 0;
font-size: 0.82rem;
line-height: 1.3;
}
body.landing-refresh.legal-page.privacy-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .privacy-matrix {
gap: 8px;
margin-top: 14px;
}
body.landing-refresh.legal-page.privacy-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .privacy-matrix__row {
grid-template-columns: minmax(120px, 0.88fr) minmax(0, 1.24fr) minmax(104px, 0.78fr) minmax(120px, 0.92fr) minmax(0, 1fr);
gap: 8px;
padding: 10px 12px;
border-radius: 12px;
}
body.landing-refresh.legal-page.privacy-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .privacy-matrix__row--head {
padding: 0 12px;
}
body.landing-refresh.legal-page.privacy-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .privacy-matrix__row span {
font-size: 0.72rem;
line-height: 1.22;
}
body.landing-refresh.legal-page.privacy-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .privacy-matrix__row--head span {
font-size: 0.62rem;
letter-spacing: 0.05em;
}
body.landing-refresh.legal-page.privacy-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .privacy-matrix__purpose {
font-size: 0.78rem;
line-height: 1.18;
}
body.landing-refresh.legal-page.privacy-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-section > .container.legal-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
}
body.landing-refresh.legal-page.privacy-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid .legal-card {
gap: 7px;
min-height: 0;
padding: 12px;
}
body.landing-refresh.legal-page.privacy-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-card h2 {
margin-bottom: 2px;
font-size: 0.9rem;
line-height: 1.14;
}
body.landing-refresh.legal-page.privacy-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-card p,
body.landing-refresh.legal-page.privacy-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-card li {
font-size: 0.74rem;
line-height: 1.22;
}
body.landing-refresh.legal-page.privacy-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-card .btn {
min-height: 34px;
width: max-content;
max-width: 100%;
padding: 0.5rem 0.68rem;
font-size: 0.74rem;
line-height: 1.12;
}
body.landing-refresh.legal-page.privacy-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid .legal-card:nth-child(5),
body.landing-refresh.legal-page.privacy-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid .legal-card:nth-child(6),
body.landing-refresh.legal-page.privacy-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid .legal-card:nth-child(8),
body.landing-refresh.legal-page.privacy-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid .legal-card:nth-child(13),
body.landing-refresh.legal-page.privacy-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid .legal-card:nth-child(14) {
grid-column: span 2;
}
body.landing-refresh.legal-page.privacy-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid .legal-card:nth-child(6),
body.landing-refresh.legal-page.privacy-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid .legal-card:nth-child(13),
body.landing-refresh.legal-page.privacy-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid .legal-card:nth-child(14) {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 8px 14px;
}
body.landing-refresh.legal-page.privacy-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid .legal-card:nth-child(6) h2,
body.landing-refresh.legal-page.privacy-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid .legal-card:nth-child(6) p,
body.landing-refresh.legal-page.privacy-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid .legal-card:nth-child(13) h2,
body.landing-refresh.legal-page.privacy-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid .legal-card:nth-child(13) p,
body.landing-refresh.legal-page.privacy-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid .legal-card:nth-child(14) h2,
body.landing-refresh.legal-page.privacy-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid .legal-card:nth-child(14) p {
grid-column: 1;
}
body.landing-refresh.legal-page.privacy-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid .legal-card:nth-child(6) .btn,
body.landing-refresh.legal-page.privacy-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid .legal-card:nth-child(13) .btn,
body.landing-refresh.legal-page.privacy-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid .legal-card:nth-child(14) .btn {
grid-column: 2;
width: 100%;
min-width: 142px;
white-space: nowrap;
}
body.landing-refresh.legal-page.legal-notice-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-hero {
padding-top: 18px;
padding-bottom: 6px;
}
body.landing-refresh.legal-page.legal-notice-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-hero__card {
gap: 9px;
padding: 24px 38px;
}
body.landing-refresh.legal-page.legal-notice-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-hero__card h1 {
max-width: 930px;
font-size: clamp(2.04rem, 3.08vw, 2.58rem);
line-height: 1.1;
}
body.landing-refresh.legal-page.legal-notice-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-hero__card p:not(.legal-updated) {
max-width: 805px;
font-size: 0.9rem;
line-height: 1.34;
}
body.landing-refresh.legal-page.legal-notice-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-updated {
font-size: 0.76rem;
line-height: 1.2;
}
body.landing-refresh.legal-page.legal-notice-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-hero .home-hero__actions {
gap: 8px;
margin-top: 0;
}
body.landing-refresh.legal-page.legal-notice-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-hero .home-hero__actions .btn {
min-height: 38px;
padding: 0.62rem 0.9rem;
font-size: 0.82rem;
}
body.landing-refresh.legal-page.legal-notice-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-section {
padding-top: 24px;
padding-bottom: 34px;
}
body.landing-refresh.legal-page.legal-notice-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-section > .container.legal-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
}
body.landing-refresh.legal-page.legal-notice-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid .legal-card {
gap: 7px;
min-height: 0;
padding: 12px;
}
body.landing-refresh.legal-page.legal-notice-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-card h2 {
margin-bottom: 2px;
font-size: 0.9rem;
line-height: 1.14;
}
body.landing-refresh.legal-page.legal-notice-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-card p,
body.landing-refresh.legal-page.legal-notice-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-card li {
font-size: 0.74rem;
line-height: 1.22;
}
body.landing-refresh.legal-page.legal-notice-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-card ul {
gap: 4px;
padding-left: 0.88rem;
}
body.landing-refresh.legal-page.legal-notice-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-card .btn {
min-height: 34px;
width: max-content;
max-width: 100%;
padding: 0.5rem 0.68rem;
font-size: 0.74rem;
line-height: 1.12;
}
body.landing-refresh.legal-page.legal-notice-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid .legal-card:nth-child(1),
body.landing-refresh.legal-page.legal-notice-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid .legal-card:nth-child(7),
body.landing-refresh.legal-page.legal-notice-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid .legal-card:nth-child(8) {
grid-column: span 2;
}
body.landing-refresh.legal-page.legal-notice-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid .legal-card:nth-child(7),
body.landing-refresh.legal-page.legal-notice-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid .legal-card:nth-child(8) {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 8px 14px;
}
body.landing-refresh.legal-page.legal-notice-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid .legal-card:nth-child(7) h2,
body.landing-refresh.legal-page.legal-notice-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid .legal-card:nth-child(7) p,
body.landing-refresh.legal-page.legal-notice-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid .legal-card:nth-child(8) h2,
body.landing-refresh.legal-page.legal-notice-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid .legal-card:nth-child(8) p {
grid-column: 1;
}
body.landing-refresh.legal-page.legal-notice-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid .legal-card:nth-child(7) .btn,
body.landing-refresh.legal-page.legal-notice-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid .legal-card:nth-child(8) .btn {
grid-column: 2;
width: 100%;
min-width: 142px;
white-space: nowrap;
}
body.landing-refresh.legal-page.terms-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-hero {
padding-top: 18px;
padding-bottom: 6px;
}
body.landing-refresh.legal-page.terms-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-hero__card {
gap: 9px;
padding: 24px 38px;
}
body.landing-refresh.legal-page.terms-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-hero__card h1 {
max-width: 920px;
font-size: clamp(2.04rem, 3.08vw, 2.58rem);
line-height: 1.1;
}
body.landing-refresh.legal-page.terms-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-hero__card p:not(.legal-updated) {
max-width: 805px;
font-size: 0.9rem;
line-height: 1.34;
}
body.landing-refresh.legal-page.terms-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-updated {
font-size: 0.76rem;
line-height: 1.2;
}
body.landing-refresh.legal-page.terms-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-hero .home-hero__actions {
gap: 8px;
margin-top: 0;
}
body.landing-refresh.legal-page.terms-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-hero .home-hero__actions .btn {
min-height: 38px;
padding: 0.62rem 0.9rem;
font-size: 0.82rem;
}
body.landing-refresh.legal-page.terms-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-section {
padding-top: 24px;
padding-bottom: 34px;
}
body.landing-refresh.legal-page.terms-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-section > .container.legal-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
}
body.landing-refresh.legal-page.terms-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid .legal-card {
gap: 7px;
min-height: 0;
padding: 12px;
}
body.landing-refresh.legal-page.terms-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-card h2 {
margin-bottom: 2px;
font-size: 0.9rem;
line-height: 1.14;
}
body.landing-refresh.legal-page.terms-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-card p,
body.landing-refresh.legal-page.terms-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-card li {
font-size: 0.74rem;
line-height: 1.22;
}
body.landing-refresh.legal-page.terms-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-card .btn {
min-height: 34px;
width: max-content;
max-width: 100%;
padding: 0.5rem 0.68rem;
font-size: 0.74rem;
line-height: 1.12;
}
body.landing-refresh.legal-page.terms-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid .legal-card:nth-child(1),
body.landing-refresh.legal-page.terms-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid .legal-card:nth-child(4),
body.landing-refresh.legal-page.terms-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid .legal-card:nth-child(7),
body.landing-refresh.legal-page.terms-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid .legal-card:nth-child(8) {
grid-column: span 2;
}
body.landing-refresh.legal-page.terms-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid .legal-card:nth-child(4),
body.landing-refresh.legal-page.terms-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid .legal-card:nth-child(7),
body.landing-refresh.legal-page.terms-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid .legal-card:nth-child(8) {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 8px 14px;
}
body.landing-refresh.legal-page.terms-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid .legal-card:nth-child(4) h2,
body.landing-refresh.legal-page.terms-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid .legal-card:nth-child(4) p,
body.landing-refresh.legal-page.terms-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid .legal-card:nth-child(7) h2,
body.landing-refresh.legal-page.terms-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid .legal-card:nth-child(7) p,
body.landing-refresh.legal-page.terms-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid .legal-card:nth-child(8) h2,
body.landing-refresh.legal-page.terms-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid .legal-card:nth-child(8) p {
grid-column: 1;
}
body.landing-refresh.legal-page.terms-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid .legal-card:nth-child(4) .btn,
body.landing-refresh.legal-page.terms-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid .legal-card:nth-child(7) .btn,
body.landing-refresh.legal-page.terms-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid .legal-card:nth-child(8) .btn {
grid-column: 2;
width: 100%;
min-width: 142px;
white-space: nowrap;
}
body.landing-refresh.legal-page.dpa-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-hero {
padding-top: 18px;
padding-bottom: 6px;
}
body.landing-refresh.legal-page.dpa-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-hero__card {
gap: 9px;
padding: 24px 38px;
}
body.landing-refresh.legal-page.dpa-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-hero__card h1 {
max-width: 940px;
font-size: clamp(2.04rem, 3.06vw, 2.56rem);
line-height: 1.16;
min-height: 84px;
}
body.landing-refresh.legal-page.dpa-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-hero__card p:not(.legal-updated) {
max-width: 840px;
font-size: 0.9rem;
line-height: 1.34;
}
body.landing-refresh.legal-page.dpa-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-updated {
font-size: 0.76rem;
line-height: 1.2;
}
body.landing-refresh.legal-page.dpa-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-hero .home-hero__actions {
gap: 8px;
margin-top: 0;
}
body.landing-refresh.legal-page.dpa-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-hero .home-hero__actions .btn {
min-height: 38px;
padding: 0.62rem 0.9rem;
font-size: 0.82rem;
}
body.landing-refresh.legal-page.dpa-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-section {
padding-top: 24px;
padding-bottom: 34px;
}
body.landing-refresh.legal-page.dpa-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-section > .container.legal-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
}
body.landing-refresh.legal-page.dpa-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid .legal-card {
gap: 7px;
min-height: 0;
padding: 12px;
}
body.landing-refresh.legal-page.dpa-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-card h2 {
margin-bottom: 2px;
font-size: 0.9rem;
line-height: 1.14;
}
body.landing-refresh.legal-page.dpa-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-card p,
body.landing-refresh.legal-page.dpa-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-card li {
font-size: 0.73rem;
line-height: 1.2;
}
body.landing-refresh.legal-page.dpa-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-card ul {
gap: 3px;
padding-left: 0.9rem;
}
body.landing-refresh.legal-page.dpa-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-card .btn {
min-height: 34px;
width: max-content;
max-width: 100%;
padding: 0.5rem 0.68rem;
font-size: 0.74rem;
line-height: 1.12;
}
body.landing-refresh.legal-page.dpa-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid .legal-card:nth-child(1),
body.landing-refresh.legal-page.dpa-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid .legal-card:nth-child(2),
body.landing-refresh.legal-page.dpa-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid .legal-card:nth-child(3),
body.landing-refresh.legal-page.dpa-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid .legal-card:nth-child(6),
body.landing-refresh.legal-page.dpa-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid .legal-card:nth-child(7),
body.landing-refresh.legal-page.dpa-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid .legal-card:nth-child(8),
body.landing-refresh.legal-page.dpa-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid .legal-card:nth-child(9) {
grid-column: span 2;
}
body.landing-refresh.legal-page.dpa-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid .legal-card:nth-child(6),
body.landing-refresh.legal-page.dpa-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid .legal-card:nth-child(7),
body.landing-refresh.legal-page.dpa-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid .legal-card:nth-child(8),
body.landing-refresh.legal-page.dpa-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid .legal-card:nth-child(9) {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 8px 14px;
}
body.landing-refresh.legal-page.dpa-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid .legal-card:nth-child(6) h2,
body.landing-refresh.legal-page.dpa-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid .legal-card:nth-child(6) p,
body.landing-refresh.legal-page.dpa-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid .legal-card:nth-child(7) h2,
body.landing-refresh.legal-page.dpa-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid .legal-card:nth-child(7) p,
body.landing-refresh.legal-page.dpa-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid .legal-card:nth-child(8) h2,
body.landing-refresh.legal-page.dpa-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid .legal-card:nth-child(8) p,
body.landing-refresh.legal-page.dpa-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid .legal-card:nth-child(9) h2,
body.landing-refresh.legal-page.dpa-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid .legal-card:nth-child(9) p {
grid-column: 1;
}
body.landing-refresh.legal-page.dpa-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid .legal-card:nth-child(6) .btn,
body.landing-refresh.legal-page.dpa-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid .legal-card:nth-child(7) .btn,
body.landing-refresh.legal-page.dpa-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid .legal-card:nth-child(8) .btn,
body.landing-refresh.legal-page.dpa-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid .legal-card:nth-child(9) .btn {
grid-column: 2;
width: 100%;
min-width: 142px;
white-space: nowrap;
}
body.landing-refresh.legal-page.cookies-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-hero {
padding-top: 18px;
padding-bottom: 6px;
}
body.landing-refresh.legal-page.cookies-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-hero__card {
gap: 9px;
padding: 24px 38px;
}
body.landing-refresh.legal-page.cookies-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-hero__card h1 {
max-width: 880px;
font-size: clamp(2.04rem, 3.08vw, 2.58rem);
line-height: 1.16;
min-height: 90px;
}
body.landing-refresh.legal-page.cookies-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-hero__card p:not(.legal-updated) {
max-width: 820px;
font-size: 0.9rem;
line-height: 1.34;
}
body.landing-refresh.legal-page.cookies-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-updated {
font-size: 0.76rem;
line-height: 1.2;
}
body.landing-refresh.legal-page.cookies-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-section {
padding-top: 24px;
padding-bottom: 34px;
}
body.landing-refresh.legal-page.cookies-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-section > .container.legal-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
}
body.landing-refresh.legal-page.cookies-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid .legal-card {
gap: 7px;
min-height: 0;
padding: 12px;
}
body.landing-refresh.legal-page.cookies-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-card h2 {
margin-bottom: 2px;
font-size: 0.9rem;
line-height: 1.14;
}
body.landing-refresh.legal-page.cookies-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-card p,
body.landing-refresh.legal-page.cookies-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-card li {
font-size: 0.73rem;
line-height: 1.2;
}
body.landing-refresh.legal-page.cookies-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-card ul {
gap: 3px;
padding-left: 0.9rem;
}
body.landing-refresh.legal-page.cookies-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-card code {
font-size: 0.8em;
line-height: 1.1;
}
body.landing-refresh.legal-page.cookies-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-card .btn {
min-height: 34px;
width: max-content;
max-width: 100%;
padding: 0.5rem 0.68rem;
font-size: 0.74rem;
line-height: 1.12;
}
body.landing-refresh.legal-page.cookies-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid .legal-card:nth-child(1),
body.landing-refresh.legal-page.cookies-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid .legal-card:nth-child(2),
body.landing-refresh.legal-page.cookies-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid .legal-card:nth-child(5),
body.landing-refresh.legal-page.cookies-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid .legal-card:nth-child(8) {
grid-column: span 2;
}
body.landing-refresh.legal-page.cookies-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid .legal-card:nth-child(1),
body.landing-refresh.legal-page.cookies-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid .legal-card:nth-child(8) {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 8px 14px;
}
body.landing-refresh.legal-page.cookies-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid .legal-card:nth-child(1) h2,
body.landing-refresh.legal-page.cookies-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid .legal-card:nth-child(1) p,
body.landing-refresh.legal-page.cookies-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid .legal-card:nth-child(8) h2,
body.landing-refresh.legal-page.cookies-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid .legal-card:nth-child(8) p {
grid-column: 1;
}
body.landing-refresh.legal-page.cookies-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid .legal-card:nth-child(1) .btn,
body.landing-refresh.legal-page.cookies-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .legal-grid .legal-card:nth-child(8) .btn {
grid-column: 2;
width: 100%;
min-width: 142px;
white-space: nowrap;
}
}
/* iPad 11 landscape polish for dedicated industry SEO pages. */
@media (min-width: 1000px) and (max-width: 1220px) and (orientation: landscape) {
body.landing-refresh.industry-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-section--split {
padding-top: 28px !important;
padding-bottom: 34px !important;
}
body.landing-refresh.industry-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-section--split .home-split {
display: grid !important;
grid-template-columns: minmax(0, 1.14fr) minmax(300px, 0.86fr) !important;
align-items: center !important;
gap: 24px !important;
}
body.landing-refresh.industry-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-section--split .home-section__head {
max-width: 680px !important;
margin-bottom: 14px !important;
gap: 8px !important;
}
body.landing-refresh.industry-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-section--split .home-section__head h2 {
max-width: 18ch !important;
margin-bottom: 6px !important;
font-size: clamp(1.9rem, 2.9vw, 2.42rem) !important;
line-height: 1.03 !important;
letter-spacing: 0 !important;
text-wrap: balance;
}
body.landing-refresh.industry-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-section--split .home-section__head p {
max-width: 62ch !important;
font-size: 0.9rem !important;
line-height: 1.38 !important;
}
body.landing-refresh.industry-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-section--split .home-demo-grid {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 10px !important;
}
body.landing-refresh.industry-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-section--split .home-demo-grid article {
min-height: 112px !important;
gap: 7px !important;
padding: 14px !important;
border-radius: 8px !important;
}
body.landing-refresh.industry-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-section--split .home-demo-grid article span {
margin-bottom: 3px !important;
font-size: 0.66rem !important;
line-height: 1.1 !important;
}
body.landing-refresh.industry-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-section--split .home-demo-grid article h3 {
margin: 0 !important;
font-size: 0.96rem !important;
line-height: 1.12 !important;
letter-spacing: 0 !important;
}
body.landing-refresh.industry-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-section--split .home-demo-grid article p {
display: none !important;
}
body.landing-refresh.industry-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-section--split .home-phone {
width: 100% !important;
max-width: 360px !important;
justify-self: end !important;
padding: 12px !important;
border-radius: 28px !important;
}
body.landing-refresh.industry-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-section--split .home-phone__screen {
padding: 15px !important;
border-radius: 22px !important;
}
body.landing-refresh.industry-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-section--split .home-phone__header {
margin-bottom: 10px !important;
padding-bottom: 9px !important;
gap: 5px !important;
}
body.landing-refresh.industry-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-section--split .home-phone__header strong {
font-size: 0.92rem !important;
line-height: 1.14 !important;
}
body.landing-refresh.industry-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-section--split .home-phone__header small {
font-size: 0.76rem !important;
line-height: 1.2 !important;
}
body.landing-refresh.industry-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-section--split .home-phone__bubble {
max-width: 95% !important;
padding: 10px 11px !important;
font-size: 0.8rem !important;
line-height: 1.34 !important;
}
body.landing-refresh.industry-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-section--split .home-phone__bubble + .home-phone__bubble {
margin-top: 7px !important;
}
body.landing-refresh.industry-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-section--split .home-phone__result {
margin-top: 10px !important;
padding: 11px !important;
border-radius: 16px !important;
}
body.landing-refresh.industry-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-section--split .home-phone__result span {
font-size: 0.66rem !important;
line-height: 1.15 !important;
}
body.landing-refresh.industry-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-section--split .home-phone__result strong {
font-size: 0.82rem !important;
line-height: 1.22 !important;
}
body.landing-refresh.industry-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-cta__card {
grid-template-columns: minmax(0, 1fr) minmax(280px, 0.78fr) !important;
gap: 20px !important;
padding: 24px !important;
}
body.landing-refresh.industry-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-cta__actions {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 8px !important;
}
body.landing-refresh.industry-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-cta__actions .btn {
width: 100% !important;
min-height: 40px !important;
padding: 0.66rem 0.7rem !important;
font-size: 0.82rem !important;
line-height: 1.12 !important;
}
}
/* Décroche.ai — responsive téléphone (portrait ≤ 640px) pour toutes les pages.
Chargé après style.css et les fichiers iPad, même convention : petit fichier
dédié, rapide à itérer. Objectif : zéro débordement horizontal, aucun texte
collé aux bords, confort tactile. */
@media (max-width: 640px) {
/* ------------------------------------------------------------------ */
/* Garde-fous globaux anti-débordement */
/* ------------------------------------------------------------------ */
/* `clip` coupe le débordement sans créer de conteneur de défilement :
avec `hidden`, la spec force overflow-y en `auto` et le body devient
un scroller imbriqué (casse le scroll naturel et le sticky sur iOS). */
html,
body {
max-width: 100vw;
overflow-x: clip;
}
img,
svg,
video,
canvas,
iframe {
max-width: 100%;
height: auto;
}
/* Mots insécables (URL, e-mails, identifiants) : casser plutôt que déborder. */
p,
li,
dd,
dt,
td,
th,
small,
figcaption,
blockquote,
summary {
overflow-wrap: break-word;
}
a,
code,
kbd {
overflow-wrap: anywhere;
word-break: break-word;
}
pre {
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
table {
display: block;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* ------------------------------------------------------------------ */
/* Respiration minimale aux bords de l'écran */
/* ------------------------------------------------------------------ */
.container {
padding-inline: max(16px, env(safe-area-inset-left)) !important;
}
/* ------------------------------------------------------------------ */
/* Accueil : fond bleu nuit uni, plus de halo turquoise */
/* Sur téléphone les panneaux sont en pleine largeur : le dégradé */
/* vert-bleu du fond transparaissait sur les bords et entre les */
/* sections — on aplatit tout en bleu nuit, comme si marge 0. */
/* ------------------------------------------------------------------ */
body.landing-refresh.home-gateway-page:not(.app-shell),
body.home-gateway-page {
background: linear-gradient(180deg, #0a0f1f 0%, #0b1020 100%) !important;
}
body.home-gateway-page .home-intake-hero {
background: none !important;
}
/* ------------------------------------------------------------------ */
/* Accueil : les sections perdent leur cadre « carte » */
/* Sur téléphone la bordure 1px colle aux bords de l'écran et au texte */
/* (aucun padding horizontal) : on retire le cadre et on aère le rythme */
/* vertical pour que les sections ne s'empiètent pas. */
/* ------------------------------------------------------------------ */
body.home-gateway-page .home-premium-hero--solo,
body.home-gateway-page .home-product-intro,
body.home-gateway-page .home-site-gateway.home-discovery-sections,
body.home-gateway-page .home-homepage-section,
body.home-gateway-page .home-dashboard-story,
body.home-gateway-page .home-integration-flow,
body.home-gateway-page .home-trust-panel,
body.home-gateway-page .home-faq-panel,
body.home-gateway-page #create-agent {
border: 0 !important;
box-shadow: none !important;
background-clip: padding-box;
}
/* Bandes pleine largeur : les panneaux sombres flottaient sur le halo
turquoise du fond avec des gouttières de 20px — en pleine largeur,
plus de gouttières, et un padding interne uniforme aligne les textes. */
body.home-gateway-page .home-premium-hero--solo,
body.home-gateway-page .home-product-intro,
body.home-gateway-page .home-site-gateway.home-discovery-sections,
body.home-gateway-page .home-homepage-section,
body.home-gateway-page #create-agent {
width: 100vw !important;
max-width: none !important;
justify-self: start;
margin-inline: calc(50% - 50vw) 0 !important;
border-radius: 0 !important;
padding-inline: 20px !important;
}
body.home-gateway-page .home-homepage-section,
body.home-gateway-page .home-product-intro,
body.home-gateway-page .home-site-gateway.home-discovery-sections {
padding-block: 34px !important;
}
/* ------------------------------------------------------------------ */
/* Accueil : bandeau démo vocale (grille 2 colonnes → pile verticale) */
/* ------------------------------------------------------------------ */
body.home-gateway-page .home-voice-demo-strip {
grid-template-columns: minmax(0, 1fr);
}
body.home-gateway-page .home-voice-demo-strip__flow {
grid-template-columns: minmax(0, 1fr);
}
/* ------------------------------------------------------------------ */
/* Tarifs : la carte plan est un flex ligne, le bloc quotas se tassait */
/* à mi-largeur avec un vide à droite — pile verticale + quotas 2×2. */
/* ------------------------------------------------------------------ */
body.pricing-page .pricing-plan {
flex-direction: column;
}
body.pricing-page .pricing-plan__meter {
width: 100%;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
/* ------------------------------------------------------------------ */
/* Textes tronqués (…) : le clamp égalise les hauteurs de cartes en */
/* grille desktop ; empilées au téléphone, il cache juste du contenu. */
/* ------------------------------------------------------------------ */
body.landing-refresh:not(.home-gateway-page) .pricing-clarity-card p,
body.landing-refresh:not(.home-gateway-page) .pricing-driver p,
body.landing-refresh:not(.home-gateway-page) .home-faq-grid article p,
body.landing-refresh.legal-page:not(.app-shell) .legal-hero p,
body.vertical-page:not(.home-gateway-page) .vertical-hero__copy p,
body.vertical-page:not(.home-gateway-page) .vertical-integrations-grid article p,
body.vertical-page:not(.home-gateway-page) .home-faq-grid article p,
body.home-gateway-page .home-gateway .home-gateway-intro p,
body.support-page .legal-grid--support .legal-card p,
body.security-page .legal-grid .legal-card p,
body.security-page .legal-grid .legal-card li {
display: block !important;
-webkit-line-clamp: unset !important;
overflow: visible !important;
max-height: none !important;
}
/* ------------------------------------------------------------------ */
/* Nav des pages métier : rangée défilante, fin de course aérée */
/* ------------------------------------------------------------------ */
body.vertical-page:not(.home-gateway-page) .vertical-page-nav__inner {
padding-inline: 14px !important;
scroll-padding-inline: 14px;
}
/* ------------------------------------------------------------------ */
/* Confort tactile et lisibilité */
/* ------------------------------------------------------------------ */
/* iOS zoome sur les champs < 16px : on garantit le seuil. */
input,
select,
textarea {
font-size: max(16px, 1em);
}
button,
.btn,
a.btn {
min-height: 44px;
}
}
/* Barre de navigation basse du dashboard : sur les petits écrans, les
puces fixes de 84px ne tiennent pas à 4 dans la barre (elle défile et
coupe le dernier onglet). On compacte pour que 4 onglets tiennent. */
@media (max-width: 420px) {
html.app-mobile-shell body.app-shell .menu {
gap: 6px !important;
padding: 8px !important;
}
html.app-mobile-shell body.app-shell .menu a,
html.app-mobile-shell body.app-shell .menu .menu-icon-link,
html.app-mobile-shell body.app-shell .menu .public-menu-link {
flex: 1 1 72px !important;
width: auto !important;
min-width: 72px !important;
}
}
/* ====================================================================== */
/* Dashboard sur téléphone : ajustements par page (chargé après les */
/* styles inline des templates, d'où les sélecteurs préfixés par body). */
/* ====================================================================== */
@media (max-width: 640px) {
/* --- Pilotage restaurant ------------------------------------------ */
/* Horaires : 4 champs heure sur une ligne tronquaient les valeurs.
Le jour prend sa ligne, puis début/fin par paires en 2 colonnes. */
.restaurant-page .rp-hours-row {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 8px !important;
}
.restaurant-page .rp-hours-row > span:first-child {
grid-column: 1 / -1;
margin-bottom: 2px;
}
.restaurant-page .rp-hours-row--head {
display: none !important;
}
.restaurant-page .rp-hours-row input[type="time"] {
min-width: 0;
width: 100%;
}
/* Pilules de mode : trois par ligne coupaient « Rush / forte
affluence » — deux par ligne, lisibles. */
.restaurant-page .rp-pill {
flex: 1 1 calc(50% - 10px) !important;
}
/* --- Agent : panneau santé ---------------------------------------- */
/* Le badge d'état de la ligne s'aligne sous le titre au lieu de
flotter seul à droite avec un grand vide. */
body.app-shell .agent-health-panel__tools {
justify-content: flex-start !important;
}
/* --- Test de l'agent ------------------------------------------------ */
/* ~190px de marge héritée du desktop entre le bandeau et la
conversation de validation. */
.test-agent-page .test-agent-layout {
margin-top: 16px !important;
}
}
.public-vertical-tabs {
padding: clamp(22px, 4vw, 34px) 0;
background:
linear-gradient(180deg, rgba(6, 12, 26, 0), rgba(12, 22, 44, 0.44) 42%, rgba(6, 12, 26, 0));
}
.public-vertical-tabs__shell {
display: grid;
gap: 18px;
padding: clamp(18px, 2.6vw, 26px);
border: 1px solid rgba(214, 179, 94, 0.22);
border-radius: 24px;
background:
linear-gradient(135deg, rgba(214, 179, 94, 0.12), rgba(37, 99, 235, 0.08) 42%, rgba(8, 15, 30, 0.88)),
rgba(8, 15, 30, 0.86);
box-shadow: 0 22px 54px rgba(2, 6, 23, 0.22);
}
.public-vertical-tabs__head {
display: flex;
align-items: end;
justify-content: space-between;
gap: 18px;
}
.public-vertical-tabs__head h2 {
max-width: 720px;
margin: 0.35rem 0 0;
color: #f8fafc;
font-size: clamp(1.45rem, 2.3vw, 2.15rem);
letter-spacing: 0;
line-height: 1.08;
}
.public-vertical-tabs__head p {
max-width: 62ch;
margin: 0.55rem 0 0;
color: rgba(226, 232, 240, 0.76);
line-height: 1.58;
}
.public-vertical-tabs__badge {
display: inline-flex;
min-width: fit-content;
align-items: center;
gap: 8px;
padding: 9px 12px;
border: 1px solid rgba(214, 179, 94, 0.26);
border-radius: 999px;
background: rgba(214, 179, 94, 0.12);
color: #fde68a;
font-size: 0.78rem;
font-weight: 900;
text-transform: uppercase;
}
.public-vertical-tabs__nav {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 10px;
}
.public-vertical-tabs__nav a {
display: grid;
min-height: 76px;
align-content: center;
gap: 5px;
padding: 13px 14px;
border: 1px solid rgba(148, 163, 184, 0.16);
border-radius: 16px;
background: rgba(15, 23, 42, 0.62);
color: rgba(226, 232, 240, 0.84);
text-decoration: none;
transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.public-vertical-tabs__nav a:hover,
.public-vertical-tabs__nav a:focus-visible,
.public-vertical-tabs__nav a.is-active {
transform: translateY(-1px);
border-color: rgba(214, 179, 94, 0.5);
background: linear-gradient(135deg, rgba(214, 179, 94, 0.18), rgba(59, 130, 246, 0.14));
color: #fff7df;
outline: none;
}
.public-vertical-tabs__nav strong {
color: inherit;
font-size: 0.95rem;
line-height: 1.1;
}
.public-vertical-tabs__nav small {
color: rgba(226, 232, 240, 0.66);
font-size: 0.78rem;
line-height: 1.35;
}
.public-vertical-tabs__nav a.is-active small {
color: rgba(254, 243, 199, 0.78);
}
body[data-theme="light"] .public-vertical-tabs {
background: linear-gradient(180deg, rgba(248, 250, 252, 0), rgba(239, 246, 255, 0.76), rgba(248, 250, 252, 0));
}
body[data-theme="light"] .public-vertical-tabs__shell {
border-color: rgba(180, 138, 39, 0.24);
background:
linear-gradient(135deg, rgba(214, 179, 94, 0.14), rgba(37, 99, 235, 0.08) 42%, rgba(255, 255, 255, 0.92)),
rgba(255, 255, 255, 0.9);
box-shadow: 0 18px 42px rgba(15, 23, 42, 0.12);
}
body[data-theme="light"] .public-vertical-tabs__head h2 {
color: #0f172a;
}
body[data-theme="light"] .public-vertical-tabs__head p {
color: rgba(15, 23, 42, 0.68);
}
body[data-theme="light"] .public-vertical-tabs__badge {
color: #7c5b13;
}
body[data-theme="light"] .public-vertical-tabs__nav a {
border-color: rgba(15, 23, 42, 0.1);
background: rgba(255, 255, 255, 0.78);
color: #1e293b;
}
body[data-theme="light"] .public-vertical-tabs__nav a:hover,
body[data-theme="light"] .public-vertical-tabs__nav a:focus-visible,
body[data-theme="light"] .public-vertical-tabs__nav a.is-active {
border-color: rgba(180, 138, 39, 0.44);
background: linear-gradient(135deg, rgba(254, 243, 199, 0.8), rgba(219, 234, 254, 0.82));
color: #0f172a;
}
body[data-theme="light"] .public-vertical-tabs__nav small {
color: rgba(15, 23, 42, 0.56);
}
@media (max-width: 980px) {
.public-vertical-tabs__head {
align-items: start;
flex-direction: column;
}
}
@media (min-width: 721px) and (max-width: 980px) {
.public-vertical-tabs__nav {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.public-vertical-tabs__nav a {
min-width: 0;
min-height: 72px;
}
}
@media (max-width: 720px) {
.public-vertical-tabs__shell {
overflow: hidden;
}
.public-vertical-tabs__nav {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
width: 100%;
min-width: 0;
overflow: visible;
padding-bottom: 0;
scroll-snap-type: none;
}
.public-vertical-tabs__nav::-webkit-scrollbar {
display: none;
}
.public-vertical-tabs__nav a {
min-width: 0;
min-height: 66px;
padding: 11px 10px;
scroll-snap-align: unset;
}
.public-vertical-tabs__nav strong {
font-size: 0.84rem;
}
.public-vertical-tabs__nav small {
font-size: 0.72rem;
line-height: 1.25;
}
}
/* ==========================================================================
Thème public « motion » — aligne toutes les pages publiques sur la DA de la
nouvelle home (nuit profonde, or, verre, profondeur).
Scope strict : body.landing-refresh (pages publiques) et .auth-shell (auth).
Les pages privées (dashboard, admin) ne portent pas ces classes.
========================================================================== */
:root {
--pm-ink: #f8fbff;
--pm-muted: #c3cbe0;
--pm-soft: rgba(204, 214, 235, 0.78);
--pm-line: rgba(130, 158, 205, 0.2);
--pm-line-gold: rgba(239, 211, 143, 0.4);
--pm-gold: #f3d58a;
--pm-gold-strong: #ffefb7;
--pm-glass: rgba(9, 17, 38, 0.72);
--pm-shadow: 0 30px 90px rgba(0, 3, 12, 0.55);
--pm-grad-cta: linear-gradient(135deg, #ffe9a6 0%, #99d7ff 58%, #6b7dff 100%);
--pm-grad-gold-text: linear-gradient(100deg, #fff3c4 10%, #f3d58a 45%, #ffd766 60%, #ffefb7 90%);
--pm-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
/* ---------- Fond de nuit continu + constellation (thème sombre) ---------- */
body.landing-refresh:not([data-theme="light"]) {
background:
radial-gradient(140% 90% at 78% -12%, rgba(107, 125, 255, 0.12), transparent 55%),
radial-gradient(120% 100% at -8% 108%, rgba(102, 216, 255, 0.07), transparent 55%),
linear-gradient(180deg, #030815 0%, #050b1e 40%, #03070f 100%);
background-attachment: fixed;
}
body.landing-refresh:not([data-theme="light"])::before {
content: "";
position: fixed; inset: 0; z-index: -1; pointer-events: none;
background-image:
radial-gradient(1.2px 1.2px at 12% 24%, rgba(248, 251, 255, 0.45), transparent 100%),
radial-gradient(1px 1px at 34% 68%, rgba(248, 251, 255, 0.3), transparent 100%),
radial-gradient(1.4px 1.4px at 58% 12%, rgba(255, 239, 183, 0.35), transparent 100%),
radial-gradient(1px 1px at 71% 47%, rgba(248, 251, 255, 0.28), transparent 100%),
radial-gradient(1.2px 1.2px at 86% 78%, rgba(102, 216, 255, 0.32), transparent 100%),
radial-gradient(1px 1px at 22% 88%, rgba(248, 251, 255, 0.26), transparent 100%);
background-size: 920px 760px;
opacity: 0.7;
}
/* ---------- Typographie ---------- */
body.landing-refresh h1,
body.landing-refresh h2 {
letter-spacing: -0.015em;
text-wrap: balance;
}
/* ---------- Boutons partagés ---------- */
body.landing-refresh .btn-primary {
color: #091225;
background: var(--pm-grad-cta);
border: 1px solid rgba(255, 239, 183, 0.74);
box-shadow: 0 14px 44px rgba(102, 216, 255, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.55);
transition: transform 0.3s var(--pm-ease), box-shadow 0.3s var(--pm-ease);
}
body.landing-refresh .btn-primary:hover {
color: #091225;
background: var(--pm-grad-cta);
transform: translateY(-2px);
box-shadow: 0 22px 60px rgba(102, 216, 255, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
body.landing-refresh:not([data-theme="light"]) .btn-secondary {
color: var(--pm-ink);
border: 1px solid var(--pm-line);
background: rgba(255, 255, 255, 0.04);
transition: transform 0.3s var(--pm-ease), border-color 0.3s, background 0.3s;
}
body.landing-refresh:not([data-theme="light"]) .btn-secondary:hover {
border-color: rgba(239, 211, 143, 0.45);
background: rgba(255, 255, 255, 0.07);
transform: translateY(-2px);
}
body.landing-refresh:not([data-theme="light"]) .btn-tertiary {
color: var(--pm-gold-strong);
background: transparent;
border: 1px solid transparent;
}
body.landing-refresh:not([data-theme="light"]) .btn-tertiary:hover {
border-color: var(--pm-line-gold);
background: rgba(243, 213, 138, 0.07);
}
/* ---------- Eyebrows ---------- */
body.landing-refresh:not([data-theme="light"]) .home-eyebrow {
color: var(--pm-gold-strong);
border-color: var(--pm-line-gold);
background: linear-gradient(135deg, rgba(243, 213, 138, 0.14), rgba(102, 216, 255, 0.06)), rgba(10, 18, 39, 0.8);
letter-spacing: 0.14em;
text-transform: uppercase;
}
/* ---------- Cartes ---------- */
body.landing-refresh:not([data-theme="light"]) .legal-card,
body.landing-refresh:not([data-theme="light"]) .home-demo-grid article {
border: 1px solid transparent;
background:
linear-gradient(var(--pm-glass), var(--pm-glass)) padding-box,
linear-gradient(135deg, rgba(243, 213, 138, 0.35), rgba(130, 158, 205, 0.16) 40%, rgba(102, 216, 255, 0.24)) border-box;
box-shadow: var(--pm-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.07);
transition: transform 0.35s var(--pm-ease), box-shadow 0.35s var(--pm-ease);
}
body.landing-refresh:not([data-theme="light"]) .legal-card--highlight {
background:
linear-gradient(rgba(15, 26, 52, 0.85), rgba(15, 26, 52, 0.85)) padding-box,
linear-gradient(135deg, rgba(243, 213, 138, 0.55), rgba(102, 216, 255, 0.32)) border-box;
}
@media (hover: hover) {
body.landing-refresh:not([data-theme="light"]) .home-demo-grid article:hover {
transform: translateY(-4px);
}
}
/* ---------- Focus clavier ---------- */
body.landing-refresh :focus-visible {
outline: 2px solid var(--pm-gold);
outline-offset: 3px;
border-radius: 6px;
}
/* ---------- Formulaires publics (démo, contact, calculateur) ---------- */
body.landing-refresh:not([data-theme="light"]) input[type="text"],
body.landing-refresh:not([data-theme="light"]) input[type="email"],
body.landing-refresh:not([data-theme="light"]) input[type="tel"],
body.landing-refresh:not([data-theme="light"]) input[type="password"],
body.landing-refresh:not([data-theme="light"]) input[type="number"],
body.landing-refresh:not([data-theme="light"]) select,
body.landing-refresh:not([data-theme="light"]) textarea {
color: var(--pm-ink);
border: 1px solid var(--pm-line);
background: rgba(255, 255, 255, 0.045);
border-radius: 12px;
transition: border-color 0.25s, box-shadow 0.25s;
}
body.landing-refresh:not([data-theme="light"]) input:focus,
body.landing-refresh:not([data-theme="light"]) select:focus,
body.landing-refresh:not([data-theme="light"]) textarea:focus {
border-color: rgba(102, 216, 255, 0.45);
box-shadow: 0 0 0 3px rgba(102, 216, 255, 0.09);
outline: none;
}
body.landing-refresh:not([data-theme="light"]) ::placeholder {
color: rgba(195, 203, 224, 0.5);
}
/* =========================================================
AUTH (connexion / inscription / mot de passe)
========================================================= */
.auth-shell {
position: relative;
}
.auth-shell::before {
content: "";
position: absolute; top: -8%; left: 50%; transform: translateX(-50%);
width: min(560px, 90vw); aspect-ratio: 1; border-radius: 50%;
background: radial-gradient(circle, rgba(102, 216, 255, 0.1), rgba(243, 213, 138, 0.05) 45%, transparent 70%);
filter: blur(6px);
pointer-events: none;
}
body:not([data-theme="light"]) .auth-card {
border: 1px solid transparent;
background:
linear-gradient(rgba(9, 17, 38, 0.85), rgba(9, 17, 38, 0.85)) padding-box,
linear-gradient(135deg, rgba(243, 213, 138, 0.42), rgba(130, 158, 205, 0.18) 40%, rgba(102, 216, 255, 0.28)) border-box;
box-shadow: var(--pm-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.08);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
}
body:not([data-theme="light"]) .auth-eyebrow {
color: var(--pm-gold-strong);
letter-spacing: 0.2em;
text-transform: uppercase;
}
body:not([data-theme="light"]) .auth-title {
background: var(--pm-grad-gold-text);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
letter-spacing: -0.015em;
}
body:not([data-theme="light"]) .auth-subtitle {
color: var(--pm-muted);
}
body:not([data-theme="light"]) .auth-card .btn,
body:not([data-theme="light"]) .auth-card button[type="submit"] {
color: #091225;
background: var(--pm-grad-cta);
border: 1px solid rgba(255, 239, 183, 0.74);
box-shadow: 0 14px 44px rgba(102, 216, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.55);
font-weight: 800;
transition: transform 0.3s var(--pm-ease), box-shadow 0.3s var(--pm-ease);
}
body:not([data-theme="light"]) .auth-card .btn:hover,
body:not([data-theme="light"]) .auth-card button[type="submit"]:hover {
transform: translateY(-2px);
box-shadow: 0 20px 56px rgba(102, 216, 255, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
body:not([data-theme="light"]) .auth-card .form-group input {
color: var(--pm-ink);
border: 1px solid var(--pm-line);
background: rgba(255, 255, 255, 0.045);
border-radius: 12px;
min-height: 48px;
}
body:not([data-theme="light"]) .auth-card .form-group input:focus {
border-color: rgba(102, 216, 255, 0.45);
box-shadow: 0 0 0 3px rgba(102, 216, 255, 0.09);
outline: none;
}
body:not([data-theme="light"]) .auth-errors {
border: 1px solid rgba(255, 120, 120, 0.4);
background: rgba(255, 96, 96, 0.09);
border-radius: 12px;
}
body:not([data-theme="light"]) .auth-social-btn {
border: 1px solid var(--pm-line);
background: rgba(255, 255, 255, 0.04);
transition: border-color 0.25s, background 0.25s;
}
body:not([data-theme="light"]) .auth-social-btn:hover {
border-color: var(--pm-line-gold);
background: rgba(255, 255, 255, 0.07);
}
/* ---------- Pages légales : confort de lecture ---------- */
body.landing-refresh.legal-page main .container {
max-width: 980px;
}
body.landing-refresh.legal-page .legal-card p,
body.landing-refresh.legal-page .legal-card li {
line-height: 1.7;
}
/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
body.landing-refresh .btn-primary,
body.landing-refresh .btn-primary:hover,
body.landing-refresh .btn-secondary:hover,
body.landing-refresh .home-demo-grid article:hover,
body:not([data-theme="light"]) .auth-card .btn:hover {
transform: none;
}
}
/* =========================================================
Révélations motion mutualisées (public-motion.js)
========================================================= */
.pm-reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.8s var(--pm-ease), transform 0.8s var(--pm-ease);
transition-delay: var(--pm-delay, 0s);
}
.pm-reveal.pm-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.pm-reveal { opacity: 1; transform: none; transition: none; }
}
/* =========================================================
Footer public : lisible, doré, cohérent avec la home
========================================================= */
body.landing-refresh:not([data-theme="light"]) .site-footer {
border-top: 1px solid rgba(130, 158, 205, 0.16);
background: linear-gradient(180deg, rgba(3, 8, 21, 0.35), rgba(2, 6, 15, 0.92));
}
body.landing-refresh:not([data-theme="light"]) .site-footer__title {
color: var(--pm-gold-strong);
letter-spacing: 0.14em;
text-transform: uppercase;
font-size: 0.72rem;
}
body.landing-refresh:not([data-theme="light"]) .site-footer__pitch {
color: var(--pm-muted);
}
body.landing-refresh:not([data-theme="light"]) .site-footer__links a {
color: var(--pm-soft);
transition: color 0.2s;
}
body.landing-refresh:not([data-theme="light"]) .site-footer__links a:hover {
color: var(--pm-gold-strong);
}
body.landing-refresh:not([data-theme="light"]) .site-footer__cta-link {
color: #091225;
background: var(--pm-grad-cta);
border: 1px solid rgba(255, 239, 183, 0.74);
border-radius: 12px;
font-weight: 800;
}
body.landing-refresh:not([data-theme="light"]) .site-footer__meta {
color: rgba(195, 203, 224, 0.5);
}
/* =========================================================
Auth deux volets : pitch produit + formulaire (>= 1024px)
========================================================= */
.auth-stage {
width: min(1180px, 100%);
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: clamp(24px, 3vw, 56px);
align-items: center;
justify-items: center;
}
.auth-pitch { display: none; }
@media (min-width: 1024px) {
.auth-stage { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); }
.auth-pitch {
display: grid;
gap: 18px;
justify-items: start;
max-width: 480px;
}
}
.auth-pitch__eyebrow {
display: inline-flex; align-items: center; gap: 10px;
color: var(--pm-gold-strong);
font-size: 0.74rem; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase;
}
.auth-pitch__eyebrow::before {
content: ""; width: 34px; height: 1px;
background: linear-gradient(90deg, var(--pm-gold), transparent);
}
.auth-pitch__title {
font-family: "Space Grotesk", "Inter", sans-serif;
font-size: clamp(1.9rem, 2.6vw, 2.6rem);
line-height: 1.05; letter-spacing: -0.015em; text-wrap: balance;
color: var(--pm-ink);
margin: 0;
}
.auth-pitch__title .gold {
background: var(--pm-grad-gold-text);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
.auth-pitch__points { list-style: none; display: grid; gap: 11px; margin: 4px 0 0; padding: 0; }
.auth-pitch__points li { display: flex; align-items: center; gap: 12px; color: var(--pm-muted); font-weight: 600; }
.auth-pitch__points .ck {
width: 24px; height: 24px; border-radius: 50%; flex: none;
display: grid; place-items: center;
background: rgba(124, 245, 178, 0.12); border: 1px solid rgba(124, 245, 178, 0.45);
color: #7cf5b2; font-size: 0.72rem; font-weight: 800;
}
.auth-pitch__live {
display: inline-flex; align-items: center; gap: 12px;
margin-top: 8px;
padding: 11px 16px; border-radius: 13px;
border: 1px solid var(--pm-line-gold);
background: rgba(243, 213, 138, 0.07);
color: var(--pm-gold-strong); font-size: 0.8rem; font-weight: 700;
}
.auth-pitch__wave { display: inline-flex; align-items: center; gap: 3px; height: 16px; }
.auth-pitch__wave i {
width: 3px; height: 5px; border-radius: 2px; background: currentColor;
animation: pmWave 0.9s ease-in-out infinite;
animation-delay: calc(var(--i) * 0.08s);
}
@keyframes pmWave { 0%, 100% { height: 5px; } 40% { height: 14px; } 70% { height: 8px; } }
@media (prefers-reduced-motion: reduce) {
.auth-pitch__wave i { animation: none; height: 9px; }
}
/* =========================================================
Phase 3 - heros editoriaux (landings SEO et articles)
========================================================= */
body.seo-landing-page:not([data-theme="light"]) .legal-hero .legal-hero__card,
body.article-page:not([data-theme="light"]) .legal-hero .legal-hero__card {
position: relative;
border: none;
background: transparent;
box-shadow: none;
text-align: center;
display: grid;
justify-items: center;
padding-block: clamp(40px, 7vh, 80px) clamp(20px, 3vh, 36px);
}
body.seo-landing-page:not([data-theme="light"]) .legal-hero .legal-hero__card::before,
body.article-page:not([data-theme="light"]) .legal-hero .legal-hero__card::before {
content: ""; position: absolute; top: -10%; left: 50%; transform: translateX(-50%);
width: min(620px, 90vw); aspect-ratio: 1.4; border-radius: 50%;
background: radial-gradient(circle, rgba(102, 216, 255, 0.09), rgba(243, 213, 138, 0.05) 45%, transparent 70%);
filter: blur(8px); pointer-events: none;
}
body.seo-landing-page .legal-hero h1,
body.article-page .legal-hero h1 {
font-size: clamp(2.2rem, 4.6vw, 4rem);
line-height: 1.02;
letter-spacing: -0.02em;
text-wrap: balance;
max-width: 22ch;
}
body.seo-landing-page .legal-hero .legal-hero__card > p,
body.article-page .legal-hero .legal-hero__card > p {
max-width: 64ch;
}
body.seo-landing-page .home-hero__actions { justify-content: center; }
/* Scene d'appel des landings : langage de la sequence home */
body.seo-landing-page:not([data-theme="light"]) .panel-surface {
border: 1px solid transparent;
background:
linear-gradient(rgba(9, 17, 38, 0.8), rgba(9, 17, 38, 0.8)) padding-box,
linear-gradient(135deg, rgba(243, 213, 138, 0.32), rgba(130, 158, 205, 0.14) 40%, rgba(102, 216, 255, 0.22)) border-box;
box-shadow: var(--pm-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
body.seo-landing-page:not([data-theme="light"]) .seo-product-call__badge {
color: var(--pm-gold-strong);
border-color: var(--pm-line-gold);
background: rgba(243, 213, 138, 0.08);
letter-spacing: 0.12em;
text-transform: uppercase;
}
body.seo-landing-page:not([data-theme="light"]) .seo-keyword-chips span,
body.seo-landing-page:not([data-theme="light"]) .seo-keyword-chips a {
border: 1px solid var(--pm-line-gold);
color: var(--pm-gold-strong);
background: rgba(243, 213, 138, 0.06);
border-radius: 999px;
}
/* CTA final des pages marketing : niveau carte essai de la home */
body.landing-refresh:not([data-theme="light"]) .home-cta__inner {
border: 1px solid transparent;
border-radius: 24px;
background:
linear-gradient(rgba(9, 17, 38, 0.8), rgba(9, 17, 38, 0.8)) padding-box,
linear-gradient(135deg, rgba(243, 213, 138, 0.45), rgba(102, 216, 255, 0.28)) border-box;
box-shadow: var(--pm-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.08);
padding: clamp(28px, 4vw, 52px);
}
/* =========================================================
Phase 3 - confort de lecture (articles + juridique)
========================================================= */
body.article-page .legal-card p,
body.article-page .legal-card li {
max-width: 70ch;
line-height: 1.72;
}
body.article-page:not([data-theme="light"]) .legal-card > h2,
body.legal-notice-page:not([data-theme="light"]) .legal-card > h2,
body.privacy-page:not([data-theme="light"]) .legal-card > h2,
body.terms-page:not([data-theme="light"]) .legal-card > h2,
body.dpa-page:not([data-theme="light"]) .legal-card > h2,
body.cookies-page:not([data-theme="light"]) .legal-card > h2 {
position: relative;
padding-left: 16px;
letter-spacing: -0.01em;
}
body.article-page:not([data-theme="light"]) .legal-card > h2::before,
body.legal-notice-page:not([data-theme="light"]) .legal-card > h2::before,
body.privacy-page:not([data-theme="light"]) .legal-card > h2::before,
body.terms-page:not([data-theme="light"]) .legal-card > h2::before,
body.dpa-page:not([data-theme="light"]) .legal-card > h2::before,
body.cookies-page:not([data-theme="light"]) .legal-card > h2::before {
content: ""; position: absolute; left: 0; top: 0.18em; bottom: 0.18em; width: 3px;
border-radius: 3px;
background: linear-gradient(180deg, var(--pm-gold), rgba(102, 216, 255, 0.7));
}
/* =========================================================
Phase 3 - sommaire automatique (public-motion.js)
========================================================= */
.pm-toc {
margin: clamp(18px, 3vh, 30px) auto;
padding: 20px 24px;
max-width: 860px;
border: 1px solid var(--pm-line);
border-radius: 16px;
background: rgba(9, 17, 38, 0.6);
}
.pm-toc__title {
display: inline-flex; align-items: center; gap: 10px;
color: var(--pm-gold-strong);
font-size: 0.74rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase;
margin-bottom: 10px;
}
.pm-toc__title::before {
content: ""; width: 26px; height: 1px;
background: linear-gradient(90deg, var(--pm-gold), transparent);
}
.pm-toc ol {
margin: 0; padding: 0 0 0 18px;
columns: 2; column-gap: 32px;
}
.pm-toc li { margin: 4px 0; break-inside: avoid; }
.pm-toc a {
color: var(--pm-soft);
text-decoration: none;
font-size: 0.92rem;
transition: color 0.2s;
}
.pm-toc a:hover { color: var(--pm-gold-strong); }
@media (max-width: 767px) {
.pm-toc { padding: 16px; }
.pm-toc ol {
display: grid;
columns: 1;
gap: 6px;
padding-left: 0;
list-style: none;
}
.pm-toc li { margin: 0; }
.pm-toc a {
display: flex;
min-height: 44px;
align-items: center;
padding: 8px 0;
line-height: 1.25;
}
}
body[data-theme="light"] .pm-toc { background: rgba(248, 250, 252, 0.8); border-color: rgba(15, 23, 42, 0.1); }
body[data-theme="light"] .pm-toc a { color: #334155; }
/* =========================================================
Phase 4 - demo live : langage de la sequence d'appel home
(containers uniquement, la logique temps reel reste intacte)
========================================================= */
body.live-demo-body:not([data-theme="light"]) .voice-panel,
body.live-demo-body:not([data-theme="light"]) .transcript-panel {
border: 1px solid transparent;
background:
linear-gradient(rgba(9, 17, 38, 0.82), rgba(9, 17, 38, 0.82)) padding-box,
linear-gradient(135deg, rgba(243, 213, 138, 0.38), rgba(130, 158, 205, 0.16) 40%, rgba(102, 216, 255, 0.26)) border-box;
box-shadow: var(--pm-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.07);
border-radius: 20px;
}
body.live-demo-body:not([data-theme="light"]) .voice-orb {
background:
radial-gradient(circle at 34% 30%, rgba(255, 239, 183, 0.85), rgba(153, 215, 255, 0.75) 46%, rgba(107, 125, 255, 0.8) 100%);
box-shadow:
0 18px 54px rgba(102, 216, 255, 0.35),
0 0 0 1px rgba(255, 239, 183, 0.35),
inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
body.live-demo-body:not([data-theme="light"]) .voice-status-copy strong,
body.live-demo-body:not([data-theme="light"]) .voice-status-wrap strong {
color: var(--pm-gold-strong);
}
body.live-demo-body:not([data-theme="light"]) .voice-checklist li::marker {
color: var(--pm-gold);
}
body.live-demo-body:not([data-theme="light"]) .voice-runtime-strip {
border: 0;
background: none;
padding: 0;
border-radius: 0;
}
body.live-demo-body:not([data-theme="light"]) .transcript-empty {
color: rgba(195, 203, 224, 0.55);
}
body.live-demo-body:not([data-theme="light"]) .live-demo-business-results,
body.live-demo-body:not([data-theme="light"]) .live-demo-business-selected {
border: 1px solid var(--pm-line);
background: rgba(9, 17, 38, 0.7);
border-radius: 14px;
}
body.live-demo-body:not([data-theme="light"]) .voice-notice {
border: 1px solid var(--pm-line-gold);
background: rgba(243, 213, 138, 0.07);
color: var(--pm-gold-strong);
border-radius: 12px;
}
/* =========================================================
Phase 5 - recomposition profonde : les composants partages
des pages marketing passent au niveau de finition de l'index
(Space Grotesk, verre a bordure or->bleu, badges dores).
========================================================= */
/* Typo : toutes les pages publiques heritent de la tete d'affiche */
body.landing-refresh h1,
body.landing-refresh h2 {
font-family: "Space Grotesk", "Inter", sans-serif;
font-weight: 700;
}
body.landing-refresh:not([data-theme="light"]) .home-section__head h2,
body.landing-refresh:not([data-theme="light"]) .restaurant-depth__head h2,
body.landing-refresh:not([data-theme="light"]) .core-product-stage__copy h2 {
font-size: clamp(2rem, 3.8vw, 3.4rem);
line-height: 1.02;
color: var(--pm-ink);
}
body.landing-refresh:not([data-theme="light"]) .home-section__head > p,
body.landing-refresh:not([data-theme="light"]) .restaurant-depth__head > p {
color: var(--pm-muted);
font-size: clamp(1rem, 1.3vw, 1.15rem);
line-height: 1.6;
}
/* Familles de cartes marketing : verre premium a bordure degradee */
body.landing-refresh:not([data-theme="light"]) .pricing-plan,
body.landing-refresh:not([data-theme="light"]) .pricing-clarity-card,
body.landing-refresh:not([data-theme="light"]) .pricing-resource-card,
body.landing-refresh:not([data-theme="light"]) .comparison-impact-card,
body.landing-refresh:not([data-theme="light"]) .integration-card,
body.landing-refresh:not([data-theme="light"]) .home-faq-grid > *,
body.landing-refresh:not([data-theme="light"]) .pricing-faq__item,
body.landing-refresh:not([data-theme="light"]) .legal-grid > article {
border: 1px solid transparent;
border-radius: 20px;
background:
linear-gradient(var(--pm-glass), var(--pm-glass)) padding-box,
linear-gradient(135deg, rgba(243, 213, 138, 0.35), rgba(130, 158, 205, 0.16) 40%, rgba(102, 216, 255, 0.24)) border-box;
box-shadow: var(--pm-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.07);
transition: transform 0.35s var(--pm-ease), box-shadow 0.35s var(--pm-ease);
}
@media (hover: hover) {
body.landing-refresh:not([data-theme="light"]) .pricing-plan:hover,
body.landing-refresh:not([data-theme="light"]) .pricing-clarity-card:hover,
body.landing-refresh:not([data-theme="light"]) .pricing-resource-card:hover,
body.landing-refresh:not([data-theme="light"]) .comparison-impact-card:hover,
body.landing-refresh:not([data-theme="light"]) .integration-card:hover {
transform: translateY(-4px);
}
}
/* Badges, index d'etapes et eyebrows internes : dores */
body.landing-refresh:not([data-theme="light"]) .pricing-plan__badge {
background: linear-gradient(135deg, var(--pm-gold-strong), #9adcff);
color: #081226;
border: 0;
font-weight: 800;
}
body.landing-refresh:not([data-theme="light"]) .pricing-plan__eyebrow,
body.landing-refresh:not([data-theme="light"]) .pricing-resource-card__tag {
color: var(--pm-gold-strong);
letter-spacing: 0.14em;
text-transform: uppercase;
}
body.landing-refresh:not([data-theme="light"]) .pricing-step__index {
display: grid;
place-items: center;
width: 38px;
height: 38px;
border-radius: 50%;
background: linear-gradient(135deg, var(--pm-gold-strong), #9adcff);
color: #081226;
font-family: "Space Grotesk", "Inter", sans-serif;
font-weight: 800;
border: 0;
}
/* Telephone 2.5D : cadre et bulles au langage de la sequence d'appel */
body.landing-refresh:not([data-theme="light"]) .home-phone__screen {
border: 1px solid transparent;
border-radius: 28px;
background:
linear-gradient(rgba(7, 13, 30, 0.92), rgba(7, 13, 30, 0.92)) padding-box,
linear-gradient(160deg, rgba(243, 213, 138, 0.4), rgba(130, 158, 205, 0.18) 45%, rgba(102, 216, 255, 0.3)) border-box;
box-shadow: var(--pm-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
body.landing-refresh:not([data-theme="light"]) .home-phone__statusbar time {
color: var(--pm-gold-strong);
}
body.landing-refresh:not([data-theme="light"]) .home-phone__bubble {
border: 1px solid var(--pm-line);
border-radius: 16px;
background: rgba(13, 22, 46, 0.72);
/* Padding minimum pour que le texte ne colle pas à la bordure. */
padding: clamp(12px, 1.4vw, 15px) clamp(14px, 1.6vw, 17px);
}
body.landing-refresh:not([data-theme="light"]) .home-phone__bubble--agent {
border-color: rgba(102, 216, 255, 0.32);
}
body.landing-refresh:not([data-theme="light"]) .home-phone__bubble--client {
border-color: var(--pm-line-gold);
}
body.landing-refresh:not([data-theme="light"]) .home-phone__bubble--agent > span:first-child {
color: #9adcff;
}
body.landing-refresh:not([data-theme="light"]) .home-phone__bubble--client > span:first-child {
color: var(--pm-gold-strong);
}
/* Board produit (tunnel) : version mutualisee du traitement page 1 */
body.landing-refresh:not([data-theme="light"]) .core-product-board {
border: 1px solid transparent;
border-radius: 24px;
background:
linear-gradient(var(--pm-glass), var(--pm-glass)) padding-box,
linear-gradient(135deg, rgba(243, 213, 138, 0.42), rgba(130, 158, 205, 0.18) 40%, rgba(102, 216, 255, 0.28)) border-box;
box-shadow: var(--pm-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
body.landing-refresh:not([data-theme="light"]) .core-product-board__bar strong {
color: var(--pm-gold-strong);
font-family: "Space Grotesk", "Inter", sans-serif;
}
body.landing-refresh:not([data-theme="light"]) .core-product-board__split article > span {
color: var(--pm-gold-strong);
letter-spacing: 0.18em;
text-transform: uppercase;
}
body.landing-refresh:not([data-theme="light"]) .core-product-flow li b {
display: grid;
place-items: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: linear-gradient(135deg, var(--pm-gold-strong), #9adcff);
color: #081226;
font-family: "Space Grotesk", "Inter", sans-serif;
font-weight: 800;
font-size: 0.85rem;
border: 0;
}
/* CTA final : halo dore comme la carte essai de l'index */
body.landing-refresh:not([data-theme="light"]) .home-cta__inner {
position: relative;
overflow: hidden;
}
body.landing-refresh:not([data-theme="light"]) .home-cta__inner::before {
content: "";
position: absolute;
top: -55%;
left: 50%;
width: 70%;
height: 100%;
transform: translateX(-50%);
background: radial-gradient(circle, rgba(243, 213, 138, 0.13), transparent 62%);
pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
body.landing-refresh:not([data-theme="light"]) .pricing-plan:hover,
body.landing-refresh:not([data-theme="light"]) .pricing-clarity-card:hover,
body.landing-refresh:not([data-theme="light"]) .pricing-resource-card:hover,
body.landing-refresh:not([data-theme="light"]) .comparison-impact-card:hover,
body.landing-refresh:not([data-theme="light"]) .integration-card:hover {
transform: none;
}
}
/* =========================================================
Phase 5b - pages metiers (/restaurant/, /hotel/, ...) :
le panneau "Pret a tester" et les accents passent a l'or.
========================================================= */
body.landing-refresh:not([data-theme="light"]) .vertical-ready-panel {
border: 1px solid transparent;
background:
linear-gradient(var(--pm-glass), var(--pm-glass)) padding-box,
linear-gradient(135deg, rgba(243, 213, 138, 0.42), rgba(130, 158, 205, 0.18) 40%, rgba(102, 216, 255, 0.28)) border-box;
box-shadow: var(--pm-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
body.landing-refresh:not([data-theme="light"]) .vertical-ready-panel__status,
body.landing-refresh:not([data-theme="light"]) .vertical-ready-panel__badge,
body.landing-refresh:not([data-theme="light"]) .vertical-ready-panel__summary span,
body.landing-refresh:not([data-theme="light"]) .vertical-ready-panel__context > span,
body.landing-refresh:not([data-theme="light"]) .vertical-ready-panel__outcome > span {
color: var(--pm-gold-strong);
letter-spacing: 0.12em;
}
body.landing-refresh:not([data-theme="light"]) .vertical-ready-panel__header strong {
font-family: "Space Grotesk", "Inter", sans-serif;
color: var(--pm-ink);
text-shadow: none;
}
body.landing-refresh:not([data-theme="light"]) .vertical-ready-panel__badge {
border-color: var(--pm-line-gold);
background: rgba(243, 213, 138, 0.08);
}
body.landing-refresh:not([data-theme="light"]) .vertical-ready-panel__summary article,
body.landing-refresh:not([data-theme="light"]) .vertical-ready-panel__context,
body.landing-refresh:not([data-theme="light"]) .vertical-ready-panel__outcome {
border: 1px solid var(--pm-line);
background: rgba(13, 22, 46, 0.55);
border-radius: 14px;
}
body.landing-refresh:not([data-theme="light"]) .vertical-proof-strip span {
border: 1px solid var(--pm-line);
border-radius: 999px;
background: rgba(255, 255, 255, 0.04);
color: var(--pm-muted);
}
body.landing-refresh:not([data-theme="light"]) .vertical-page-nav a {
border: 1px solid var(--pm-line);
border-radius: 999px;
background: rgba(255, 255, 255, 0.04);
color: var(--pm-muted);
transition: border-color 0.3s var(--pm-ease), color 0.3s var(--pm-ease), transform 0.3s var(--pm-ease);
}
body.landing-refresh:not([data-theme="light"]) .vertical-page-nav a:hover,
body.landing-refresh:not([data-theme="light"]) .vertical-page-nav a:focus-visible {
border-color: var(--pm-line-gold);
color: var(--pm-gold-strong);
transform: translateY(-2px);
}
body.landing-refresh:not([data-theme="light"]) .vertical-roi-card,
body.landing-refresh:not([data-theme="light"]) .vertical-dashboard-preview,
body.landing-refresh:not([data-theme="light"]) .vertical-page-proof,
body.landing-refresh:not([data-theme="light"]) .vertical-live-card {
border: 1px solid transparent;
border-radius: 20px;
background:
linear-gradient(var(--pm-glass), var(--pm-glass)) padding-box,
linear-gradient(135deg, rgba(243, 213, 138, 0.35), rgba(130, 158, 205, 0.16) 40%, rgba(102, 216, 255, 0.24)) border-box;
box-shadow: var(--pm-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
body.landing-refresh:not([data-theme="light"]) .vertical-page-proof,
body.landing-refresh:not([data-theme="light"]) .vertical-dashboard-preview {
border: 0 !important;
border-radius: 0 !important;
outline: 0 !important;
background: none !important;
box-shadow: none !important;
overflow: visible !important;
}
@media (prefers-reduced-motion: reduce) {
body.landing-refresh:not([data-theme="light"]) .vertical-page-nav a:hover {
transform: none;
}
}
/* =========================================================
Phase 5c - kickers et puces : l'or remplace les restes
bleu/teal sur les composants marketing recurrents.
========================================================= */
body.landing-refresh:not([data-theme="light"]) .home-demo-grid article > span,
body.landing-refresh:not([data-theme="light"]) .comparison-decision-strip span,
body.landing-refresh:not([data-theme="light"]) .comparison-impact-card > span,
body.landing-refresh:not([data-theme="light"]) .calculator-result > span,
body.landing-refresh:not([data-theme="light"]) .calculator-results > span,
body.landing-refresh:not([data-theme="light"]) .calculator-panel__head > span,
body.landing-refresh:not([data-theme="light"]) .home-phone__result > span {
color: var(--pm-gold-strong);
letter-spacing: 0.12em;
text-transform: uppercase;
}
body.landing-refresh:not([data-theme="light"]) .home-phone__result {
border: 1px solid var(--pm-line-gold);
background: rgba(243, 213, 138, 0.07);
border-radius: 14px;
}
body.landing-refresh:not([data-theme="light"]) .pricing-plan__features li::before {
background: var(--pm-gold);
box-shadow: 0 0 8px rgba(243, 213, 138, 0.6);
}
body.landing-refresh:not([data-theme="light"]) .comparison-decision-strip article:last-child {
border-color: var(--pm-line-gold);
}
/* =========================================================
Phase 5d - kickers generiques des cartes marketing : or.
Motif structurel commun a aide, a-propos, demos, guides :
KICKER....
Les recompositions par page (body.) restent prioritaires.
========================================================= */
body.landing-refresh:not([data-theme="light"]) main article > span:first-child {
color: var(--pm-gold-strong);
letter-spacing: 0.12em;
text-transform: uppercase;
}
/* pilules d'eyebrow a l'interieur des cartes : jamais coupees en cercle */
body.landing-refresh:not([data-theme="light"]) main article .home-eyebrow,
body.landing-refresh:not([data-theme="light"]) .legal-grid .home-eyebrow {
white-space: nowrap;
width: fit-content;
}
body.landing-refresh:not([data-theme="light"]) .seo-related-links a::after {
color: var(--pm-gold-strong);
}
/* =========================================================
Phase 5e - le tiroir de navigation mobile (off-canvas) ne
doit jamais creer de defilement horizontal sur les pages
publiques. clip preserve position:sticky (contrairement a
hidden qui creerait un contexte de defilement).
========================================================= */
body.landing-refresh {
overflow-x: clip;
}
/* Phase 5f - integrations : la rangee eyebrow + statut peut passer a la ligne
(les pilules insecables ne poussent plus le statut hors de la carte). */
body.landing-refresh:not([data-theme="light"]) .integration-card__top {
flex-wrap: wrap;
row-gap: 8px;
}
/* =========================================================
Phase 6 - bloc commun : le decor de nuit EXACT de l'index
(constellation double couche, halos or/bleu, grain) rendu
par base.html sur toutes les pages publiques sombres.
La home motion garde sa version animee GSAP (masque ici).
Valeurs copiees de home_motion.html sans approximation.
========================================================= */
.pm-bg {
position: fixed;
inset: 0;
z-index: -2;
pointer-events: none;
overflow: hidden;
display: none;
}
.pm-bg::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(140% 90% at 78% -12%, rgba(107, 125, 255, 0.14), transparent 55%),
radial-gradient(120% 100% at -8% 108%, rgba(102, 216, 255, 0.08), transparent 55%),
linear-gradient(180deg, #030815 0%, #050b1e 40%, #03070f 100%);
}
.pm-bg__stars,
.pm-bg__stars--2 {
position: absolute;
inset: -20% 0;
background-image:
radial-gradient(1.2px 1.2px at 12% 24%, rgba(248, 251, 255, 0.5), transparent 100%),
radial-gradient(1px 1px at 34% 68%, rgba(248, 251, 255, 0.35), transparent 100%),
radial-gradient(1.4px 1.4px at 58% 12%, rgba(255, 239, 183, 0.4), transparent 100%),
radial-gradient(1px 1px at 71% 47%, rgba(248, 251, 255, 0.32), transparent 100%),
radial-gradient(1.2px 1.2px at 86% 78%, rgba(102, 216, 255, 0.36), transparent 100%),
radial-gradient(1px 1px at 22% 88%, rgba(248, 251, 255, 0.3), transparent 100%),
radial-gradient(1.1px 1.1px at 47% 39%, rgba(248, 251, 255, 0.28), transparent 100%),
radial-gradient(1.3px 1.3px at 92% 18%, rgba(255, 239, 183, 0.3), transparent 100%);
background-size: 920px 760px;
opacity: 0.7;
}
.pm-bg__stars--2 {
background-size: 620px 540px;
opacity: 0.4;
}
.pm-bg__halo {
position: absolute;
border-radius: 50%;
filter: blur(80px);
}
.pm-bg__halo--gold {
width: 55vw;
height: 55vw;
top: -20vw;
right: -16vw;
background: radial-gradient(circle, rgba(243, 213, 138, 0.13), transparent 62%);
}
.pm-bg__halo--blue {
width: 48vw;
height: 48vw;
top: 60vh;
left: -18vw;
background: radial-gradient(circle, rgba(102, 216, 255, 0.1), transparent 62%);
}
body.landing-refresh:not(.home-page):not(.home-gateway-page):not(.motion-home-page) .pm-bg__halo--gold {
right: 0;
}
body.landing-refresh:not(.home-page):not(.home-gateway-page):not(.motion-home-page) .pm-bg__halo--blue {
left: 0;
}
.pm-grain {
position: fixed;
inset: 0;
z-index: 90;
pointer-events: none;
opacity: 0.05;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
background-size: 240px 240px;
display: none;
}
/* Affichage : pages publiques sombres + auth ; jamais la home motion
(elle rend son propre decor anime), jamais le theme clair. */
body.landing-refresh:not([data-theme="light"]):not(.motion-home-page) .pm-bg,
body.landing-refresh:not([data-theme="light"]):not(.motion-home-page) .pm-grain,
body.auth-page:not([data-theme="light"]) .pm-bg,
body.auth-page:not([data-theme="light"]) .pm-grain {
display: block;
}
/* L'ancienne constellation simplifiee (body::before) est remplacee. */
body.landing-refresh:not([data-theme="light"])::before {
content: none;
}
/* =========================================================
Phase 7 - tuiles orphelines : requetes de quantite :has().
Les surcharges par page mettent ces grilles a 3/4 colonnes,
ce qui laisse 1 tuile seule (4 = 3+1, 5 = 4+1). On rechoisit
un nombre de colonnes equilibre selon le compte exact.
Scope >=768px : le mobile conserve sa mise en page 1 colonne.
========================================================= */
@media (min-width: 768px) {
/* 4 tuiles -> 2x2 equilibre (au lieu de 3+1) */
body.landing-refresh .home-faq-grid:has(> *:last-child:nth-child(4)),
body.landing-refresh .home-use-grid:has(> *:last-child:nth-child(4)),
body.landing-refresh .home-steps:has(> *:last-child:nth-child(4)),
body.landing-refresh .home-demo-grid:has(> *:last-child:nth-child(4)),
body.landing-refresh .home-realtime-grid:has(> *:last-child:nth-child(4)) {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
/* 5 tuiles -> 3+2 (au lieu de 4+1) */
body.landing-refresh .home-usecase-grid:has(> *:last-child:nth-child(5)),
body.landing-refresh .home-use-grid:has(> *:last-child:nth-child(5)),
body.landing-refresh .home-faq-grid:has(> *:last-child:nth-child(5)) {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
/* 7 tuiles -> 4+3 (derniere rangee a 3, plus de tuile seule) */
body.landing-refresh .home-faq-grid:has(> *:last-child:nth-child(7)),
body.landing-refresh .home-use-grid:has(> *:last-child:nth-child(7)) {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
}
/* --- Phase 7b : orphelins restants --- */
@media (min-width: 768px) {
/* 4 formules tarifaires -> 2x2 (la 4e formule n'est plus seule) */
body.landing-refresh .pricing-plan-grid:has(> *:last-child:nth-child(4)) {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
@media (min-width: 900px) {
/* Aide / hub telephonique : 13 tuiles -> la derniere seule est centree */
body.landing-refresh .home-use-grid:has(> *:last-child:nth-child(13)) > *:last-child {
grid-column: 1 / -1;
justify-self: center;
width: 100%;
max-width: calc((100% - 36px) / 3);
}
}
/* =========================================================
Phase 8 - lisibilité : valeurs stat sur une seule ligne
(ex. « 30 jours · 0 € » qui passait sur 3 lignes en desktop).
========================================================= */
body.landing-refresh .pricing-roi-math article strong {
white-space: nowrap;
font-size: clamp(1.28rem, 2vw, 1.62rem);
letter-spacing: -0.01em;
}
/* =========================================================
Phase 9 - « Tarifs » : lien direct dans la barre de nav
(style des menus mais sans flèche de déroulant).
========================================================= */
.site-header--public .public-menu__trigger--link {
text-decoration: none;
}
.site-header--public .public-menu__trigger--link::after {
display: none !important;
}
/* =========================================================
Phase 10 - rangées équilibrées : 6 tuiles -> 3+3 (au lieu de 4+2).
Complète la Phase 7 (4->2x2, 5->3+2, 7->4+3) : un nombre pair de
tuiles est réparti également sur chaque rangée.
========================================================= */
@media (min-width: 768px) {
body.landing-refresh .public-feature-bridge__grid:has(> *:last-child:nth-child(6)),
body.landing-refresh .home-use-grid:has(> *:last-child:nth-child(6)),
body.landing-refresh .home-faq-grid:has(> *:last-child:nth-child(6)),
body.landing-refresh .home-demo-grid:has(> *:last-child:nth-child(6)),
body.landing-refresh .home-usecase-grid:has(> *:last-child:nth-child(6)) {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
}
/* =========================================================
Phase 11 - Menu mobile : bloc « Compte » pour se connecter.
Masque sur desktop (le bouton Connexion existe dans la barre),
affiche un bloc dédié dans le drawer mobile (<= 1060px).
========================================================= */
.public-menu__auth {
display: none;
}
/* Le drawer mobile force `.menu a { background:transparent!important; color:muted!important; height:66px!important }`
(07-home-refresh.css). On surclasse avec une specificite superieure + !important. */
@media (max-width: 1060px) {
.site-header--public .public-menu__auth,
html.app-mobile-shell body.landing-refresh:not(.app-shell) .site-header--public .public-menu__auth {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 18px;
padding-top: 18px;
border-top: 1px solid rgba(148, 163, 184, 0.22);
}
.site-header--public .public-menu .public-menu__auth-link,
html.app-mobile-shell body.landing-refresh:not(.app-shell) .site-header--public .public-menu .public-menu__auth-link {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
gap: 2px !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
padding: 14px 18px !important;
text-decoration: none !important;
border-radius: 16px !important;
text-align: center !important;
}
.site-header--public .public-menu .public-menu__auth-link--login,
html.app-mobile-shell body.landing-refresh:not(.app-shell) .site-header--public .public-menu .public-menu__auth-link--login {
background: var(--pm-grad-cta, linear-gradient(135deg, #ffe9a6, #99d7ff)) !important;
color: #0c1226 !important;
border: 1px solid rgba(255, 239, 183, 0.55) !important;
box-shadow: 0 14px 30px rgba(153, 215, 255, 0.22) !important;
}
.site-header--public .public-menu .public-menu__auth-link--login .public-menu__auth-eyebrow {
color: #0c1226 !important;
opacity: 0.78;
}
.site-header--public .public-menu .public-menu__auth-link--login strong {
font-size: 1.05rem;
font-weight: 700;
}
.site-header--public .public-menu .public-menu__auth-eyebrow {
font-size: 0.72rem;
letter-spacing: 0.08em;
text-transform: uppercase;
opacity: 0.72;
}
.site-header--public .public-menu .public-menu__auth-link--signup,
html.app-mobile-shell body.landing-refresh:not(.app-shell) .site-header--public .public-menu .public-menu__auth-link--signup {
align-items: center !important;
text-align: center !important;
border: 1px solid rgba(148, 163, 184, 0.3) !important;
color: #e2e8f0 !important;
font-weight: 600 !important;
background: rgba(255, 255, 255, 0.04) !important;
}
/* « Tarifs » : meme carte que Produit/Solutions dans le drawer mobile
(l'ancre etait aplatie par la regle generique `.menu a`). */
.site-header--public .public-menu .public-menu__trigger--link,
html.app-mobile-shell body.landing-refresh:not(.app-shell) .site-header--public .public-menu .public-menu__trigger--link {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-start !important;
width: 100% !important;
height: 46px !important;
min-height: 46px !important;
padding: 0 12px !important;
border-radius: 12px !important;
border: 1px solid rgba(244, 223, 174, 0.14) !important;
background: rgba(244, 223, 174, 0.055) !important;
color: #f4dfae !important;
font-size: 0.74rem !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
text-align: left !important;
text-decoration: none !important;
}
}
/* Audit public 2026-07-11 - consentement non bloquant.
Charge apres les styles publics historiques pour garder le bandeau visible
sans masquer le premier ecran ni les CTA. */
body:not(.app-shell) .cookie-banner {
right: 14px !important;
bottom: calc(14px + env(safe-area-inset-bottom)) !important;
left: auto !important;
width: min(430px, calc(100vw - 28px)) !important;
max-width: calc(100vw - 28px) !important;
grid-template-columns: minmax(0, 1fr) !important;
gap: 8px !important;
padding: 10px !important;
border-radius: 14px !important;
transform: translateY(8px) !important;
box-shadow: 0 16px 44px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}
body:not(.app-shell) .cookie-banner.is-visible {
transform: translateY(0) !important;
}
body:not(.app-shell) .cookie-banner__body {
gap: 2px !important;
}
body:not(.app-shell) .cookie-banner__body strong {
font-size: 0.86rem !important;
line-height: 1.1 !important;
}
body:not(.app-shell) .cookie-banner__body p {
display: block !important;
max-width: 100% !important;
overflow: hidden !important;
color: rgba(226, 232, 240, 0.72) !important;
font-size: 0.74rem !important;
line-height: 1.2 !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
body:not(.app-shell) .cookie-banner__actions {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 6px !important;
width: 100% !important;
}
body:not(.app-shell) .cookie-banner__actions .btn {
min-width: 0 !important;
min-height: 32px !important;
padding: 0.36rem 0.32rem !important;
border-radius: 9px !important;
font-size: 0.68rem !important;
line-height: 1 !important;
white-space: nowrap !important;
}
@media (min-width: 761px) {
body:not(.app-shell) .cookie-banner,
body.home-gateway-page:not(.app-shell) .cookie-banner,
body.create-agent-page:not(.app-shell) .cookie-banner {
right: 14px !important;
left: auto !important;
width: min(460px, calc(100vw - 36px)) !important;
transform: translateY(8px) !important;
}
body:not(.app-shell) .cookie-banner.is-visible,
body.home-gateway-page:not(.app-shell) .cookie-banner.is-visible,
body.create-agent-page:not(.app-shell) .cookie-banner.is-visible {
transform: translateY(0) !important;
}
}
@media (max-width: 760px) {
body:not(.app-shell) .cookie-banner,
body.home-gateway-page:not(.app-shell) .cookie-banner {
right: 8px !important;
bottom: calc(8px + env(safe-area-inset-bottom)) !important;
left: 8px !important;
width: auto !important;
padding: 8px !important;
}
body:not(.app-shell) .cookie-banner__body p,
body.landing-refresh:not(.app-shell) .cookie-banner .cookie-banner__body p,
body.home-gateway-page:not(.app-shell) .cookie-banner .cookie-banner__body p {
display: none !important;
}
body:not(.app-shell) .cookie-banner__actions .btn {
min-height: 30px !important;
font-size: 0.64rem !important;
}
}
body.comparison-page:not(.app-shell) .comparison-impact-card--money .btn {
min-width: 0;
white-space: normal;
text-align: center;
line-height: 1.15;
}
/* Public pages viewed while logged in: keep the private menu out of the content.
Staff/client sessions add .app-shell even on marketing pages; on mobile the
private nav otherwise becomes a bottom bar and hides the public page. */
@media (max-width: 760px) {
html.app-mobile-shell body.landing-refresh.app-shell:not(.home-gateway-page):is(:not(.home-page), .how-it-works-page) .site-header .nav {
width: 100% !important;
min-height: 66px !important;
grid-template-columns: minmax(0, 1fr) auto !important;
gap: 10px !important;
padding: 10px max(12px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left)) !important;
}
html.app-mobile-shell body.landing-refresh.app-shell:not(.home-gateway-page):is(:not(.home-page), .how-it-works-page) .site-header .logo-wrap {
min-width: 0 !important;
max-width: 100% !important;
}
html.app-mobile-shell body.landing-refresh.app-shell:not(.home-gateway-page):is(:not(.home-page), .how-it-works-page) .site-header .logo-brand,
html.app-mobile-shell body.landing-refresh.app-shell:not(.home-gateway-page):is(:not(.home-page), .how-it-works-page) .site-header .logo-brand__image {
max-width: min(42vw, 180px) !important;
}
html.app-mobile-shell body.landing-refresh.app-shell:not(.home-gateway-page):is(:not(.home-page), .how-it-works-page) .site-header .menu {
position: static !important;
inset: auto !important;
transform: none !important;
grid-column: 2 !important;
grid-row: 1 !important;
display: flex !important;
justify-content: flex-end !important;
align-items: center !important;
gap: 6px !important;
width: auto !important;
max-width: min(52vw, 260px) !important;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow-x: auto !important;
overflow-y: hidden !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
backdrop-filter: none !important;
scrollbar-width: none !important;
}
html.app-mobile-shell body.landing-refresh.app-shell:not(.home-gateway-page):is(:not(.home-page), .how-it-works-page) .site-header .menu::-webkit-scrollbar {
display: none !important;
}
html.app-mobile-shell body.landing-refresh.app-shell:not(.home-gateway-page):is(:not(.home-page), .how-it-works-page) .site-header .menu a,
html.app-mobile-shell body.landing-refresh.app-shell:not(.home-gateway-page):is(:not(.home-page), .how-it-works-page) .site-header .menu .menu-icon-link,
html.app-mobile-shell body.landing-refresh.app-shell:not(.home-gateway-page):is(:not(.home-page), .how-it-works-page) .site-header .menu .public-menu-link {
flex: 0 0 42px !important;
width: 42px !important;
min-width: 42px !important;
height: 42px !important;
min-height: 42px !important;
padding: 0 !important;
border-radius: 999px !important;
}
html.app-mobile-shell body.landing-refresh.app-shell:not(.home-gateway-page):is(:not(.home-page), .how-it-works-page) .site-header .menu .nav-action__text {
display: none !important;
}
}
@media (max-width: 640px) {
body.landing-refresh.legal-page:not(.home-gateway-page) .legal-hero__card,
body.landing-refresh:not(.home-gateway-page) .public-vertical-tabs__shell {
width: min(100% - 24px, var(--container, 1180px)) !important;
max-width: calc(100% - 24px) !important;
margin-inline: auto !important;
box-sizing: border-box !important;
}
}
/* Pixel polish 2026-07-11 - public pages hors homepage. */
body.how-it-works-page .how-guided-tour__grid {
grid-template-columns: minmax(0, 1fr) minmax(280px, 0.68fr) !important;
gap: clamp(18px, 3vw, 40px) !important;
}
body.how-it-works-page .how-guided-tour__panel,
body.how-it-works-page .how-guided-card {
min-width: 0 !important;
}
body.how-it-works-page .home-agent-prep-card {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
justify-self: stretch !important;
transform: none !important;
}
body.how-it-works-page .home-agent-build-card {
padding: clamp(26px, 3vw, 32px) !important;
}
body.how-it-works-page .home-agent-build-card ul {
display: grid !important;
gap: 10px !important;
}
body.how-it-works-page .home-agent-build-card li {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
align-items: center !important;
gap: 16px !important;
min-width: 0 !important;
padding: 12px 0 !important;
}
body.how-it-works-page .home-agent-build-card li strong {
min-width: 0 !important;
overflow-wrap: anywhere !important;
text-align: right !important;
}
body.how-it-works-page .home-control-list {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 10px !important;
}
body.how-it-works-page .home-control-list li {
display: grid !important;
grid-template-columns: 24px minmax(0, 1fr) !important;
align-items: start !important;
gap: 10px !important;
min-width: 0 !important;
padding: 16px !important;
border: 1px solid rgba(130, 158, 205, 0.2) !important;
border-radius: 8px !important;
background: rgba(255, 255, 255, 0.045) !important;
}
body.how-it-works-page .home-control-list li::before {
position: static !important;
display: grid !important;
width: 20px !important;
height: 20px !important;
place-items: center !important;
margin-top: 1px !important;
border-radius: 999px !important;
background: rgba(124, 245, 178, 0.14) !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-subpage-scene__shell {
gap: clamp(24px, 3vw, 38px) !important;
padding: clamp(32px, 4vw, 52px) !important;
}
body.live-demo-body.vertical-page .live-demo-shell .vertical-subpage-scene__shell {
padding: clamp(42px, 4.4vw, 60px) clamp(44px, 4.6vw, 64px) !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-subpage-scene__copy {
min-width: 0 !important;
padding-left: clamp(0px, 0.8vw, 10px) !important;
}
body.live-demo-body.vertical-page .live-demo-shell .vertical-subpage-scene__copy {
padding-inline-start: clamp(10px, 1.4vw, 24px) !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-subpage-scene__board,
body.vertical-page:not(.home-gateway-page) .vertical-subpage-scene__side {
min-width: 0 !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-page-proof,
body.vertical-page:not(.home-gateway-page) .vertical-dashboard-preview {
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
outline: 0 !important;
background: transparent !important;
box-shadow: none !important;
overflow: visible !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-page-proof {
display: flex !important;
flex-wrap: wrap !important;
width: fit-content !important;
max-width: 100% !important;
align-items: center !important;
align-self: flex-start !important;
gap: 12px !important;
grid-template-columns: none !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-page-proof span {
position: relative !important;
flex: 0 1 auto !important;
min-height: 42px !important;
padding: 12px 16px 12px 36px !important;
border-radius: 8px !important;
line-height: 1.2 !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-page-proof span::before {
position: absolute !important;
left: 14px !important;
top: 50% !important;
transform: translateY(-50%) !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-dashboard-preview {
gap: 16px !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-dashboard-preview article {
min-width: 0 !important;
padding: clamp(20px, 2.2vw, 26px) !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-call-result a {
display: inline-flex !important;
min-height: 44px !important;
align-items: center !important;
}
.demo-booking-modal {
padding: 12px !important;
}
.demo-booking-modal__dialog {
width: min(1180px, calc(100vw - 24px)) !important;
height: min(92dvh, 820px) !important;
max-height: calc(100dvh - 24px) !important;
}
.demo-booking-modal__header {
padding: clamp(18px, 2.6vw, 32px) !important;
}
.demo-booking-modal__body {
padding: 12px !important;
overflow: hidden !important;
}
.demo-booking-modal__iframe {
scrollbar-width: none !important;
}
.demo-booking-modal__iframe::-webkit-scrollbar {
width: 0 !important;
height: 0 !important;
display: none !important;
}
@media (max-width: 1024px) {
body.how-it-works-page .how-guided-tour__grid,
body.how-it-works-page .home-control-list {
grid-template-columns: 1fr !important;
}
}
@media (max-width: 1080px) {
body.live-demo-body.vertical-page .live-demo-shell .vertical-subpage-scene__shell {
padding: 36px !important;
}
body.live-demo-body.vertical-page .live-demo-shell .vertical-subpage-scene__copy {
padding-inline-start: 4px !important;
}
}
@media (min-width: 900px) and (max-height: 860px) {
.demo-booking-modal__dialog {
width: min(1120px, calc(100vw - 20px)) !important;
height: calc(100svh - 20px) !important;
max-height: calc(100svh - 20px) !important;
}
}
@media (max-width: 760px) {
body.vertical-page:not(.home-gateway-page) .vertical-subpage-scene__shell {
padding: 26px 20px !important;
}
body.live-demo-body.vertical-page .live-demo-shell .vertical-subpage-scene__shell {
padding: 26px 22px !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-page-proof,
body.vertical-page:not(.home-gateway-page) .vertical-dashboard-preview {
gap: 10px !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-page-proof {
width: 100% !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-page-proof span,
body.vertical-page:not(.home-gateway-page) .vertical-page-summary__flow span {
flex: 1 1 100% !important;
min-height: 42px !important;
justify-content: center !important;
text-align: center !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-page-summary__flow span {
font-size: 0.72rem !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-dashboard-preview article {
padding: 18px 16px !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-subpage-result a,
body.live-demo-body .live-demo-call-number a {
display: inline-flex !important;
min-height: 42px !important;
align-items: center !important;
justify-content: center !important;
padding-block: 8px !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-page-nav__inner {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
justify-content: stretch !important;
flex-wrap: initial !important;
overflow: visible !important;
scroll-snap-type: none !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-page-nav__inner a {
flex: initial !important;
width: 100% !important;
min-width: 0 !important;
min-height: 44px !important;
padding-inline: 10px !important;
line-height: 1.15 !important;
white-space: normal !important;
text-align: center !important;
scroll-snap-align: unset !important;
}
.demo-booking-modal {
padding: 8px !important;
}
.demo-booking-modal__dialog {
width: calc(100vw - 16px) !important;
height: calc(100svh - 16px) !important;
max-height: calc(100svh - 16px) !important;
}
}
@media (max-width: 767px) {
.pm-toc {
padding: 16px !important;
}
.pm-toc ol {
display: grid !important;
columns: 1 !important;
gap: 6px !important;
padding-left: 0 !important;
list-style: none !important;
}
.pm-toc li {
margin: 0 !important;
}
.pm-toc a {
display: flex !important;
min-height: 44px !important;
align-items: center !important;
padding: 8px 0 !important;
line-height: 1.25 !important;
}
}
@media (max-width: 720px) {
.demo-booking-modal {
padding: 0 !important;
}
.demo-booking-modal__dialog {
width: 100vw !important;
height: 100svh !important;
max-height: 100svh !important;
margin: 0 !important;
border-radius: 0 !important;
overflow: hidden !important;
}
.demo-booking-modal__body {
min-height: 0 !important;
overflow: hidden !important;
}
.public-vertical-tabs__shell {
overflow: hidden !important;
}
.public-vertical-tabs__nav {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 8px !important;
width: 100% !important;
min-width: 0 !important;
overflow: visible !important;
padding-bottom: 0 !important;
scroll-snap-type: none !important;
scrollbar-width: none !important;
}
.public-vertical-tabs__nav a {
min-width: 0 !important;
min-height: 66px !important;
padding: 11px 10px !important;
scroll-snap-align: unset !important;
}
.public-vertical-tabs__nav strong {
font-size: 0.84rem !important;
}
.public-vertical-tabs__nav small {
font-size: 0.72rem !important;
line-height: 1.25 !important;
}
}
@media (max-width: 640px) {
body.comparison-page .comparison-table-wrap {
overflow: visible !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
body.comparison-page .comparison-table {
display: block !important;
width: 100% !important;
min-width: 0 !important;
border-collapse: separate !important;
}
body.comparison-page .comparison-table thead {
display: none !important;
}
body.comparison-page .comparison-table tbody,
body.comparison-page .comparison-table tr,
body.comparison-page .comparison-table th,
body.comparison-page .comparison-table td {
display: block !important;
width: 100% !important;
}
body.comparison-page .comparison-table tr {
margin-bottom: 10px !important;
padding: 14px !important;
border: 1px solid rgba(148, 163, 184, 0.16) !important;
border-radius: 8px !important;
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025)),
rgba(15, 23, 42, 0.74) !important;
box-shadow: 0 16px 34px rgba(2, 6, 23, 0.16) !important;
}
body.comparison-page .comparison-table tbody th {
margin: 0 0 8px !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
color: var(--text) !important;
font-size: 0.98rem !important;
line-height: 1.18 !important;
}
body.comparison-page .comparison-table td {
position: relative !important;
min-height: 34px !important;
padding: 8px 0 8px 132px !important;
border: 0 !important;
background: transparent !important;
color: var(--subtitle) !important;
font-size: 0.88rem !important;
line-height: 1.34 !important;
overflow-wrap: anywhere !important;
}
body.comparison-page .comparison-table td::before {
position: absolute !important;
left: 0 !important;
top: 8px !important;
width: 118px !important;
color: #79d8ff !important;
font-size: 0.68rem !important;
font-weight: 950 !important;
letter-spacing: 0.03em !important;
line-height: 1.2 !important;
text-transform: uppercase !important;
}
body.comparison-page .comparison-table td:nth-child(2)::before { content: "Messagerie" !important; }
body.comparison-page .comparison-table td:nth-child(3)::before { content: "SVI" !important; }
body.comparison-page .comparison-table td:nth-child(4)::before { content: "Callbot" !important; }
body.comparison-page .comparison-table td:nth-child(5)::before { content: "Standard" !important; }
body.comparison-page .comparison-table td:nth-child(6)::before { content: "Decroche.ai" !important; }
body.landing-refresh[data-theme="light"].comparison-page .comparison-table tr {
background: rgba(255, 255, 255, 0.96) !important;
border-color: rgba(15, 23, 42, 0.1) !important;
box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08) !important;
}
}
/* Public audit 2026-07-11 B: remove measurable clipping and restore tap targets. */
body.live-demo-body .live-demo-personalizer__copy p,
body.live-demo-body .live-demo-business-status,
body.live-demo-body .live-demo-feature-strip p,
body.live-demo-body .live-demo-phone__copy > p,
body.blog-index-page:not(.app-shell) .guide-card-grid article p,
body.article-page:not(.app-shell) .scenario-grid article p,
body.vertical-page:not(.home-gateway-page) .home-steps--process article p,
body.landing-refresh:not(.home-page):not(.home-gateway-page) .home-use-grid article p,
body.landing-refresh:not(.home-page):not(.home-gateway-page) .home-demo-grid article p {
display: block !important;
-webkit-line-clamp: unset !important;
-webkit-box-orient: initial !important;
height: auto !important;
max-height: none !important;
overflow: visible !important;
overflow-y: visible !important;
text-overflow: clip !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-subpage-result a,
body.vertical-page:not(.home-gateway-page) .vertical-integrations-grid article > a {
display: inline-flex !important;
min-height: 42px !important;
align-items: center !important;
justify-content: center !important;
padding-block: 8px !important;
line-height: 1.15 !important;
}
body.demo-booking-page:not(.app-shell) .auth-form input#demo-booking-phone {
min-height: 44px !important;
padding-block: 10px !important;
}
body.landing-refresh:not(.home-gateway-page) .pm-toc a {
display: flex !important;
min-height: 42px !important;
align-items: center !important;
padding-block: 8px !important;
line-height: 1.24 !important;
}
body.landing-refresh:not(.home-gateway-page) .legal-card ul li > a {
display: inline-flex !important;
min-height: 40px !important;
align-items: center !important;
padding-block: 4px !important;
line-height: 1.22 !important;
}
@media (min-width: 761px) and (max-width: 1220px) {
body.blog-index-page:not(.app-shell) .guide-card-grid,
body.article-page:not(.app-shell) .scenario-grid {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
body.blog-index-page:not(.app-shell) .guide-card-grid article,
body.article-page:not(.app-shell) .scenario-grid article {
min-height: 0 !important;
align-content: start !important;
}
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator.vertical-calculator--roi {
grid-template-columns: 1fr !important;
gap: clamp(18px, 2.5vw, 28px) !important;
align-items: start !important;
padding: clamp(22px, 3vw, 34px) !important;
border-color: rgba(125, 211, 252, 0.24) !important;
background:
linear-gradient(135deg, rgba(16, 24, 42, 0.98), rgba(7, 13, 27, 0.98) 58%, rgba(10, 30, 38, 0.74)),
rgba(7, 12, 24, 0.96) !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator.vertical-calculator--roi .vertical-calculator__copy {
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(310px, 0.56fr) !important;
gap: 12px clamp(22px, 3vw, 34px) !important;
align-items: start !important;
max-width: none !important;
min-height: 0 !important;
padding-block: 0 !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator.vertical-calculator--roi .vertical-calculator__copy h2 {
max-width: 36ch !important;
font-size: clamp(2rem, 2.45vw, 2.75rem) !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator.vertical-calculator--roi .vertical-calculator__copy p {
max-width: 58ch !important;
color: rgba(226, 232, 240, 0.78) !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator.vertical-calculator--roi .vertical-calculator__points {
grid-column: 2 !important;
grid-row: 1 / span 3 !important;
grid-template-columns: 1fr !important;
gap: 8px !important;
margin: 0 !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator.vertical-calculator--roi .vertical-calculator__points span {
min-height: 50px !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-start !important;
padding: 10px 12px !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator.vertical-calculator--roi .vertical-calculator__surface {
width: 100% !important;
max-width: none !important;
gap: 18px !important;
padding: clamp(16px, 2vw, 22px) !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator__workbench {
display: grid !important;
grid-template-columns: minmax(280px, 0.56fr) minmax(0, 1.44fr) !important;
gap: clamp(14px, 2vw, 20px) !important;
align-items: stretch !important;
min-width: 0 !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator.vertical-calculator--roi .vertical-calculator__inputs {
grid-template-columns: repeat(3, minmax(150px, 1fr)) !important;
gap: 12px !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator.vertical-calculator--roi .vertical-calculator__inputs label {
grid-template-columns: 1fr !important;
gap: 10px !important;
min-height: 104px !important;
padding: 13px !important;
align-content: space-between !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator.vertical-calculator--roi .vertical-calculator__inputs label > span {
min-height: 2.35em !important;
color: rgba(226, 232, 240, 0.9) !important;
font-size: 0.83rem !important;
line-height: 1.25 !important;
text-wrap: pretty !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator.vertical-calculator--roi .vertical-calculator__inputs input,
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator.vertical-calculator--roi .vertical-calculator__inputs select {
min-height: 52px !important;
padding-inline: 14px !important;
border-color: rgba(148, 163, 184, 0.24) !important;
background: rgba(15, 25, 43, 0.92) !important;
text-align: left !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator.vertical-calculator--roi .vertical-calculator__inputs select {
padding-inline-end: 38px !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator.vertical-calculator--roi .vertical-calculator__results {
grid-template-columns: 1fr !important;
gap: 10px !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator.vertical-calculator--roi .vertical-calculator__result {
min-height: 92px !important;
padding: 16px !important;
background: rgba(255, 255, 255, 0.045) !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator.vertical-calculator--roi .vertical-calculator__result strong {
color: #fff !important;
font-size: clamp(2rem, 2.8vw, 2.55rem) !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator.vertical-calculator--roi .vertical-calculator__result--net {
min-height: 168px !important;
border-color: rgba(244, 223, 174, 0.42) !important;
background:
linear-gradient(160deg, rgba(244, 223, 174, 0.14), rgba(255, 255, 255, 0.035) 42%),
rgba(8, 13, 26, 0.96) !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator.vertical-calculator--roi .vertical-calculator__result--net strong {
font-size: clamp(3rem, 4.7vw, 4rem) !important;
}
@media (max-width: 1180px) {
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator.vertical-calculator--roi {
gap: 18px !important;
padding: 22px !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator.vertical-calculator--roi .vertical-calculator__copy {
gap: 10px !important;
grid-template-columns: minmax(0, 1fr) !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator.vertical-calculator--roi .vertical-calculator__points {
grid-column: 1 !important;
grid-row: auto !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator.vertical-calculator--roi .vertical-calculator__points span {
min-height: 54px !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-start !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator.vertical-calculator--roi .vertical-calculator__surface {
gap: 14px !important;
padding: 18px !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator.vertical-calculator--roi .vertical-calculator__inputs label {
min-height: 98px !important;
padding: 12px !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator.vertical-calculator--roi .vertical-calculator__result {
min-height: 82px !important;
padding: 14px !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator.vertical-calculator--roi .vertical-calculator__result--net {
min-height: 146px !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator.vertical-calculator--roi .vertical-calculator__result--net strong {
font-size: clamp(2.8rem, 4.2vw, 3.55rem) !important;
}
}
@media (max-width: 980px) {
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator__workbench {
grid-template-columns: 1fr !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator.vertical-calculator--roi .vertical-calculator__results {
grid-template-columns: minmax(0, 1.15fr) repeat(2, minmax(0, 0.86fr)) !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator.vertical-calculator--roi .vertical-calculator__result--net {
min-height: 128px !important;
}
}
@media (max-width: 860px) {
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator.vertical-calculator--roi .vertical-calculator__inputs {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
@media (max-width: 760px) {
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator.vertical-calculator--roi {
width: min(100% - 28px, var(--container, 1180px)) !important;
max-width: calc(100% - 28px) !important;
padding: 18px !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator.vertical-calculator--roi .vertical-calculator__copy {
display: flex !important;
gap: 14px !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator.vertical-calculator--roi .vertical-calculator__copy h2 {
font-size: 1.9rem !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator.vertical-calculator--roi .vertical-calculator__points {
grid-template-columns: 1fr !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator.vertical-calculator--roi .vertical-calculator__points span {
min-height: 0 !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-start !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator.vertical-calculator--roi .vertical-calculator__inputs {
grid-template-columns: 1fr !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator.vertical-calculator--roi .vertical-calculator__inputs label {
grid-template-columns: minmax(0, 1fr) minmax(98px, 116px) !important;
min-height: 68px !important;
align-items: center !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator.vertical-calculator--roi .vertical-calculator__inputs label > span {
min-height: 0 !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator.vertical-calculator--roi .vertical-calculator__surface {
padding: 14px !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator.vertical-calculator--roi .vertical-calculator__results {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator.vertical-calculator--roi .vertical-calculator__result {
min-height: 88px !important;
padding: 14px !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator.vertical-calculator--roi .vertical-calculator__result strong {
font-size: 2.05rem !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator.vertical-calculator--roi .vertical-calculator__result:not(.vertical-calculator__result--net) strong {
font-size: 1.55rem !important;
white-space: nowrap !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator.vertical-calculator--roi .vertical-calculator__result--net {
grid-column: 1 / -1 !important;
min-height: 136px !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator.vertical-calculator--roi .vertical-calculator__result--net strong {
font-size: 2.75rem !important;
}
}
/* Public calculator ROI refit 2026-07-12 */
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator.vertical-calculator--roi {
display: grid !important;
grid-template-columns: minmax(260px, 0.62fr) minmax(0, 1.38fr) !important;
width: min(calc(100% - 32px), 1180px) !important;
gap: clamp(18px, 2.4vw, 28px) !important;
align-items: stretch !important;
padding: clamp(18px, 2.2vw, 28px) !important;
border-color: rgba(125, 211, 252, 0.22) !important;
border-radius: 24px !important;
background:
linear-gradient(140deg, rgba(15, 23, 42, 0.98), rgba(7, 13, 27, 0.98) 56%, rgba(12, 42, 48, 0.64)),
rgba(7, 12, 24, 0.96) !important;
box-shadow: 0 26px 64px rgba(0, 0, 0, 0.22) !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator.vertical-calculator--roi .vertical-calculator__copy {
display: grid !important;
grid-template-columns: 1fr !important;
align-content: space-between !important;
gap: 18px !important;
max-width: none !important;
min-height: 100% !important;
padding: 6px 0 !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator__intro {
display: grid !important;
gap: 13px !important;
min-width: 0 !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator__intro .home-eyebrow {
margin-bottom: 0 !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator.vertical-calculator--roi .vertical-calculator__copy h2 {
max-width: 18ch !important;
font-size: clamp(1.9rem, 2.3vw, 2.55rem) !important;
line-height: 1.08 !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator.vertical-calculator--roi .vertical-calculator__copy p {
max-width: 42ch !important;
color: rgba(226, 232, 240, 0.76) !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator.vertical-calculator--roi .vertical-calculator__points {
display: grid !important;
grid-column: auto !important;
grid-row: auto !important;
grid-template-columns: 1fr !important;
gap: 8px !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator.vertical-calculator--roi .vertical-calculator__points span {
min-height: 48px !important;
padding: 10px 12px !important;
border-color: rgba(244, 223, 174, 0.16) !important;
background: rgba(255, 255, 255, 0.04) !important;
font-size: 0.82rem !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator.vertical-calculator--roi .vertical-calculator__surface {
display: grid !important;
height: 100% !important;
gap: 14px !important;
padding: clamp(16px, 2vw, 22px) !important;
border-radius: 20px !important;
background:
linear-gradient(180deg, rgba(24, 35, 57, 0.92), rgba(10, 17, 32, 0.96)),
rgba(12, 18, 34, 0.92) !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator__panel-head {
padding-bottom: 10px !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator__workbench {
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(300px, 0.52fr) !important;
gap: clamp(12px, 1.8vw, 18px) !important;
align-items: stretch !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator.vertical-calculator--roi .vertical-calculator__inputs {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 10px !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator.vertical-calculator--roi .vertical-calculator__inputs label {
display: grid !important;
grid-template-columns: 1fr !important;
align-content: space-between !important;
gap: 8px !important;
min-height: 96px !important;
padding: 11px 12px !important;
border-color: rgba(148, 163, 184, 0.18) !important;
background: rgba(255, 255, 255, 0.04) !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator.vertical-calculator--roi .vertical-calculator__inputs label > span {
min-height: 0 !important;
font-size: 0.82rem !important;
line-height: 1.24 !important;
overflow-wrap: normal !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator.vertical-calculator--roi .vertical-calculator__inputs input,
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator.vertical-calculator--roi .vertical-calculator__inputs select {
min-height: 48px !important;
padding-inline: 12px !important;
border-color: rgba(148, 163, 184, 0.24) !important;
background: rgba(13, 24, 42, 0.92) !important;
color: #fff !important;
-webkit-text-fill-color: #fff !important;
text-align: right !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator.vertical-calculator--roi .vertical-calculator__inputs select {
padding-inline-end: 30px !important;
text-align: left !important;
text-overflow: clip !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator.vertical-calculator--roi .vertical-calculator__results {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 10px !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator.vertical-calculator--roi .vertical-calculator__result {
min-height: 94px !important;
padding: 14px !important;
border-color: rgba(148, 163, 184, 0.16) !important;
background: rgba(255, 255, 255, 0.045) !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator.vertical-calculator--roi .vertical-calculator__result span {
color: rgba(226, 232, 240, 0.84) !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator.vertical-calculator--roi .vertical-calculator__result strong {
color: #fff !important;
font-size: clamp(1.9rem, 2.6vw, 2.45rem) !important;
letter-spacing: 0 !important;
white-space: nowrap !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator.vertical-calculator--roi .vertical-calculator__result--net {
grid-column: 1 / -1 !important;
min-height: 150px !important;
border-color: rgba(244, 223, 174, 0.38) !important;
background:
linear-gradient(155deg, rgba(244, 223, 174, 0.15), rgba(125, 211, 252, 0.055) 52%),
rgba(8, 13, 26, 0.96) !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator.vertical-calculator--roi .vertical-calculator__result--net span,
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator.vertical-calculator--roi .vertical-calculator__result--net strong {
color: #f7ecd0 !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator.vertical-calculator--roi .vertical-calculator__result--net strong {
font-size: clamp(2.7rem, 4vw, 3.7rem) !important;
}
@media (max-width: 1120px) {
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator.vertical-calculator--roi {
grid-template-columns: 1fr !important;
padding: 22px !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator.vertical-calculator--roi .vertical-calculator__copy {
grid-template-columns: minmax(0, 1fr) minmax(280px, 0.52fr) !important;
align-items: end !important;
min-height: 0 !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator.vertical-calculator--roi .vertical-calculator__copy h2 {
max-width: 28ch !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator.vertical-calculator--roi .vertical-calculator__points {
grid-template-columns: 1fr !important;
}
}
@media (max-width: 940px) {
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator__workbench {
grid-template-columns: 1fr !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator.vertical-calculator--roi .vertical-calculator__results {
grid-template-columns: minmax(0, 1.12fr) repeat(2, minmax(0, 0.94fr)) !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator.vertical-calculator--roi .vertical-calculator__result--net {
grid-column: auto !important;
min-height: 118px !important;
}
}
@media (max-width: 760px) {
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator.vertical-calculator--roi {
width: min(calc(100% - 28px), 1180px) !important;
padding: 16px !important;
gap: 16px !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator.vertical-calculator--roi .vertical-calculator__copy {
grid-template-columns: 1fr !important;
gap: 14px !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator.vertical-calculator--roi .vertical-calculator__copy h2 {
font-size: 1.75rem !important;
max-width: none !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator.vertical-calculator--roi .vertical-calculator__surface {
padding: 12px !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator__panel-head {
flex-direction: row !important;
align-items: center !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator.vertical-calculator--roi .vertical-calculator__inputs {
grid-template-columns: 1fr !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator.vertical-calculator--roi .vertical-calculator__inputs label {
grid-template-columns: 1fr !important;
min-height: 0 !important;
padding: 10px !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator.vertical-calculator--roi .vertical-calculator__inputs input,
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator.vertical-calculator--roi .vertical-calculator__inputs select {
min-height: 46px !important;
font-size: 1rem !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator.vertical-calculator--roi .vertical-calculator__results {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator.vertical-calculator--roi .vertical-calculator__result {
min-height: 86px !important;
padding: 13px !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator.vertical-calculator--roi .vertical-calculator__result strong {
font-size: 1.55rem !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator.vertical-calculator--roi .vertical-calculator__result--net {
grid-column: 1 / -1 !important;
min-height: 126px !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator.vertical-calculator--roi .vertical-calculator__result--net strong {
font-size: 2.55rem !important;
}
}
/* Public accessibility utility. */
.sr-only {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* Public audit 2026-07-12 C: cards must not clip useful copy. */
body.landing-refresh:not(.home-page):not(.home-gateway-page):not(.app-shell) .legal-hero,
body.landing-refresh:not(.home-page):not(.home-gateway-page):not(.app-shell) .legal-hero__card,
body.landing-refresh:not(.home-page):not(.home-gateway-page):not(.app-shell) .core-product-stage__grid,
body.landing-refresh:not(.home-page):not(.home-gateway-page):not(.app-shell) .legal-card,
body.landing-refresh:not(.home-page):not(.home-gateway-page):not(.app-shell) .home-demo-grid article,
body.landing-refresh:not(.home-page):not(.home-gateway-page):not(.app-shell) .home-use-grid article,
body.landing-refresh:not(.home-page):not(.home-gateway-page):not(.app-shell) .guide-card-grid article,
body.landing-refresh:not(.home-page):not(.home-gateway-page):not(.app-shell) .demo-booking-launch__card {
height: auto !important;
max-height: none !important;
overflow: visible !important;
overflow-x: visible !important;
overflow-y: visible !important;
}
body.landing-refresh:not(.home-page):not(.home-gateway-page):not(.app-shell) :is(.legal-card, .home-demo-grid article, .home-use-grid article, .guide-card-grid article)::after {
display: none !important;
}
body.support-page:not(.app-shell) .legal-grid--support .legal-card p,
body.support-page:not(.app-shell) .legal-grid--support .legal-card li,
body.landing-refresh:not(.home-page):not(.home-gateway-page):not(.app-shell) .demo-booking-launch__card p,
body.blog-index-page:not(.app-shell) .guide-card-grid article p {
display: block !important;
height: auto !important;
max-height: none !important;
overflow: visible !important;
-webkit-line-clamp: unset !important;
-webkit-box-orient: initial !important;
}
body.blog-index-page:not(.app-shell) .guide-card-grid article .btn,
body.blog-index-page:not(.app-shell) .home-use-grid .btn,
body.live-demo-body:not(.app-shell) .live-demo-phone__copy a[href^="tel:"] {
display: inline-flex !important;
min-height: 42px !important;
align-items: center !important;
justify-content: center !important;
padding-block: 8px !important;
line-height: 1.15 !important;
}
body.blog-index-page:not(.app-shell) .guide-card-grid article .btn {
width: 100% !important;
}
body.demo-booking-page.landing-refresh:not(.home-page):not(.home-gateway-page) .demo-booking-section,
body.demo-booking-page.landing-refresh:not(.home-page):not(.home-gateway-page) .demo-booking-shell,
body.demo-booking-page.landing-refresh:not(.home-page):not(.home-gateway-page) .demo-booking-launch,
body.demo-booking-page.landing-refresh:not(.home-page):not(.home-gateway-page) .demo-booking-launch__card {
max-width: 100% !important;
overflow-x: hidden !important;
}
body.demo-booking-page.landing-refresh:not(.home-page):not(.home-gateway-page) .demo-booking-launch__card {
overflow: hidden !important;
}
body.demo-booking-page.landing-refresh:not(.home-page):not(.home-gateway-page) .demo-booking-launch__card::before {
left: 0 !important;
width: min(260px, 45%) !important;
}
body.demo-booking-page.landing-refresh:not(.home-page):not(.home-gateway-page) .demo-booking-launch__card::after {
right: 0 !important;
width: min(220px, 38%) !important;
}
body.about-page:not(.app-shell) .core-product-stage__copy {
overflow-x: hidden !important;
}
/* Public final DOM polish 2026-07-12: restore breathing room where useful copy was clipped. */
@media (min-width: 981px) {
body.about-page:not(.app-shell):not(.home-gateway-page) .core-product-stage__grid {
grid-template-columns: minmax(420px, 0.98fr) minmax(420px, 1.02fr) !important;
gap: clamp(24px, 3vw, 34px) !important;
padding: clamp(24px, 3vw, 36px) !important;
overflow: visible !important;
}
body.about-page:not(.app-shell):not(.home-gateway-page) .core-product-stage__copy {
overflow: visible !important;
}
body.about-page:not(.app-shell):not(.home-gateway-page) .core-product-stage__copy h2 {
max-width: 13ch !important;
font-size: clamp(2.55rem, 3.9vw, 3.45rem) !important;
line-height: 1.03 !important;
}
body.about-page:not(.app-shell):not(.home-gateway-page) .core-product-stage__copy p {
max-width: 46ch !important;
}
body.about-page:not(.app-shell):not(.home-gateway-page) .core-product-flow {
grid-template-columns: 1fr !important;
}
body.about-page:not(.app-shell):not(.home-gateway-page) .core-product-flow li {
min-height: 46px !important;
}
body.about-page:not(.app-shell):not(.home-gateway-page) .core-product-flow span {
white-space: normal !important;
overflow-wrap: normal !important;
word-break: normal !important;
}
}
@media (min-width: 761px) and (max-width: 1220px) {
body.landing-refresh.industry-page.restaurant-voice-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-cta__card {
grid-template-columns: 1fr !important;
justify-items: center !important;
text-align: center !important;
overflow: visible !important;
}
body.landing-refresh.industry-page.restaurant-voice-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-cta__actions {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
justify-self: center !important;
width: min(100%, 620px) !important;
max-width: calc(100vw - 120px) !important;
margin-inline: auto !important;
gap: 12px !important;
overflow: visible !important;
}
body.landing-refresh.industry-page.restaurant-voice-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-cta__actions .btn {
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
white-space: normal !important;
overflow-wrap: normal !important;
}
body.landing-refresh.industry-page.restaurant-voice-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-cta__actions .btn:last-child {
grid-column: 1 / -1 !important;
justify-self: center !important;
width: min(100%, 340px) !important;
}
}
@media (max-width: 760px) {
body.demo-booking-page.landing-refresh:not(.home-page):not(.home-gateway-page) .demo-booking-launch__card {
padding: clamp(18px, 5vw, 22px) !important;
border-radius: 20px !important;
}
body.demo-booking-page.landing-refresh:not(.home-page):not(.home-gateway-page) .demo-booking-launch__card .demo-booking-launch__copy p {
display: none !important;
}
body.demo-booking-page.landing-refresh:not(.home-page):not(.home-gateway-page) .demo-booking-launch__copy h3 {
max-width: 100% !important;
font-size: clamp(1.65rem, 7.4vw, 2rem) !important;
line-height: 1.07 !important;
letter-spacing: 0 !important;
}
body.demo-booking-page.landing-refresh:not(.home-page):not(.home-gateway-page) .demo-booking-launch__actions {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 10px !important;
}
body.demo-booking-page.landing-refresh:not(.home-page):not(.home-gateway-page) .demo-booking-launch__actions .btn {
width: 100% !important;
}
}
@media (min-width: 761px) and (max-width: 1220px) {
body.restaurant-voice-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-cta__actions {
overflow-x: hidden !important;
}
body.landing-refresh.industry-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-cta__actions {
display: grid !important;
grid-template-columns: 1fr !important;
justify-self: end !important;
width: min(100%, 340px) !important;
max-width: 340px !important;
gap: 10px !important;
}
body.landing-refresh.industry-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-cta__actions .btn {
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
}
}
/* Public responsive copy density 2026-07-12: keep small screens focused. */
@media (max-width: 1180px) {
body.vertical-page:not(.home-gateway-page):not(.app-shell) .vertical-subpage-call__transcript p:nth-child(n+3),
body.vertical-page:not(.home-gateway-page):not(.app-shell) .vertical-subpage-result li:nth-child(n+3),
body.vertical-page:not(.home-gateway-page):not(.app-shell) .vertical-subpage-scene__timeline article:nth-child(n+3),
body.vertical-page:not(.home-gateway-page):not(.app-shell) .core-product-flow article p,
body.vertical-page:not(.home-gateway-page):not(.app-shell) .core-product-toolflow article p,
body.vertical-page:not(.home-gateway-page):not(.app-shell) .core-product-board__split article p,
body.how-it-works-page:not(.app-shell) .core-product-board__split article p,
body.how-it-works-page:not(.app-shell) .how-guided-step p:nth-of-type(n+2) {
display: none !important;
}
body.vertical-page:not(.home-gateway-page):not(.app-shell) .vertical-subpage-scene__timeline {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
@media (max-width: 760px) {
body.vertical-page:not(.home-gateway-page):not(.app-shell) .vertical-hero__copy > p,
body.vertical-page:not(.home-gateway-page):not(.app-shell) .vertical-subpage-scene__copy > p,
body.vertical-page:not(.home-gateway-page):not(.app-shell) .core-product-stage__copy > p,
body.vertical-page:not(.home-gateway-page):not(.app-shell) .vertical-calculator__copy p,
body.landing-refresh.marketing-page:not(.home-page):not(.home-gateway-page):not(.app-shell) .home-section__head > p,
body.landing-refresh.marketing-page:not(.home-page):not(.home-gateway-page):not(.app-shell) .legal-hero__card > p,
body.landing-refresh.marketing-page:not(.home-page):not(.home-gateway-page):not(.app-shell) .pricing-clarity__intro p,
body.how-it-works-page:not(.app-shell) .home-how-hub__intro > p,
body.how-it-works-page:not(.app-shell) .core-product-stage__copy > p,
body.how-it-works-page:not(.app-shell) .home-premium-section-head > p,
body.how-it-works-page:not(.app-shell) .how-guided-tour__head p,
body.how-it-works-page:not(.app-shell) .how-guided-card__note,
body.how-it-works-page:not(.app-shell) .home-agent-rule p,
body.how-it-works-page:not(.app-shell) .home-studio-message p,
body.how-it-works-page:not(.app-shell) .home-voice-panel > p,
body.how-it-works-page:not(.app-shell) .home-voice-reco small {
display: none !important;
}
body.vertical-page:not(.home-gateway-page):not(.app-shell) .vertical-page-proof span:nth-child(n+3),
body.vertical-page:not(.home-gateway-page):not(.app-shell) .vertical-subpage-scene__chips span:nth-child(n+3),
body.vertical-page:not(.home-gateway-page):not(.app-shell) .vertical-subpage-call__transcript p:nth-child(n+2),
body.vertical-page:not(.home-gateway-page):not(.app-shell) .vertical-subpage-result strong,
body.vertical-page:not(.home-gateway-page):not(.app-shell) .vertical-subpage-result li:nth-child(n+2),
body.vertical-page:not(.home-gateway-page):not(.app-shell) .vertical-subpage-scene__timeline,
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page):not(.app-shell) .vertical-calculator.vertical-calculator--roi .vertical-calculator__points,
body.landing-refresh.marketing-page:not(.home-page):not(.home-gateway-page):not(.app-shell) .guide-card-grid article p,
body.landing-refresh.marketing-page:not(.home-page):not(.home-gateway-page):not(.app-shell) .pricing-clarity-card p,
body.landing-refresh.marketing-page:not(.home-page):not(.home-gateway-page):not(.app-shell) .home-demo-grid article p,
body.landing-refresh.marketing-page:not(.home-page):not(.home-gateway-page):not(.app-shell) .home-use-grid article p,
body.how-it-works-page:not(.app-shell) .home-source-grid article p,
body.how-it-works-page:not(.app-shell) .home-level-grid article p,
body.how-it-works-page:not(.app-shell) .home-mode-grid article p,
body.how-it-works-page:not(.app-shell) .home-usecase-grid article p,
body.how-it-works-page:not(.app-shell) .home-agent-detected span:nth-child(n+3),
body.how-it-works-page:not(.app-shell) .home-agent-flow li:nth-child(n+4) {
display: none !important;
}
body.vertical-page:not(.home-gateway-page):not(.app-shell) .vertical-subpage-call,
body.vertical-page:not(.home-gateway-page):not(.app-shell) .vertical-subpage-result,
body.how-it-works-page:not(.app-shell) .home-agent-prep-card,
body.how-it-works-page:not(.app-shell) .home-agent-build-card {
gap: 10px !important;
}
body.vertical-page:not(.home-gateway-page):not(.app-shell) .core-product-stage__grid,
body.how-it-works-page:not(.app-shell) .core-product-stage__grid {
gap: 16px !important;
}
}
/* Public production app-shell bridge 2026-07-12: public pages carry app-shell in prod. */
body.landing-refresh.app-shell:not(.home-page):not(.home-gateway-page) .legal-hero,
body.landing-refresh.app-shell:not(.home-page):not(.home-gateway-page) .legal-hero__card,
body.landing-refresh.app-shell:not(.home-page):not(.home-gateway-page) .core-product-stage__grid,
body.landing-refresh.app-shell:not(.home-page):not(.home-gateway-page) .legal-card,
body.landing-refresh.app-shell:not(.home-page):not(.home-gateway-page) .home-demo-grid article,
body.landing-refresh.app-shell:not(.home-page):not(.home-gateway-page) .home-use-grid article,
body.landing-refresh.app-shell:not(.home-page):not(.home-gateway-page) .guide-card-grid article,
body.landing-refresh.app-shell:not(.home-page):not(.home-gateway-page) .demo-booking-launch__card {
height: auto !important;
max-height: none !important;
overflow: visible !important;
overflow-x: visible !important;
overflow-y: visible !important;
}
body.landing-refresh.app-shell:not(.home-page):not(.home-gateway-page) :is(.legal-card, .home-demo-grid article, .home-use-grid article, .guide-card-grid article)::after {
display: none !important;
}
/* Public audit 2026-07-12 D: on /exemples-appels/, clip hero halos only.
The global anti-clipping layer above is for useful copy, not decorative glows. */
body.landing-refresh.call-examples-page:not(.home-page):not(.home-gateway-page):not(.app-shell) .legal-hero,
body.landing-refresh.call-examples-page:not(.home-page):not(.home-gateway-page):not(.app-shell) .legal-hero__card,
body.landing-refresh.call-examples-page.app-shell:not(.home-page):not(.home-gateway-page) .legal-hero,
body.landing-refresh.call-examples-page.app-shell:not(.home-page):not(.home-gateway-page) .legal-hero__card {
overflow: hidden !important;
overflow-x: hidden !important;
overflow-y: hidden !important;
}
body.support-page.app-shell .legal-grid--support .legal-card p,
body.support-page.app-shell .legal-grid--support .legal-card li,
body.landing-refresh.app-shell:not(.home-page):not(.home-gateway-page) .demo-booking-launch__card p,
body.blog-index-page.app-shell .guide-card-grid article p {
display: block !important;
height: auto !important;
max-height: none !important;
overflow: visible !important;
-webkit-line-clamp: unset !important;
-webkit-box-orient: initial !important;
}
body.blog-index-page.app-shell .guide-card-grid article .btn,
body.blog-index-page.app-shell .home-use-grid .btn,
body.live-demo-body.app-shell .live-demo-phone__copy a[href^="tel:"] {
display: inline-flex !important;
min-height: 42px !important;
align-items: center !important;
justify-content: center !important;
padding-block: 8px !important;
line-height: 1.15 !important;
}
body.blog-index-page.app-shell .guide-card-grid article .btn {
width: 100% !important;
}
@media (max-width: 1180px) {
body.vertical-page.app-shell:not(.home-gateway-page) .vertical-subpage-call__transcript p:nth-child(n+3),
body.vertical-page.app-shell:not(.home-gateway-page) .vertical-subpage-result li:nth-child(n+3),
body.vertical-page.app-shell:not(.home-gateway-page) .vertical-subpage-scene__timeline article:nth-child(n+3),
body.vertical-page.app-shell:not(.home-gateway-page) .core-product-flow article p,
body.vertical-page.app-shell:not(.home-gateway-page) .core-product-toolflow article p,
body.vertical-page.app-shell:not(.home-gateway-page) .core-product-board__split article p,
body.how-it-works-page.app-shell .core-product-board__split article p,
body.how-it-works-page.app-shell .how-guided-step p:nth-of-type(n+2) {
display: none !important;
}
body.vertical-page.app-shell:not(.home-gateway-page) .vertical-subpage-scene__timeline {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
@media (max-width: 760px) {
body.vertical-page.app-shell:not(.home-gateway-page) .vertical-hero__copy > p,
body.vertical-page.app-shell:not(.home-gateway-page) .vertical-subpage-scene__copy > p,
body.vertical-page.app-shell:not(.home-gateway-page) .core-product-stage__copy > p,
body.vertical-page.app-shell:not(.home-gateway-page) .vertical-calculator__copy p,
body.landing-refresh.marketing-page.app-shell:not(.home-page):not(.home-gateway-page) .home-section__head > p,
body.landing-refresh.marketing-page.app-shell:not(.home-page):not(.home-gateway-page) .legal-hero__card > p,
body.landing-refresh.marketing-page.app-shell:not(.home-page):not(.home-gateway-page) .pricing-clarity__intro p,
body.how-it-works-page.app-shell .home-how-hub__intro > p,
body.how-it-works-page.app-shell .core-product-stage__copy > p,
body.how-it-works-page.app-shell .home-premium-section-head > p,
body.how-it-works-page.app-shell .how-guided-tour__head p,
body.how-it-works-page.app-shell .how-guided-card__note,
body.how-it-works-page.app-shell .home-agent-rule p,
body.how-it-works-page.app-shell .home-studio-message p,
body.how-it-works-page.app-shell .home-voice-panel > p,
body.how-it-works-page.app-shell .home-voice-reco small {
display: none !important;
}
body.vertical-page.app-shell:not(.home-gateway-page) .vertical-page-proof span:nth-child(n+3),
body.vertical-page.app-shell:not(.home-gateway-page) .vertical-subpage-scene__chips span:nth-child(n+3),
body.vertical-page.app-shell:not(.home-gateway-page) .vertical-subpage-call__transcript p:nth-child(n+2),
body.vertical-page.app-shell:not(.home-gateway-page) .vertical-subpage-result strong,
body.vertical-page.app-shell:not(.home-gateway-page) .vertical-subpage-result li:nth-child(n+2),
body.vertical-page.app-shell:not(.home-gateway-page) .vertical-subpage-scene__timeline,
body.vertical-page--calculateur-appels-manques.app-shell:not(.home-gateway-page) .vertical-calculator.vertical-calculator--roi .vertical-calculator__points,
body.landing-refresh.marketing-page.app-shell:not(.home-page):not(.home-gateway-page) .guide-card-grid article p,
body.landing-refresh.marketing-page.app-shell:not(.home-page):not(.home-gateway-page) .pricing-clarity-card p,
body.landing-refresh.marketing-page.app-shell:not(.home-page):not(.home-gateway-page) .home-demo-grid article p,
body.landing-refresh.marketing-page.app-shell:not(.home-page):not(.home-gateway-page) .home-use-grid article p,
body.how-it-works-page.app-shell .home-source-grid article p,
body.how-it-works-page.app-shell .home-level-grid article p,
body.how-it-works-page.app-shell .home-mode-grid article p,
body.how-it-works-page.app-shell .home-usecase-grid article p,
body.how-it-works-page.app-shell .home-agent-detected span:nth-child(n+3),
body.how-it-works-page.app-shell .home-agent-flow li:nth-child(n+4) {
display: none !important;
}
body.vertical-page.app-shell:not(.home-gateway-page) .vertical-subpage-call,
body.vertical-page.app-shell:not(.home-gateway-page) .vertical-subpage-result,
body.how-it-works-page.app-shell .home-agent-prep-card,
body.how-it-works-page.app-shell .home-agent-build-card {
gap: 10px !important;
}
body.vertical-page.app-shell:not(.home-gateway-page) .core-product-stage__grid,
body.how-it-works-page.app-shell .core-product-stage__grid {
gap: 16px !important;
}
}
/* Public device-adaptive copy density 2026-07-12: reduce secondary text on mobile and iPad. */
@media (max-width: 1240px) {
body.landing-refresh:not(.home-page):not(.home-gateway-page) .core-product-board__split article p,
body.landing-refresh:not(.home-page):not(.home-gateway-page) .core-product-toolflow article p,
body.landing-refresh:not(.home-page):not(.home-gateway-page) .home-demo-grid article p,
body.landing-refresh:not(.home-page):not(.home-gateway-page) .home-use-grid article p,
body.landing-refresh:not(.home-page):not(.home-gateway-page) .pricing-clarity-card p,
body.landing-refresh:not(.home-page):not(.home-gateway-page) .pricing-driver p,
body.vertical-page:not(.home-gateway-page) .core-product-flow article p,
body.vertical-page:not(.home-gateway-page) .core-product-toolflow article p {
display: none !important;
}
.demo-booking-modal__dialog {
width: min(1180px, calc(100vw - 20px)) !important;
height: calc(100svh - 20px) !important;
max-height: calc(100svh - 20px) !important;
}
.demo-booking-modal__body,
.demo-booking-modal__iframe {
overflow: hidden !important;
}
.demo-booking-section {
height: auto !important;
max-height: none !important;
overflow: visible !important;
}
}
@media (max-width: 760px) {
body.demo-booking-page .core-product-stage__copy > p,
body.demo-booking-page .home-section__head > p,
body.demo-booking-page .demo-booking-launch__copy p,
body.pricing-page .pricing-transition__main > p,
body.support-page .legal-grid--support .legal-card p {
display: none !important;
}
body.faq-page .home-faq-grid .faq-answer-card {
padding: 18px;
}
body.faq-page .home-faq-grid summary {
grid-template-columns: minmax(0, 1fr) 28px;
gap: 10px;
}
body.faq-page .home-faq-grid summary::after {
width: 28px;
height: 28px;
}
}
/* Device-adaptive visible copy 2026-07-12: short labels on tablet/mobile, full labels on desktop. */
.device-copy--compact {
display: none !important;
}
@media (max-width: 1240px) {
body.landing-refresh:not(.home-page):not(.home-gateway-page) .device-copy--full,
body.vertical-page:not(.home-gateway-page) .device-copy--full,
body.missed-call-calculator-page .device-copy--full {
display: none !important;
}
body.landing-refresh:not(.home-page):not(.home-gateway-page) .device-copy--compact,
body.vertical-page:not(.home-gateway-page) .device-copy--compact,
body.missed-call-calculator-page .device-copy--compact {
display: inline !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator.vertical-calculator--roi .vertical-calculator__inputs label > span,
body.missed-call-calculator-page .calculator-form .calculator-field label {
min-height: 0 !important;
text-wrap: balance !important;
}
body.missed-call-calculator-page .calculator-result small {
display: none !important;
}
}
@media (max-width: 760px) {
body.missed-call-calculator-page .calculator-panel__head p {
display: none !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator.vertical-calculator--roi .vertical-calculator__copy p {
display: none !important;
}
}
/* FAQ mobile polish 2026-07-12: keep closed answers closed after late global card rules. */
body.faq-page .home-faq-grid details:not([open]) > p {
display: none !important;
}
body.faq-page .home-faq-grid summary {
min-height: 44px !important;
align-items: center !important;
}
@media (max-width: 760px) {
body.faq-page .home-faq-grid summary::after {
width: 32px !important;
height: 32px !important;
}
body.faq-page .home-faq-grid details[open] > p {
display: -webkit-box !important;
-webkit-box-orient: vertical !important;
-webkit-line-clamp: 4 !important;
overflow: hidden !important;
}
}
/* Device-adaptive public copy 2026-07-12 B: iPad/mobile get shorter text, desktop keeps full copy. */
@media (max-width: 1240px) {
body.how-it-works-page .device-copy--full {
display: none !important;
}
body.how-it-works-page .device-copy--compact {
display: inline !important;
}
}
@media (min-width: 721px) and (max-width: 1220px) {
body.landing-refresh:not(.home-page):not(.home-gateway-page) .legal-hero__card h1,
body.vertical-page:not(.home-gateway-page) .vertical-hero--compact .vertical-hero__copy h1,
body.how-it-works-page .home-how-hub__intro h1 {
max-width: min(100%, 18ch) !important;
font-size: clamp(2.35rem, 4.8vw, 3.65rem) !important;
line-height: 1.04 !important;
text-wrap: balance;
}
body.landing-refresh:not(.home-page):not(.home-gateway-page) .legal-hero__card > p,
body.landing-refresh:not(.home-page):not(.home-gateway-page) .core-product-stage__copy > p,
body.landing-refresh:not(.home-page):not(.home-gateway-page) .home-section__head > p,
body.landing-refresh:not(.home-page):not(.home-gateway-page) .pricing-intro__copy > p,
body.landing-refresh:not(.home-page):not(.home-gateway-page) .pricing-roi-copy > p,
body.landing-refresh:not(.home-page):not(.home-gateway-page) .pricing-transition__main > p,
body.landing-refresh:not(.home-page):not(.home-gateway-page) .restaurant-depth__head > p,
body.landing-refresh:not(.home-page):not(.home-gateway-page) .demo-booking-launch__copy p,
body.how-it-works-page .home-how-hub__intro > p,
body.how-it-works-page .core-product-stage__copy > p,
body.how-it-works-page .home-premium-section-head > p,
body.how-it-works-page .how-guided-tour__head p,
body.how-it-works-page .how-guided-card__note {
display: none !important;
}
body.landing-refresh:not(.home-page):not(.home-gateway-page) :is(.core-product-board__split article p, .core-product-toolflow article p, .home-faq-grid article p, .home-use-grid article p, .guide-card-grid article p, .pricing-clarity-card p, .pricing-driver p, .restaurant-depth__grid article p, .vertical-capability-arguments__grid article p, .vertical-feature-arguments__grid article p),
body.how-it-works-page :is(.home-source-grid article p, .home-level-grid article p, .home-mode-grid article p, .home-usecase-grid article p, .home-agent-rule p, .home-studio-message p, .home-voice-panel > p, .home-voice-reco small) {
display: none !important;
}
body.landing-refresh:not(.home-page):not(.home-gateway-page) :is(.core-product-stage__grid, .pricing-roi-shell, .pricing-intro, .pricing-transition__grid),
body.how-it-works-page .core-product-stage__grid {
gap: clamp(16px, 2.6vw, 28px) !important;
}
}
@media (max-width: 760px) {
body.landing-refresh:not(.home-page):not(.home-gateway-page) .core-product-stage__copy > p,
body.landing-refresh:not(.home-page):not(.home-gateway-page) .home-section__head > p,
body.landing-refresh:not(.home-page):not(.home-gateway-page) .legal-hero__card > p,
body.landing-refresh:not(.home-page):not(.home-gateway-page) .pricing-intro__copy > p,
body.landing-refresh:not(.home-page):not(.home-gateway-page) .pricing-roi-copy > p,
body.landing-refresh:not(.home-page):not(.home-gateway-page) .pricing-transition__main > p,
body.landing-refresh:not(.home-page):not(.home-gateway-page) .restaurant-depth__head > p,
body.how-it-works-page .how-guided-step p,
body.how-it-works-page .home-how-hub__intro > p,
body.how-it-works-page .core-product-stage__copy > p {
display: none !important;
}
body.landing-refresh:not(.home-page):not(.home-gateway-page) :is(.core-product-board__split article p, .core-product-toolflow article p, .home-faq-grid article p, .home-use-grid article p, .guide-card-grid article p, .pricing-clarity-card p, .pricing-driver p, .restaurant-depth__grid article p, .vertical-capability-arguments__grid article p, .vertical-feature-arguments__grid article p),
body.how-it-works-page :is(.home-source-grid article p, .home-level-grid article p, .home-mode-grid article p, .home-usecase-grid article p, .home-agent-rule p, .home-studio-message p, .home-voice-panel > p, .home-voice-reco small) {
display: none !important;
}
body.landing-refresh:not(.home-page):not(.home-gateway-page) .demo-booking-launch__facts,
body.landing-refresh:not(.home-page):not(.home-gateway-page) .demo-booking-launch__days,
body.landing-refresh:not(.home-page):not(.home-gateway-page) .demo-booking-launch__actions > span {
display: none !important;
}
body.integrations-page .legal-card li {
padding-block: 5px !important;
line-height: 1.24 !important;
}
}
@media (min-width: 721px) and (max-width: 1220px) {
body.landing-refresh:not(.home-page):not(.home-gateway-page) .legal-hero__card h1 {
max-width: min(100%, 24ch) !important;
font-size: clamp(2.05rem, 3.6vw, 3rem) !important;
line-height: 1.06 !important;
}
body.landing-refresh:not(.home-page):not(.home-gateway-page) :is(.core-product-stage__copy h2, .home-section__head h2, .pricing-intro__copy h2, .pricing-roi-copy h2, .restaurant-depth__head h2),
body.vertical-page:not(.home-gateway-page) :is(.vertical-subpage-scene__copy h2, .vertical-calculator__copy h2) {
max-width: min(100%, 24ch) !important;
font-size: clamp(1.75rem, 3vw, 2.35rem) !important;
line-height: 1.08 !important;
text-wrap: balance;
}
body.landing-refresh:not(.home-page):not(.home-gateway-page) :is(.comparison-impact-card p, .comparison-calculator-card p, .legal-grid--support .legal-card p),
body.vertical-page:not(.home-gateway-page) .vertical-subpage-scene__copy > p {
display: none !important;
}
}
@media (max-width: 760px) {
body.landing-refresh:not(.home-page):not(.home-gateway-page) .legal-hero__card h1 {
max-width: min(100%, 22ch) !important;
font-size: clamp(1.85rem, 7vw, 2.25rem) !important;
line-height: 1.08 !important;
}
}
/* Device-adaptive public copy 2026-07-12 C: keep compact copy visible on tablet/mobile. */
@media (max-width: 1240px) {
body.landing-refresh:not(.home-page):not(.home-gateway-page) p:has(> .device-copy--compact),
body.vertical-page:not(.home-gateway-page) p:has(> .device-copy--compact),
body.how-it-works-page p:has(> .device-copy--compact),
body.missed-call-calculator-page p:has(> .device-copy--compact) {
display: block !important;
}
body.landing-refresh:not(.home-page):not(.home-gateway-page) li:has(> .device-copy--compact),
body.vertical-page:not(.home-gateway-page) li:has(> .device-copy--compact),
body.missed-call-calculator-page li:has(> .device-copy--compact) {
display: list-item !important;
}
body.landing-refresh:not(.home-page):not(.home-gateway-page) :is(h1, h2, h3):has(> .device-copy--compact),
body.vertical-page:not(.home-gateway-page) :is(h1, h2, h3):has(> .device-copy--compact),
body.how-it-works-page :is(h1, h2, h3):has(> .device-copy--compact),
body.missed-call-calculator-page :is(h1, h2, h3):has(> .device-copy--compact) {
text-wrap: balance !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-page-proof span:nth-child(n+4),
body.landing-refresh:not(.home-page):not(.home-gateway-page) .marketing-inline-actions .btn-tertiary:nth-of-type(n+3) {
display: none !important;
}
body.vertical-page--tarifs:not(.home-gateway-page) .vertical-pricing-grid li {
line-height: 1.28 !important;
}
body.missed-call-calculator-page .calculator-result small {
display: none !important;
}
}
@media (min-width: 721px) and (max-width: 1220px) {
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator__intro p:has(> .device-copy--compact),
body.missed-call-calculator-page .calculator-panel__head p:has(> .device-copy--compact) {
max-width: 34ch !important;
}
body.missed-call-calculator-page .calculator-summary-card h3 {
max-width: 20ch !important;
font-size: clamp(1.35rem, 2.4vw, 1.75rem) !important;
line-height: 1.08 !important;
}
}
@media (max-width: 760px) {
body.vertical-page:not(.home-gateway-page) .vertical-page-proof span:nth-child(n+3),
body.missed-call-calculator-page .calculator-summary-card > span {
display: none !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator.vertical-calculator--roi .vertical-calculator__copy p:has(> .device-copy--compact),
body.missed-call-calculator-page .calculator-panel__head p:has(> .device-copy--compact) {
display: block !important;
margin-top: 0 !important;
}
}
/* Public responsive touch targets 2026-07-12: keep authenticated header/footer controls tappable. */
.site-footer a[href],
.site-footer button,
.site-footer__column nav a,
.site-footer__link-button,
.site-footer__meta a {
display: inline-flex !important;
min-height: 46px !important;
align-items: center !important;
}
.site-footer__link-button {
padding-block: 8px !important;
}
.demo-booking-modal input#demo-booking-phone,
body.demo-booking-page input#demo-booking-phone {
min-height: 46px !important;
}
body.landing-refresh:not(.home-page):not(.home-gateway-page) :is(.btn, .public-menu__trigger, .public-menu-toggle, .nav-auth-link),
body.vertical-page:not(.home-gateway-page) :is(.btn, .vertical-page-nav__inner a) {
min-height: 46px !important;
}
@media (max-width: 760px) {
.nav-actions .nav-icon-button,
body.landing-page .nav-actions .nav-icon-button {
width: 46px !important;
min-width: 46px !important;
height: 46px !important;
min-height: 46px !important;
flex-basis: 46px !important;
}
body.landing-refresh:not(.home-page):not(.home-gateway-page) .nav-auth-link {
min-width: 46px !important;
}
}
/* Device-adaptive public copy 2026-07-12 D: let compact badges and section titles wrap instead of clipping. */
body.landing-refresh:not(.home-page):not(.home-gateway-page) :is(.home-eyebrow, .legal-updated, .public-call-story__flow span, .pricing-step-list span, .vertical-calculator__points span),
body.vertical-page:not(.home-gateway-page) :is(.home-eyebrow, .vertical-page-proof span, .vertical-calculator__points span),
body.how-it-works-page :is(.home-eyebrow, .how-guided-step__index) {
max-width: 100% !important;
min-width: 0 !important;
font-size: max(11px, 0.7rem) !important;
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
overflow-wrap: anywhere !important;
line-height: 1.2 !important;
}
body.landing-refresh:not(.home-page):not(.home-gateway-page) :is(.home-demo-grid article > span, .home-use-grid article > span, .guide-card-grid article > span, .public-call-story__cards span, .device-copy--compact),
body.vertical-page:not(.home-gateway-page) :is(.home-demo-grid article > span, .home-use-grid article > span, .vertical-subpage-result strong, .device-copy--compact),
body.how-it-works-page :is(.home-demo-grid article > span, .home-use-grid article > span, .device-copy--compact) {
font-size: max(11px, 0.7rem) !important;
line-height: 1.2 !important;
}
/* Public audit 2026-07-12 F: normalize remaining tablet micro-labels from page-scoped styles. */
@media (min-width: 761px) and (max-width: 1240px) {
body.landing-refresh:not(.home-page):not(.home-gateway-page):not(.app-shell) :is(.home-demo-grid article > span, .home-phone__result > span, .scenario-grid article > span, .scenario-card > span, .scenario-checklist > span, .home-steps article > span),
body.landing-refresh.legal-page:not(.home-gateway-page):not(.app-shell) :is(.pilot-proof-ladder__step > span, .privacy-matrix__row--head > span, .legal-card code),
body.dashboard-showcase-page:not(.app-shell) :is(.dashboard-metric > span, .public-feature-bridge article > span, .dashboard-chip, .dashboard-visual__eyebrow) {
font-size: max(11px, 0.7rem) !important;
line-height: 1.2 !important;
overflow-wrap: anywhere !important;
}
}
@media (min-width: 1000px) and (max-width: 1220px) and (orientation: landscape) {
body.landing-refresh.industry-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-section--split :is(.home-demo-grid article > span, .home-phone__result > span) {
font-size: max(11px, 0.7rem) !important;
line-height: 1.2 !important;
}
}
/* Public audit 2026-07-12 E: remove remaining micro-clipping on reusable public story components. */
body.landing-refresh:not(.home-page):not(.home-gateway-page) .seo-product-call__transcript span:not(.seo-product-call__line) {
font-size: 0.72rem !important;
line-height: 1.22 !important;
}
body.landing-refresh:not(.home-page):not(.home-gateway-page) .public-result-card > strong {
font-size: clamp(1.55rem, 2.4vw, 2.25rem) !important;
line-height: 1.16 !important;
overflow-wrap: anywhere !important;
}
/* Public audit 2026-07-13: let the story phone grow with its content outside the homepage. */
body.landing-refresh:not(.home-page):not(.home-gateway-page) .public-call-story .public-phone-mockup {
aspect-ratio: auto !important;
max-height: none !important;
min-height: max-content !important;
}
body.landing-refresh:not(.home-page):not(.home-gateway-page) .public-call-story .public-phone-mockup__actions {
margin-top: 4px !important;
}
body.landing-refresh:not(.home-page):not(.home-gateway-page) .public-call-story__flow span:not(:last-child)::after {
right: 0 !important;
width: 12px !important;
transform: translate(50%, -50%) !important;
}
body.landing-refresh:not(.home-page):not(.home-gateway-page) .core-product-flow span {
overflow-wrap: anywhere !important;
line-height: 1.24 !important;
}
@media (max-width: 1240px) {
body.landing-refresh:not(.home-page):not(.home-gateway-page) .public-call-story__flow span:not(:last-child)::after {
display: none !important;
}
}
@media (max-width: 1240px) {
body.landing-refresh:not(.home-page):not(.home-gateway-page) .pricing-faq__item p:has(> .device-copy--compact) {
max-width: 62ch !important;
}
}
@media (max-width: 760px) {
body.landing-refresh:not(.home-page):not(.home-gateway-page) :is(.home-section__head h2, .home-cta__card h2, .legal-card h2, .guide-card h2, .scenario-card h2, .risk-card h2, .article-formula h2, .article-checklist h2):has(> .device-copy--compact) {
max-width: min(100%, 18ch) !important;
font-size: clamp(1.55rem, 7vw, 2rem) !important;
line-height: 1.08 !important;
}
body.landing-refresh:not(.home-page):not(.home-gateway-page) .pricing-faq__item p:has(> .device-copy--compact) {
font-size: 0.95rem !important;
line-height: 1.42 !important;
}
}
/* Public mobile tap-target hardening 2026-07-12: override older 42px public rules outside the homepage. */
@media (max-width: 760px) {
html.app-mobile-shell body.landing-refresh:not(.home-page):not(.home-gateway-page) .site-header--public .nav-actions--public :is(.nav-auth-link, .nav-auth-link--primary, .nav-auth-link--secondary, .nav-icon-button, .public-menu-toggle),
html.app-mobile-shell body.vertical-page:not(.home-gateway-page) .site-header--public .nav-actions--public :is(.nav-auth-link, .nav-auth-link--primary, .nav-auth-link--secondary, .nav-icon-button, .public-menu-toggle) {
width: 46px !important;
min-width: 46px !important;
height: 46px !important;
min-height: 46px !important;
flex: 0 0 46px !important;
padding: 0 !important;
}
html.app-mobile-shell body.landing-refresh:not(.home-page):not(.home-gateway-page) :is(.home-hero__actions, .legal-hero .home-hero__actions, .home-cta__actions, .marketing-inline-actions, .pricing-plans-shell__actions) :is(.btn, .btn-primary, .btn-secondary, .btn-tertiary),
html.app-mobile-shell body.vertical-page:not(.home-gateway-page) :is(.home-hero__actions, .home-cta__actions, .marketing-inline-actions, .pricing-plans-shell__actions) :is(.btn, .btn-primary, .btn-secondary, .btn-tertiary) {
min-height: 46px !important;
height: auto !important;
padding-block: 12px !important;
line-height: 1.2 !important;
}
}
/* Public action sizing 2026-07-12: keep compact copy tappable on mobile and iPad without affecting the homepage. */
.site-footer :is(button.site-footer__contact-link, button.site-footer__link-button) {
display: inline-flex !important;
min-height: 46px !important;
height: auto !important;
align-items: center !important;
padding-block: 10px !important;
}
@media (max-width: 1220px) {
body.landing-refresh:not(.home-page):not(.home-gateway-page) :is(a.btn, button.btn, .pricing-plans-shell__actions .btn, .marketing-inline-actions .btn, .home-cta__actions .btn, .home-hero__actions .btn),
body.vertical-page:not(.home-gateway-page) :is(a.btn, button.btn, .pricing-plans-shell__actions .btn, .marketing-inline-actions .btn, .home-cta__actions .btn, .home-hero__actions .btn),
body.how-it-works-page :is(a.btn, button.btn, .home-premium-actions .btn, .home-final-cta__inner .btn, .home-studio-message button) {
min-height: 46px !important;
height: auto !important;
padding-block: 12px !important;
line-height: 1.2 !important;
}
}
@media (max-width: 760px) {
html.app-mobile-shell body.how-it-works-page .site-header--public .nav-actions--public :is(.nav-auth-link, .nav-auth-link--primary, .nav-auth-link--secondary, .nav-icon-button, .public-menu-toggle) {
width: 46px !important;
min-width: 46px !important;
height: 46px !important;
min-height: 46px !important;
flex: 0 0 46px !important;
padding: 0 !important;
}
body.how-it-works-page .home-studio-message button {
min-height: 46px !important;
padding: 12px 14px !important;
}
}
@media (min-width: 761px) and (max-width: 1220px) {
body.landing-refresh.industry-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .home-cta__actions .btn {
min-height: 46px !important;
height: auto !important;
padding-block: 12px !important;
line-height: 1.2 !important;
}
}
body.blog-index-page:not(.app-shell) :is(.article-card a.btn.btn-primary, .blog-card a.btn.btn-primary, a.btn.btn-primary) {
min-height: 46px !important;
height: auto !important;
padding-block: 12px !important;
line-height: 1.2 !important;
}
/* Public compact density pass 2026-07-12 F: keep iPad and phone cards scannable. */
@media (min-width: 761px) and (max-width: 1220px) {
body.landing-refresh.legal-page.onboarding-playbook-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) :is(.home-steps article p, .home-demo-grid article p, .home-faq-grid article p),
body.article-page:not(.app-shell) .scenario-grid article p,
body.landing-refresh.legal-page.pilot-case-studies-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .pilot-metric span,
body.landing-refresh.legal-page.pilot-case-studies-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .pilot-proof-note {
display: none !important;
}
}
@media (max-width: 760px) {
body.landing-refresh.legal-page:not(.home-gateway-page) .legal-grid .legal-card p,
body.article-page:not(.app-shell) .scenario-grid article p,
body.landing-refresh.legal-page.onboarding-playbook-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) :is(.home-steps article p, .home-demo-grid article p, .home-faq-grid article p),
body.landing-refresh.legal-page.pilot-case-studies-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .pilot-metric span,
body.landing-refresh.legal-page.pilot-case-studies-page:not(.app-shell):not(.home-gateway-page):not(.seo-landing-page) .pilot-proof-note {
display: none !important;
}
}
/* How-it-works mobile nav: keep the closed off-canvas menu from widening the page. */
@media (max-width: 1060px) {
html.app-mobile-shell body.how-it-works-page:not(.public-menu-open):not(.app-shell) .site-header--public .public-menu,
body.how-it-works-page:not(.public-menu-open) .site-header--public .public-menu {
display: none !important;
}
}
/* Demo booking page background repair 2026-07-12: paint every public section locally. */
body.demo-booking-page.landing-refresh:not(.home-gateway-page):not(.app-shell) {
background-color: #030815 !important;
}
body.demo-booking-page.landing-refresh:not(.home-gateway-page):not(.app-shell) main.site-main {
background:
radial-gradient(circle at 84% 8%, rgba(107, 125, 255, 0.12), transparent 30%),
radial-gradient(circle at 12% 48%, rgba(102, 216, 255, 0.08), transparent 34%),
linear-gradient(180deg, #030815 0%, #061126 52%, #03070f 100%) !important;
}
body.demo-booking-page.landing-refresh:not(.home-gateway-page):not(.app-shell) :is(.legal-hero, .public-vertical-tabs, .core-product-stage, .home-section, .home-cta) {
background:
radial-gradient(circle at 86% 0%, rgba(107, 125, 255, 0.08), transparent 28%),
linear-gradient(180deg, rgba(3, 8, 21, 0.98), rgba(5, 11, 30, 0.98)) !important;
color: #f5f7ff !important;
}
body.demo-booking-page.landing-refresh:not(.home-gateway-page):not(.app-shell) :is(.home-section--quiet, .demo-booking-section) {
background:
radial-gradient(circle at 15% 0%, rgba(102, 216, 255, 0.08), transparent 30%),
linear-gradient(180deg, rgba(10, 18, 34, 0.98), rgba(7, 13, 27, 0.98)) !important;
}
body.demo-booking-page.landing-refresh:not(.home-gateway-page):not(.app-shell) .demo-booking-launch__card::before {
bottom: 0 !important;
height: min(220px, 72%) !important;
transform: none !important;
}
body.demo-booking-page.landing-refresh:not(.home-gateway-page):not(.app-shell) .demo-booking-launch__card::after {
height: min(220px, 72%) !important;
top: 0 !important;
transform: none !important;
}
@media (max-width: 760px) {
body.demo-booking-page.landing-refresh:not(.home-gateway-page):not(.app-shell) :is(.legal-hero, .public-vertical-tabs, .core-product-stage, .home-section, .home-cta) {
background:
radial-gradient(circle at 88% 0%, rgba(107, 125, 255, 0.09), transparent 32%),
linear-gradient(180deg, #030815 0%, #071126 100%) !important;
}
body.landing-refresh:not(.home-page):not(.home-gateway-page):not(.app-shell) .home-cta__card,
body.vertical-page:not(.home-gateway-page):not(.app-shell) .home-cta__card {
height: auto !important;
max-height: none !important;
overflow: visible !important;
overflow-x: visible !important;
overflow-y: visible !important;
}
}
/* Public iPad/mobile text density 2026-07-12 E: iPad 11 landscape is wider than 1180px. */
@media (max-width: 1240px) {
body.vertical-page:not(.home-gateway-page) .vertical-subpage-scene__copy > p:has(> .device-copy--compact),
body.vertical-page:not(.home-gateway-page) .vertical-calculator__intro p:has(> .device-copy--compact),
body.missed-call-calculator-page .calculator-panel__head p:has(> .device-copy--compact) {
display: block !important;
max-width: 38ch !important;
line-height: 1.42 !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-subpage-call__transcript p:nth-child(n+3),
body.vertical-page:not(.home-gateway-page) .vertical-subpage-result li:nth-child(n+3),
body.vertical-page:not(.home-gateway-page) .vertical-subpage-scene__timeline article:nth-child(n+3),
body.vertical-page:not(.home-gateway-page) .vertical-dashboard-preview article p,
body.vertical-page:not(.home-gateway-page) .vertical-value-strip article p,
body.vertical-page:not(.home-gateway-page) .vertical-capability-arguments__grid article p,
body.vertical-page:not(.home-gateway-page) .vertical-feature-arguments__grid article p,
body.missed-call-calculator-page .core-product-board__split article p,
body.missed-call-calculator-page .calculator-result small,
body.pricing-page .pricing-roi-math small {
display: none !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-subpage-scene__timeline {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 10px !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-dashboard-preview--large article,
body.vertical-page:not(.home-gateway-page) .vertical-value-strip article {
min-height: 0 !important;
padding: 16px !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator.vertical-calculator--roi .vertical-calculator__points span {
min-height: 42px !important;
padding: 8px 10px !important;
font-size: 0.78rem !important;
}
body.vertical-page--calculateur-appels-manques:not(.home-gateway-page) .vertical-calculator.vertical-calculator--roi .vertical-calculator__inputs label {
min-height: 86px !important;
}
}
@media (max-width: 760px) {
body.vertical-page:not(.home-gateway-page) .vertical-subpage-scene__copy > p:has(> .device-copy--compact),
body.vertical-page:not(.home-gateway-page) .vertical-calculator__intro p:has(> .device-copy--compact),
body.missed-call-calculator-page .calculator-panel__head p:has(> .device-copy--compact) {
max-width: 30ch !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-dashboard-preview--large {
gap: 10px !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-page-summary__flow {
gap: 6px !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-page-summary__flow span {
min-width: 0 !important;
padding-inline: 6px !important;
font-size: 0.66rem !important;
letter-spacing: 0.035em !important;
white-space: normal !important;
overflow-wrap: normal !important;
word-break: normal !important;
hyphens: none !important;
}
}
/* Public product scene device copy 2026-07-12: compact reused SEO scenes on tablet and phone. */
@media (max-width: 1240px) {
body.landing-refresh:not(.home-page):not(.home-gateway-page) .seo-product-scene__copy p:has(> .device-copy--compact) {
display: block !important;
max-width: 38ch !important;
line-height: 1.42 !important;
}
body.landing-refresh:not(.home-page):not(.home-gateway-page) .seo-product-call__transcript {
gap: 7px !important;
}
body.landing-refresh:not(.home-page):not(.home-gateway-page) .seo-product-call__transcript p {
padding: 10px !important;
line-height: 1.28 !important;
}
}
@media (min-width: 721px) and (max-width: 1220px) {
body.landing-refresh:not(.home-page):not(.home-gateway-page) .seo-product-scene__copy h2:has(> .device-copy--compact) {
max-width: min(100%, 22ch) !important;
font-size: clamp(1.72rem, 2.6vw, 2.15rem) !important;
line-height: 1.08 !important;
}
}
@media (max-width: 760px) {
body.landing-refresh:not(.home-page):not(.home-gateway-page) .seo-product-scene__copy p:has(> .device-copy--compact) {
max-width: 28ch !important;
}
}
/* Public closed-menu containment 2026-07-12: keep hidden off-canvas links out of mobile audits. */
@media (max-width: 1060px) {
html.app-mobile-shell body.landing-refresh:not(.home-page):not(.home-gateway-page):not(.public-menu-open) .site-header--public .public-menu,
html.app-mobile-shell body.vertical-page:not(.home-gateway-page):not(.public-menu-open) .site-header--public .public-menu,
body.landing-refresh:not(.home-page):not(.home-gateway-page):not(.public-menu-open) .site-header--public .public-menu,
body.vertical-page:not(.home-gateway-page):not(.public-menu-open) .site-header--public .public-menu {
display: none !important;
}
}
/* Public responsive copy pass 2026-07-12 B: tablet/phone show less text, not tighter text. */
@media (max-width: 1240px) {
body.landing-refresh:not(.home-page):not(.home-gateway-page) .public-vertical-tabs,
body.vertical-page:not(.home-gateway-page) .public-vertical-tabs {
padding-block: clamp(12px, 2.2vw, 20px) !important;
}
body.landing-refresh:not(.home-page):not(.home-gateway-page) .public-vertical-tabs__shell,
body.vertical-page:not(.home-gateway-page) .public-vertical-tabs__shell {
gap: 12px !important;
padding: clamp(14px, 2vw, 18px) !important;
border-radius: 20px !important;
}
body.landing-refresh:not(.home-page):not(.home-gateway-page) .public-vertical-tabs__head,
body.vertical-page:not(.home-gateway-page) .public-vertical-tabs__head {
align-items: center !important;
gap: 10px !important;
}
body.landing-refresh:not(.home-page):not(.home-gateway-page) .public-vertical-tabs__head h2,
body.vertical-page:not(.home-gateway-page) .public-vertical-tabs__head h2 {
margin-top: 0.2rem !important;
font-size: clamp(1.05rem, 2.1vw, 1.34rem) !important;
line-height: 1.08 !important;
}
body.landing-refresh:not(.home-page):not(.home-gateway-page) .public-vertical-tabs__head p,
body.landing-refresh:not(.home-page):not(.home-gateway-page) .public-vertical-tabs__badge,
body.vertical-page:not(.home-gateway-page) .public-vertical-tabs__head p,
body.vertical-page:not(.home-gateway-page) .public-vertical-tabs__badge,
body.landing-refresh:not(.home-page):not(.home-gateway-page) .public-vertical-tabs__nav small,
body.vertical-page:not(.home-gateway-page) .public-vertical-tabs__nav small {
display: none !important;
}
body.landing-refresh:not(.home-page):not(.home-gateway-page) .public-vertical-tabs__nav,
body.vertical-page:not(.home-gateway-page) .public-vertical-tabs__nav {
grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
gap: 7px !important;
}
body.landing-refresh:not(.home-page):not(.home-gateway-page) .public-vertical-tabs__nav a,
body.vertical-page:not(.home-gateway-page) .public-vertical-tabs__nav a {
min-height: 48px !important;
align-content: center !important;
padding: 8px 10px !important;
border-radius: 13px !important;
}
body.landing-refresh:not(.home-page):not(.home-gateway-page) .public-vertical-tabs__nav strong,
body.vertical-page:not(.home-gateway-page) .public-vertical-tabs__nav strong {
font-size: 0.82rem !important;
line-height: 1.08 !important;
text-align: center !important;
}
}
@media (max-width: 760px) {
body.vertical-page:not(.home-gateway-page) .vertical-hero.vertical-hero--compact {
padding-block: 70px 24px !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-hero.vertical-hero--compact .vertical-hero__grid {
gap: 14px !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-hero.vertical-hero--compact .vertical-hero__copy {
gap: 12px !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-hero.vertical-hero--compact .vertical-hero__copy h1 {
max-width: 13.5ch !important;
font-size: clamp(2rem, 8.6vw, 2.55rem) !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-page-summary--lean {
display: none !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-page-proof {
gap: 8px !important;
}
body.vertical-page:not(.home-gateway-page) .vertical-page-proof span {
min-height: 42px !important;
padding: 8px 10px !important;
font-size: 0.76rem !important;
}
body.landing-refresh:not(.home-page):not(.home-gateway-page) .public-vertical-tabs__head,
body.vertical-page:not(.home-gateway-page) .public-vertical-tabs__head {
display: grid !important;
}
body.landing-refresh:not(.home-page):not(.home-gateway-page) .public-vertical-tabs__nav,
body.vertical-page:not(.home-gateway-page) .public-vertical-tabs__nav {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 6px !important;
}
body.landing-refresh:not(.home-page):not(.home-gateway-page) .public-vertical-tabs__nav a,
body.vertical-page:not(.home-gateway-page) .public-vertical-tabs__nav a {
min-height: 46px !important;
padding-inline: 6px !important;
}
body.landing-refresh:not(.home-page):not(.home-gateway-page) .public-vertical-tabs__nav strong,
body.vertical-page:not(.home-gateway-page) .public-vertical-tabs__nav strong {
font-size: 0.76rem !important;
}
}
/* Public vertical mobile fold tightening 2026-07-12 */
@media (max-width: 760px) {
body.vertical-page:not(.home-gateway-page):not(.app-shell) .site-main {
padding-top: 22px !important;
}
body.vertical-page:not(.home-gateway-page):not(.app-shell) .vertical-hero.vertical-hero--compact {
padding-block: 24px 18px !important;
}
}
@media (min-width: 721px) and (max-width: 1220px) {
.demo-booking-modal {
padding: 8px !important;
}
.demo-booking-modal__dialog {
width: min(1180px, calc(100vw - 16px)) !important;
height: calc(100svh - 16px) !important;
max-height: calc(100svh - 16px) !important;
border-radius: 24px !important;
}
.demo-booking-modal__header {
min-height: 60px !important;
padding: 10px 14px !important;
}
.demo-booking-modal__header p,
.demo-booking-modal__badges {
display: none !important;
}
.demo-booking-modal__body {
padding: 6px !important;
overflow: hidden !important;
}
.demo-booking-modal__iframe {
height: 100% !important;
overflow: hidden !important;
}
}
/* Public final mobile unclip override 2026-07-12: final guard after home layer. */
body.demo-booking-page.landing-refresh:not(.home-gateway-page) .demo-booking-launch__card::before {
bottom: 0 !important;
height: min(220px, 72%) !important;
transform: none !important;
}
body.demo-booking-page.landing-refresh:not(.home-gateway-page) .demo-booking-launch__card::after {
height: min(220px, 72%) !important;
top: 0 !important;
transform: none !important;
}
@media (max-width: 760px) {
body.landing-refresh:not(.home-page):not(.home-gateway-page) .home-cta__card,
body.vertical-page:not(.home-gateway-page) .home-cta__card {
height: auto !important;
max-height: none !important;
overflow: visible !important;
overflow-x: visible !important;
overflow-y: visible !important;
}
}