/* The three Care plans as cards (Troy, 3 Nov 2026: "I need these components stylistically looking better. They are
   bland"). Each plan's Curveball Care card rises out of its own brushed metal, the price leads, Silver wears the pick,
   Gold is the dark one, and the free website is a ticket. One component on What We Do, /pricing and
   /website-maintenance (content/care.js careCards). */
.care-tiers { list-style: none; margin: clamp(30px, 3vw, 46px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; }
.care-tier { --metal: linear-gradient(135deg, #f8dcbd 0%, #dda16c 34%, #a66535 68%, #e9b07c 100%); --tick: #eab486; --muted-2: #5b5d70;
  position: relative; isolation: isolate; display: grid; align-content: start; gap: 12px; padding: 0 24px 26px; border-radius: 30px; background: #fffdf9; color: var(--ink); border: 1px solid #0d102414;
  box-shadow: inset 0 1px 0 #fff, 0 34px 60px -42px #0d1024b0; transition: transform .35s var(--settle), box-shadow .35s var(--settle); }
.care-tier--silver { --metal: linear-gradient(135deg, #ffffff 0%, #dde2ea 32%, #98a2b3 66%, #eef1f6 100%); --tick: var(--lime);
  box-shadow: 0 0 0 2px var(--lime), 0 40px 70px -40px #0d1024c0; }
.care-tier--gold { --metal: linear-gradient(135deg, #fff3c2 0%, #f6c64a 32%, #b07a12 66%, #ffdc72 100%); --tick: #f6c64a; --muted-2: #cbb8f7;
  background: radial-gradient(90% 55% at 100% 0%, #7a3bff70, transparent 62%), radial-gradient(70% 45% at 0% 100%, #ff2d9526, transparent 60%), #1e0f3b;
  color: #fffdf9; border-color: #3b2369; box-shadow: inset 0 1px 0 #ffffff1f, 0 40px 70px -40px #0d1024e0; }

/* The metal, brushed, with the plan's card rising out of it. */
.care-tier__metal { position: relative; z-index: 0; height: clamp(128px, 11vw, 150px); margin: 0 -24px 40px; border-radius: 29px 29px 0 0; background: var(--metal); }
.care-tier__metal::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: repeating-linear-gradient(100deg, #ffffff1f 0 1px, transparent 1px 4px), radial-gradient(120% 90% at 12% 0%, #ffffffa6, transparent 55%); mix-blend-mode: soft-light; }
.care-tier__metal::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: #0d102426; }
.care-tier__metal span { position: absolute; z-index: 2; left: 16px; top: 14px; padding: 8px 12px; border-radius: 999px; background: #fffdf9c7; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font: 800 11px/1 var(--font-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--ink); box-shadow: 0 6px 14px -8px #0d102466; }
.care-tier__metal em { position: absolute; z-index: 2; right: 16px; top: 14px; padding: 8px 12px; border-radius: 999px; background: var(--ink); color: var(--lime); font: 700 11px/1 var(--font-mono); font-style: normal; letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 8px 18px -8px #0d1024aa; }
.care-tier__metal img { position: absolute; left: 50%; bottom: -34px; width: min(60%, 250px); height: auto; translate: -50% 0; rotate: -6deg; filter: drop-shadow(0 20px 18px #0d102470); transition: rotate .45s var(--settle), translate .45s var(--settle); }
.care-tier--gold .care-tier__metal img { filter: drop-shadow(0 22px 20px #000a); }

.care-tier h3 { margin: 0; font: 800 28px/1 var(--font-display); letter-spacing: -.03em; color: inherit; }
.care-tier__price { display: flex; align-items: flex-end; gap: 8px; margin: 0; }
.care-tier__price b { display: inline-flex; align-items: flex-start; font: 800 clamp(62px, 5.6vw, 76px)/.82 var(--font-display); letter-spacing: -.055em; }
.care-tier__price sup { margin: .1em .04em 0 0; font-size: .4em; line-height: 1; letter-spacing: 0; vertical-align: baseline; }
.care-tier__price small { padding-bottom: 5px; font: 600 15px/1 var(--font-body); color: var(--muted-2); }
.care-tier--gold .care-tier__price b { color: #ffd76a; }
.care-tier__line { margin: 0; font: italic 400 21px/1.25 var(--font-aside); color: var(--violet); }
.care-tier--gold .care-tier__line { color: #e2d3ff; }

.care-tier ul { list-style: none; margin: 4px 0 0; padding: 16px 0 0; border-top: 1px dashed #0d102429; display: grid; gap: 10px; }
.care-tier--gold ul { border-top-color: #ffffff2e; }
.care-tier ul li { display: flex; align-items: flex-start; gap: 10px; font: 500 15px/1.35 var(--font-body); color: #34364a; }
.care-tier--gold ul li { color: #e8def6; }
.care-tier ul li::before { content: ""; flex: none; width: 22px; height: 22px; margin-top: -1px; border-radius: 50%; box-shadow: inset 0 0 0 1px #0d10241a;
  background: var(--tick) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d1024' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat; }
.care-tier ul .care-tier__all { justify-self: start; padding: 7px 13px 7px 9px; border-radius: 999px; background: #0d10240d; font-weight: 700; color: var(--ink); }
.care-tier ul .care-tier__all::before { width: 18px; height: 18px; margin-top: 0; }
.care-tier--gold ul .care-tier__all { background: #ffffff17; color: #fffdf9; }

/* The free website, as a ticket with its notches and tear line. */
.care-tier__free { position: relative; display: grid; gap: 3px; margin: 8px 0 0; padding: 14px 18px 14px 62px; border-radius: 14px; background: var(--lime); color: var(--ink);
  -webkit-mask: radial-gradient(circle at 0 50%, #0000 9px, #000 9.5px) 0 0 / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, #0000 9px, #000 9.5px) 100% 0 / 51% 100% no-repeat;
  mask: radial-gradient(circle at 0 50%, #0000 9px, #000 9.5px) 0 0 / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, #0000 9px, #000 9.5px) 100% 0 / 51% 100% no-repeat; }
.care-tier__free::before { content: "★"; position: absolute; left: 0; top: 10px; bottom: 10px; width: 46px; display: grid; place-items: center; border-right: 2px dashed #0d102452; font-size: 18px; }
.care-tier__free b { font: 800 18px/1.05 var(--font-display); letter-spacing: -.01em; }
.care-tier__free span { font: 500 13.5px/1.3 var(--font-body); }
.care-tiers__note { margin: 16px 0 0; text-align: center; font-size: 13px; color: var(--muted); }

@media (hover: hover) {
  .care-tier:hover { transform: translateY(-6px); }
  .care-tier:hover .care-tier__metal img { rotate: 0deg; translate: -50% -8px; }
}
/* Silver stands a little taller beside the others. */
@media (min-width: 1001px) { .care-tier--silver { margin-top: -14px; } }
.motion-on .care-tier:not(.is-in) { opacity: 0; }
.motion-on .care-tier.is-in { animation: ct-rise .7s var(--settle) both; }
.motion-on .care-tier.is-in .care-tier__metal img { animation: ct-card .9s var(--settle) .15s both; }
.motion-on .care-tier:nth-child(2).is-in, .motion-on .care-tier:nth-child(2).is-in .care-tier__metal img { animation-delay: .12s; }
.motion-on .care-tier:nth-child(3).is-in, .motion-on .care-tier:nth-child(3).is-in .care-tier__metal img { animation-delay: .24s; }
@keyframes ct-rise { from { opacity: 0; translate: 0 28px; } to { opacity: 1; translate: none; } }
@keyframes ct-card { from { opacity: 0; scale: .86; } to { opacity: 1; scale: 1; } }

@media (max-width: 1000px) {
  .care-tiers { grid-template-columns: minmax(0, 1fr); gap: 22px; max-width: 520px; margin-inline: auto; }
}
@media (max-width: 420px) {
  .care-tier { padding: 0 20px 22px; }
  .care-tier__metal { margin-inline: -20px; }
}
html.reduce-motion .care-tier, html.reduce-motion .care-tier * { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { .care-tier, .care-tier * { animation: none !important; transition: none !important; } }