/* Tattva components. Colours, spacing, radii and fonts come from tokens.css. Prefix: tv- */

/* Button */
.tv-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:48px;padding:0 26px;border:2px solid transparent;border-radius:var(--radius-pill);font-family:var(--font-display);font-weight:700;font-size:17px;line-height:1;letter-spacing:-.01em;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .15s ease,color .15s ease,border-color .15s ease,transform .15s ease}
.tv-btn svg{width:var(--icon-sm);height:var(--icon-sm);fill:currentColor;flex:none}
.tv-btn:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.tv-btn--primary{background:var(--surface-inverse);color:var(--ink-inverse)}
.tv-btn--primary:hover{background:var(--accent-ink);color:var(--surface)}
.tv-btn--pop{background:var(--sun);color:var(--on-sun)}
.tv-btn--pop:hover{transform:translateY(-2px)}
.tv-btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.tv-btn--ghost:hover{border-color:var(--ink)}
.tv-btn--sm{min-height:44px;padding:0 18px;font-size:15px}

/* Chip */
.tv-chip{display:inline-flex;align-items:center;gap:var(--space-2);padding:10px 16px;border:1.5px solid var(--line);border-radius:var(--radius-pill);background:var(--surface-card);color:var(--ink);font-family:var(--font-display);font-weight:700;font-size:15px;line-height:1;white-space:nowrap}
.tv-chip svg{width:18px;height:18px;fill:var(--accent);flex:none}
.tv-chip--pop{background:var(--sun);color:var(--on-sun);border-color:transparent}
.tv-chip--pop svg{fill:var(--on-sun)}
.tv-chip--ghost{background:transparent}

/* Tag (mono label) */
.tv-tag{display:inline-block;padding:6px 12px;border:1.5px solid var(--line);border-radius:var(--radius-pill);font-family:var(--font-mono);font-weight:500;font-size:12px;line-height:1.2;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted)}
.tv-eyebrow{font-family:var(--font-mono);font-weight:500;font-size:13px;line-height:1.3;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink)}

/* Sticker (burst) */
.tv-sticker{--size:var(--sticker);--tilt:-10deg;display:inline-grid;place-items:center;box-sizing:border-box;width:var(--size);height:var(--size);padding:calc(var(--size) * .14);background:var(--sun);color:var(--on-sun);clip-path:polygon(50.0% 0.0%, 57.6% 7.2%, 67.1% 3.0%, 71.8% 12.3%, 82.1% 11.7%, 83.3% 22.0%, 93.3% 25.0%, 90.9% 35.1%, 99.2% 41.3%, 93.5% 50.0%, 99.2% 58.7%, 90.9% 64.9%, 93.3% 75.0%, 83.3% 78.0%, 82.1% 88.3%, 71.8% 87.7%, 67.1% 97.0%, 57.6% 92.8%, 50.0% 100.0%, 42.4% 92.8%, 32.9% 97.0%, 28.2% 87.7%, 17.9% 88.3%, 16.7% 78.0%, 6.7% 75.0%, 9.1% 64.9%, 0.8% 58.7%, 6.5% 50.0%, 0.8% 41.3%, 9.1% 35.1%, 6.7% 25.0%, 16.7% 22.0%, 17.9% 11.7%, 28.3% 12.3%, 32.9% 3.0%, 42.4% 7.2%);transform:rotate(var(--tilt));font-family:var(--font-display);font-weight:800;font-size:calc(var(--size) * .18);line-height:.92;letter-spacing:-.02em;text-align:center}

/* Highlight */
.tv-hl{color:var(--highlight-ink);background:linear-gradient(180deg,transparent 54%,var(--highlight-fill) 54%,var(--highlight-fill) 90%,transparent 90%);-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .06em;margin:0 -.06em}
.tv-sun-text{color:var(--sun)}

/* Price card */
.tv-price{position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--space-4);padding:var(--space-5) var(--space-6);border:1.5px solid var(--line);border-radius:var(--radius-lg);background:var(--surface-card);color:var(--ink);font-variant-numeric:tabular-nums}
.tv-price__name{margin:0;font-family:var(--font-display);font-weight:700;font-size:26px;line-height:1.15;letter-spacing:-.02em}
.tv-price__sub{margin:4px 0 0;font-family:var(--font-body);font-size:15px;line-height:1.5;color:var(--ink-muted)}
.tv-price__amounts{text-align:right}
.tv-price__was{display:block;font-family:var(--font-body);font-size:15px;color:var(--ink-muted)}
.tv-price__now{display:block;font-family:var(--font-display);font-weight:800;font-size:44px;line-height:1;letter-spacing:-.03em;color:var(--accent)}
.tv-price__tag{position:absolute;top:-12px;right:24px;padding:4px 10px;border-radius:var(--radius-sm);background:var(--sun);color:var(--on-sun);font-family:var(--font-display);font-weight:800;font-size:14px;line-height:1.2;transform:rotate(4deg)}

/* Info row */
.tv-info{display:grid;grid-template-columns:var(--icon-md) 1fr;gap:var(--space-4);align-items:start;padding:var(--space-4) 0;border-top:1.5px solid var(--line)}
.tv-info svg{width:var(--icon-md);height:var(--icon-md);fill:var(--accent)}
.tv-info__title{margin:0;font-family:var(--font-body);font-weight:700;font-size:17px;line-height:1.6;color:var(--ink)}
.tv-info__sub{margin:0;font-family:var(--font-body);font-size:15px;line-height:1.5;color:var(--ink-muted)}

/* Step */
.tv-step{display:grid;grid-template-columns:64px 1fr;gap:var(--space-4);align-items:center}
.tv-step__num{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--sun);color:var(--on-sun);font-family:var(--font-display);font-weight:800;font-size:26px;letter-spacing:-.03em}
.tv-step__title{margin:0;font-family:var(--font-display);font-weight:800;font-size:26px;line-height:1.15;letter-spacing:-.02em;color:var(--ink)}
.tv-step__text{margin:4px 0 0;font-family:var(--font-body);font-size:15px;line-height:1.5;color:var(--ink-muted)}

/* Chat bubbles */
.tv-chat{display:flex;flex-direction:column;gap:var(--space-3)}
.tv-bubble{max-width:78%;padding:12px 18px;border-radius:var(--radius-md);font-family:var(--font-body);font-size:17px;line-height:1.45}
.tv-bubble--out{align-self:flex-end;background:var(--surface-inverse);color:var(--ink-inverse);border-bottom-right-radius:4px}
.tv-bubble--in{align-self:flex-start;background:var(--surface-muted);color:var(--ink);border-bottom-left-radius:4px}

/* Question and answer */
.tv-qa{display:flex;flex-direction:column;gap:var(--space-4)}
.tv-qa__q{display:flex;align-items:baseline;gap:var(--space-3);margin:0;font-family:var(--font-display);font-weight:800;font-size:36px;line-height:1.05;letter-spacing:-.025em;color:var(--ink)}
.tv-qa__q::before{content:"Q.";color:var(--accent);flex:none}
.tv-qa__a{display:grid;grid-template-columns:44px 1fr;gap:var(--space-4);align-items:start;padding:var(--space-5);border:1.5px solid var(--line);border-radius:var(--radius-lg);background:var(--surface-card);color:var(--ink);font-family:var(--font-body);font-size:17px;line-height:1.6}
.tv-qa__a::before{content:"A.";display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--sun);color:var(--on-sun);font-family:var(--font-display);font-weight:800;font-size:20px}

/* Photo frames */
.tv-photo{display:block;width:100%;max-width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius-xl)}
.tv-photo--arch{--arch-v:40%;border-radius:50% 50% var(--radius-xl) var(--radius-xl) / var(--arch-v) var(--arch-v) var(--radius-xl) var(--radius-xl)}
.tv-photo--round{aspect-ratio:1;border-radius:50%}

/* Supported by */
.tv-supported{display:inline-flex;align-items:center;gap:var(--space-3)}
.tv-supported__label{font-family:var(--font-mono);font-weight:500;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted)}
.tv-supported__logo{display:flex;padding:6px 10px;border-radius:var(--radius-sm);background:var(--white)}
.tv-supported__logo img{height:var(--partner-logo);width:auto;display:block}

@media (prefers-reduced-motion:reduce){.tv-btn{transition:none}.tv-btn--pop:hover{transform:none}}