/* ============================================================
   Toppolica — brand tokens
   (per migration-input/claude.md brand reference)
   ============================================================ */
:root {
  --color-primary: #33A3DC;
  --color-primary-dark: #1F7CA8;
  --color-secondary-green: #3CB878;
  --color-secondary-light: #E4F7FF;
  --color-cta: #F9A11B;
  --color-cta-dark: #D98708;
  --color-black: #2B2B2B;
  --color-text: #2B2B2B;
  --color-muted: #7E8B97;
  --color-bg: #ffffff;
  --color-bg-soft: #F5F6F8;
  --color-pale-blue: #EFFAFF;
  --color-border: #E1E6EA;

  --font-display: 'Lato', system-ui, sans-serif;
  --font-body: 'Lato', system-ui, sans-serif;

  --max-width: 1180px;
  --radius: 10px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  color: var(--color-text);
  background-color: var(--color-bg);
  background-image: url('/images/pattern-grid.svg');
  background-repeat: repeat;
  background-size: 180px 180px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
/* Sticky footer: main grows to fill any leftover space on short pages, so
   the footer always sits at the bottom of the viewport instead of floating
   up under a short page's content. */
main { flex: 1 0 auto; }
img { max-width: 100%; display: block; }
a { color: var(--color-primary); text-decoration: none; transition: color .15s ease; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 .5em;
  color: var(--color-black);
}
:focus-visible { outline: 3px solid var(--color-secondary-light); outline-offset: 2px; }

.wrap { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }

/* ============================================================
   Header
   ============================================================ */
.site-header {
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  z-index: 100;
}
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; }
.main-nav { display: flex; align-items: center; gap: 28px; }
.main-nav a:not(.btn-cta) {
  color: var(--color-text);
  font-weight: 500;
  font-size: .95rem;
}
.main-nav a:not(.btn-cta):hover { color: var(--color-primary); }
.main-nav a.active,
.nav-dropdown-toggle.active,
.nav-dropdown-menu a.active {
  color: var(--color-cta);
  font-weight: 700;
}

.nav-dropdown { position: relative; }
.nav-dropdown-toggle {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text);
  font-weight: 500;
  font-size: .95rem;
  font-family: var(--font-body);
  padding: 0;
}
.nav-dropdown-toggle:hover { color: var(--color-primary); }
.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 16px);
  left: 0;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 12px 24px rgba(12,12,12,.08);
  padding: 8px;
  min-width: 220px;
  flex-direction: column;
  z-index: 110;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu,
.nav-dropdown.is-open .nav-dropdown-menu {
  display: flex;
}
.nav-dropdown-menu a { padding: 8px 12px; border-radius: 6px; }
.nav-dropdown-menu a:hover { background: var(--color-bg-soft); }

.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 6px; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--color-black); margin: 5px 0; }

.btn-cta {
  background: var(--color-cta);
  color: #fff !important;
  padding: 11px 22px;
  border-radius: 8px;
  font-weight: 700;
  font-family: var(--font-display);
  letter-spacing: .2px;
  display: inline-block;
  border: none;
  cursor: pointer;
  transition: background .15s ease, transform .1s ease;
}
.btn-cta:hover { background: var(--color-cta-dark); transform: translateY(-1px); }
.btn-large { font-size: 1.05rem; padding: 16px 32px; }

/* ============================================================
   Hero — full-bleed background photo
   ============================================================ */
.hero-full {
  position: relative;
  display: flex;
  align-items: center;
  min-height: calc(100svh - 73px);
  padding: 110px 24px 90px;
  background-image:
    linear-gradient(90deg, rgba(12,12,12,.75) 0%, rgba(12,12,12,.5) 40%, rgba(12,12,12,.15) 75%),
    url('/images/closeup-unrecognizable-couple-signing-contract-with-financial-advisor.webp');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: #fff;
}
.hero-inner { width: 100%; }
.hero-copy { max-width: 620px; text-align: left; }
.hero-copy h1 {
  color: #fff;
  font-size: clamp(2rem, 4vw, 2.8rem);
  margin: 0 0 18px;
}
.hero-copy .lead { color: rgba(255,255,255,.88); max-width: 560px; }
.lead { color: var(--color-muted); max-width: 600px; margin: 0 auto 28px; font-size: 1.1rem; }

/* ============================================================
   Blog listing
   ============================================================ */
.blog-listing { padding: 70px 24px 100px; }
.blog-listing h1 { font-size: 2.2rem; }
.article-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 28px; margin-top: 40px; }
.article-card {
  display: block;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0 0 24px;
  color: var(--color-text);
  background: #fff;
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.article-card:hover {
  box-shadow: 0 12px 28px -8px rgba(29,136,229,.18);
  transform: translateY(-3px);
  border-color: var(--color-secondary-light);
}
.article-card-img { width: 100%; height: 170px; object-fit: cover; }
.article-card .badge { margin: 18px 24px 0; }
.article-card h2 { font-size: 1.15rem; margin: 14px 24px 8px; }
.article-card p { color: var(--color-muted); font-size: .95rem; margin: 0 24px 14px; }
.article-card time { color: var(--color-muted); font-size: .82rem; margin: 0 24px; }

.badge {
  display: inline-block;
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
}
.badge-prispevki { background: var(--color-secondary-light); color: var(--color-primary-dark); }

/* ============================================================
   Single article
   ============================================================ */
.article-single { padding: 70px 24px 100px; max-width: 740px; }
.article-featured-img { width: 100%; max-height: 380px; object-fit: cover; border-radius: var(--radius); margin-bottom: 24px; }
.article-single h1 { margin: 14px 0 8px; font-size: clamp(1.7rem, 3vw, 2.3rem); }
.article-single time { color: var(--color-muted); font-size: .9rem; }
.article-content { margin-top: 28px; font-size: 1.05rem; }
.article-content p { margin-bottom: 1.1em; }
.article-content h2 { margin-top: 1.6em; font-size: 1.4rem; }
.article-content a:not(.btn-cta) { text-decoration: underline; }
.article-cta {
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 32px;
  text-align: center;
  margin-top: 48px;
}
.article-cta p { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; margin-bottom: 16px; }

/* ============================================================
   Generic page content
   ============================================================ */
.page-content { padding: 70px 24px 100px; max-width: 740px; }
.page-content h1 { font-size: 2rem; margin-bottom: 24px; }
.legal h1 { margin-bottom: 16px; }
.page-content.contact { max-width: var(--max-width); }
.page-content.contact .about-row { margin-bottom: 56px; align-items: flex-start; }
.page-content.contact .about-row .about-text { max-width: 560px; }

/* Typeform's embed script turns this div into an iframe sized to 100% of
   the div's own box — without an explicit width/height here, that box has
   no height at all (an empty <div> collapses to 0), so the iframe falls
   back to Typeform's small default size instead of filling the page.

   The form itself uses Typeform's "Full page" embed mode (their Design >
   Embed mode setting), which expects to fill all available width AND
   reach the bottom of the viewport, not stop at some fraction of it. Break
   the embed out to full viewport width with the standard "full bleed"
   trick (100vw + negative margin to re-center against the viewport
   instead of the parent's padded, max-width box), and use flex-grow
   (rather than a fixed vh height) so it fills exactly whatever vertical
   space is left after the heading above it, regardless of how tall the
   header/heading happen to be — a fixed vh percentage of the *whole*
   viewport left a visible gap once that header/heading height and
   .page-content's own bottom padding were subtracted out. The sticky
   .site-header above the section is a separate, preceding element in
   normal document flow and is unaffected either way.

   min-height is 100vh minus the (measured) header height, not a flat
   100vh — .form-page itself starts *after* the header in normal flow, so
   a flat 100vh here would push its bottom edge that same ~80px past the
   actual viewport bottom every time. */
.form-page {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 82px);
  padding-bottom: 24px;
}
.form-page .tf-embed {
  flex: 1 1 auto;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  min-height: 500px;
}

.thank-you, .not-found { text-align: center; }
.thank-you .btn-cta, .not-found .btn-cta { margin-top: 20px; }

/* ============================================================
   Insurance-type picker (/obrazec/)
   ============================================================ */
.insurance-picker-grid { display: flex; flex-direction: column; gap: 14px; margin-top: 32px; }
.insurance-picker-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 26px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-text);
  transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.insurance-picker-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 8px 20px rgba(12,12,12,.06);
  transform: translateY(-2px);
}
.insurance-picker-card .pillar-icon { background: none; width: auto; height: auto; flex: 0 0 auto; margin: 0; }
.insurance-picker-card .pillar-icon svg { width: 32px; height: 32px; }
.insurance-picker-label { flex: 1; }
.insurance-picker-arrow { color: var(--color-primary); font-size: 1.2rem; flex: 0 0 auto; }

/* ============================================================
   Review submission form (/mnenje/)
   ============================================================ */
.review-page.page-content { max-width: 600px; }
.review-form { display: flex; flex-direction: column; gap: 20px; margin-top: 8px; }
.review-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: .9rem;
  font-weight: 700;
  color: var(--color-text);
  font-family: var(--font-display);
}
.field-optional { font-weight: 400; color: var(--color-muted); font-family: var(--font-body); }
.field-row { display: flex; gap: 20px; flex-wrap: wrap; }
.field-row label { flex: 1 1 220px; }
.review-form input[type="text"],
.review-form textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  color: var(--color-text);
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: #fff;
}
.review-form input[type="text"]:focus,
.review-form textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-secondary-light);
}
.review-form textarea { resize: vertical; min-height: 120px; }
.field-group { display: flex; flex-direction: column; gap: 8px; }
.field-label { font-size: .9rem; font-weight: 700; color: var(--color-text); font-family: var(--font-display); }

.star-rating { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.star-rating input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.star-rating label {
  font-size: 2.2rem;
  line-height: 1;
  color: var(--color-border);
  cursor: pointer;
  transition: color .15s ease;
}
.star-rating input:checked ~ label,
.star-rating label:hover,
.star-rating label:hover ~ label {
  color: var(--color-cta);
}
.star-rating input:focus-visible + label { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.hp-field { position: absolute; left: -9999px; top: -9999px; }

.review-consent-field {
  flex-direction: row !important;
  align-items: flex-start;
  gap: 10px !important;
  font-size: .85rem !important;
  font-weight: 400 !important;
  font-family: var(--font-body) !important;
  color: var(--color-muted);
  cursor: pointer;
}
.review-consent-field input[type="checkbox"] { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; accent-color: var(--color-primary); cursor: pointer; }
.review-consent-field a { color: var(--color-primary); }

/* ============================================================
   Footer
   ============================================================ */
.site-footer { background: var(--color-black); color: #fff; margin-top: 60px; }
.footer-inner { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; padding: 56px 24px 32px; }
.footer-col p { color: #9aa5b1; font-size: .92rem; margin-top: 14px; }
.footer-col h4 { color: #fff; font-family: var(--font-display); font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 14px; }
.footer-col a, .footer-col .link-btn {
  display: block;
  color: #c2cad2;
  margin-bottom: 10px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: .95rem;
  text-align: left;
  font-family: var(--font-body);
}
.footer-col a:hover, .footer-col .link-btn:hover { color: var(--color-secondary-light); }
.footer-bottom { padding: 18px 24px; border-top: 1px solid rgba(255,255,255,.1); font-size: .82rem; color: #76808a; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 860px) {
  .main-nav {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: #fff;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 24px;
    border-bottom: 1px solid var(--color-border);
    gap: 16px;
  }
  .main-nav.is-open { display: flex; }
  .nav-toggle { display: block; }
  .footer-inner { grid-template-columns: 1fr; }

  .nav-dropdown-menu {
    display: none;
    position: static;
    box-shadow: none;
    border: none;
    padding: 0 0 0 12px;
    min-width: 0;
  }
  .nav-dropdown.is-open .nav-dropdown-menu { display: flex; }
}

/* ============================================================
   Homepage sections
   ============================================================ */
.section-title { text-align: center; font-size: 1.8rem; margin-bottom: 40px; }

.pillars { padding: 80px 24px; }
.pillar-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 24px; }
.pillar-card {
  display: block;
  background: var(--color-pale-blue);
  border-radius: var(--radius);
  padding: 28px;
  transition: box-shadow .15s ease, transform .1s ease;
}
a.pillar-card:hover { box-shadow: 0 8px 20px rgba(12,12,12,.06); transform: translateY(-2px); }
.pillar-card h3 { font-size: 1.1rem; margin-bottom: 10px; color: var(--color-primary-dark); }
.pillar-card p { color: var(--color-muted); font-size: .95rem; margin: 0; }
.insurance-types { padding: 0 0 80px; }
.insurance-types .pillar-icon { background: none; width: auto; height: auto; margin-bottom: 12px; }
.insurance-types .pillar-icon svg { width: 40px; height: 40px; }
.section-hint { text-align: center; color: var(--color-muted); font-size: .9rem; margin: -24px 0 32px; }

.flip-card { perspective: 1200px; height: 175px; transition: height .35s ease; }
.flip-card.is-flipped { height: 230px; }
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: left;
  transition: transform .5s ease;
  transform-style: preserve-3d;
}
.flip-card.is-flipped .flip-card-inner {
  transform: rotateY(180deg);
}
/* Hover-driven flip only for devices with real hover — on touch devices,
   mobile browsers keep :hover "stuck" after a tap until something else is
   tapped, which would make the tap-to-close JS below appear broken (the
   card immediately re-flips via :hover even after .is-flipped is removed).
   Touch devices rely solely on the JS-driven .is-flipped toggle instead. */
@media (hover: hover) {
  .flip-card:hover { height: 230px; }
  .flip-card:hover .flip-card-inner { transform: rotateY(180deg); }
}
.flip-card-front, .flip-card-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: var(--radius);
  background: var(--color-bg-soft);
  padding: 28px;
}
.flip-card-front { display: flex; flex-direction: column; justify-content: center; }
.flip-card-front h3 { font-size: 1.1rem; margin: 0; color: var(--color-primary-dark); }
.flip-card-back {
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.flip-card-back p { color: var(--color-muted); font-size: .95rem; margin: 0 0 12px; }
.flip-card-back a { font-weight: 700; font-family: var(--font-display); }

.how-it-works { padding: 60px 24px; text-align: center; }
.steps-list { list-style: none; counter-reset: step; padding: 0; max-width: 640px; margin: 0 auto 28px; display: flex; flex-direction: column; gap: 14px; }
.steps-list li { counter-increment: step; position: relative; padding: 14px 20px 14px 56px; background: #fff; border: 1px solid var(--color-border); border-radius: 8px; text-align: left; font-weight: 500; }
.steps-list li::before {
  content: counter(step);
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--color-primary); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: .9rem;
  display: flex; align-items: center; justify-content: center;
}

.testimonials { padding: 80px 24px; }
.testimonial-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 26px; }
.testimonial-card .stars { color: var(--color-cta); letter-spacing: 2px; margin-bottom: 12px; }
.testimonial-card p { font-size: .95rem; color: var(--color-text); }
.testimonial-author { font-weight: 700; font-family: var(--font-display); margin-top: 12px !important; color: var(--color-primary-dark) !important; }
.testimonial-author span { color: var(--color-muted); font-weight: 400; font-family: var(--font-body); }

/* Reviews carousel: always exactly 3 cards visible, scroll/arrows for more */
.testimonial-carousel { display: flex; align-items: center; gap: 12px; }
.testimonial-track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}
.testimonial-track::-webkit-scrollbar { height: 6px; }
.testimonial-track::-webkit-scrollbar-track { background: transparent; }
.testimonial-track::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 999px; }
.testimonial-track .testimonial-card { flex: 0 0 calc((100% - 48px) / 3); scroll-snap-align: start; }
.testimonial-nav {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: #fff;
  color: var(--color-primary);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease;
}
.testimonial-nav:hover { background: var(--color-secondary-light); }
.testimonial-nav:disabled { opacity: .35; cursor: default; background: #fff; }
@media (max-width: 900px) {
  .testimonial-track .testimonial-card { flex: 0 0 calc((100% - 24px) / 2); }
}
@media (max-width: 640px) {
  .testimonial-track .testimonial-card { flex: 0 0 85%; }
}

.home-blog-teaser { padding: 60px 24px 80px; }
.center-link { text-align: center; margin-top: 32px; }

.final-cta { text-align: center; padding: 70px 24px 90px; background: var(--color-bg-soft); }
.final-cta h2 { font-size: 1.7rem; margin-bottom: 22px; }

/* ============================================================
   About / contact pages
   ============================================================ */
.about-list, .legal ul { padding-left: 22px; }
.about-list li { margin-bottom: 14px; }
.inline-cta { margin: 32px 0; }
.contact-card { background: var(--color-bg-soft); border-radius: var(--radius); padding: 24px; margin-bottom: 8px; }
.contact-card p { margin: 6px 0; }

.about-section { padding: 88px 0; }
.about-section + .about-section { border-top: 1px solid var(--color-border); }
.about-section.no-divider + .about-section.no-divider { border-top: none; }
.about-section h1 { font-size: 2rem; margin-bottom: 18px; }
.about-section h2 { font-size: 1.6rem; margin-bottom: 18px; }
.about-pillars-section { background: var(--color-bg-soft); }
.about-row {
  display: flex;
  align-items: center;
  gap: 56px;
  flex-wrap: wrap;
}
.about-row.reverse { flex-direction: row-reverse; }
.about-row .about-text { flex: 1 1 380px; }
.about-row .about-visual { flex: 1 1 220px; display: flex; justify-content: center; }
.about-row .about-visual svg { width: 100%; max-width: 230px; height: auto; }
.about-row .about-visual img { width: 100%; max-width: 420px; height: auto; border-radius: var(--radius); }
.about-faq { max-width: 740px; }

.example-box {
  max-width: 640px;
  margin: 0 auto;
  background: var(--color-pale-blue);
  border-radius: var(--radius);
  padding: 48px;
  text-align: center;
}
.example-box p { text-align: left; }
.example-box .inline-cta { text-align: center; }

.sister-brands { margin-top: 28px; }
.sister-brands-label {
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-muted);
  margin: 0 0 10px;
}
.sister-brands-list { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.sister-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 8px 18px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.sister-brand img { height: 30px; width: auto; max-width: 130px; }
.sister-brand:hover { border-color: var(--color-primary); box-shadow: 0 2px 10px rgba(29,136,229,.12); }

@media (max-width: 760px) {
  .about-row, .about-row.reverse { flex-direction: column; text-align: left; }
  /* Section 1's visual sits above the H1 and pushes the whole page down on
     mobile, so hide it there. Section 2 ("Kako deluje ...") isn't above any
     heading, so its image stays visible — and sits above that section's own
     heading, matching how section 1's visual used to sit above its H1. */
  .about-row:not(.reverse) .about-visual { display: none; }
  .about-row.reverse .about-visual { order: -1; margin-bottom: 20px; }
  /* Desktop's 88px top/bottom padding on every section stacks into a huge
     gap between sections on mobile's single-column layout (e.g. section 1's
     last paragraph to section 2's image, or the CTA button at the end of
     section 2 to the "Primer iz prakse" heading) — tighten it up. */
  .about-section { padding: 28px 0; }
  .inline-cta { margin: 20px 0; }
}

.faq-list { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.faq-list details { background: #fff; border: 1px solid var(--color-border); border-radius: 8px; padding: 16px 20px; }
.faq-list summary { font-weight: 700; font-family: var(--font-display); cursor: pointer; }
.faq-list p { margin: 12px 0 0; color: var(--color-muted); }

/* ============================================================
   Legal pages
   ============================================================ */
.legal h2 { font-size: 1.25rem; margin-top: 1.6em; }
.legal h3 { font-size: 1.05rem; margin-top: 1.3em; }
.legal-subtitle { color: var(--color-muted); font-style: italic; margin-bottom: 1.5em; }
.legal p, .legal li { font-size: .95rem; }
.legal table { width: 100%; border-collapse: collapse; margin: 1.2em 0; font-size: .95rem; }
.legal table td { padding: 10px 14px; border: 1px solid var(--color-border); vertical-align: top; }
.legal table td:first-child { width: 34%; background: var(--color-bg-soft); }

@media (max-width: 600px) {
  .section-title { font-size: 1.4rem; }
}

/* ============================================================
   Homepage richness pass — icons, illustration, avatars, rhythm
   ============================================================ */
.wrap-full { width: 100%; }

.pillar-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.pillar-icon svg { width: 24px; height: 24px; }
.pillar-icon-blue { background: var(--color-secondary-light); color: var(--color-primary); }
.pillar-icon-green { background: #E1F5EC; color: var(--color-secondary-green); }
.pillar-icon-orange { background: #FDF0DD; color: var(--color-cta); }
.pillar-icon-pink { background: #FCE4E9; color: #E0607D; }

.how-it-works { padding: 80px 0; }
.center-text { text-align: center; }
.timeline-horizontal {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 1000px;
  margin: 0 auto 36px;
}
.timeline-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 190px;
}
.timeline-dot {
  width: 64px; height: 64px; border-radius: 50%;
  background: #fff; color: var(--color-primary);
  border: 2px solid var(--color-secondary-light);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 1.4rem;
  transition: background .4s ease, color .4s ease, border-color .4s ease, transform .4s ease, box-shadow .4s ease;
  transform: scale(0.92);
  margin-bottom: 16px;
}
.timeline-step p { margin: 0; font-weight: 500; color: var(--color-text); transition: color .4s ease; font-size: .95rem; }
.timeline-step.is-active .timeline-dot {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  transform: scale(1);
  box-shadow: 0 6px 18px -4px rgba(29,136,229,.45);
}
.timeline-step.is-active p { color: var(--color-text); }

.timeline-arrow {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 64px; flex-shrink: 0;
  color: var(--color-secondary-light);
  transition: color .4s ease;
}
.timeline-arrow svg { width: 26px; height: 26px; }
.timeline-arrow.is-active { color: var(--color-primary); }

.btn-secondary {
  display: inline-block;
  background: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
  padding: 9px 20px;
  border-radius: 8px;
  font-weight: 700;
  font-family: var(--font-display);
  transition: background .15s ease, color .15s ease;
}
.btn-secondary:hover { background: var(--color-primary); color: #fff !important; }

@media (max-width: 860px) {
  .timeline-horizontal { flex-direction: column; align-items: center; }
  .timeline-arrow { transform: rotate(90deg); height: 36px; }
  .timeline-step { width: 100%; max-width: 320px; }
}

.testimonial-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.avatar {
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; color: #fff; font-size: 1.05rem;
  flex-shrink: 0;
}
.avatar-blue { background: var(--color-primary); }
.avatar-green { background: var(--color-secondary-green); }
.avatar-orange { background: var(--color-cta); }
.testimonial-author { font-weight: 700; font-family: var(--font-display); margin: 0 !important; color: var(--color-text) !important; }
.testimonial-location { color: var(--color-muted); font-size: .85rem; margin: 0 !important; }

.home-blog-teaser { background: var(--color-bg-soft); padding: 80px 0; }

@media (max-width: 860px) {
  .hero-full {
    min-height: 80svh;
    background-image:
      linear-gradient(180deg, rgba(12,12,12,.55) 0%, rgba(12,12,12,.75) 100%),
      url('/images/closeup-unrecognizable-couple-signing-contract-with-financial-advisor.webp');
  }
  .hero-copy { max-width: none; text-align: center; margin: 0 auto; }
}