/* ============================================================
   Eminent Tax · tickets.css
   Price tickets and tiers: the one-off ticket cards (homepage),
   the three price tiers on /pricing/ and every service page, the
   tier tabs and the swipe rows on phones. Load after site.css.
   Behavior (notches, entrance, swipe bar) lives in plans.js.
   ============================================================ */

/* ---------- Ticket card. The notches line up with the tear line
   (plans.js sets --cut); without JS it's a plain card. ---------- */
.tix{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.tix.tiers{grid-template-columns:repeat(3,minmax(0,1fr))}
.tk{position:relative;display:flex;flex-direction:column;border-radius:var(--r-lg);background:#fff;border:1px solid var(--line);text-align:left}
.js .tk{-webkit-mask:radial-gradient(circle at 0 var(--cut,190px),#0000 10.5px,#000 11px) 0 0/51% 100% no-repeat,radial-gradient(circle at 100% var(--cut,190px),#0000 10.5px,#000 11px) 100% 0/51% 100% no-repeat;mask:radial-gradient(circle at 0 var(--cut,190px),#0000 10.5px,#000 11px) 0 0/51% 100% no-repeat,radial-gradient(circle at 100% var(--cut,190px),#0000 10.5px,#000 11px) 100% 0/51% 100% no-repeat}
.tk-top{padding:22px 22px 20px;border-radius:var(--r-lg) var(--r-lg) 0 0;background:linear-gradient(180deg,#FFF3EE,#fff 85%)}
.tk-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px}
.tk-step{display:inline-block;font-size:0.75rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:#fff;border:1px solid var(--coral-100);color:var(--coral-deep);white-space:nowrap}
.tk h3{font-size:1.1875rem;line-height:1.2}
.tk-for{font-size:0.875rem;color:var(--muted);margin-top:4px}
.tk-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 6px;margin-top:14px;font-size:0.8438rem;line-height:1.25;color:var(--muted)}
.tk-price b{font-family:var(--display);font-size:2.5rem;font-weight:700;color:var(--ink);letter-spacing:-.04em;line-height:1}
.tk-cut{height:0;margin:0 20px;border-top:2px dashed var(--line-2);transform-origin:left center}
.tk-list{flex:1;display:grid;align-content:start;gap:9px;padding:18px 22px 4px;font-size:0.875rem;line-height:1.45;color:var(--body)}
.tk-list li{position:relative;padding-left:26px}
.tk-list li::before{content:"";position:absolute;left:0;top:1px;width:17px;height:17px;border-radius:50%;background:var(--coral-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.3l2.6 2.6L13 6.5' fill='none' stroke='%23C2341C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/17px no-repeat}
.tk-stub{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;padding:16px 22px 20px}

.tk-more span[aria-hidden]{transition:transform .25s var(--ease)}
@media (hover:hover){.tk-more:hover{color:var(--coral-deep)}.tk-more:hover span[aria-hidden]{transform:translateX(3px)}}

.tix-note{margin-top:18px;font-size:0.9063rem;color:var(--muted);text-align:center}
.tix-note a{color:var(--coral-deep);text-decoration:underline;text-underline-offset:3px}

/* ---------- Tiers: the middle tier is the dark one, so the three don't look alike ---------- */
.tiers .tk-stub .btn{width:100%}
.tk.pick{background:var(--ink);border-color:var(--ink);color:#C9C2BB}
.tk.pick .tk-top{background:linear-gradient(180deg,#2A231D,var(--ink) 85%)}
.tk.pick h3,.tk.pick .tk-price b{color:#fff}
.tk.pick .tk-for,.tk.pick .tk-price{color:#A39A92}
.tk.pick .tk-step{background:rgba(249,76,48,.16);border-color:transparent;color:var(--peach)}
.tk.pick .tk-cut{border-color:#4A4038}
.tk.pick .tk-list{color:#E7E1DA}
.tk.pick .tk-list li::before{background-color:rgba(249,76,48,.2)}
.tk.pick .btn-ink{background:var(--coral);border-color:var(--coral);color:#1A0E0A}

.tier-more{margin-top:14px;text-align:center}
.tier-more a{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-weight:600;color:var(--coral-deep)}
.tier-foot{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 30px;margin-top:24px;padding:24px 26px;border-radius:var(--r-lg);background:var(--soft);border:1px solid var(--line)}
.tier-foot h3{font-size:1.0625rem;margin-bottom:12px}
.tier-foot .ticks,.tier-foot .dashes{font-size:0.9375rem;gap:9px}
.tier-foot>div:only-child,.tier-foot>.tkw-in{grid-column:1/-1}
.tier-note{margin-top:14px;text-align:center}
/* service tabs on /pricing/: every service visible as a pill, never cut off */

.tp>.tix.tiers:first-child{margin-top:0}

/* ---------- Entrance: tickets are dealt in from the side, then the tear line draws ---------- */
@media (prefers-reduced-motion:no-preference){
  .js .tix.pa>.tk{transition:opacity .45s var(--ease),transform .55s var(--ease);transition-delay:calc(var(--i,0) * 60ms)}
  .js .tix.pz>.tk{opacity:0;transform:translate3d(0,14px,0)}
}

/* ---------- Swipe rows on phones ---------- */
.swipe{display:none}
@media (max-width:1180px){.tix{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:1023px){.tix.tiers{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.tier-foot{grid-template-columns:minmax(0,1fr)}}
@media (max-width:767px){
  .tix,.tix.tiers{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 calc(var(--gut) * -1);padding:4px var(--gut) 6px;scroll-padding:0 var(--gut)}
  .tix::-webkit-scrollbar{display:none}
  .tix>*{flex:0 0 min(84%,330px);scroll-snap-align:start}
  .swipe{display:block;position:relative;width:96px;height:4px;margin:14px auto 0;border-radius:4px;background:var(--line);overflow:hidden}
  .swipe i{position:absolute;left:0;top:0;bottom:0;width:30%;border-radius:4px;background:var(--coral);transform-origin:left center}
  .tk-top{padding:20px 20px 18px}.tk-list{padding:16px 20px 4px}.tk-stub{padding:14px 20px 18px}
  .tier-foot{padding:20px 18px}
  
}

/* ---------- Job picker: service cards (.jt), sub-job pills (.jsub), tier panels ---------- */
.jt{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:26px}

.jt [role="tab"]{display:flex;align-items:center;gap:12px;min-height:66px;padding:12px 14px;border-radius:var(--r-md);border:1px solid var(--line-2);background:#fff;color:var(--ink);text-align:left;cursor:pointer;font:inherit;transition:transform .2s var(--ease),border-color .2s,background-color .2s,box-shadow .2s}
.jt .ic{flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--coral-50);color:var(--coral-deep);transition:background-color .2s,color .2s}
.jt .ic svg{width:20px;height:20px}
.jt-t{display:grid;gap:1px;min-width:0}
.jt-t b{font-size:0.9688rem;font-weight:700;line-height:1.2}
.jt-t small{font-size:0.8125rem;color:var(--muted);line-height:1.3}
.jt [role="tab"][aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:0 12px 28px rgba(22,19,15,.18)}
.jt [role="tab"][aria-selected="true"] .ic{background:var(--coral);color:#1A0E0A}
.jt [role="tab"][aria-selected="true"] small{color:#C9C2BB}
.jt.four{grid-template-columns:repeat(4,minmax(0,1fr))}
html:not(.js) .jp[hidden]{display:block;margin-top:24px}
html:not(.js) .jt{display:none}
@media (hover:hover){.jt [role="tab"][aria-selected="false"]:hover{border-color:var(--coral);transform:translateY(-2px)}}

@media (hover:hover){.jsub [role="tab"][aria-selected="false"]:hover{color:var(--ink);border-color:var(--ink)}}
.jp:focus-visible{outline-offset:8px}
.jp .tier-more{display:flex;justify-content:center;flex-wrap:wrap;gap:4px 28px}
@media (prefers-reduced-motion:no-preference){.jp:not([hidden]),.jsp:not([hidden]){animation:jpIn .45s var(--ease)}}
@keyframes jpIn{from{opacity:0;transform:translate3d(0,8px,0)}to{opacity:1;transform:none}}

@media (min-width:768px) and (max-width:1023px){.jt,.three>.jt{grid-template-columns:repeat(6,minmax(0,1fr))}.jt [role="tab"]{grid-column:span 2}.jt [role="tab"]:nth-child(4):nth-last-child(2),.jt [role="tab"]:nth-child(5):last-child{grid-column:span 3}}
@media (max-width:767px){
  .jt{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:20px}
  .jt [role="tab"]:last-child:nth-child(odd){grid-column:1/-1}
  .jt [role="tab"]{min-height:58px;padding:9px 10px;gap:9px}
  .jt .ic{width:32px;height:32px;border-radius:9px}
  .jt .ic svg{width:17px;height:17px}
  .jt-t b{font-size:0.9063rem}
  .jt-t small{font-size:0.75rem}
  
  
  
  
}
@media (min-width:768px) and (max-width:1023px){.jt.four{grid-template-columns:repeat(2,minmax(0,1fr))}.jt.four [role="tab"]{grid-column:auto}}
@media (max-width:767px){.jt.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Selected highlight: one shape that travels between the cards on X and Y springs */
.jt{position:relative;isolation:isolate}
.jt [role="tab"]{position:relative}
.jt-thumb{position:absolute;left:0;top:0;z-index:-1;border-radius:var(--r-md);background:var(--ink);box-shadow:0 12px 28px rgba(22,19,15,.18);pointer-events:none;will-change:transform}
.jt.slide [role="tab"],.jt.slide [role="tab"][aria-selected="true"]{background:none;border-color:transparent;box-shadow:none}
.jt.slide [role="tab"]::before{content:"";position:absolute;inset:-1px;z-index:-2;border-radius:inherit;background:#fff;border:1px solid var(--line-2);transition:border-color .2s}
@media (hover:hover){.jt.slide [role="tab"][aria-selected="false"]:hover::before{border-color:var(--coral)}}