/* Ton aura: the home page, the free result and the look of every page of the site.
   Colours come from the real aura photos: the warm gold of the halo (#f5d179, #edc75c), the
   silver-grey of its second colour (#a0a2ae), the cream of the room behind the selfie, and the
   dark espresso of the hair and the sweater for the ink and the night of the top of the page.
   Loaded by aura/page_head.html on every page; the home rules are scoped to .ta. */

@font-face {
  font-family: "Instrument Serif Aura";
  src: url("fonts/instrument-serif-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif Aura";
  src: url("fonts/instrument-serif-italic-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Outfit Aura";
  src: url("fonts/outfit-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Shadows Aura";
  src: url("fonts/shadows-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

.ta {
  --ta-paper: #fbf6ea;
  --ta-card: #fffdf8;
  --ta-ink: #2b2118;
  --ta-soft: #4d4235;
  --ta-muted: #6b5f50;
  --ta-line: #eadfca;
  --ta-line-soft: #f3ecdd;
  --ta-night: #241b14;
  --ta-night-2: #3a2c1f;
  --ta-gold: #f5d179;
  --ta-gold-2: #edc75c;
  --ta-gold-deep: #7d5408;
  --ta-gold-light: #fbf0cf;
  --ta-silver: #a0a2ae;
  --ta-silver-deep: #4f5a6a;
  --ta-silver-light: #e9eaee;
  --ta-cta: linear-gradient(95deg, var(--ta-gold-deep), var(--ta-silver-deep));
  --ta-display: "Instrument Serif Aura", Georgia, serif;
  --ta-text: "Outfit Aura", system-ui, sans-serif;
  --ta-script: "Shadows Aura", cursive;
  font-family: var(--ta-text);
  color: var(--ta-ink);
  line-height: 1.5;
}
.ta *, .ta *::before, .ta *::after { box-sizing: border-box; }
.ta h1, .ta h2, .ta h3 { font-family: var(--ta-display); font-weight: 400; color: var(--ta-ink); margin: 0; letter-spacing: 0; }
.ta p { margin: 0; }
.ta a { color: var(--ta-gold-deep); }
.ta a:hover { color: var(--ta-ink); }
.ta a:focus-visible, .ta button:focus-visible, .ta input:focus-visible, .ta video:focus-visible { outline: 3px solid var(--ta-gold-2); outline-offset: 2px; }
.ta img, .ta video { display: block; max-width: 100%; height: auto; }

/* The page around it: the espresso night, the logo instead of the emoji. */
body:has(.ta-home) { background: #fbf6ea; }
body:has(.ta-home) .topbar {
  max-width: 1200px; padding: 16px max(18px, env(safe-area-inset-left, 0px));
  background: #241b14; box-shadow: 0 0 0 100vmax #241b14; clip-path: inset(0 -100vmax);
}
body:has(.ta-home) .brand { color: #fbf0cf; }
body:has(.ta-home) .topnav a { color: #e8dcc4; }
body:has(.ta-home) .footer { max-width: 1200px; color: #4d4235; }

.ta-wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 18px; }
.ta-hand { font-family: var(--ta-script); color: var(--ta-gold-deep); font-size: 1.45rem; line-height: 1.15; }
.ta-gold { color: var(--ta-gold-deep); }
.ta-note { font-size: 0.88rem; color: var(--ta-muted); }

.ta-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px; border-radius: 999px; border: 0;
  background: var(--ta-cta); color: #ffffff; font: 600 1.04rem var(--ta-text);
  text-decoration: none; text-align: center; cursor: pointer;
  box-shadow: 0 10px 24px rgba(125, 84, 8, 0.25);
}
.ta a.ta-btn, .ta a.ta-btn:hover { color: #ffffff; }
.ta-btn:hover { filter: brightness(1.08); }
.ta-btn.ghost, .ta a.ta-btn.ghost { background: #ffffff; color: var(--ta-gold-deep); border: 2px solid var(--ta-gold-deep); box-shadow: none; }
.ta-btn.ghost:hover { background: var(--ta-gold-light); filter: none; }
.ta-btn[hidden] { display: none; }
.ta-btn:disabled { opacity: 0.55; cursor: default; }
.ta-wide { width: 100%; }

.ta-sticker {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  background: #ffffff; color: var(--ta-ink); font: 600 0.78rem var(--ta-text);
  padding: 6px 12px; border-radius: 999px; box-shadow: 0 4px 14px rgba(43, 33, 24, 0.2);
}
.ta-tilt-left { transform: rotate(-2deg); }
.ta-tilt-right { transform: rotate(2.5deg); }

/* An instant photo: white frame, a line written under it. */
.ta-polaroid {
  position: relative; display: block; background: #ffffff; padding: 12px 12px 0;
  border-radius: 4px; box-shadow: 0 24px 50px rgba(20, 14, 8, 0.35); text-decoration: none; color: var(--ta-ink);
}
.ta-polaroid img, .ta-polaroid video { width: 100%; border-radius: 2px; background: #efe7d6; }
.ta-caption { display: block; font-family: var(--ta-script); font-size: 1.25rem; text-align: center; padding: 8px 4px 10px; color: var(--ta-ink); }

/* The top of the page: a dark room, the halo of the real photo, the quiz in a white card. */
.ta-hero {
  position: relative; overflow: hidden; padding: 26px 0 60px; color: #fbf0cf;
  background:
    radial-gradient(620px 520px at 80% 38%, rgba(245, 209, 121, 0.42) 0%, rgba(237, 199, 92, 0.16) 42%, rgba(36, 27, 20, 0) 72%),
    radial-gradient(520px 420px at 92% 70%, rgba(160, 162, 174, 0.30) 0%, rgba(36, 27, 20, 0) 70%),
    linear-gradient(180deg, #241b14 0%, #2e2219 100%);
}
.ta-hero-grid { position: relative; display: grid; gap: 40px; align-items: start; }
@media (min-width: 960px) { .ta-hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 56px; } }
.ta-hero-text { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ta-hero .ta-hand { color: var(--ta-gold); }
.ta-hero h1 { font-size: clamp(2.3rem, 5.6vw, 4rem); line-height: 1.02; color: #fffaf0; }
.ta-hero h1 em { font-style: italic; color: var(--ta-gold); }
.ta-lead { font-size: 1.1rem; color: #eadfc8; max-width: 560px; }
.ta-skip { font-size: 0.95rem; font-weight: 600; }
.ta .ta-skip a { color: var(--ta-gold); text-decoration: none; }
.ta .ta-skip a:hover { color: #ffffff; }

.ta-form {
  background: #ffffff; color: var(--ta-ink); border-radius: 22px; padding: 20px; max-width: 580px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(245, 209, 121, 0.35);
  display: flex; flex-direction: column; gap: 14px;
}
.ta-form-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ta-form-head h2 { font-size: 1.5rem; }
.ta-field { display: flex; flex-direction: column; gap: 6px; }
.ta-field label, .ta-form legend { font-weight: 600; font-size: 0.98rem; }
.ta-form input[type="text"] {
  min-height: 50px; width: 100%; border: 1.5px solid #e2d6bd; border-radius: 14px; padding: 0 16px;
  font: 1rem var(--ta-text); background: var(--ta-card); color: var(--ta-ink);
}
.ta-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.ta-form fieldset[hidden] { display: none; }
.ta-form legend { margin-bottom: 8px; padding: 0; }
.ta-choices { display: grid; gap: 8px; }
@media (min-width: 560px) { .ta-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ta-opt {
  display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 14px;
  border: 1.5px solid #e2d6bd; border-radius: 14px; background: var(--ta-card); font-size: 0.97rem; cursor: pointer;
}
.ta-opt input { accent-color: var(--ta-gold-deep); width: 18px; height: 18px; margin: 0; flex: 0 0 auto; }
.ta-opt:has(input:checked) { border-color: var(--ta-gold-deep); background: var(--ta-gold-light); }
.ta-form .quiz-progress { display: flex; align-items: center; gap: 10px; font-size: 0.86rem; color: var(--ta-muted); }
.ta-form .quiz-progress .meter { background: var(--ta-line-soft); border-radius: 999px; overflow: hidden; }
.ta-form .quiz-progress .meter > i { display: block; height: 100%; background: linear-gradient(90deg, var(--ta-gold-2), var(--ta-silver)); }
.ta-form .quiz-back { color: var(--ta-gold-deep); }

/* Band mode, under the quiz. */
.ta-bande { background: rgba(255, 253, 248, 0.96); color: var(--ta-ink); border-radius: 18px; padding: 16px; max-width: 580px; display: flex; flex-direction: column; gap: 8px; }
.ta-bande[hidden] { display: none; }
.ta-bande ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ta-bande li { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.ta-bande form { display: flex; gap: 8px; flex-wrap: wrap; }
.ta-bande .ta-btn { min-height: 44px; font-size: 0.95rem; padding: 0 18px; }

/* Before and after, two instant photos. */
.ta-hero-show { margin: 0; position: relative; min-height: 420px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.ta-hero-show .ta-before { position: absolute; width: 40%; max-width: 230px; left: 0; top: 70px; transform: rotate(-7deg); z-index: 0; }
.ta-hero-show .ta-after { position: relative; z-index: 1; width: 68%; max-width: 400px; margin-left: 30%; transform: rotate(2deg); }
.ta-hero-show .ta-after .ta-sticker { top: -12px; left: -10px; }
.ta-hero-show figcaption { color: #d9ccb2; text-align: center; max-width: 420px; }

.ta-result-zone { padding-top: 26px; padding-bottom: 40px; }

/* Four true facts on a night band. */
.ta-band { background: var(--ta-night); color: #fbf0cf; padding: 22px 0; border-top: 1px solid rgba(245, 209, 121, 0.25); }
.ta-band ul { list-style: none; margin: 0 auto; display: grid; gap: 14px; }
@media (min-width: 600px) { .ta-band ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .ta-band ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ta-band li { display: flex; gap: 10px; align-items: center; }
.ta-band svg { flex: 0 0 auto; }

.ta-intro { padding-top: 68px; padding-bottom: 18px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ta-intro h2 { font-size: clamp(2rem, 4.4vw, 2.9rem); line-height: 1.1; }
.ta-intro > p:last-child { max-width: 740px; color: var(--ta-soft); font-size: 1.06rem; }

/* One section per product: the real example, then what you get and the button. */
.ta-product { padding: 40px 0 64px; }
.ta-product.alt { background: #f3ecdd; padding: 64px 0; }
.ta-product-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) {
  .ta-product-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 60px; }
  .ta-product-grid.reverse { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); }
}
@media (max-width: 899px) { .ta-product-grid.reverse .ta-shot { order: -1; } }
.ta-shot { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.ta-copy { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ta-copy > p { font-size: 1.06rem; color: var(--ta-soft); }
.ta-copy > .ta-note { font-size: 0.9rem; color: var(--ta-muted); }
.ta-copy .ta-btn { align-self: flex-start; }
.ta-copy-head { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.ta-copy-head h3 { font-size: clamp(1.9rem, 3.6vw, 2.5rem); line-height: 1.1; }
.ta-price { font-family: var(--ta-display); font-size: 1.9rem; color: var(--ta-gold-deep); }
.ta-tag { align-self: flex-start; font: 600 0.8rem var(--ta-text); padding: 5px 12px; border-radius: 999px; background: var(--ta-silver-light); color: var(--ta-silver-deep); }
.ta-tag.gold { background: var(--ta-gold-light); color: var(--ta-gold-deep); }
.ta-tag.silver { background: var(--ta-silver-light); color: var(--ta-silver-deep); }
.ta-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.ta-list li { display: flex; gap: 10px; align-items: flex-start; }
.ta-list li::before {
  content: ""; flex: 0 0 14px; height: 14px; margin-top: 5px; border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0%, var(--ta-gold) 45%, var(--ta-silver) 100%);
  box-shadow: 0 0 8px rgba(237, 199, 92, 0.8);
}
.ta-quote { margin: 0; padding: 14px 16px; border-left: 3px solid var(--ta-gold-2); background: #fffaf0; border-radius: 0 12px 12px 0; font-family: var(--ta-display); font-style: italic; font-size: 1.15rem; display: flex; flex-direction: column; gap: 6px; }
.ta-quote .ta-note { font-family: var(--ta-text); font-style: normal; }

.ta-video { max-width: 460px; width: 100%; margin: 0 auto; }
.ta-video video { cursor: pointer; }
.ta-thumbs { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.75fr); gap: 12px; max-width: 460px; width: 100%; margin: 0 auto; align-items: end; }
.ta-thumb { position: relative; display: block; text-decoration: none; color: var(--ta-ink); cursor: zoom-in; }
.ta-thumb img { border-radius: 10px; box-shadow: 0 12px 26px rgba(43, 33, 24, 0.18); }
.ta-thumb span { display: block; text-align: center; font-size: 0.85rem; color: var(--ta-muted); padding-top: 6px; }

.ta-pair { flex-direction: row; gap: 18px; align-items: flex-end; justify-content: center; }
.ta-pair .ta-polaroid { flex: 1 1 60%; max-width: 400px; min-width: 0; cursor: zoom-in; }
.ta-story { flex: 1 1 34%; max-width: 210px; min-width: 0; cursor: zoom-in; }
.ta-story img { border-radius: 16px; box-shadow: 0 24px 50px rgba(43, 33, 24, 0.3); }

.ta-duo { display: grid; grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr); gap: 10px; align-items: center; }
.ta-polaroid.small { padding: 8px 8px 0; }
.ta-polaroid.small .ta-caption { font-size: 1.05rem; padding: 6px 2px 8px; }
.ta-polaroid.small .ta-sticker { top: -10px; left: -8px; font-size: 0.72rem; }
.ta-duo a.ta-polaroid { cursor: zoom-in; }
.ta-arrow { font-size: 1.6rem; color: var(--ta-gold-deep); text-align: center; }
.ta-lines { margin: 0; padding: 16px 18px 16px 38px; background: #ffffff; border: 1px solid var(--ta-line); border-radius: 14px; display: flex; flex-direction: column; gap: 6px; color: var(--ta-soft); }

/* Small products in tiles, and the way back to the free quiz. */
.ta-more { padding: 56px 0; }
.ta-more-grid { display: grid; gap: 18px; }
@media (min-width: 800px) { .ta-more-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ta-tile { background: #ffffff; border: 1px solid var(--ta-line); border-radius: 20px; padding: 22px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ta-tile.warm { background: var(--ta-gold-light); border-color: var(--ta-gold-light); }
.ta-tile-title, .ta-tile-head strong { font-family: var(--ta-display); font-weight: 400; font-size: 1.45rem; line-height: 1.15; }
.ta-tile-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.ta-tile p { color: var(--ta-soft); }
.ta-tile .ta-btn { align-self: flex-start; min-height: 46px; padding: 0 20px; font-size: 0.98rem; }
.ta-links { display: flex; flex-wrap: wrap; gap: 8px; }
.ta-mini-stack { position: relative; height: 150px; margin: 4px 0 8px; }
.ta-mini-stack img, .ta-mini-stack span {
  position: absolute; top: 0; width: 120px; height: 120px; border: 6px solid #ffffff; border-radius: 3px;
  box-shadow: 0 10px 20px rgba(43, 33, 24, 0.18);
}
.ta-mini-stack img { left: 50%; margin-left: -60px; z-index: 3; transform: rotate(-3deg); top: 12px; }
.ta-mini-stack span { background: radial-gradient(circle at 50% 45%, #fffaf0 0%, var(--ta-gold) 45%, var(--ta-silver) 100%); }
.ta-mini-stack span:nth-of-type(1) { left: 50%; margin-left: -128px; transform: rotate(-12deg); top: 22px; }
.ta-mini-stack span:nth-of-type(2) { left: 50%; margin-left: 8px; transform: rotate(10deg); top: 20px; background: radial-gradient(circle at 50% 45%, #fffaf0 0%, #b8cbe6 45%, #4f5a6a 100%); }
.ta-mail, .ta-teaser-mail {
  background: #fffdf8; border: 1px solid var(--ta-line); border-radius: 14px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 6px; font-size: 0.92rem; color: var(--ta-soft);
  border-top: 4px solid #f77f00;
}
.ta-mail-subject { font-weight: 700; color: var(--ta-ink); }

.ta-how { background: #ffffff; border-top: 1px solid var(--ta-line); border-bottom: 1px solid var(--ta-line); padding: 60px 0; }
.ta-how h2 { font-size: clamp(2rem, 4vw, 2.6rem); text-align: center; margin-bottom: 28px; }
.ta-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 26px; }
@media (min-width: 860px) { .ta-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ta-steps li { display: flex; flex-direction: column; gap: 10px; }
.ta-steps h3 { font-size: 1.55rem; }
.ta-steps p { color: var(--ta-soft); }
.ta-step-n {
  width: 46px; height: 46px; border-radius: 50%; color: var(--ta-ink);
  background: radial-gradient(circle at 40% 38%, #ffffff 0%, var(--ta-gold) 50%, var(--ta-silver) 100%);
  box-shadow: 0 0 18px rgba(237, 199, 92, 0.7);
  display: flex; align-items: center; justify-content: center; font-family: var(--ta-display); font-size: 1.45rem;
}
.ta-postit {
  align-self: flex-start; font-family: var(--ta-script); font-size: 1.25rem; color: var(--ta-ink);
  background: var(--ta-gold-light); border-radius: 10px; padding: 6px 12px; transform: rotate(-1.5deg);
}
.ta-quote-small { font-family: var(--ta-display); font-style: italic; font-size: 1.1rem; color: var(--ta-silver-deep); background: var(--ta-silver-light); border-radius: 10px; padding: 8px 12px; }

.ta-trust { padding: 56px 0 20px; }
.ta-trust-grid { display: grid; gap: 28px; }
@media (min-width: 860px) { .ta-trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; } }
.ta-trust h2 { font-size: 1.8rem; margin-bottom: 8px; }
.ta-trust p { color: var(--ta-soft); }
.ta-guides { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.ta-guides a {
  display: inline-block; padding: 8px 14px; border-radius: 999px; background: #ffffff; border: 1px solid var(--ta-line);
  font-weight: 600; font-size: 0.92rem; text-decoration: none;
}

.ta-faq { padding: 36px 0 64px; }
.ta-faq .ta-wrap { max-width: 820px; }
.ta-faq h2 { font-size: 2.2rem; margin-bottom: 6px; }
.ta-faq details { border-bottom: 1px solid var(--ta-line); padding: 16px 0; }
.ta-faq summary { font-weight: 600; cursor: pointer; font-size: 1.05rem; }
.ta-faq details p { margin-top: 10px; color: var(--ta-soft); }

/* The free aura (also used by the public pages and band mode). */
.au-title { text-align: center; }
.au-orb { width: 190px; height: 190px; margin: 6px auto 12px; border-radius: 50%; box-shadow: 0 0 60px 14px var(--au-glow, #f5d179); }
.au-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: #f3ecdd; font-size: 0.85rem; font-weight: 600; margin: 2px; }
.au-chip i { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }
.au-scores { display: grid; gap: 8px; margin: 4px 0; }
.au-score { display: grid; grid-template-columns: 6.5rem 1fr 3rem; gap: 8px; align-items: center; font-size: 0.86rem; }
.au-score .meter > i { background: var(--au-bar); }
.au-members { display: grid; gap: 8px; margin: 12px 0; }
.au-member { display: flex; justify-content: space-between; align-items: center; gap: 8px; background: #f3ecdd; border-radius: 14px; padding: 8px 12px; flex-wrap: wrap; }

/* The free result: the aura, then the most complete product compared with it. */
.ta-res { display: grid; gap: 24px; }
@media (min-width: 900px) { .ta-res { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); align-items: start; } }
.ta-res-free, .ta-res-offer {
  background: #ffffff; border: 1px solid var(--ta-line); border-radius: 22px; padding: 22px 18px;
  display: flex; flex-direction: column; gap: 14px; box-shadow: 0 16px 34px rgba(43, 33, 24, 0.08); min-width: 0;
}
.ta-res-free .result-big { font-family: var(--ta-display); font-size: 2.3rem; line-height: 1.1; }
.ta-res-free > p { color: var(--ta-soft); }
.ta-res-offer { border: 2px solid #e8cf8a; }
.ta-res-offer h2 { font-size: 1.85rem; line-height: 1.15; }
.ta-res-picture { position: relative; display: flex; flex-direction: column; gap: 8px; }
.ta-res-picture img, .ta-res-picture video { width: 100%; max-width: 380px; margin: 0 auto; border-radius: 3px; border: 10px solid #ffffff; box-shadow: 0 16px 34px rgba(43, 33, 24, 0.22); background: #efe7d6; }
.ta-res-picture .ta-note { text-align: center; }
.ta-compare { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.ta-compare th, .ta-compare td { padding: 9px 6px; border-bottom: 1px solid var(--ta-line); text-align: left; vertical-align: top; }
.ta-compare th { font-weight: 600; color: var(--ta-muted); font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.06em; }
.ta-compare td.full { color: var(--ta-gold-deep); font-weight: 600; }
.ta-res-facts { display: flex; flex-direction: column; gap: 4px; font-size: 0.9rem; color: var(--ta-soft); }
.ta-res-small { display: flex; gap: 14px; align-items: center; background: #f3ecdd; border-radius: 16px; padding: 12px; text-decoration: none; color: var(--ta-ink); }
.ta .ta-res-small { color: var(--ta-ink); }
.ta-res-small img { width: 56px; border-radius: 3px; border: 4px solid #ffffff; flex: 0 0 auto; }
.ta-res-small > span { flex: 1 1 auto; min-width: 0; }
.ta-res-small .price { font-family: var(--ta-display); font-size: 1.4rem; color: var(--ta-gold-deep); }

/* Every other page of the site (offer, pack, result, account): this file is only ever loaded
   by Ton aura (aura/page_head.html), so the shared classes take the site's look here. */
body { background: #fbf6ea; font-family: "Outfit Aura", system-ui, sans-serif; color: #2b2118; }
h1, h2, h3 { font-family: "Instrument Serif Aura", Georgia, serif; font-weight: 400; }
.topbar { max-width: 1200px; }
.brand { font-family: "Instrument Serif Aura", Georgia, serif; font-weight: 400; font-size: 1.4rem; color: #2b2118; }
.brand-emoji {
  font-size: 0; width: 32px; height: 32px; flex: 0 0 auto;
  background: url("logo.svg") center / contain no-repeat;
}
.topnav a, .footer { color: #4d4235; }
.card { border: 1px solid #eadfca; box-shadow: 0 16px 34px rgba(43, 33, 24, 0.07); }
.badge { background: #fbf0cf; color: #7d5408; }
.offer-price b, .price { font-family: "Instrument Serif Aura", Georgia, serif; font-weight: 400; color: #7d5408; }
.btn { border-radius: 999px; }
input[type="text"], input[type="email"], textarea, select { background: #fffdf8; border-color: #e2d6bd; }

/* The samples at the top of each product page (templates/teasers/). */
.ta-teaser-video { display: grid; gap: 12px; }
@media (min-width: 560px) { .ta-teaser-video:has(.ta-teaser-side) { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; } }
.ta-teaser-video .teaser-media { border-radius: 4px; border: 8px solid #ffffff; box-shadow: 0 14px 30px rgba(43, 33, 24, 0.2); }
.ta-teaser-side { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.75fr); gap: 10px; align-items: end; }
.ta-teaser-pair { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.76fr); gap: 12px; align-items: end; }
.ta-teaser-duo { display: grid; grid-template-columns: minmax(0, 1fr) 26px minmax(0, 1fr); gap: 10px; align-items: center; }
.ta-teaser-band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: center; }
.ta-band-slots { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.ta-band-slots li {
  aspect-ratio: 1; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: "Instrument Serif Aura", Georgia, serif; font-size: 1.1rem; color: #4d4235;
  background: radial-gradient(circle at 45% 40%, #ffffff 0%, #f3ecdd 60%, #e9eaee 100%); border: 1px solid #eadfca;
}
.ta-band-slots li.done { background: radial-gradient(circle at 45% 40%, #ffffff 0%, #f5d179 50%, #a0a2ae 100%); color: #2b2118; }

/* Proposals in the paid form: the upgrade and the pack, only when they are on sale. */
.ta-hint { background: #fbf0cf; border-radius: 12px; padding: 10px 12px; font-size: 0.9rem; margin: 12px 0 0; }
.ta-hint a { font-weight: 700; color: #7d5408; }

/* Phones: the first question of the quiz fits in the first screen. */
@media (max-width: 599px) {
  .ta-hero { padding-top: 12px; padding-bottom: 40px; }
  .ta-hero-text { gap: 10px; }
  .ta-hand { font-size: 1.2rem; }
  .ta-hero h1 { font-size: 2.05rem; }
  .ta-lead { font-size: 0.98rem; }
  .ta-form { padding: 14px; gap: 10px; }
  .ta-form-head h2 { font-size: 1.3rem; }
  .ta-form input[type="text"] { min-height: 46px; }
  .ta-opt { min-height: 44px; padding: 8px 12px; font-size: 0.95rem; }
  .ta-choices { gap: 6px; }
  .ta-hero-show { min-height: 0; }
  .ta-hero-show .ta-before { width: 40%; top: 30px; }
  .ta-hero-show .ta-after { width: 66%; margin-left: 32%; }
  .ta-pair { gap: 12px; }
  .ta-res-small .price { font-size: 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ta-tilt-left, .ta-tilt-right, .ta-postit, .ta-hero-show .ta-before, .ta-hero-show .ta-after, .ta-mini-stack img, .ta-mini-stack span { transform: none; }
}