/* ==========================================================================
   Tarot Cards Reading — non-blocking global styles
   Midnight Editorial: deep charcoal ground, warm ivory type, champagne gold.
   Components, article prose, sections, forms, and the reading app.
   ========================================================================== */

/* Layout utilities ---------------------------------------------------------- */
.tc-section { padding-block: var(--tc-section-pad, clamp(44px, 6.4vw, 78px)); }
.tc-section--tint { background: var(--tc-ink-50); }
.tc-section--teal {
  background: radial-gradient(120% 130% at 15% 0%, var(--tc-teal-800) 0%, var(--tc-teal-900) 45%, #191227 100%);
  border-block: 1px solid var(--tc-ink-100);
}
.tc-section--teal h2, .tc-section--teal h3 { color: #fdf9f1; }

.tc-section__head { max-width: 720px; margin-inline: auto; text-align: center; margin-block-end: 42px; }
.tc-section__eyebrow {
  display: inline-block; font-weight: 600; font-size: 12.5px; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--tc-teal-700); background: var(--tc-teal-50);
  border: 1px solid rgba(217, 184, 119, .28);
  padding: 6px 15px; border-radius: 50px; margin-block-end: 15px;
}
.tc-section--teal .tc-section__eyebrow { color: #f4e6c4; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); }
.tc-section__lead { font-size: 1.1rem; color: var(--tc-ink-500); margin-block-start: 13px; }
.tc-section--teal .tc-section__lead { color: rgba(246, 240, 230, .82); }

.tc-text-center { text-align: center; }
.tc-mt-lg { margin-block-start: 38px; }
.tc-grid { display: grid; gap: var(--tc-grid-gap, 22px); }
.tc-grid--2 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.tc-grid--3 { grid-template-columns: repeat(auto-fit, minmax(265px, 1fr)); }
.tc-grid--4 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }

/* Cards --------------------------------------------------------------------- */
.tc-card {
  background: var(--surface); border: 1px solid var(--tc-ink-100); border-radius: var(--tc-radius);
  padding: 26px; box-shadow: var(--tc-shadow); transition: transform .2s, box-shadow .2s, border-color .2s;
  height: 100%;
}
.tc-card:hover { transform: translateY(-3px); box-shadow: var(--tc-shadow-lg); border-color: rgba(217, 184, 119, .45); }
[data-cards='outline'] .tc-card { box-shadow: none; border-color: var(--tc-ink-100); }
[data-cards='outline'] .tc-card:hover { box-shadow: none; border-color: rgba(217, 184, 119, .5); }
.tc-card__icon {
  display: grid; place-items: center; width: 50px; height: 50px; border-radius: 13px;
  background: var(--tc-teal-50); color: var(--tc-teal-700); margin-block-end: 16px; font-size: 23px;
  border: 1px solid rgba(217, 184, 119, .22);
}
.tc-card h3 { margin-block-end: 9px; font-size: 1.16rem; }
.tc-card p { color: var(--tc-ink-700); font-size: .97rem; }
.tc-card__link { display: inline-flex; align-items: center; gap: 6px; margin-block-start: 15px; font-weight: 600; min-block-size: 44px; }
.tc-card__link::after { content: '→'; }

/* Article cards ------------------------------------------------------------- */
.tc-article-card {
  display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--tc-ink-100);
  border-radius: var(--tc-radius); overflow: hidden; transition: transform .2s, border-color .2s;
}
.tc-article-card:hover { transform: translateY(-3px); border-color: rgba(217, 184, 119, .45); }
.tc-article-card__body { padding: 22px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.tc-article-card__cat {
  align-self: flex-start; font-size: 11.5px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase;
  color: var(--tc-teal-700); background: var(--tc-teal-50); padding: 4px 11px; border-radius: 50px;
}
.tc-article-card__title { font-size: 1.14rem; }
.tc-article-card__title a { color: var(--tc-ink-900); }
.tc-article-card__title a:hover { color: var(--tc-teal-700); text-decoration: none; }
.tc-article-card__excerpt { color: var(--tc-ink-500); font-size: .94rem; flex: 1; }
.tc-article-card__meta { display: flex; gap: 13px; font-size: 12.5px; color: var(--tc-ink-500); margin-block-start: 5px; }

/* Stats --------------------------------------------------------------------- */
.tc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 22px; }
.tc-stat { text-align: center; }
.tc-stat__num { font-size: clamp(1.8rem, 4.4vw, 2.6rem); font-weight: 700; color: var(--tc-teal-700); line-height: 1.05; font-family: var(--tc-font-heading); }
.tc-section--teal .tc-stat__num { color: #f0dcae; }
.tc-stat__label { color: var(--tc-ink-500); margin-block-start: 7px; font-weight: 500; font-size: .93rem; }
.tc-section--teal .tc-stat__label { color: rgba(246, 240, 230, .78); }

/* Steps --------------------------------------------------------------------- */
.tc-steps { counter-reset: step; display: grid; gap: 20px; }
.tc-step { position: relative; padding-inline-start: 60px; }
.tc-step::before {
  counter-increment: step; content: counter(step);
  position: absolute; inset-inline-start: 0; inset-block-start: 0;
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: var(--tc-teal-50); border: 1px solid rgba(217, 184, 119, .4);
  color: var(--tc-teal-700); font-weight: 700; font-size: 17px; font-family: var(--tc-font-heading);
}
.tc-step h3 { margin-block-end: 5px; }
.tc-step p { color: var(--tc-ink-700); }

/* FAQ accordion ------------------------------------------------------------- */
.tc-faq { max-width: 800px; margin-inline: auto; display: grid; gap: 12px; }
.tc-faq__item { border: 1px solid var(--tc-ink-100); border-radius: var(--tc-radius-sm); background: var(--surface); overflow: hidden; }
.tc-faq__item summary {
  cursor: pointer; padding: 18px 22px; font-weight: 600; font-size: 1.04rem; color: var(--tc-ink-900);
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.tc-faq__item summary::-webkit-details-marker { display: none; }
.tc-faq__item summary::after { content: '+'; font-size: 1.5rem; color: var(--tc-teal-700); font-weight: 300; transition: transform .2s; }
.tc-faq__item[open] summary::after { transform: rotate(45deg); }
.tc-faq__item summary:hover { color: var(--tc-teal-700); }
.tc-faq__answer { padding: 0 22px 20px; color: var(--tc-ink-700); }
.tc-faq__answer p + p { margin-block-start: .9em; }

/* Footer -------------------------------------------------------------------- */
.tc-site-footer { background: #0c0913; color: var(--tc-ink-700); padding-block: 52px 26px; margin-block-start: 0; border-block-start: 1px solid var(--tc-ink-100); }
.tc-site-footer__grid { display: grid; grid-template-columns: 1.6fr repeat(auto-fit, minmax(145px, 1fr)); gap: 36px; }
.tc-site-footer__brand .tc-brand__name { color: var(--tc-ink-900); font-size: 21px; display: inline-block; margin-block-end: 11px; }
.tc-site-footer__brand p { color: var(--tc-ink-500); margin-block-end: 16px; font-size: .93rem; }
.tc-site-footer__title { color: var(--tc-ink-900); font-size: .95rem; margin-block-end: 14px; letter-spacing: .4px; }
/* Footer links are a dense list of small targets on mobile; the tap area comes from the
   link's own min-height rather than the gap, so the rows stay visually tight. */
.tc-site-footer__col ul { list-style: none; padding: 0; display: grid; gap: 2px; }
.tc-site-footer__col a {
  color: var(--tc-ink-500); font-size: .93rem;
  display: flex; align-items: center; min-block-size: 40px;
}
.tc-site-footer__col a:hover { color: var(--tc-teal-700); text-decoration: none; }
.tc-site-footer__bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  border-block-start: 1px solid var(--tc-ink-100); margin-block-start: 36px; padding-block-start: 22px;
  font-size: .87rem; color: var(--tc-ink-500);
}
.tc-site-footer__contact { display: flex; gap: 10px; align-items: center; }
.tc-site-footer__contact a { color: var(--tc-ink-500); }
.tc-site-footer__legal { max-width: 900px; margin-block-start: 18px; font-size: .82rem; line-height: 1.6; color: #6f6880; }
@media (max-width: 780px) { .tc-site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .tc-site-footer__grid { grid-template-columns: 1fr; } }

/* Breadcrumbs --------------------------------------------------------------- */
.tc-breadcrumbs { background: var(--tc-ink-50); border-block-end: 1px solid var(--tc-ink-100); font-size: 13.5px; }
.tc-breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; list-style: none; padding: 11px 0; margin: 0; }
.tc-breadcrumbs li { display: flex; align-items: center; gap: 8px; color: var(--tc-ink-500); }
.tc-breadcrumbs a { color: var(--tc-ink-500); }
.tc-breadcrumbs a:hover { color: var(--tc-teal-700); }
.tc-breadcrumbs [aria-current='page'] { color: var(--tc-ink-700); font-weight: 500; }
.tc-breadcrumbs__sep { color: #4a4258; }

/* Hero ---------------------------------------------------------------------- */
.tc-hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(90% 70% at 78% 8%, rgba(70, 52, 102, .55) 0%, rgba(20, 16, 31, 0) 62%),
    radial-gradient(70% 60% at 8% 100%, rgba(140, 59, 74, .22) 0%, rgba(20, 16, 31, 0) 60%),
    var(--bg);
}
.tc-hero::after {
  content: ''; position: absolute; inset-inline: 0; inset-block-end: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(217, 184, 119, .35), transparent);
}
.tc-hero__inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: center; padding-block: clamp(38px, 6vw, 76px); }
.tc-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: 12.5px;
  letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--tc-teal-600); background: rgba(217, 184, 119, .09); border: 1px solid rgba(217, 184, 119, .26);
  padding: 7px 15px; border-radius: 50px; margin-block-end: 18px;
}
.tc-hero h1 { margin-block-end: 16px; }
.tc-hero__lead { font-size: 1.13rem; color: var(--tc-ink-700); margin-block-end: 24px; max-width: 54ch; }
.tc-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-block-end: 22px; }
.tc-hero__trust { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .88rem; color: var(--tc-ink-500); }
.tc-hero__trust span { display: inline-flex; align-items: center; gap: 6px; }
.tc-hero__trust span::before { content: '✦'; color: var(--tc-teal-700); }
.tc-hero__card { background: var(--surface); border-radius: var(--tc-radius); box-shadow: var(--tc-shadow-lg); padding: 24px; border: 1px solid var(--tc-ink-100); }
.tc-hero__card h2 { font-size: 1.12rem; margin-block-end: 14px; }
/* ⚠️ Mobile hero height. Stacking puts the text column above the reading tool, and with the
   duplicate CTA row still in place the hero measured 1081px on an 812px screen — the tool's
   own textarea landed well below the fold, so the primary action was invisible on arrival.
   The hero buttons only scroll to the tool that is now directly beneath them, so on stacked
   layouts they are removed rather than shrunk. Do not restore them without re-measuring. */
@media (max-width: 900px) {
  .tc-hero__inner { grid-template-columns: 1fr; gap: 22px; }
  .tc-hero__actions { display: none; }
}
@media (max-width: 640px) {
  .tc-hero__inner { padding-block: 22px 26px; gap: 16px; }
  .tc-hero h1 { line-height: 1.18; }
  .tc-hero__lead { font-size: 1.02rem; margin-block-end: 14px; }
  .tc-hero__eyebrow { margin-block-end: 12px; }
  .tc-hero__trust { font-size: .82rem; gap: 6px 14px; margin-block-end: 2px; }
  .tc-hero__card { padding: 18px; }
}

/* CTA band ------------------------------------------------------------------ */
.tc-cta-band { text-align: center; }
.tc-cta-band h2 { margin-block-end: 13px; }
.tc-cta-band p { max-width: 620px; margin: 0 auto 24px; font-size: 1.06rem; color: var(--tc-ink-700); }
.tc-section--teal .tc-cta-band p { color: rgba(246, 240, 230, .85); }
.tc-cta-band .tc-btn { font-size: 16.5px; padding: 15px 32px; }

/* Article prose ------------------------------------------------------------- */
.tc-prose { max-width: 720px; margin-inline: auto; }
.tc-prose > * + * { margin-block-start: 1.15em; }
.tc-prose h2 {
  margin-block-start: 1.85em; padding-block-end: .3em; border-block-end: 1px solid var(--tc-ink-100);
  scroll-margin-top: calc(var(--tc-header-h, 68px) + 16px);
}
.tc-prose h3 { margin-block-start: 1.5em; color: var(--tc-teal-600); scroll-margin-top: calc(var(--tc-header-h, 68px) + 16px); }
.tc-prose p, .tc-prose li { color: var(--tc-ink-700); }
.tc-prose ul, .tc-prose ol { padding-inline-start: 1.3em; display: grid; gap: .45em; }
.tc-prose li { padding-inline-start: 3px; }
.tc-prose li::marker { color: var(--tc-teal-700); }
.tc-prose a { font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(217, 184, 119, .45); }
.tc-prose a:hover { text-decoration-color: var(--tc-teal-700); }
.tc-prose strong { color: var(--tc-ink-900); font-weight: 600; }
.tc-prose blockquote {
  border-inline-start: 3px solid var(--tc-teal-700); background: var(--tc-teal-50);
  padding: 16px 20px; border-radius: 0 var(--tc-radius-sm) var(--tc-radius-sm) 0; color: var(--tc-ink-700); font-style: normal;
}
.tc-prose blockquote p { margin: 0; }
.tc-prose blockquote p + p { margin-block-start: .8em; }
.tc-prose img { border-radius: var(--tc-radius-sm); margin-block: 1.5em; border: 1px solid var(--tc-ink-100); }
.tc-prose hr { border: 0; border-block-start: 1px solid var(--tc-ink-100); margin-block: 2.2em; }
.tc-prose code {
  background: var(--tc-ink-100); padding: 2px 6px; border-radius: 5px; font-size: .9em;
  font-family: 'SFMono-Regular', Consolas, monospace;
}

/* Responsive tables --------------------------------------------------------- */
.tc-table-wrap { overflow-x: auto; margin-block: 1.5em; border-radius: var(--tc-radius-sm); border: 1px solid var(--tc-ink-100); }
.tc-prose table { width: 100%; border-collapse: collapse; font-size: .94rem; min-width: 460px; }
.tc-prose thead { background: var(--tc-teal-50); color: var(--tc-teal-600); }
.tc-prose th, .tc-prose td { padding: 12px 15px; text-align: start; border-block-end: 1px solid var(--tc-ink-100); }
.tc-prose th { font-weight: 600; letter-spacing: .3px; }
.tc-prose tbody tr:nth-child(even) { background: rgba(255, 255, 255, .018); }
.tc-prose tbody tr:hover { background: rgba(217, 184, 119, .05); }

/* Critical on mobile: a 460px min-width forces horizontal drag inside every table
   on a ~335px column. Drop the floor and tighten padding on narrow screens. */
@media (max-width: 560px) {
  .tc-prose table { min-width: 0; font-size: .85rem; }
  .tc-prose th, .tc-prose td { padding: 9px 10px; }
}

/* Featured answer box ------------------------------------------------------- */
.tc-answer-box {
  background: var(--tc-teal-50); border: 1px solid rgba(217, 184, 119, .3); border-inline-start-width: 4px;
  border-inline-start-color: var(--tc-teal-700);
  border-radius: var(--tc-radius-sm); padding: 18px 22px; margin-block: 1.5em;
}
.tc-answer-box strong { color: var(--tc-teal-600); }

/* Table of contents --------------------------------------------------------- */
.tc-toc { background: var(--tc-ink-50); border: 1px solid var(--tc-ink-100); border-radius: var(--tc-radius); padding: 20px 24px; margin-block: 2em; }
.tc-toc h2 { font-size: 1.02rem; margin: 0 0 12px; border: 0; padding: 0; letter-spacing: .5px; }
.tc-toc ol { margin: 0; padding-inline-start: 1.15em; display: grid; gap: 7px; }
.tc-toc a { color: var(--tc-ink-700); text-decoration: none; font-size: .95rem; }
.tc-toc a:hover { color: var(--tc-teal-700); text-decoration: underline; }

/* Article header ------------------------------------------------------------ */
.tc-article-header { max-width: 760px; margin-inline: auto; text-align: center; padding-block: 36px 6px; }
.tc-article-header__cat { color: var(--tc-teal-700); font-weight: 600; font-size: 12.5px; letter-spacing: 1.4px; text-transform: uppercase; }
.tc-article-header h1 { margin-block: 13px 16px; }
.tc-article-header__meta {
  display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; align-items: center;
  color: var(--tc-ink-500); font-size: .88rem;
}
.tc-article-header__meta time, .tc-article-header__meta span { display: inline-flex; align-items: center; gap: 6px; }

/* Author box ---------------------------------------------------------------- */
.tc-author-box {
  display: flex; gap: 16px; align-items: center; max-width: 720px; margin: 44px auto 0;
  padding: 22px; background: var(--tc-ink-50); border: 1px solid var(--tc-ink-100); border-radius: var(--tc-radius);
}
.tc-author-box__avatar {
  width: 58px; height: 58px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center;
  background: linear-gradient(150deg, var(--tc-teal-800), var(--tc-teal-900)); color: var(--tc-teal-700);
  font-size: 23px; font-weight: 700; font-family: var(--tc-font-heading);
  border: 1px solid rgba(217, 184, 119, .3);
}
.tc-author-box__name { font-weight: 600; color: var(--tc-ink-900); }
.tc-author-box__title { color: var(--tc-ink-500); font-size: .89rem; }

/* Related ------------------------------------------------------------------- */
.tc-related { border-block-start: 1px solid var(--tc-ink-100); margin-block-start: 44px; padding-block-start: 36px; }

/* Forms --------------------------------------------------------------------- */
.tc-form-field { display: grid; gap: 6px; margin-block-end: 16px; }
.tc-form-field label { font-weight: 600; font-size: .93rem; color: var(--tc-ink-900); }
.tc-form-field input, .tc-form-field textarea, .tc-form-field select {
  font-family: inherit; font-size: 16px; padding: 12px 14px; border: 1px solid var(--tc-ink-300);
  border-radius: var(--tc-radius-sm); background: var(--tc-ink-50); color: var(--tc-ink-900); width: 100%;
}
.tc-form-field textarea { line-height: 1.6; resize: vertical; }
.tc-form-field input::placeholder, .tc-form-field textarea::placeholder { color: #7b7390; }
.tc-form-field input:focus, .tc-form-field textarea:focus, .tc-form-field select:focus {
  outline: none; border-color: var(--tc-teal-700); box-shadow: 0 0 0 3px rgba(217, 184, 119, .16);
}
.tc-form-hint { font-size: .84rem; color: var(--tc-ink-500); }

/* Check list ---------------------------------------------------------------- */
.tc-check-list { list-style: none; padding: 0; display: grid; gap: 12px; }
.tc-check-list li { display: flex; gap: 11px; align-items: flex-start; color: var(--tc-ink-700); }
.tc-check-list li::before {
  content: '✓'; flex-shrink: 0; width: 23px; height: 23px; border-radius: 50%; margin-block-start: 2px;
  background: var(--tc-teal-50); color: var(--tc-teal-700); display: grid; place-items: center;
  font-weight: 700; font-size: 12px; border: 1px solid rgba(217, 184, 119, .3);
}
.lock-list { list-style: none; padding: 0; display: grid; gap: 10px; }
.lock-list li { display: flex; gap: 11px; align-items: flex-start; color: var(--tc-ink-500); }
.lock-list li::before { content: '🔒'; flex-shrink: 0; font-size: 14px; margin-block-start: 3px; filter: grayscale(.4); }

/* Pills / tag rows ---------------------------------------------------------- */
.tc-pill-row { display: flex; flex-wrap: wrap; gap: 9px; }
.tc-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 15px; border-radius: 50px;
  border: 1px solid var(--tc-ink-100); background: var(--surface); color: var(--tc-ink-700);
  font-size: .9rem; font-weight: 500; min-block-size: 40px;
}
.tc-pill:hover { border-color: rgba(217, 184, 119, .5); color: var(--tc-teal-700); text-decoration: none; }

/* Value stack --------------------------------------------------------------- */
.tc-value-stack {
  list-style: none; padding: 0; display: grid; gap: 0;
  border: 1px solid var(--tc-ink-100); border-radius: var(--tc-radius); overflow: hidden;
}
.tc-value-stack li {
  display: flex; gap: 12px; align-items: flex-start; padding: 13px 18px;
  border-block-end: 1px solid var(--tc-ink-100); color: var(--tc-ink-700); font-size: .96rem;
}
.tc-value-stack li:last-child { border-block-end: 0; }
.tc-value-stack li::before { content: '✓'; color: var(--tc-teal-700); font-weight: 700; flex-shrink: 0; }

/* Price block --------------------------------------------------------------- */
.tc-price-block { text-align: center; padding: 26px 20px; }
.tc-price-block__amount { font-family: var(--tc-font-heading); font-size: clamp(2.6rem, 7vw, 3.6rem); font-weight: 700; color: var(--tc-teal-700); line-height: 1; }
.tc-price-block__note { color: var(--tc-ink-500); font-size: .93rem; margin-block-start: 8px; }

/* Reduced motion ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .deck__card, .tcard__flip { transition: none !important; }
}

/* Print (used for the printable reading report) ------------------------------ */
@media print {
  .tc-site-header, .tc-site-footer, .tc-breadcrumbs, .no-print, .float-cta { display: none !important; }
  body { background: #fff !important; color: #111 !important; font-size: 11.5pt; }
  h1, h2, h3, .tc-prose strong { color: #111 !important; }
  .tc-prose p, .tc-prose li, .tc-card p { color: #222 !important; }
  .tc-card, .tc-answer-box, .tc-value-stack, .tc-faq__item { border-color: #ccc !important; background: #fff !important; box-shadow: none !important; }
  a { color: #111 !important; text-decoration: none !important; }
  .report-section { break-inside: avoid-page; }
  .report-page-break { break-before: page; }
}