/* Futello preview identity — intentionally limited to presentation. */
:root {
  --futello-navy: #0b1730;
  --futello-white: #f4f7ff;
  --futello-slate: #a9b6cc;
  --futello-blue: #1a73e8;
  --futello-blue-dark: #0f5fc5;
  --futello-blue-soft: #e8f1fd;
  --futello-surface: #f6f8fc;
  --futello-border: #d7deea;

  --color-navy: var(--futello-navy);
  --color-navy-soft: #162747;
  --color-blue: var(--futello-blue);
  --color-blue-dark: var(--futello-blue-dark);
  --color-surface-alt: var(--futello-surface);
  --color-border: var(--futello-border);
  --color-text: #17243b;
  --color-muted: #52617a;
  --color-primary-action: var(--futello-blue);
  --color-primary-action-hover: var(--futello-blue-dark);
  --color-secondary-action-bg: #fff;
  --color-secondary-action-hover: var(--futello-blue-soft);
  --color-secondary-action-text: var(--futello-navy);
  --color-secondary-action-border: #afbdd2;
  --color-link: #0c61c9;
  --color-link-hover: #084c9f;
  --color-brand-accent: var(--futello-blue);
  --focus-ring: 0 0 0 3px rgb(26 115 232 / 38%);

  --ciq-ink: var(--futello-navy);
  --ciq-text: #17243b;
  --ciq-muted: #52617a;
  --ciq-mint: var(--futello-blue);
  --ciq-mint-soft: var(--futello-blue-soft);
  --ciq-mint-text: #0c4f9f;
  --ciq-lavender: #edf3fb;
  --ciq-lavender-text: #174f93;
  --ciq-coral: #eef2f7;
  --ciq-coral-text: #40516b;
  --ciq-canvas: var(--futello-surface);
  --ciq-border: var(--futello-border);
  --ciq-hero: var(--futello-navy);
}

body {
  background: #fff;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.brand-wordmark {
  width: 9.9rem;
  height: auto;
}

.wordmark::after { content: none; }

.site-header {
  border-color: rgb(169 182 204 / 45%);
  background: rgb(244 247 255 / 96%);
}

.main-nav a.is-current { color: var(--futello-blue-dark); }

.button,
input,
select,
textarea { border-radius: .7rem; }

.button--primary,
.button--nav {
  border-color: var(--futello-blue);
  background: var(--futello-blue);
  color: #fff;
}

.button--primary:hover,
.button--nav:hover {
  border-color: var(--futello-blue-dark);
  background: var(--futello-blue-dark);
  color: #fff;
}

.button--outline {
  border: 1px solid rgb(244 247 255 / 72%);
  background: transparent;
  color: var(--futello-white);
  text-decoration: none;
}

.button--outline:hover {
  border-color: #fff;
  background: rgb(244 247 255 / 10%);
  color: #fff;
}

:is(a, button, summary, input, select, textarea):focus-visible {
  outline: 3px solid var(--futello-blue);
  outline-offset: 3px;
  box-shadow: 0 0 0 2px #fff;
}

/* Home: dark branded introduction, light comparison surfaces. */
.fintech-home {
  --color-navy: var(--futello-navy);
  --color-blue: var(--futello-blue);
  --color-blue-dark: var(--futello-blue-dark);
  --color-primary-action: var(--futello-blue);
  --color-primary-action-hover: var(--futello-blue-dark);
  --color-brand-accent: var(--futello-blue);
}

.fintech-home .home-intro {
  background: var(--futello-navy);
}

.fintech-home .home-intro__copy > .eyebrow,
.fintech-home .home-intro h1 span { color: #79adf2; }

.fintech-home .home-intro h1 {
  max-width: 12ch;
  letter-spacing: -.04em;
}

.home-intro__slogan {
  margin: -8px 0 18px;
  color: #79adf2;
  font-size: .92rem;
  font-weight: 720;
  letter-spacing: .035em;
}

.fintech-home .home-intro__actions .button--primary {
  border-color: var(--futello-blue);
  background: var(--futello-blue);
  color: #fff;
}

.fintech-home .home-intro__actions .button--primary:hover {
  border-color: #438deb;
  background: #438deb;
}

.fintech-home .home-intro__actions .button--outline {
  border-color: rgb(244 247 255 / 70%);
  background: transparent;
  color: #fff;
  box-shadow: none;
}

.fintech-home .home-intro__actions .button--outline:hover {
  border-color: #fff;
  background: rgb(255 255 255 / 10%);
}

.home-intro__moment { border-radius: 16px; }
.home-intro__moment::after { background: rgb(11 23 48 / 64%); }
.home-example { border-top: 4px solid var(--futello-blue); }
.fintech-home .home-example .eyebrow { color: var(--futello-blue-dark); }
.home-example__tag,
.home-path__label,
.home-path--2 .home-path__label,
.home-path--3 .home-path__label {
  background: var(--futello-blue-soft);
  color: #174f93;
}
.home-example__reward { background: var(--futello-blue-soft); }
.home-example__value > span,
.home-example__value > strong,
.home-example__fees { color: #174f93; }
.home-how li,
.home-how li:nth-child(2),
.home-how li:nth-child(3) { border-color: #8ab8f2; }
.home-step,
.home-how li:nth-child(2) .home-step,
.home-how li:nth-child(3) .home-step { color: var(--futello-blue-dark); }
.home-offer-note { border-color: #d5deea; background: #eef2f7; }
.home-help { border-color: #c8d7eb; background: #edf3fb; }
.home-final { border-top-color: var(--futello-blue); background: var(--futello-navy); }
.fintech-home .home-final .button { border-color: var(--futello-blue); background: var(--futello-blue); color: #fff; }
.fintech-home .home-final .button:hover { background: #438deb; }
.home-points-link::before { content: "✦"; margin-right: .45rem; color: var(--futello-blue); }

/* Representative strategy results: data hierarchy first, brand second. */
.brand-continuity .personalized-result-page { background: var(--futello-surface); }
.brand-continuity .personalized-result-page .personalized-overview {
  background: var(--futello-navy);
  box-shadow: 0 16px 38px rgb(11 23 48 / 12%);
}
.brand-continuity .personalized-result-page .personalized-overview .eyebrow { color: #8ab8f2; }
.brand-continuity .personalized-result-page .personalized-financial-card {
  border-color: #9bbce7;
  background: #eef5ff;
}
.brand-continuity .personalized-result-page .personalized-financial-card__curve { display: none; }
.brand-continuity .personalized-result-page .personalized-financial-card__content > :is(span, strong, small) { color: #174f93; }
.brand-continuity .personalized-result-page .personalized-overview__actions .button--primary {
  border-color: var(--futello-blue);
  background: var(--futello-blue);
  color: #fff;
}
.brand-continuity .personalized-result-page .personalized-overview__actions .button--primary:hover { background: #438deb; }
.brand-continuity .personalized-result-page .strategy-card__visual,
.brand-continuity .personalized-result-page .strategy-card:nth-child(2) .strategy-card__visual,
.brand-continuity .personalized-result-page .strategy-card:nth-child(3) .strategy-card__visual { background: #eef2f7; }
.brand-continuity .personalized-result-page .strategy-sequence,
.brand-continuity .personalized-result-page .personalized-donut-wrap,
.brand-continuity .personalized-result-page .strategy-apply-now { background: #edf3fb; }
.brand-continuity .personalized-result-page .personalized-dashboard__explanations > section,
.brand-continuity .personalized-result-page .personalized-dashboard__explanations > section + section { background: #eef2f7; }
.brand-continuity .personalized-result-page .personalized-dashboard__explanations > section:first-child { border-top: 3px solid var(--futello-blue); }
.brand-continuity .personalized-result-page .personalized-dashboard__explanations > section:last-child:not(:first-child) { border-top: 3px solid var(--futello-slate); }
.brand-continuity .personalized-result-page :is(a, summary, input):focus-visible { outline-color: var(--futello-blue); }

/* Published profile strategy is the stable, navigable results example. */
.brand-continuity .persona-hero__backdrop { background: var(--futello-navy); }
.brand-continuity .persona-hero__photo-wrap::after { background: rgb(11 23 48 / 20%); }
.brand-continuity .persona-hero__photo {
  opacity: .35;
  -webkit-mask-image: none;
  mask-image: none;
}
.brand-continuity :is(.persona-v4-choice, .usage-choice):hover {
  border-color: #79a9e5;
  background: #f2f7fd;
}
.brand-continuity :is(.persona-v4-choice, .usage-choice).is-active {
  border-color: var(--futello-blue);
  background: var(--futello-blue-soft);
  box-shadow: inset 0 -3px 0 var(--futello-blue);
}
.brand-continuity :is(.persona-v4-choice, .usage-choice).is-active :is(strong, .usage-choice__label),
.brand-continuity :is(.persona-v4-choice, .usage-choice).is-active svg { color: #174f93; }
.brand-continuity .persona-strategy-card { border-top-color: var(--futello-blue); }
.brand-continuity .strategy-category-chips li {
  border-color: #c7d9f0;
  background: var(--futello-blue-soft);
  color: #174f93;
}
.brand-continuity .persona-value-card {
  border-color: #b5ccec;
  background: #eef5ff;
}
.brand-continuity .persona-value-card__curve { display: none; }
.brand-continuity .persona-value-card__main :is(span, strong, small) { color: #174f93; }
.brand-continuity .persona-cta--primary {
  border-color: var(--futello-blue);
  background: var(--futello-blue);
}
.brand-continuity .persona-cta--primary:hover { background: var(--futello-blue-dark); }

@media (max-width: 48rem) {
  .brand-wordmark { width: 8.4rem; }
  .fintech-home .home-intro h1 { max-width: 15ch; }
  .home-intro__slogan { margin-top: -4px; }
}

@media print {
  .brand-continuity .personalized-result-page .personalized-overview { background: #fff; border: 1px solid var(--futello-border); }
}

/* Brand lockup: on the home page the slogan sits under the logo, top left. */
.brand-lockup { display: flex; flex-direction: column; align-items: flex-start; gap: .05rem; min-width: 0; }
.brand-lockup .wordmark { line-height: 0; }
.brand-lockup__slogan {
  margin: 0 0 0 .1rem;
  color: #52617a;
  font-size: .78rem;
  font-weight: 640;
  letter-spacing: .015em;
  line-height: 1.1;
  white-space: nowrap;
}
.fintech-home .brand-lockup .wordmark { min-height: 0; }
@media (max-width: 47.9rem) { .brand-lockup__slogan { font-size: .7rem; } }

/* The Futello universe: cards today, points and travel next. */
.home-universe { padding-block: 8px 28px; }
.home-universe .home-section-heading { align-items: flex-end; gap: 24px; }
.home-universe__intro { max-width: 34rem; margin: 0; color: #52617a; }
.home-universe__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 20px 0 0; padding: 0; list-style: none; }
.home-universe__item { position: relative; padding: 20px 22px 22px; border: 1px solid var(--futello-border); border-radius: 16px; background: #fff; }
.home-universe__item.is-live { border-color: rgb(26 115 232 / 45%); box-shadow: 0 8px 24px rgb(11 23 48 / 6%); }
.home-universe__item.is-upcoming { background: var(--futello-surface); }
.home-universe__item h3 { margin: 10px 0 6px; font-size: 1.15rem; }
.home-universe__item h3 a { color: var(--futello-navy); text-decoration: none; }
.home-universe__item h3 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.home-universe__item p { margin: 0; color: #52617a; font-size: .95rem; }
.home-universe__status { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.is-live .home-universe__status { background: var(--futello-blue-soft); color: #0c4f9f; }
.is-upcoming .home-universe__status { background: #e6ebf3; color: #52617a; }
@media (max-width: 47.9rem) { .home-universe__grid { grid-template-columns: 1fr; } .home-universe .home-section-heading { align-items: flex-start; } }