/* ══ THE GRAIL PASS, 17 Oct 2026 (PREVIEW) ════════════════════════════════════
   Daniel, with screenshots of grail-app.com (Awwwards Honorable Mention, Sept
   2026): "Look at the sizing of the phone on grail compare to yoked. Make the
   mobile experience a lot like grail. Research and copy more." Research is in
   LOG.md (17 Oct, 28 iPhone renders in Studio/Projects/yoked/ref-shots/grail).

   What we took from Grail, in our brand (heavy Poppins caps, the logo
   gradient, night violet), never their serif, art or words:
     1. The phone is BIG: about 64% of the screen width, centered, pinned.
     2. Chapters: tiny labels pinned to the top corners on phones.
     3. Huge caps headlines, set tight.
     4. A huge faint number behind the phone.
     5. Every section is a sheet with rounded top corners that slides up over
        the one before it, each on its own ground.
     6. A dark opening with the app's screens fanned out in 3D.
     7. Something to tap (the event chips light up).
     8. Bold color blocks (The Yoked Standard).
     9. One pill pinned to the bottom on phones (menu, logo, Apply free).
        Daniel chose it on 17 Oct, replacing "no sticky bottom bar" (3 Oct).
   Loaded after css/brand.css. No copy changes. */

:root {
  --g-night: #120828; --g-night2: #1c0c46;
  --g-lilac: #ecd2f8; --g-lilac2: #dcb6f2;
  --g-warm: #fbf8f4; --g-blush: #f7dcec;
  --g-ink: #1b1530;
  --g-grad: linear-gradient(100deg, #6b2ac1 0%, #a52fa8 50%, #e0407a 100%);
  --g-grad-lt: linear-gradient(100deg, #c9a2ff 0%, #ef8fd6 50%, #ff8fb6 100%);
  --g-ease: cubic-bezier(.32, .72, 0, 1);
}

/* ── huge caps headlines ── */
.hx h1 .l:first-child,
.manifesto h2, .sec-head h2, .story-intro h2, .rule h2, .nominate h2,
.standard .kicker, .cta h2, .founders-copy .quote {
  text-transform: uppercase; font-family: var(--font); font-weight: 800;
  letter-spacing: -.045em; line-height: .92; text-wrap: balance;
}
.hx h1 em, .cta h2 .grad-text { text-transform: none; }
/* the second line of a headline wears the gradient, in caps too */
.manifesto h2 .accent, .rule h2 .r1, .split-h .s1, .founders-copy .quote em {
  font-family: var(--font); font-style: normal; font-weight: 800;
  background: var(--g-grad); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.manifesto h2 .accent .w { background: inherit; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }

/* kickers: small quiet pills, like Grail's "About Problem" */
.kicker, .how .kicker, .events .kicker, .plans .kicker, .founders-copy .kicker.script-k {
  display: inline-flex; align-items: center; width: auto; margin: 0 auto 18px; padding: 6px 13px; border-radius: 999px;
  font-family: var(--font); font-style: normal; font-size: .68rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  white-space: nowrap; background: rgba(107, 42, 193, .08); box-shadow: inset 0 0 0 1px rgba(107, 42, 193, .18);
  color: #6b2ac1; -webkit-text-fill-color: #6b2ac1;
}
.events .kicker::after { display: none; }

/* ── sheets: every section from How it works on slides up over the last ── */
section { position: relative; }
.how, .founders, .rule, .nominate, .events, .plans, .safety, .cta, .postscript {
  margin-top: -34px; border-radius: 34px 34px 0 0;
  box-shadow: 0 -24px 50px -30px rgba(10, 4, 30, .45);
}
.how { margin-left: 0; margin-right: 0; }
footer { position: relative; }

/* ══ 0. THE OPENING (night, the fan) ═══════════════════════════════════════ */
.hx { background:
    radial-gradient(70% 45% at 50% 62%, rgba(165, 47, 168, .34) 0%, rgba(165, 47, 168, 0) 70%),
    radial-gradient(60% 40% at 15% 10%, rgba(107, 42, 193, .45) 0%, rgba(107, 42, 193, 0) 70%),
    linear-gradient(180deg, var(--g-night) 0%, var(--g-night2) 100%);
  color: #fff; min-height: 0; }
.hx::before { display: none; }
.hx h1 { color: #fff; }
.hx h1 em, .hx h1 em .wd > span { background: var(--g-grad-lt); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.hx-eyebrow { background: rgba(255, 255, 255, .08); border: 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .86); }
.hx-sub { color: rgba(255, 255, 255, .8); }
.hx-link { color: #fff; border-color: rgba(255, 255, 255, .4); text-decoration-color: rgba(255, 255, 255, .4); }
.hx-assure { color: rgba(255, 255, 255, .58); }
.hx-proof { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .1); }
.hx-proof li { color: rgba(255, 255, 255, .78); }
.hx-proof svg { color: #ef8fd6; }

.fan { position: relative; display: block; width: 100%; max-width: 980px; height: clamp(360px, 62vw, 560px); margin: 26px auto 0; padding: 0;
  perspective: 1400px; pointer-events: none; overflow: visible; }
.fan::before { display: none; }
.fan-i { position: absolute; left: 50%; bottom: -14%; width: clamp(170px, 44vw, 300px); height: auto; transform-origin: 50% 120%;
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .45));
  transform: translateX(-50%) rotate(var(--r, 0deg)) translateX(var(--x, 0)) translateY(var(--y, 0));
  opacity: 0; animation: gFan 1.3s var(--g-ease) forwards; }
.fan-i.f1 { --r: -24deg; --x: -6%; --y: 6%;  animation-delay: .55s; }
.fan-i.f2 { --r: -12deg; --x: -3%; --y: 2%;  animation-delay: .45s; }
.fan-i.f3 { --r: 0deg;   --x: 0;    --y: -4%; animation-delay: .3s; z-index: 2; }
.fan-i.f4 { --r: 12deg;  --x: 3%;  --y: 2%;  animation-delay: .45s; }
.fan-i.f5 { --r: 24deg;  --x: 6%;  --y: 6%;  animation-delay: .55s; }
@keyframes gFan { from { opacity: 0; transform: translateX(-50%) rotate(0deg) translateY(30%); } to { opacity: 1; } }
/* js/grail.js spreads the fan wider as you scroll (sets --s from 0 to 1) */
.fan.live .fan-i { animation: none; opacity: 1;
  transform: translateX(-50%) rotate(calc(var(--r, 0deg) * (1 + var(--s, 0) * .55))) translateX(var(--x, 0)) translateY(calc(var(--y, 0) - var(--s, 0) * 8%)); }

/* ══ 1. MATCHMAKING (night, continued) ═════════════════════════════════════ */
.manifesto { background: var(--g-night2); color: #fff; padding-bottom: clamp(110px, 12vw, 160px); }
.manifesto .kicker { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); color: #fff; -webkit-text-fill-color: #fff; }
.manifesto h2 { color: #fff; font-size: clamp(2.7rem, 9vw, 6rem); max-width: 14ch; margin-left: auto; margin-right: auto; }
.manifesto h2 .accent, .manifesto h2 .accent .w { background: var(--g-grad-lt); -webkit-background-clip: text; background-clip: text; }
.manifesto .foot { color: rgba(255, 255, 255, .74); }

/* ══ 2. HOW IT WORKS (lilac sheet, the big pinned phone) ══════════════════ */
.how.story { color: var(--g-ink); background:
    radial-gradient(80% 50% at 50% 30%, #f6e2fd 0%, rgba(246, 226, 253, 0) 70%),
    linear-gradient(180deg, var(--g-lilac) 0%, var(--g-lilac2) 100%); overflow: clip; }
.how.story .kicker { color: #6b2ac1; -webkit-text-fill-color: #6b2ac1; background: rgba(255, 255, 255, .5); }
.story-intro h2 { color: var(--g-ink); font-size: clamp(2.6rem, 9vw, 5.4rem); }
.story-intro p { color: rgba(27, 21, 48, .72); }
.story-track { height: 360svh; }
.story-stick { padding: 0; gap: 0; justify-content: center; }
.story-chs { position: sticky; top: 0; height: 100svh; margin-top: -100svh; z-index: 3; pointer-events: none; display: block; }
.story-phone { position: absolute; left: 0; right: 0; top: 54px; bottom: 0; display: flex; justify-content: center; align-items: flex-start; }
/* the phone body = 80% of the film's width, so 80vw of film = a 64% wide phone */
.story .film-how { width: min(80vw, calc((100svh - 70px) / 1.76), 460px); height: auto; max-width: none; aspect-ratio: 1080 / 1900; }
.story-big { top: 52%; color: rgba(107, 42, 193, .09); font-size: min(110vw, 78svh); z-index: 0; }
.story-bar { position: absolute; top: 40px; left: 50%; transform: translateX(-50%); width: 132px; margin: 0; z-index: 2; }
.story-bar i { background: rgba(27, 21, 48, .14); height: 3px; }
.story-bar i::after { background: #6b2ac1; }
/* the step cards rise into a slot over the lower part of the phone */
.ch { position: absolute; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); width: min(560px, calc(100% - 28px)); grid-area: auto;
  transform: translate(-50%, 46px); opacity: 0; transition: opacity .55s var(--g-ease), transform .8s var(--g-ease); }
.ch.on { transform: translate(-50%, 0); opacity: 1; }
.ch-card { text-align: center; padding: 16px 20px 18px; border-radius: 26px; color: var(--g-ink);
  background: rgba(255, 255, 255, .78); backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .7), 0 30px 60px -30px rgba(36, 20, 88, .55); }
.ch-n { color: #fff; background: var(--g-grad); box-shadow: none; padding: 5px 11px; font-size: .7rem; }
.ch h3 { color: var(--g-ink); text-transform: uppercase; font-size: clamp(1.9rem, 8vw, 3rem); margin: 8px 0 6px; letter-spacing: -.045em; line-height: .95; }
.ch p { color: rgba(27, 21, 48, .78); font-size: .95rem; line-height: 1.5; max-width: 40ch; }
.ch p b { color: var(--g-ink); }
@media (min-width: 901px) {
  .ch { bottom: 40px; }
  .story-phone { top: 70px; }
  .story-bar { top: 96px; }
}
.story.static .story-chs { position: relative; height: auto; margin: 0; }
.story.static .ch { position: relative; left: auto; bottom: auto; transform: none; opacity: 1; margin: 0 auto 16px; }
.story.static .story-phone { position: relative; top: 0; }

/* ══ 3. OUR STORY (warm white sheet) ══════════════════════════════════════ */
.founders { background: var(--g-warm); }
.founders-copy .kicker.script-k { margin-left: auto; margin-right: auto; }
.founders-copy .quote { font-size: clamp(2.2rem, 7.6vw, 4.2rem); color: var(--g-ink); }
.founders-photo .frame { border-radius: 28px; box-shadow: 0 40px 80px -40px rgba(36, 20, 88, .5); }

/* ══ 4. THE RULE (night sheet) ════════════════════════════════════════════ */
.rule { background:
    radial-gradient(80% 50% at 50% 0%, rgba(150, 110, 230, .3) 0%, rgba(150, 110, 230, 0) 70%),
    linear-gradient(180deg, #24114f 0%, var(--g-night) 100%); color: #fff; }
.rule .kicker { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); color: #fff; -webkit-text-fill-color: #fff; }
.rule h2 { font-size: clamp(2.8rem, 10vw, 6.4rem); }
.rule h2 .r1 { background: var(--g-grad-lt); -webkit-background-clip: text; background-clip: text; }
.rule h2 .r2 { color: #fff; -webkit-text-fill-color: #fff; }
.rule-lead, .rule-sub { color: rgba(255, 255, 255, .8); }
.rule-lead b { background: none; color: #fff; -webkit-text-fill-color: #fff; }

/* ══ 5. KNOW SOMEONE (blush sheet, the big phone) ═════════════════════════ */
.nominate { background: linear-gradient(180deg, var(--g-blush) 0%, #f1d3f4 100%); }
.nominate h2 { font-size: clamp(2.6rem, 9vw, 5.2rem); color: var(--g-ink); }
.nominate h2 .s2 { color: var(--g-ink); }
.film-refer { width: min(80vw, 440px); }

/* ══ 6. EVENTS (night sheet, chips you can tap) ═══════════════════════════ */
.events { background: linear-gradient(180deg, var(--g-night2) 0%, var(--g-night) 100%); color: #fff; }
.events .kicker { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); color: #fff; -webkit-text-fill-color: #fff; }
.events .sec-head h2 { color: #fff; font-size: clamp(2.6rem, 9vw, 5.2rem); }
.events .sec-head p, .events .note { color: rgba(255, 255, 255, .74); }
.events .note strong { color: #fff; }
.event-chips { justify-content: center; }
.chip { background: rgba(255, 255, 255, .08); color: #fff; border: 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
  font-weight: 600; padding: 11px 18px; cursor: pointer; transition: background .4s var(--g-ease), color .4s var(--g-ease), transform .4s var(--g-ease); }
.chip:nth-child(n) { background-image: none; }
.chip.on { background: #f3c6ea; color: var(--g-ink); box-shadow: none; transform: scale(1.04); }

/* ══ 7. MEMBERSHIP (lilac sheet, the deep violet card) ════════════════════ */
.plans { background: linear-gradient(180deg, var(--g-lilac) 0%, #f3e8fb 100%); }
.plans .sec-head h2 { color: var(--g-ink); font-size: clamp(2.4rem, 8vw, 4.6rem); }
.plans .sec-head p { color: rgba(27, 21, 48, .72); }

/* ══ 8. THE YOKED STANDARD (warm sheet, bold color blocks) ════════════════ */
.safety { background: var(--g-warm); }
.standard { max-width: 980px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; text-align: left; }
.standard .kicker { grid-column: 1 / -1; display: block; padding: 0; margin: 0 0 22px; border-radius: 0; background: none; box-shadow: none;
  font-size: clamp(2.6rem, 9vw, 5rem); letter-spacing: -.045em; text-align: center; color: var(--g-ink); -webkit-text-fill-color: var(--g-ink); white-space: normal; }
.std, .std:nth-of-type(n) { display: flex; flex-direction: column; justify-content: space-between; margin: 0 !important; padding: 18px 16px 18px;
  min-height: 210px; border-radius: 22px; color: #fff; text-align: left; overflow: hidden; }
.std::before { display: none; }
.std .n { order: -1; display: block; margin: 0 0 18px; font-family: var(--font); font-weight: 800; font-size: 3.4rem; line-height: .85; letter-spacing: -.05em;
  color: rgba(255, 255, 255, .95); -webkit-text-fill-color: rgba(255, 255, 255, .95); background: none; }
.std h4, .standard .std h4 { color: #fff; font-size: 1.15rem; margin: 0 0 6px; text-align: left; }
.std p, .standard .std p { color: rgba(255, 255, 255, .86); font-size: .9rem; line-height: 1.45; margin: 0; text-align: left; max-width: none; }
.std:nth-of-type(1) { background: #6b2ac1; }
.std:nth-of-type(2) { background: #a52fa8; }
.std:nth-of-type(3) { background: #e0407a; }
.std:nth-of-type(4) { background: #3b1f8f; }
.std:nth-of-type(5) { grid-column: 1 / -1; min-height: 160px; background: var(--g-grad); }
@media (min-width: 901px) { .standard { grid-template-columns: repeat(3, 1fr); } .std:nth-of-type(4) { grid-column: span 1; } .std:nth-of-type(5) { grid-column: span 2; } }

/* ══ 9. THE ENDING (night, the icon, Apply) ═══════════════════════════════ */
.cta { width: 100%; margin-left: 0; margin-right: 0; background: #08030f; color: #fff; padding: clamp(80px, 12vw, 140px) 0 clamp(110px, 12vw, 150px); }
.cta::after, .cta .aurora, .cta .grain { display: none; }
.cta .wrap { background: none; padding: 0; border-radius: 0; width: min(760px, 88%); }
.cta-icon { display: block; width: 96px; height: 96px; margin: 0 auto 30px; border-radius: 24px; box-shadow: 0 30px 60px -20px rgba(224, 64, 122, .55); }
.cta h2 { font-size: clamp(2.8rem, 10vw, 6rem); color: #fff; }
.cta h2 .grad-text { font-family: 'Fraunces', Georgia, serif; font-style: italic; font-weight: 500; text-transform: none; letter-spacing: -.02em;
  background: var(--g-grad-lt); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.cta p { color: rgba(255, 255, 255, .74); }
.cta p.cta-assure { color: rgba(255, 255, 255, .5); }
.postscript { background: var(--g-warm); }

/* ══ PHONES: the pinned pill and the chapter labels ═══════════════════════ */
.pill, .chap { display: none; }
@media (max-width: 900px) {
  .nav { display: none; }
  .chap { display: flex; justify-content: space-between; position: fixed; top: 0; left: 0; right: 0; z-index: 55; pointer-events: none;
    padding: calc(10px + env(safe-area-inset-top)) 16px 0; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: #fff; mix-blend-mode: difference;
    opacity: 0; transition: opacity .4s var(--g-ease); }
  .chap.on { opacity: 1; }
  .pill { display: flex; align-items: center; gap: 4px; position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translateX(-50%);
    z-index: 60; padding: 6px; border-radius: 999px; background: rgba(20, 10, 40, .72);
    backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 20px 40px -18px rgba(0, 0, 0, .6); }
  .pill-menu { width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .1); display: grid; place-content: center; gap: 5px; cursor: pointer; }
  .pill-menu span { display: block; width: 18px; height: 2px; border-radius: 2px; background: #fff; transition: transform .45s var(--g-ease); }
  .pill.open .pill-menu span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .pill.open .pill-menu span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .pill-logo { display: flex; align-items: center; padding: 0 14px; height: 46px; }
  .pill-logo img { height: 22px; width: auto; filter: brightness(0) invert(1); }
  .pill-cta { display: flex; align-items: center; height: 46px; padding: 0 22px; border-radius: 999px; color: #fff; font-weight: 700; font-size: 15px;
    background: var(--g-grad); box-shadow: 0 10px 24px -12px rgba(224, 64, 122, .8); }
  .mobile-menu { z-index: 58; }
  .hx-main { padding-top: 62px; }
  footer { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  .fan-i { animation: none; opacity: 1; }
  .ch { transition: none; }
}
/* fixes after the first look */
.pill-cta { white-space: nowrap; }
.hx-proof { position: relative; z-index: 4; background: var(--g-night2); }
/* founders: one centered column at every width (Daniel, 17 Oct: "more center") */
.founders-grid { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 34px; }
.founders-photo { width: min(460px, 100%); margin: 0 auto; }
.founders-photo .caption { text-align: center; }
.founders-copy { max-width: 680px; margin: 0 auto; text-align: center; }
.founders-copy p { margin-left: auto; margin-right: auto; max-width: 46ch; }
/* the step card: smaller, lower, so more of the phone shows (iPhone check) */
@media (max-width: 900px) {
  .ch { bottom: calc(80px + env(safe-area-inset-bottom)); }
  .ch-card { padding: 11px 16px 13px; border-radius: 22px; background: rgba(255, 255, 255, .84); }
  .ch h3 { font-size: clamp(1.55rem, 6.6vw, 2.2rem); margin: 6px 0 4px; }
  .ch p { font-size: .88rem; line-height: 1.42; }
  .ch-n { padding: 4px 10px; font-size: .64rem; }
}

/* ══ 17 Oct: the $50, bold and centered ═══════════════════════════════════════
   Daniel, on his iPhone: "The $50 is lacking on design and the $50 needs to be
   bold and center." The card is one centered column at every width now; the
   price is heavy Poppins in the light brand gradient with a soft glow behind
   it, the $ small and raised, "per month" centered under it. */
.plans .plan-grid, .plans .plan-grid.single { grid-template-columns: minmax(0, 560px); }
.plans .pc { display: block; width: min(560px, 100%); text-align: center; padding: 46px 30px 34px; }
.plans .pc-icon { margin: 0 auto 16px; }
.plans .pc-name, .plans .pc-for { text-align: center; }
.plans .pc-price {
  position: relative; display: block; margin: 22px auto 0; text-align: center;
  font-family: var(--font); font-weight: 800; font-variation-settings: normal;
  font-size: clamp(6.6rem, 34vw, 9.5rem); line-height: .86; letter-spacing: -.07em;
  background: linear-gradient(180deg, #ffffff 0%, #f1dcff 55%, #f3a6d2 100%); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 18px 40px rgba(224, 64, 122, .35));
}
.plans .pc-price .pc-cur {
  font-size: .32em; vertical-align: 1.5em; margin-right: .08em; letter-spacing: 0;
  background: inherit; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.plans .pc-per {
  display: inline-block; margin: 14px auto 0; padding: 7px 16px; border-radius: 999px;
  font-family: var(--font); font-style: normal; font-weight: 600; font-size: .78rem; letter-spacing: .22em; text-transform: uppercase;
  color: #fff; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
}
/* a soft halo behind the number */
.plans .pc-name + .pc-for + .pc-price::before { content: none; }
.plans .pc { background:
    radial-gradient(60% 34% at 50% 40%, rgba(224, 64, 122, .22), transparent 70%),
    radial-gradient(120% 90% at 0% 0%, rgba(124, 77, 255, .3), transparent 55%),
    linear-gradient(160deg, #2c176a 0%, #200f52 52%, #170a3c 100%); }
.plans .pc-btn { margin: 28px auto 0; max-width: 420px; }
.plans .pc-note { text-align: center; }
.plans .pc-list { width: fit-content; max-width: 100%; margin: 26px auto 0; padding: 22px 0 0; border-top: 1px solid rgba(205, 182, 245, .16); text-align: left; }
.plans .pc::after { right: 50%; margin-right: -210px; bottom: -150px; }
@media (max-width: 760px) { .plans .pc { padding: 40px 22px 30px; } .plans .pc::after { margin-right: -150px; bottom: -110px; } }

/* How it works, slower (Daniel: "Three steps zero swiping is too fast"):
   almost twice the scroll per step, and js/story.js eases more gently */
.story-track { height: 640svh; }
/* ⚠️ THE NUMERAL IS CENTERED, NOT "$50" (Daniel, 7 Aug): the $ hangs off the left */
.plans .pc-price { display: table; }
.plans .pc-price .pc-cur { position: absolute; right: 100%; top: .14em; vertical-align: 0; margin-right: .04em;
  background: linear-gradient(180deg, #ffffff 0%, #f1dcff 100%); -webkit-background-clip: text; background-clip: text; }
/* the ring is Yoked's own: the two rings from the "o" in the logo
   (assets/logo-yoked-only.svg, paths 2 and 3). Daniel: "the two rings above
   it is not my logo so make sure you use my logos ring and not something
   made up." Never draw a ring by hand again. */
.plans .pc-icon { width: 58px; height: auto; aspect-ratio: 325 / 260; color: #fff; }
.plans .pc::after { background: url("../assets/yoked-ring-white.svg") center / contain no-repeat; opacity: .06; width: 460px; height: 368px; }
@media (max-width: 760px) { .plans .pc::after { width: 320px; height: 256px; } }