/* ==========================================================================
   components.css: header, footer, hero, features, pricing, carousel,
   legal TOC, FAQ, support, badges. Consumes semantic tokens only.
   ========================================================================== */

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky; inset-block-start: 0; z-index: 100;
  background: var(--glass); backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-block-end: 1px solid var(--hairline);
}
.nav { display: flex; align-items: center; gap: var(--space-4); min-height: 64px; }
.nav__brand { display: inline-flex; align-items: center; gap: 9px; margin-inline-end: auto; color: var(--text); }
.nav__brand .logo { height: 30px; width: 30px; flex: 0 0 auto; }
.nav__brand-name { font-family: var(--font-display); font-weight: 800; font-size: var(--step-1); letter-spacing: -.01em; color: var(--text); white-space: nowrap; }
.nav__brand-suffix { font-weight: 650; }
@media (max-width: 480px) { .nav__brand-suffix { display: none; } } /* phones: show just "Trishify" */
@media (max-width: 360px) { .nav__brand-name { display: none; } }   /* tiny: logo only */
.nav__links { display: flex; align-items: center; gap: var(--space-2); }
.nav__links a {
  color: var(--text-2); font-weight: 550; font-size: var(--step-0);
  padding: 8px 12px; border-radius: var(--radius-pill);
}
.nav__links a:hover { color: var(--text); background: var(--bg-inset); }
.nav__links a[aria-current="page"] { color: var(--text); background: var(--bg-inset); }
.nav__tools { display: flex; align-items: center; gap: var(--space-2); }

.icon-btn {
  display: inline-grid; place-items: center; width: 40px; height: 40px;
  border-radius: var(--radius-pill); border: 1px solid var(--border);
  background: var(--bg-elev); color: var(--text-2); cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.icon-btn:hover { color: var(--text); border-color: var(--border-strong); }
.icon-btn svg { width: 18px; height: 18px; }
.theme-toggle .moon { display: none; }
[data-theme="dark"] .theme-toggle .sun { display: none; }
[data-theme="dark"] .theme-toggle .moon { display: block; }

.select {
  font: inherit; font-size: var(--step--1); color: var(--text-2);
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius-pill); padding: 9px 30px 9px 12px; cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%2394A3B8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}
.select:hover { border-color: var(--border-strong); color: var(--text); }

.nav__toggle { display: none; }
@media (max-width: 860px) {
  .nav__toggle { display: inline-grid; }
  .nav__menu {
    position: fixed; inset: 64px 0 auto 0; background: var(--bg-elev);
    border-block-end: 1px solid var(--border); box-shadow: var(--shadow);
    display: none; flex-direction: column; gap: var(--space-2); padding: var(--space-4) var(--space-5);
  }
  .nav__menu.open { display: flex; }
  .nav__links { flex-direction: column; align-items: stretch; gap: 4px; }
  .nav__links a { padding: 12px 14px; }
  .nav__menu .nav__tools { justify-content: flex-start; flex-wrap: wrap; padding-block-start: var(--space-2); border-block-start: 1px solid var(--border); }
}
@media (min-width: 861px) { .nav__menu { display: contents; } }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: clip; padding-block: clamp(var(--space-16), 9vw, var(--space-24)); }
.hero__bg {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 50% at 15% 0%, color-mix(in srgb, var(--grad-sky) 22%, transparent), transparent 60%),
    radial-gradient(55% 50% at 95% 10%, color-mix(in srgb, var(--grad-indigo) 22%, transparent), transparent 60%);
}
.hero h1 { max-width: 16ch; }
.hero .lead { max-width: 56ch; margin-block-start: var(--space-5); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block-start: var(--space-8); }
.hero__split { display: grid; gap: var(--space-12); align-items: center; }
@media (min-width: 940px) { .hero__split { grid-template-columns: 1.05fr .95fr; } }

/* ---------- Brand mark / gradient text ---------- */
.grad-text {
  background: linear-gradient(120deg, var(--grad-sky), var(--grad-blue) 55%, var(--grad-indigo));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- App showcase (device frame) ---------- */
/* These are full App Store marketing screenshots — they already include their own
   phone, status bar, and headline spacing. So we present them as clean rounded
   cards: no extra padding and no fake Dynamic Island (which used to crowd the
   headline text at the top of shots like "Reminded" and "Every Bill on one Calendar"). */
.device {
  position: relative; margin-inline: auto; max-width: 320px; width: 100%;
  border-radius: 28px; padding: 0; overflow: hidden; background: var(--bg-elev);
  border: 1px solid var(--border); box-shadow: var(--shadow-lg);
}
.device img { border-radius: inherit; width: 100%; display: block; }

/* ---------- App icon tile ---------- */
.appicon { width: 76px; height: 76px; border-radius: var(--radius-tile); box-shadow: var(--shadow); background: var(--bg-inset); }
.appicon--lg { width: 104px; height: 104px; }

/* ---------- Feature grid ---------- */
.feature { padding: var(--space-6); }
.feature__ic {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: var(--radius);
  margin-block-end: var(--space-4); color: #fff;
}
.feature h3 { font-size: var(--step-1); }
.feature p { margin-block-start: 6px; font-size: var(--step-0); }
.ic-blue   { background: linear-gradient(135deg, var(--grad-sky), var(--grad-blue)); }
.ic-indigo { background: linear-gradient(135deg, var(--grad-blue), var(--grad-indigo)); }
.ic-green  { background: linear-gradient(135deg, #34D399, #10B981); }
.ic-amber  { background: linear-gradient(135deg, #FBBF24, #F59E0B); }
.ic-red    { background: linear-gradient(135deg, #FB7185, #EF4444); }
.ic-purple { background: linear-gradient(135deg, #A78BFA, #7C3AED); }
.feature__ic svg { width: 24px; height: 24px; }

/* ---------- Value / trust row ---------- */
.trust { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.trust .pill { background: var(--bg-elev); }

/* ---------- Pricing ---------- */
.price-grid { display: grid; gap: var(--space-5); }
@media (min-width: 720px)  { .price-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .price-grid { grid-template-columns: repeat(4, 1fr); } }
.plan { position: relative; display: flex; flex-direction: column; gap: var(--space-3); }
.plan--featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow); }
.plan__badge {
  position: absolute; inset-block-start: -11px; inset-inline-start: var(--space-6);
  background: var(--accent); color: var(--on-accent); font-size: var(--step--1);
  font-weight: 700; padding: 4px 12px; border-radius: var(--radius-pill);
}
.plan__name { font-weight: 700; color: var(--text); }
.plan__price { font-family: var(--font-display); font-size: var(--step-3); font-weight: 800; letter-spacing: -.02em; }
.plan__period { color: var(--text-3); font-size: var(--step--1); font-weight: 600; }
.plan__trial { color: var(--c-green); font-weight: 650; font-size: var(--step--1); }
.plan ul { list-style: none; padding: 0; margin-block-start: var(--space-2); }
.plan li { display: flex; gap: 8px; align-items: flex-start; }
.plan li::before { content: ""; flex: 0 0 18px; height: 18px; margin-top: 3px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='9' fill='%2322C55E'/%3E%3Cpath d='M5 9.2l2.6 2.6L13 6.4' fill='none' stroke='white' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.price-note { color: var(--text-3); font-size: var(--step--1); margin-block-start: var(--space-4); }

/* ---------- App Store badge ---------- */
.appstore-badge { display: inline-flex; height: 52px; }
.appstore-badge img, .appstore-badge svg { height: 52px; width: auto; }

/* ---------- Carousel ---------- */
.carousel { position: relative; }
.carousel__track {
  display: flex; gap: var(--space-5); overflow-x: auto; scroll-snap-type: x mandatory;
  padding-block: var(--space-2); padding-inline: 2px; scrollbar-width: thin;
}
.carousel__track > * { scroll-snap-align: center; flex: 0 0 auto; }
.carousel__controls { display: flex; gap: var(--space-2); justify-content: center; margin-block-start: var(--space-4); }

/* ---------- FAQ ---------- */
.faq details {
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elev);
  padding: var(--space-2) var(--space-5); margin-block-end: var(--space-3);
}
.faq summary {
  cursor: pointer; font-weight: 650; color: var(--text); list-style: none;
  padding-block: var(--space-3); display: flex; justify-content: space-between; gap: var(--space-4);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--text-3); font-weight: 400; font-size: 1.4em; line-height: 1; }
.faq details[open] summary::after { content: "\2013"; }
.faq details p { padding-block-end: var(--space-4); }

/* ---------- Legal page ---------- */
.legal { display: grid; gap: var(--space-12); align-items: start; }
.toc { align-self: start; }
/* TOC only goes sticky once it has its own column (≥940px); below that it stacks above the body. */
@media (min-width: 940px) { .legal { grid-template-columns: 240px 1fr; } .toc { position: sticky; inset-block-start: 84px; } }
.toc nav { display: flex; flex-direction: column; gap: 2px; }
.toc a { color: var(--text-2); font-size: var(--step--1); padding: 6px 10px; border-radius: var(--radius-sm); border-inline-start: 2px solid transparent; }
.toc a:hover { color: var(--text); background: var(--bg-inset); }
.toc a.is-active { color: var(--accent); border-inline-start-color: var(--accent); background: var(--bg-inset); }
.toc strong { display: block; padding: 10px 10px 4px; font-size: var(--step--1); text-transform: uppercase; letter-spacing: .1em; color: var(--text-3); }
.legal-body h2 { font-size: var(--step-2); margin-block-start: var(--space-12); padding-block-start: var(--space-4); border-block-start: 1px solid var(--border); scroll-margin-top: 84px; }
.legal-body h2:first-child { border: 0; margin-block-start: 0; }
.legal-body h3 { font-size: var(--step-1); margin-block-start: var(--space-8); scroll-margin-top: 84px; }
.legal-body p, .legal-body li { font-size: var(--step-0); }
.legal-body p { margin-block-start: var(--space-3); }
.legal-meta { color: var(--text-3); font-size: var(--step--1); }
.callout {
  border: 1px solid var(--border); border-inline-start: 3px solid var(--accent);
  background: var(--bg-inset); border-radius: var(--radius); padding: var(--space-4) var(--space-5);
}

/* ---------- Support form ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-weight: 600; font-size: var(--step--1); color: var(--text); }
.field select, .field input, .field textarea {
  font: inherit; color: var(--text); background: var(--bg-inset);
  border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; width: 100%;
}
.field textarea { min-height: 120px; resize: vertical; }
.copy-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.email-chip { font-family: var(--mono); background: var(--bg-inset); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 8px 14px; color: var(--text); }

/* ---------- Footer ---------- */
.site-footer { border-block-start: 1px solid var(--border); background: var(--bg-2); padding-block: var(--space-16) var(--space-10); margin-block-start: var(--space-12); }
.footer__grid { display: grid; gap: var(--space-10); }
@media (min-width: 720px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer__brand .lead { font-size: var(--step-0); max-width: 38ch; }
.footer__col h4 { font-size: var(--step--1); text-transform: uppercase; letter-spacing: .1em; color: var(--text-3); margin-block-end: var(--space-3); }
.footer__col a { display: block; color: var(--text-2); padding-block: 6px; }
.footer__col a:hover { color: var(--text); }
.social { display: flex; gap: var(--space-2); margin-block-start: var(--space-5); }
.social a {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: var(--bg-elev); color: var(--text-2);
}
.social a:hover { color: var(--text); border-color: var(--border-strong); transform: translateY(-2px); transition: var(--dur) var(--ease); }
.social svg { width: 18px; height: 18px; }
.footer__bottom { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: space-between; align-items: center; margin-block-start: var(--space-12); padding-block-start: var(--space-6); border-block-start: 1px solid var(--border); color: var(--text-3); font-size: var(--step--1); }

/* ---------- Misc ---------- */
.divider-soft { height: 1px; background: linear-gradient(90deg, transparent, var(--border), transparent); }

/* Scan-to-download QR (DueMinder CTA). The card stays white in both themes so the code always scans. */
.qr-download { display: inline-flex; align-items: center; gap: var(--space-4); text-align: start;
  margin-block-start: var(--space-8); padding: var(--space-3) var(--space-5) var(--space-3) var(--space-3);
  background: #fff; border: 1px solid rgba(13,19,33,.10); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.qr-download__img { width: 128px; height: 128px; display: block; border-radius: var(--radius-sm); flex: 0 0 auto; }
.qr-download__label { max-width: 26ch; }
.qr-download__title { font-family: var(--font-display); font-weight: 700; color: #0D1321; font-size: var(--step-0); line-height: 1.25; margin: 0; }
.qr-download__sub { font-family: var(--font); font-weight: 400; color: #5A6A7E; font-size: var(--step--1); line-height: 1.35; margin: 6px 0 0; }
@media (max-width: 560px) { .qr-download { display: none; } } /* phones: just tap the badge */

/* Reveal-on-scroll: JS adds .reveal to below-the-fold blocks, then .is-in when they enter view. */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s cubic-bezier(.4,0,.2,1), transform .6s cubic-bezier(.4,0,.2,1); }
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- "Coming soon" badge ---------- */
.badge-soon {
  display: inline-flex; align-items: center; gap: 7px; font-size: var(--step--1); font-weight: 700;
  letter-spacing: .02em; color: var(--c-amber);
  background: color-mix(in srgb, var(--c-amber) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--c-amber) 40%, transparent);
  padding: 5px 12px; border-radius: var(--radius-pill);
}
.badge-soon::before {
  content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--c-amber);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-amber) 70%, transparent);
  animation: soon-pulse 2s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes soon-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-amber) 60%, transparent); }
  70%  { box-shadow: 0 0 0 7px color-mix(in srgb, var(--c-amber) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-amber) 0%, transparent); }
}
.cta-soon { color: var(--text-3); font-size: var(--step--1); margin-block-start: var(--space-3); }

/* ---------- Carousel: dots + auto-focus (JS opt-in via .carousel--enhanced) ---------- */
.carousel__dots { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-block-start: var(--space-5); }
.carousel__dot {
  width: 8px; height: 8px; padding: 0; border: 0; cursor: pointer; border-radius: 999px;
  background: var(--border-strong);
  transition: background var(--dur) var(--ease), width var(--dur) var(--ease);
}
.carousel__dot:hover { background: color-mix(in srgb, var(--accent) 55%, var(--border-strong)); }
.carousel__dot[aria-current="true"] { background: var(--accent); width: 22px; }
.carousel--enhanced .carousel__track > .device {
  opacity: .5; transform: scale(.93);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.carousel--enhanced .carousel__track > .device.is-active { opacity: 1; transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .badge-soon::before { animation: none; }
  .carousel--enhanced .carousel__track > .device { opacity: 1; transform: none; }
}