/* Tailwise brand layer — loads AFTER base.css (the Serenity skill) and changes its personality:
   Fraunces + Figtree, tangerine/sun/navy, crisp ink outlines with offset "pop" shadows, marker swashes,
   paw decorations, a services ticker, a sun CTA band with a cut-out pet, and a navy footer. */

/* ───────── Type ───────── */
body { font-weight: 500; }
.display, .h1, .h2, .h2s, .h3, .h3s, .h4 { font-weight: 560; font-variation-settings: "SOFT" 100, "WONK" 0; }
.display em, .h1 em, .h2 em, .h2s em, .h3 em, .h3s em { font-style: italic; font-weight: 500; color: var(--peach); font-variation-settings: "SOFT" 100, "WONK" 1; }
.mark { position: relative; z-index: 0; white-space: nowrap; }
.mark::before { content: ""; position: absolute; z-index: -1; left: -.08em; right: -.1em; bottom: .06em; height: .42em; background: var(--butter); border-radius: .3em .5em .35em .55em; transform: rotate(-1.2deg); }
.lead { color: var(--cocoa); font-weight: 500; }
::selection { background: var(--butter); color: var(--ink); }

/* ───────── Pills ───────── */
.eyebrow { background: var(--white); color: var(--ink); border: 1.5px solid var(--ink); padding: 3px 12px 3px 8px; gap: 6px; font-weight: 700; font-size: 13px; letter-spacing: .02em; }
.eyebrow::before { content: ""; width: 14px; height: 14px; background: url("assets/brand/mark.svg") center / contain no-repeat; }
.badge { background: var(--ink); color: var(--white); }
.chip { border: 1.5px solid var(--ink); color: var(--ink); box-shadow: var(--pop-sm); background: var(--white); }
.chip--dark { background: var(--butter); color: var(--ink); }

/* ───────── Buttons: tangerine pop ───────── */
.btn { border: 2px solid var(--ink); box-shadow: var(--pop-sm); padding: 11px 24px; font-weight: 800; transition: transform .18s var(--ease), box-shadow .18s var(--ease), background-color .2s; }
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }
.btn--sage { background: var(--peach); color: var(--white); }
.btn--sage:hover { background: var(--tang-dark); box-shadow: 6px 6px 0 var(--ink); }
.btn--white { background: var(--white); color: var(--ink); }
.btn--outline { background: var(--white); box-shadow: var(--pop-sm); }
.btn--ink { background: var(--ink); color: var(--white); border-color: var(--ink); box-shadow: 4px 4px 0 var(--peach); }
.play-link .play { background: var(--butter); border: 2px solid var(--ink); }
.play-link .play::after { border-left-color: var(--ink); }

/* ───────── Decor ───────── */
.dots { width: 44px; height: 44px; gap: 0; display: block; background: url("assets/brand/paw-white.svg") center / contain no-repeat; }
.dots i { display: none; }
.dots--peach { background-image: url("assets/brand/mark.svg"); }
.dots--sun { background-image: url("assets/brand/paw-sun.svg"); }
.frame { border: var(--outline); box-shadow: var(--pop); }
.paw-bg { background-image: url("assets/brand/paw-ink.svg"); background-size: 64px; opacity: .05; }

/* ───────── Nav ───────── */
.nav .logo img { width: 152px; height: 34px; }
.nav-links { font-weight: 600; }
.nav-links a[aria-current="page"] { color: var(--ink); }
.nav-links a[aria-current="page"]::after { width: 100%; height: 6px; bottom: -4px; border-radius: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 6'%3E%3Cpath d='M1 4c4-3 6-3 10 0s6 3 10 0 6-3 10 0 6 3 8 0' fill='none' stroke='%23FF5A36' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 40px 6px repeat-x; }
.nav-toggle { background: var(--butter); border: 2px solid var(--ink); }

/* ───────── Inner-page hero: sun panel with outline + paw texture ───────── */
.page-hero { background: var(--butter); border: var(--outline); box-shadow: var(--pop); position: relative; overflow: hidden; isolation: isolate; }
.page-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("assets/brand/paw-white.svg") 0 0 / 70px; opacity: .35; transform: rotate(-8deg) scale(1.3); }
.page-hero p { color: var(--ink); }
.page-hero .eyebrow { background: var(--white); }

/* ───────── Ticker band ───────── */
.ticker { margin-top: 72px; background: var(--ink); color: var(--white); border-block: 2px solid var(--ink); overflow: hidden; transform: rotate(-1.4deg); margin-inline: -20px; }
.ticker__row { display: flex; width: max-content; animation: tw-ticker 38s linear infinite; }
.ticker:hover .ticker__row { animation-play-state: paused; }
.ticker__row span { display: inline-flex; align-items: center; gap: 22px; padding: 18px 22px; font-family: var(--font-display); font-size: 30px; font-weight: 500; letter-spacing: -.5px; white-space: nowrap; font-variation-settings: "SOFT" 100; }
.ticker__row span::after { content: ""; width: 26px; height: 26px; background: url("assets/brand/paw-sun.svg") center / contain no-repeat; }
.ticker__row span:nth-child(even) { font-style: italic; color: var(--butter); }
.ticker--sun { background: var(--butter); color: var(--ink); transform: rotate(1.2deg); }
.ticker--sun .ticker__row span::after { background-image: url("assets/brand/mark.svg"); }
.ticker--sun .ticker__row span:nth-child(even) { color: var(--peach); }
@keyframes tw-ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker__row { animation: none; } }
@media (max-width: 640px) { .ticker__row span { font-size: 22px; padding: 14px 16px; } }

/* ───────── Cards: outline + pop on hover ───────── */
.why-card, .pricing-card, .post-card, .testi-card, .ab-member, .bk-why__item, .bk-card {
  border: var(--outline) !important; border-radius: var(--r-lg);
}
.why-card, .pricing-card, .post-card, .bk-why__item { transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.why-card:hover, .pricing-card:hover, .post-card:hover, .bk-why__item:hover { transform: translate(-3px, -3px); box-shadow: var(--pop); }

/* ───────── FAQ ───────── */
.faq-item { border-bottom: 2px solid var(--ink); }
.faq-item.open { background: var(--white); border: var(--outline); box-shadow: var(--pop); }

/* ───────── CTA: sun band + cut-out pet ───────── */
.cta { background: var(--butter); border: var(--outline); box-shadow: var(--pop); overflow: hidden; }
.cta::before { background: url("assets/brand/paw-white.svg") 0 0 / 74px; opacity: .22; transform: rotate(-10deg) scale(1.4); animation: none !important; }
.cta { place-items: center start; padding: 80px 72px; min-height: 480px; }
.cta .in { width: min(640px, 100%); align-items: flex-start; text-align: left; }
.cta .in > div { align-items: flex-start; gap: 32px; }
.cta .dots--tr { right: auto; left: 72px; top: auto; bottom: 48px; display: none; }
.cta .h2 { color: var(--ink); }
.cta .in > img { width: 172px; height: 38px; }
.cta .btn--white { background: var(--peach); color: var(--white); }
.cta-pet { position: absolute; z-index: 0; right: 4%; bottom: -8px; width: min(36%, 440px); height: auto; pointer-events: none; }
.cta-pet--left { right: auto; left: -10px; width: min(26%, 320px); }
.cta .in { position: relative; z-index: 1; }
@media (max-width: 960px) { .cta { padding: 64px 32px 300px; place-items: start; } .cta-pet { width: 260px; right: 50%; translate: 50% 0; } .cta-pet--left { display: none; } }
@media (max-width: 640px) { .cta { padding: 56px 20px 260px; } .cta-pet { width: 220px; } }

/* ───────── Footer: navy ───────── */
.site-foot { background: var(--ink); color: var(--white); }
.foot-brand .logo img { width: 263px; height: 58px; }
.foot-brand p, .foot-col ul, .foot-col dd, .foot-bottom { color: rgba(255, 251, 243, .72); }
.foot-col h4, .foot-col dt { color: var(--white); }
.foot-col ul a:hover, .foot-col dd a:hover { color: var(--butter); }
.socials a { filter: invert(1) brightness(2); }
.foot-bottom { border-top-color: rgba(255, 255, 255, .14); }
.foot-big { margin-top: 64px; font-family: var(--font-display); font-weight: 560; font-size: clamp(64px, 14vw, 210px); line-height: .85; letter-spacing: -.05em; color: var(--butter); font-variation-settings: "SOFT" 100; white-space: nowrap; overflow: hidden; }
.foot-big em { font-style: italic; color: var(--peach); }

/* motion layer accent colours */
.m-progress { background: linear-gradient(90deg, var(--peach), var(--butter)); height: 3px; }
.m-spot { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 201, 51, .28), rgba(255, 90, 54, .08) 45%, transparent 70%); }
.m-glow { background: radial-gradient(circle, rgba(255, 201, 51, .45), rgba(255, 90, 54, .12) 45%, transparent 70%); }

/* Rotated full-bleed bands (ticker) must never cause sideways scroll */
main { overflow-x: clip; }