/*
 * tolgdev.it, pagine statiche (guide, pagine Smart Finance, calcolatore, pagine legali) con il design della home:
 * stessa intestazione, stesso footer, stesso sfondo, titoli Playfair, tessere di vetro e micro-interazioni a molla.
 * Caricato per ultimo, dopo gli stili propri di ogni pagina.
 */
:root {
  --th-base: #1a1814;
  --th-deep: #0c0b09;
  --th-tan: #D2B48C;
  --th-gold: #C4A478;
  --th-terracotta: #A8875D;
  --th-bronze: #8B653B;
  --th-text: #f4eedd;
  --th-muted: #a49882;
  --th-line: rgb(210 180 140 / 0.14);
  --th-line-strong: rgb(210 180 140 / 0.24);
  --th-tile: rgb(36 33 28 / 0.55);
  /* Molla della skill: stiffness 300, damping 20, mass 0.8 (stessa curva di sfa-bento.css) */
  --th-spring: linear(0, 0.0242, 0.0873, 0.1761, 0.2801, 0.3904, 0.5004, 0.605, 0.7008, 0.7856, 0.8584, 0.919, 0.9676, 1.0052, 1.0328, 1.0517, 1.0634, 1.0691, 1.0702, 1.0677, 1.0628, 1.0562, 1.0487, 1.041, 1.0333, 1.0261, 1.0195, 1.0137, 1.0088, 1.0048, 1.0016, 0.9991, 0.9973, 0.9961, 0.9954, 0.9951, 0.9951, 0.9953, 0.9957, 0.9962, 0.9967, 0.9973, 0.9978, 0.9983, 0.9987, 0.9991, 0.9995, 0.9997, 1);
  --th-spring-duration: 574ms;
}

/* --- Sfondo come la home: base calda, griglia da progetto, bagliore in alto --- */
html { background: var(--th-base); }
body {
  background-color: var(--th-base) !important;
  background-image: radial-gradient(ellipse at 50% -10%, rgb(196 164 120 / 0.12), transparent 55%) !important;
  /* style.css ripete lo sfondo ogni 30 px: qui un solo bagliore, la griglia sta in body::before */
  background-size: 100% 100vh !important;
  background-repeat: no-repeat !important;
  color: var(--th-text);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgb(210 180 140 / 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgb(210 180 140 / 0.035) 1px, transparent 1px);
  background-size: 30px 30px;
}

/* --- Intestazione (come Header della home) --- */
.th-wrap { max-width: 1280px; margin: 0 auto; padding: 0 12px; }
@media (min-width: 640px) { .th-wrap { padding: 0 24px; } }
@media (min-width: 1024px) { .th-wrap { padding: 0 32px; } }

.th-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: max(0.6rem, env(safe-area-inset-top)) 0 1rem;
  transition: background-color 0.5s ease, padding 0.5s ease, box-shadow 0.5s ease;
  font-family: "Inter", system-ui, sans-serif;
}
.th-header.is-scrolled {
  padding-bottom: 0.75rem;
  background: rgb(26 24 20 / 0.85);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgb(255 255 255 / 0.05);
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.35);
}
.th-header__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.th-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.th-brand__logo { width: 40px; height: 40px; border-radius: 999px; overflow: hidden; border: 2px solid rgb(210 180 140 / 0.3); box-shadow: 0 4px 12px rgb(0 0 0 / 0.3); flex-shrink: 0; }
.th-brand__logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.th-brand__name {
  font-family: "Playfair Display", "Cinzel", serif;
  font-style: italic;
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.02em;
  background: linear-gradient(90deg, var(--th-tan), var(--th-terracotta));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.th-nav { display: none; align-items: center; gap: 4px; padding: 4px; border-radius: 999px; background: rgb(31 41 55 / 0.4); border: 1px solid rgb(255 255 255 / 0.05); }
@media (min-width: 768px) { .th-nav { display: flex; } }
.th-nav a { padding: 6px 16px; border-radius: 999px; font-size: 0.875rem; font-weight: 500; color: #d1d5db; text-decoration: none; transition: color 0.3s ease, background-color 0.3s ease; }
.th-nav a:hover { color: #fff; background: rgb(255 255 255 / 0.06); }
.th-actions { display: flex; align-items: center; gap: 8px; }

.th-lang { position: relative; }
.th-lang summary {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; cursor: pointer; list-style: none;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; color: var(--th-tan); border: 2px solid rgb(210 180 140 / 0.2);
  transition: background-color 0.3s ease;
}
.th-lang summary::-webkit-details-marker { display: none; }
.th-lang summary:hover { background: rgb(255 255 255 / 0.06); }
.th-lang summary svg:last-child { transition: transform var(--th-spring-duration) var(--th-spring); }
.th-lang[open] summary svg:last-child { transform: rotate(180deg); }
.th-lang__menu {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 180px; padding: 6px; border-radius: 16px;
  background: rgb(36 33 28 / 0.96); border: 1px solid var(--th-line-strong); box-shadow: 0 16px 40px rgb(0 0 0 / 0.45);
  display: flex; flex-direction: column; gap: 2px;
}
.th-lang__menu a, .th-lang__menu button {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 10px; background: none;
  font: 500 0.875rem "Inter", sans-serif; color: #e7dcc8; text-decoration: none; text-align: left; cursor: pointer;
}
.th-lang__menu a:hover, .th-lang__menu button:hover, .th-lang__menu .is-current { background: rgb(210 180 140 / 0.1); color: #fff; }
.th-lang__menu b { display: inline-flex; justify-content: center; min-width: 30px; padding: 2px 6px; border-radius: 6px; font-size: 0.7rem; color: var(--th-tan); background: rgb(210 180 140 / 0.1); }

.th-cta {
  display: none; align-items: center; padding: 8px 16px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: #fff; text-decoration: none; background: linear-gradient(90deg, var(--th-tan), var(--th-terracotta));
  box-shadow: 0 6px 16px rgb(0 0 0 / 0.3); transition: transform var(--th-spring-duration) var(--th-spring);
}
@media (min-width: 1024px) { .th-cta { display: inline-flex; } }
.th-cta:hover { transform: scale(1.03); }
.th-cta:active { transform: scale(0.97); }
.th-burger {
  display: inline-flex; align-items: center; justify-content: center; padding: 10px; border-radius: 999px; cursor: pointer;
  background: none; color: var(--th-tan); border: 2px solid rgb(210 180 140 / 0.2);
}
@media (min-width: 768px) { .th-burger { display: none; } }
.th-mobile {
  margin-top: 10px; padding: 8px 16px max(1.5rem, env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 6px;
  background: rgb(10 15 29 / 0.95); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-bottom: 1px solid rgb(255 255 255 / 0.05);
}
.th-mobile[hidden] { display: none; }
.th-mobile a { display: block; padding: 12px 16px; border-radius: 16px; font-size: 0.875rem; font-weight: 600; color: var(--th-tan); text-decoration: none; }
.th-mobile a:hover { background: rgb(210 180 140 / 0.1); }
.th-mobile .th-mobile__cta { margin-top: 4px; text-align: center; color: #fff; background: linear-gradient(90deg, var(--th-tan), var(--th-terracotta)); border-radius: 12px; }
@media (min-width: 768px) { .th-mobile { display: none !important; } }

/* Pagine nate con un'intestazione non fissa: spazio per il menu fisso */
.terms-container { padding-top: 104px !important; }
main.policy-container, body > main.container { margin-top: 112px !important; }

/* --- Skyline di Firenze sopra il footer --- */
.th-skyline { position: relative; width: 100%; aspect-ratio: 1024 / 558; max-height: 620px; overflow: hidden; margin-top: 48px; border-top: 2px solid rgb(140 115 85 / 0.3); background: var(--th-deep); }
.th-skyline img { width: 100%; height: 100%; object-fit: cover; opacity: 0.75; mix-blend-mode: lighten; display: block; }
.th-skyline::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--th-deep), transparent 60%); opacity: 0.8; }

/* --- Footer (come Footer della home) --- */
.th-footer { position: relative; padding: 64px 0 max(2.5rem, env(safe-area-inset-bottom)); border-top: 1px solid rgb(210 180 140 / 0.2); background: var(--th-base); color: #9ca3af; font-family: "Inter", system-ui, sans-serif; }
.th-footer a { text-decoration: none; }
.th-footer__grid { display: grid; grid-template-columns: 1fr; gap: 32px; margin-bottom: 48px; }
@media (min-width: 768px) { .th-footer__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px; } .th-footer__brand { grid-column: span 2; } }
@media (min-width: 1024px) { .th-footer__grid { gap: 48px; } }
.th-footer__logo { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.th-footer__logo span:first-child { width: 36px; height: 36px; border-radius: 999px; overflow: hidden; border: 2px solid rgb(139 101 59 / 0.3); background: var(--th-base); }
.th-footer__logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.th-footer__logo strong { font-family: "Space Grotesk", sans-serif; font-size: 1.25rem; letter-spacing: -0.01em; color: #fff; }
.th-footer__logo strong i { font-style: normal; color: var(--th-tan); }
.th-footer__brand p { max-width: 24rem; margin: 0 0 16px; font-size: 0.875rem; line-height: 1.65; }
.th-footer address { font-style: normal; font-size: 0.75rem; line-height: 1.6; }
.th-footer address div:first-child { color: #d1d5db; font-weight: 500; }
.th-footer address a { color: var(--th-tan); font-weight: 600; }
.th-social { display: flex; gap: 16px; margin-top: 16px; }
.th-social a { width: 40px; height: 40px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; color: var(--th-tan); border: 1px solid rgb(210 180 140 / 0.2); transition: transform var(--th-spring-duration) var(--th-spring), color 0.3s, border-color 0.3s; }
.th-social a:hover { transform: scale(1.06); color: var(--th-gold); border-color: var(--th-gold); }
.th-footer h4 { margin: 0 0 16px; font-family: "Space Grotesk", sans-serif; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; }
.th-footer h4 a { display: inline-flex; align-items: center; gap: 8px; color: #fff; }
.th-footer h4 img { width: 20px; height: 20px; border-radius: 6px; object-fit: cover; }
.th-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 0.875rem; }
.th-footer ul a { display: inline-flex; align-items: center; gap: 6px; color: #9ca3af; transition: color 0.3s ease; }
.th-footer ul a:hover { color: var(--th-tan); }
.th-footer ul svg { color: var(--th-gold); flex-shrink: 0; }
.th-status { padding: 16px; border-radius: 16px; background: #1f1b16; border: 2px solid rgb(210 180 140 / 0.3); box-shadow: 0 4px 12px rgb(0 0 0 / 0.25); }
.th-status span { display: flex; align-items: center; gap: 8px; font-size: 0.75rem; font-weight: 600; color: #d1d5db; }
.th-status span::before { content: ""; width: 10px; height: 10px; border-radius: 999px; background: var(--th-tan); box-shadow: 0 0 0 0 rgb(210 180 140 / 0.6); animation: th-pulse 2s infinite; }
@keyframes th-pulse { 0% { box-shadow: 0 0 0 0 rgb(210 180 140 / 0.55); } 70% { box-shadow: 0 0 0 8px rgb(210 180 140 / 0); } 100% { box-shadow: 0 0 0 0 rgb(210 180 140 / 0); } }
.th-status p { margin: 10px 0 12px; font-size: 0.75rem; line-height: 1.6; color: #9ca3af; }
.th-status a { display: block; padding: 8px; border-radius: 12px; text-align: center; font-size: 0.75rem; font-weight: 600; color: var(--th-tan); border: 1px solid rgb(210 180 140 / 0.2); transition: background-color 0.3s, color 0.3s; }
.th-status a:hover { background: var(--th-tan); color: var(--th-base); }
.th-footer__bottom { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 16px; padding-top: 32px; border-top: 1px solid rgb(210 180 140 / 0.2); font-size: 0.75rem; color: var(--th-tan); }
@media (min-width: 640px) { .th-footer__bottom { flex-direction: row; } }
.th-footer__bottom p { margin: 0; }
.th-footer__bottom nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 24px; }
.th-footer__bottom nav a { color: var(--th-tan); }
.th-footer__bottom nav a:hover { text-decoration: underline; }
.th-top { display: inline-flex; padding: 8px; border-radius: 8px; color: var(--th-tan); background: none; border: 1px solid rgb(210 180 140 / 0.2); cursor: pointer; transition: background-color 0.3s, color 0.3s; }
.th-top:hover { background: var(--th-tan); color: var(--th-base); }

/* --- Contenuti: tipografia e tessere della home --- */
main:not(.sfa) h1, .article-header h1, .hero__title, header > h1 {
  font-family: "Playfair Display", "Cinzel", serif !important;
  font-style: italic;
  font-weight: 700 !important;
  letter-spacing: 0.01em;
  color: #fff;
}
main:not(.sfa) h2, .section-header__title, .cta-banner__title {
  font-family: "Playfair Display", "Cinzel", serif !important;
  font-style: italic;
  font-weight: 700 !important;
  color: #fff;
}
main:not(.sfa) h3, .feature-card__title {
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-style: normal;
  color: #fff;
}
.hero__badge, .section-header__eyebrow, .article-header__meta .badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--th-tan); background: rgb(210 180 140 / 0.08); border: 1px solid rgb(210 180 140 / 0.2);
}

.feature-card, .faq-item, .article-callout, .article-step-card, .article-cta-box, .table-of-contents, .cta-banner, .stat,
.terms-card, .policy-card, .card, main:not(.sfa) article[style] {
  border-radius: 24px !important;
  background: var(--th-tile) !important;
  border: 1px solid var(--th-line) !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 12px 32px rgb(0 0 0 / 0.35) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transition: transform var(--th-spring-duration) var(--th-spring), border-color 0.3s ease !important;
}
.feature-card:hover, .article-step-card:hover, .stat:hover, .card:hover { transform: translateY(-4px); border-color: rgb(210 180 140 / 0.3) !important; }
.article-callout--tip { border-left: 3px solid var(--th-gold) !important; }
.article-callout--warning { border-left: 3px solid #FF5A47 !important; }

.btn--primary, .btn--google-play, .nav__cta {
  border-radius: 16px !important;
  color: #1a1814 !important;
  background: linear-gradient(90deg, var(--th-tan), var(--th-gold)) !important;
  border: 0 !important;
  box-shadow: 0 10px 24px rgb(196 164 120 / 0.2) !important;
  transition: transform var(--th-spring-duration) var(--th-spring) !important;
}
.btn--outline {
  border-radius: 16px !important;
  color: var(--th-text) !important;
  background: rgb(36 33 28 / 0.6) !important;
  border: 1px solid rgb(210 180 140 / 0.25) !important;
  transition: transform var(--th-spring-duration) var(--th-spring) !important;
}
.btn--primary:hover, .btn--google-play:hover, .btn--outline:hover { transform: scale(1.03); }
.btn--primary:active, .btn--google-play:active, .btn--outline:active { transform: scale(0.97); }

.article-table, .comparison-table { border-radius: 18px; overflow: hidden; border: 1px solid var(--th-line); }
.article-table th, .comparison-table th { font-family: "Space Grotesk", sans-serif; color: #fff; background: rgb(210 180 140 / 0.08); }

@media (prefers-reduced-motion: reduce) {
  .th-cta, .th-social a, .th-lang summary svg:last-child, .feature-card, .article-step-card, .stat, .card,
  .btn--primary, .btn--google-play, .btn--outline { transition: none !important; }
  .feature-card:hover, .article-step-card:hover, .stat:hover, .card:hover, .th-cta:hover, .btn--primary:hover,
  .btn--google-play:hover, .btn--outline:hover { transform: none; }
  .th-status span::before { animation: none; }
}

/* --- Giorno: data-daypart="day" lo mette /js/daypart.js dall'ora del dispositivo (alba e tramonto di Firenze).
       Pergamena e inchiostro, come la home in modalita' chiara. --- */
html[data-daypart="day"] {
  --th-base: #f4eedd;
  --th-deep: #ece3cd;
  --th-tan: #8B653B;
  --th-gold: #A8875D;
  --th-terracotta: #6e5136;
  --th-text: #2a1f16;
  --th-muted: #6b5a46;
  --th-line: rgb(139 101 59 / 0.18);
  --th-line-strong: rgb(139 101 59 / 0.3);
  --th-tile: rgb(255 252 245 / 0.78);
}
html[data-daypart="day"] body {
  background-image: radial-gradient(ellipse at 50% -10%, rgb(168 135 93 / 0.16), transparent 55%) !important;
}
html[data-daypart="day"] body::before {
  background-image:
    linear-gradient(rgb(139 101 59 / 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgb(139 101 59 / 0.06) 1px, transparent 1px);
}
html[data-daypart="day"] .th-header.is-scrolled {
  background: rgb(244 238 221 / 0.9);
  border-bottom-color: rgb(139 101 59 / 0.15);
  box-shadow: 0 10px 30px rgb(42 31 22 / 0.12);
}
html[data-daypart="day"] .th-brand__logo { box-shadow: 0 4px 12px rgb(42 31 22 / 0.18); }
html[data-daypart="day"] .th-nav { background: rgb(255 255 255 / 0.55); border-color: rgb(139 101 59 / 0.15); }
html[data-daypart="day"] .th-nav a { color: #4f4030; }
html[data-daypart="day"] .th-nav a:hover { color: #2a1f16; background: rgb(139 101 59 / 0.08); }
html[data-daypart="day"] .th-lang summary:hover { background: rgb(139 101 59 / 0.08); }
html[data-daypart="day"] .th-lang__menu { background: rgb(255 250 241 / 0.98); box-shadow: 0 16px 40px rgb(42 31 22 / 0.18); }
html[data-daypart="day"] .th-lang__menu a,
html[data-daypart="day"] .th-lang__menu button { color: #4f4030; }
html[data-daypart="day"] .th-lang__menu a:hover,
html[data-daypart="day"] .th-lang__menu button:hover,
html[data-daypart="day"] .th-lang__menu .is-current { color: #2a1f16; background: rgb(139 101 59 / 0.1); }
html[data-daypart="day"] .th-cta,
html[data-daypart="day"] .th-mobile .th-mobile__cta { color: #fffaf1; box-shadow: 0 6px 16px rgb(42 31 22 / 0.18); }
html[data-daypart="day"] .th-mobile { background: rgb(244 238 221 / 0.97); border-bottom-color: rgb(139 101 59 / 0.15); }
html[data-daypart="day"] .th-mobile a:hover { background: rgb(139 101 59 / 0.08); }
/* Il disegno su pergamena: di giorno si stampa sulla carta (multiply) invece di accendersi sul buio */
html[data-daypart="day"] .th-skyline { border-top-color: rgb(139 101 59 / 0.25); }
html[data-daypart="day"] .th-skyline img { mix-blend-mode: multiply; opacity: 0.8; }
html[data-daypart="day"] .th-footer { color: #5f4e3b; }
html[data-daypart="day"] .th-footer__logo strong,
html[data-daypart="day"] .th-footer h4,
html[data-daypart="day"] .th-footer h4 a { color: #2a1f16; }
html[data-daypart="day"] .th-footer address div:first-child { color: #3a2d20; }
html[data-daypart="day"] .th-footer ul a { color: #5f4e3b; }
html[data-daypart="day"] .th-status { background: #fbf7ee; box-shadow: 0 4px 12px rgb(42 31 22 / 0.1); }
html[data-daypart="day"] .th-status span { color: #3a2d20; }
html[data-daypart="day"] .th-status p { color: #5f4e3b; }
html[data-daypart="day"] main:not(.sfa) h1,
html[data-daypart="day"] .article-header h1,
html[data-daypart="day"] .hero__title,
html[data-daypart="day"] header > h1,
html[data-daypart="day"] main:not(.sfa) h2,
html[data-daypart="day"] .section-header__title,
html[data-daypart="day"] .cta-banner__title,
html[data-daypart="day"] main:not(.sfa) h3,
html[data-daypart="day"] .feature-card__title,
html[data-daypart="day"] .article-table th,
html[data-daypart="day"] .comparison-table th { color: #2a1f16; }
html[data-daypart="day"] .feature-card, html[data-daypart="day"] .faq-item, html[data-daypart="day"] .article-callout,
html[data-daypart="day"] .article-step-card, html[data-daypart="day"] .article-cta-box, html[data-daypart="day"] .table-of-contents,
html[data-daypart="day"] .cta-banner, html[data-daypart="day"] .stat, html[data-daypart="day"] .terms-card,
html[data-daypart="day"] .policy-card, html[data-daypart="day"] .card, html[data-daypart="day"] main:not(.sfa) article[style] {
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.7), 0 12px 32px rgb(42 31 22 / 0.1) !important;
}
html[data-daypart="day"] .btn--primary,
html[data-daypart="day"] .btn--google-play,
html[data-daypart="day"] .nav__cta { color: #fffaf1 !important; box-shadow: 0 10px 24px rgb(42 31 22 / 0.16) !important; }
html[data-daypart="day"] .btn--outline { background: rgb(255 252 245 / 0.8) !important; }
