/* AITOK24 overrides for the shared homepage-public pages served on aitok24.com (linked by site-branding.mjs). */
.brand-num{color:#4fe3d3}
.reference-brand>img{display:block;width:43px;height:43px;flex-shrink:0;border-radius:11px;box-shadow:0 4px 14px rgba(40,90,255,.35)}
.feature-brand .brand-mark{border:0;border-radius:9px;box-shadow:0 4px 12px rgba(40,90,255,.35);overflow:hidden}
.feature-brand .brand-mark img{display:block;width:100%;height:100%}
.auth-current-mark img{display:block;width:37px;height:37px;flex:0 0 37px;border-radius:10px}

/* Story speech bubbles as one conversation (owner 2026-10-14): the owner's question on the right, the AI's replies on
   the left, every reply in the same bubble family (radius, border, glass, spacing). */
html .reference-layout .story-slide.is-active[data-story-slide]{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
html .reference-layout .story-slide[data-story-slide]>*{grid-column:auto;justify-self:auto;margin:0;transform:none;max-width:100%}
html .reference-layout .story-slide[data-story-slide] :is(.story-brand-label,.story-eyebrow){margin:0 0 2px;align-self:flex-start}

/* the owner's question */
html .reference-layout .story-slide[data-story-slide]>:is(h1,h2){align-self:flex-end;max-width:88%;margin:0 0 6px;padding:15px 22px;border:1px solid rgba(255,255,255,.26);border-radius:24px 24px 6px 24px;background:linear-gradient(150deg,rgba(255,255,255,.17),rgba(255,255,255,.06));box-shadow:0 18px 40px rgba(0,10,25,.45);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}

/* the AI's replies */
html .reference-layout .story-slide[data-story-slide]>:is(.price-story-statement,.story-lead,.hero-price-visual,.price-story-foot,.story-reassure,.reference-voice,.reference-signature,.story-feature-link,.story-demo-pointer,.story-entry-hint,.story-trial,.story-privacy){margin-left:0;max-width:100%}
html .reference-layout .story-slide[data-story-slide]>:is(.price-story-statement,.story-lead){position:relative;width:fit-content;padding:14px 19px;border:1px solid rgba(140,228,255,.42);border-radius:22px 22px 22px 6px;background:linear-gradient(135deg,rgba(16,110,158,.86),rgba(9,52,88,.9));box-shadow:0 16px 36px rgba(0,12,28,.45);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
html .reference-layout .story-slide[data-story-slide]>:is(.price-story-statement,.story-lead)::after{content:none}

/* the price, as a card the AI shows */
html .reference-layout .story-slide[data-story-slide]>.hero-price-visual{width:100%;min-height:0;padding:16px 20px;border:1px solid rgba(140,228,255,.5);border-radius:22px;background:linear-gradient(120deg,rgba(9,52,88,.9),rgba(6,30,54,.92));box-shadow:0 18px 42px rgba(0,12,28,.5),0 0 30px rgba(60,190,255,.18)}
html .reference-layout .story-slide[data-story-slide]>.hero-price-visual::before,
html .reference-layout .story-slide[data-story-slide]>.hero-price-visual::after{content:none}

/* follow-up lines: smaller bubbles of the same family */
html .reference-layout .story-slide[data-story-slide]>:is(.price-story-foot,.story-reassure,.reference-signature,.story-entry-hint,.story-privacy){width:fit-content;padding:10px 15px;border:1px solid rgba(150,225,255,.22);border-left:1px solid rgba(150,225,255,.22);border-radius:18px 18px 18px 6px;background:rgba(6,26,46,.78);color:#dcefff;font-size:14px;line-height:1.5;text-align:left;box-shadow:0 10px 26px rgba(0,10,24,.35);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
html .reference-layout .story-slide[data-story-slide]>.story-privacy{font-size:12px;color:#b9cfe0}
html .reference-layout .story-slide[data-story-slide]>.story-demo-pointer{padding:12px 18px;border:1px solid rgba(140,228,255,.55);border-radius:18px 18px 18px 6px;background:linear-gradient(135deg,rgba(16,110,158,.8),rgba(9,52,88,.86));box-shadow:0 0 24px rgba(40,190,255,.25)}
html .reference-layout .story-slide[data-story-slide]>.reference-voice{width:100%}
html .reference-layout .story-slide[data-story-slide]>.story-trial{display:flex;flex-wrap:wrap;gap:8px}
html .reference-layout .story-slide[data-story-slide]>.story-trial p{border-radius:999px}

@media (max-width:760px){
  html .reference-layout .story-slide.is-active[data-story-slide]{gap:10px}
  html .reference-layout .story-slide[data-story-slide]>:is(.price-story-statement,.story-lead,.hero-price-visual,.price-story-foot,.story-reassure,.reference-voice,.reference-signature,.story-feature-link,.story-demo-pointer,.story-entry-hint,.story-trial,.story-privacy){margin-left:0;max-width:100%}
  html .reference-layout .story-slide[data-story-slide]>:is(.hero-price-visual,.reference-voice){width:100%}
  html .reference-layout .story-slide[data-story-slide]>:is(h1,h2){max-width:92%;padding:12px 16px}
  html .reference-layout .story-slide[data-story-slide]>:is(.price-story-foot,.story-reassure,.reference-signature,.story-entry-hint){font-size:13px}
}
html .reference-layout .story-slide[data-story-slide]>:is(h1,h2)::before,
html .reference-layout .story-slide[data-story-slide]>:is(h1,h2)::after{content:none}
html .reference-layout .story-slide[data-story-slide]>.story-trial a{flex-basis:auto;width:fit-content;padding:7px 13px;border:1px solid rgba(150,225,255,.3);border-radius:999px;background:rgba(6,26,46,.78)}

/* Operator information (home footer .operator-info, pricing/features footer .feature-operator): one type size for labels and
   values, aligned baselines and even spacing; address and business types take a full row. */
:root body .operator-info,:root body .feature-operator{font-size:13px;line-height:1.55}
:root body .operator-info{padding:18px 20px;border-radius:14px}
:root body :is(.operator-info,.feature-operator)>strong{display:block;margin:0 0 12px;font-size:14px;font-weight:700;color:#e6f0f8}
:root body :is(.operator-info,.feature-operator) dl{display:flex;flex-wrap:wrap;gap:10px 28px;margin:0}
:root body :is(.operator-info,.feature-operator) dl>div{display:flex;align-items:baseline;gap:10px;margin:0;font-size:13px;line-height:1.55}
:root body :is(.operator-info,.feature-operator) :is(dt,dd){font-size:13px;line-height:1.55}
:root body :is(.operator-info,.feature-operator) dt{flex:0 0 auto;white-space:nowrap;color:#8ea8bd;font-weight:600}
:root body :is(.operator-info,.feature-operator) dd{margin:0;color:#e3edf5;word-break:keep-all}
:root body :is(.operator-info,.feature-operator) :is(.operator-address,.operator-wide),:root body :is(.operator-info,.feature-operator) dl>div:has(>:is([data-operator-address],[data-operator-categories])){flex-basis:100%}
@media (max-width:760px){
  :root body :is(.operator-info,.feature-operator) dl{flex-direction:column;gap:8px}
  :root body :is(.operator-info,.feature-operator) dl>div{display:grid;grid-template-columns:7.5em minmax(0,1fr);gap:10px}
  :root body :is(.operator-info,.feature-operator) dt{white-space:normal}
}