/* The landing's moving parts (2026-10-05): a bigger hero with a shimmer and a waveform, the strip of what is on, and
   real featured artists. app.css stays the base; this file only adds. app.css stops every animation under reduced
   motion, and each part here still reads right standing still. Since "WAY MORE INTERACTIVE" and "this sucks" (Shawn
   2026-10-05) the member Home (home.html) uses this file too, with landing.js: the wave plays, cards tilt, glows follow. */

/* Hero: bigger type on wide screens only (the phone sizes in app.css stay), a slow shimmer on "booked." */
@media (min-width: 981px) {
    .landing .hero h1 { font-size: clamp(2.9rem, 6vw, 5.4rem); max-width: 13ch; letter-spacing: -.025em; }
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .landing .hero h1 .accent { background: linear-gradient(90deg, var(--accent) 0%, #FF8A4C 25%, var(--accent) 50%, #FF8A4C 75%, var(--accent) 100%);
        background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 9s linear infinite; }
}
.landing .hero::before { animation: drift 22s ease-in-out infinite; }
/* A glow that follows the pointer (landing.js sets --mx/--my), and the orange button leans toward it */
.landing .hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .5s;
    background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--accent) 14%, transparent), transparent 62%); }
.landing .hero.spot-on::after { opacity: 1; }
.landing .btn[data-magnet] { transform: translate(var(--bx, 0px), var(--by, 0px)); }
.landing .btn[data-magnet]:hover { transform: translate(var(--bx, 0px), calc(var(--by, 0px) - 1px)); }

/* The product on a phone (Shawn 2026-10-08: "people need to see what they are getting into"). The hero holds a real
   published kit (LandingShots, captured by ops/landing_shots.py): the tall picture rests at the top, scrolls slowly to
   the third screen and back, and holds still on hover, focus or a finger (landing.js adds .held). Under reduced motion
   app.css cuts the animation to nothing, so it rests at the top. --end comes from the page: all but the last screen. */
.phone { position: relative; display: block; padding: 10px; border-radius: 46px; background: #0d0d0d;
    box-shadow: 0 30px 60px -24px rgba(21, 19, 15, .45), var(--shadow); }
.phone::before { content: ""; position: absolute; z-index: 2; top: 18px; left: 50%; width: 30%; height: 22px; translate: -50% 0; border-radius: 99px; background: #0d0d0d; }
.phone-screen { position: relative; display: block; overflow: hidden; aspect-ratio: 390 / 844; border-radius: 36px; background: #111; }
.phone-screen img { display: block; width: 100%; height: auto; }
.phone-hero { position: relative; display: block; justify-self: center; width: min(100%, 280px); color: inherit; text-decoration: none; }
.phone-hero:hover { text-decoration: none; }
.phone-hero:focus-visible { outline: none; }
.phone-hero:focus-visible .phone { outline: 3px solid var(--accent); outline-offset: 4px; }
.phone-hero .mock-badge { z-index: 3; }
.phone-hero .phone { animation: float 7s ease-in-out infinite; }
.phone-hero .phone-screen img { animation: kit-scroll 24s var(--ease) 1.2s infinite; }
.phone-hero:hover .phone-screen img, .phone-hero:focus-visible .phone-screen img, .phone-hero.held .phone-screen img { animation-play-state: paused; }
@keyframes kit-scroll { 0%, 12% { transform: translateY(0); } 42%, 52% { transform: translateY(calc(var(--end, 0%) / 2)); }
    82%, 90% { transform: translateY(var(--end, 0%)); } 100% { transform: translateY(0); } }
/* The smaller phones in "See what you get": a thinner frame, no island over the section's first line */
.phone-sm { padding: 7px; border-radius: 34px; }
.phone-sm::before { display: none; }
.phone-sm .phone-screen { border-radius: 28px; }

/* The sound moment: a track's shape across the hero, each bar breathing on its own beat. Tap or drag to play it. */
.hero-wave { grid-column: 1 / -1; position: relative; display: flex; align-items: center; gap: clamp(1px, .35vw, 4px); height: 64px; margin-top: .5rem;
    border-radius: 12px; touch-action: pan-y; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.hero-wave.playable { cursor: pointer; }
.hero-wave:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.hero-wave i { flex: 1 1 0; min-width: 2px; height: calc(var(--h) * 1%); border-radius: 99px; background: linear-gradient(0deg, var(--accent), #FF8A4C);
    transform-origin: center; animation: eq 1.6s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -83ms);
    scale: 1 var(--lift, 1); transition: scale .25s var(--ease), filter .25s; }
.hero-wave i:nth-child(3n) { animation-duration: 1.15s; }
.hero-wave i:nth-child(4n + 1) { animation-duration: 2.1s; }
.hero-wave i.near { scale: 1 1.3; }
.hero-wave i.hit { scale: 1 1.7; filter: brightness(1.25) saturate(1.2); transition-duration: .06s; }
@keyframes eq { from { transform: scaleY(1); } to { transform: scaleY(.42); } }
.wave-ripple { position: absolute; top: 50%; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; border: 2px solid #FF8A4C;
    pointer-events: none; opacity: 0; animation: wave-ripple .7s ease-out; }
@keyframes wave-ripple { from { opacity: .7; transform: scale(.15); } to { opacity: 0; transform: scale(1); } }
.wave-hint { position: absolute; left: 50%; top: 50%; translate: -50% -50%; margin: 0; padding: .4rem .85rem; border-radius: 999px; white-space: nowrap;
    background: var(--ink); color: var(--paper); font-size: .8rem; font-weight: 600; box-shadow: var(--shadow-sm); pointer-events: none;
    transition: opacity .4s; animation: hint-bob 1.4s ease-in-out infinite alternate; }
.wave-hint[hidden] { display: none; }
.wave-hint.gone { opacity: 0; }
@keyframes hint-bob { to { translate: -50% calc(-50% - 4px); } }

/* Cards that lean toward the pointer: landing.js sets --rx/--ry and adds .tilting while the pointer is on them. */
.live-card, .artist-photo { transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0px)); }
.tilting.live-card, .tilting .artist-photo { transition: transform .12s linear, box-shadow .25s, border-color .25s; }

/* What is on: one row of real nights and shows that scrolls sideways, each card opens its place on /shows. */
.live-strip { max-width: 1180px; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 3rem) .5rem; }
.live-strip-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }
.live-strip-head h2 { font-family: var(--font-display); font-size: clamp(1.15rem, 2.2vw, 1.5rem); line-height: 1.1; margin: 0; display: flex; align-items: center; gap: .55rem; }
.live-strip-head .cta-link { padding: 0; }
.live-dot { flex: none; width: .6rem; height: .6rem; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px var(--ok-soft); animation: pulse 1.6s ease-in-out infinite; }
.live-row { display: flex; gap: .8rem; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; padding: .3rem .1rem 1rem; scrollbar-width: thin; }
/* Each night as a poster (2026-10-08): the flyer big at 4:5; a night with no flyer gets its initial on one of three colours. */
.live-card { flex: 0 0 min(46%, 200px); scroll-snap-align: start; display: flex; flex-direction: column; gap: .6rem;
    padding: .55rem .55rem .8rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm);
    color: var(--ink); text-decoration: none; transition: transform .45s var(--ease), box-shadow .25s, border-color .25s; }
.live-card:hover { --ty: -3px; box-shadow: var(--shadow); border-color: var(--accent); text-decoration: none; }
.live-art { width: 100%; aspect-ratio: 4 / 5; border-radius: var(--radius-sm); overflow: hidden; background: linear-gradient(160deg, #2a2a2a, var(--ink));
    color: var(--paper); display: grid; place-items: center; font-family: var(--font-brand); font-size: 4.2rem; }
.live-card:nth-child(3n + 2) .live-art { background: linear-gradient(160deg, #6E40C9, #2F6FEB); }
.live-card:nth-child(3n) .live-art { background: linear-gradient(160deg, #E0457B, #D2601A); }
.live-art img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.live-card:hover .live-art img { transform: scale(1.04); }
.live-text { display: grid; gap: .1rem; min-width: 0; padding: 0 .3rem; }
.live-when { font-size: .78rem; font-weight: 600; color: var(--accent); }
.live-title { font-family: var(--font-display); font-size: 1.05rem; line-height: 1.15; overflow: hidden;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.live-venue { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live-venue { font-size: .85rem; color: var(--ink-3); }

/* Featured artists: real kits from /featured, photo first, the kit's own colour when there is no photo. */
.landing-artists .from-blog-head { margin-bottom: 1.4rem; }
.artist-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.1rem; }
.artist-tile { --tile: var(--accent); display: grid; align-content: start; gap: .2rem; color: var(--ink); text-decoration: none; }
.artist-tile:hover { text-decoration: none; }
.artist-photo { position: relative; aspect-ratio: 4 / 5; margin-bottom: .45rem; border-radius: var(--radius); overflow: hidden; background: var(--tile); color: #fff;
    display: grid; place-items: center; font-family: var(--font-brand); font-size: 3rem; box-shadow: var(--shadow-sm);
    transition: transform .45s var(--ease), box-shadow .3s; }
.artist-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
    background: radial-gradient(240px circle at var(--gx, 50%) var(--gy, 30%), rgba(255, 255, 255, .28), transparent 65%); }
.artist-tile.tilting .artist-photo::after { opacity: 1; }
.artist-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.artist-tile:hover .artist-photo { --ty: -4px; box-shadow: var(--shadow); }
.artist-tile:hover .artist-photo img { transform: scale(1.05); }
.artist-tile b { font-family: var(--font-display); font-size: 1.05rem; line-height: 1.15; overflow-wrap: anywhere; }
.artist-tile small { color: var(--ink-3); font-size: .82rem; }

/* ---------- Home, rebuilt (Shawn 2026-10-05: "this sucks") ---------- */
/* A dark stage with the greeting, live chips with real counts and the wave; a glow follows the pointer. */
.hub-hero { position: relative; isolation: isolate; overflow: hidden; margin: .25rem 0 1rem; padding: clamp(1.4rem, 4vw, 2.4rem) clamp(1.2rem, 4vw, 2.4rem) 1rem;
    border-radius: calc(var(--radius) + 6px); background: var(--ink); color: var(--paper); box-shadow: var(--shadow); }
.hub-hero::before { content: ""; position: absolute; top: -45%; right: -15%; width: min(70%, 520px); aspect-ratio: 1; border-radius: 50%; z-index: -1; pointer-events: none;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent) 50%, transparent), transparent 66%); animation: drift 18s ease-in-out infinite; }
.hub-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .4s;
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 138, 76, .2), transparent 60%); }
.hub-hero.spot-on::after { opacity: 1; }
.hub-hero .eyebrow { color: #FF8A4C; margin-bottom: .5rem; }
.hub-hero h1 { font-size: clamp(2.3rem, 6vw, 3.8rem); margin: 0 0 .35rem; color: #fff; }
.hub-lede { margin: 0; max-width: 46ch; color: rgba(244, 242, 238, .72); }
.hub-pulse { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.1rem; }
.hub-chip { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .85rem; border-radius: 999px; background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .16); color: #fff; font-size: .88rem; font-weight: 600; text-decoration: none;
    transition: background .2s, border-color .2s, transform .2s var(--ease); }
.hub-chip:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .32); color: #fff; text-decoration: none; transform: translateY(-1px); }
.hub-chip:active { transform: scale(.96); }
.hub-chip b { font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.hub-chip .live-dot { box-shadow: 0 0 0 4px rgba(30, 142, 90, .32); }
.hub-hero .hero-wave { margin-top: 1.1rem; height: 56px; }
.hub-hero .wave-hint { background: #fff; color: var(--ink); }

/* The ways in: colour tiles that rise in one after another, lean toward the pointer and light up their icon. */
.hub .hub-tiles { gap: .8rem; }
.hub .hub-tile { --c: var(--accent); position: relative; isolation: isolate; overflow: hidden; min-height: 9.5rem; padding: 1.05rem 1.05rem 1.1rem;
    border-color: color-mix(in srgb, var(--c) 20%, var(--line)); background: linear-gradient(160deg, color-mix(in srgb, var(--c) 10%, #fff), #fff 58%);
    transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0px));
    transition: transform .45s var(--ease), scale .15s, box-shadow .25s, border-color .25s;
    animation: tile-in .6s var(--ease) backwards; animation-delay: calc(var(--n, 0) * 45ms); }
.hub .hub-tile:hover { --ty: -3px; transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0px));
    border-color: color-mix(in srgb, var(--c) 50%, var(--line)); box-shadow: 0 16px 34px -16px color-mix(in srgb, var(--c) 60%, transparent), var(--shadow-sm); }
.hub .hub-tile.tilting { transition: transform .12s linear, scale .15s, box-shadow .25s, border-color .25s; }
.hub .hub-tile:active { scale: .97; }
.hub .hub-tile::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .3s;
    background: radial-gradient(260px circle at var(--gx, 50%) var(--gy, 50%), color-mix(in srgb, var(--c) 18%, transparent), transparent 70%); }
.hub .hub-tile.tilting::after { opacity: 1; }
@keyframes tile-in { from { opacity: 0; translate: 0 18px; } }
.hub .hub-tile b { font-size: 1.12rem; }
.hub .hub-ic { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; margin-bottom: .45rem; border-radius: 14px;
    background: color-mix(in srgb, var(--c) 14%, #fff); color: var(--c); transition: background .25s, color .25s, transform .35s var(--ease); }
.hub .hub-ic svg { width: 22px; height: 22px; margin: 0; color: currentColor; }
.hub .hub-tile:hover .hub-ic { background: var(--c); color: #fff; transform: rotate(-6deg) scale(1.07); }
/* Explore artists: the big tile (two wide on a phone, two by two from 720px), with a deck of cards that swipes now and
   then and fans out on hover. A promoter has one tile fewer, so their venue tile goes two wide: every row stays full. */
.hub .hub-tile-wide, .hub .hub-tile-span { grid-column: span 2; }
.hub .hub-tile-wide { padding-right: 44%; }
@media (min-width: 720px) {
    .hub .hub-tile-wide { grid-row: span 2; justify-content: flex-end; padding: 1.4rem 46% 1.4rem 1.4rem; }
    .hub .hub-tile-wide b { font-size: 1.5rem; }
    .hub .hub-tile-wide .hub-deck { width: 42%; max-width: 230px; right: 1.4rem; }
}
.hub .hub-deck { position: absolute; right: 1rem; top: 50%; width: 40%; max-width: 180px; aspect-ratio: 1; translate: 0 -50%; pointer-events: none; }
.hub .hub-deck i { position: absolute; inset: 6% 20%; border-radius: 14px; box-shadow: 0 12px 24px -12px rgba(0, 0, 0, .45); transform-origin: 50% 110%;
    transition: transform .5s var(--ease); }
.hub .hub-deck i:nth-child(1) { background: linear-gradient(160deg, #6E40C9, #2F6FEB); transform: translateX(-16%) rotate(-12deg); }
.hub .hub-deck i:nth-child(2) { background: linear-gradient(160deg, #E0457B, #D2601A); transform: translateX(16%) rotate(10deg); }
.hub .hub-deck i:nth-child(3) { background: linear-gradient(160deg, #2a2a2a, var(--ink)); transform: rotate(-2deg); animation: deck-swipe 5s var(--ease) 1.4s infinite; }
.hub .hub-deck i:nth-child(3)::before { content: ""; position: absolute; left: 50%; top: 20%; width: 36%; aspect-ratio: 1; translate: -50% 0; border-radius: 50%;
    background: linear-gradient(160deg, #FF8A4C, var(--accent)); }
.hub .hub-deck i:nth-child(3)::after { content: ""; position: absolute; left: 24%; right: 24%; top: 66%; height: 7px; border-radius: 9px;
    background: rgba(255, 255, 255, .8); box-shadow: 0 13px 0 rgba(255, 255, 255, .3); }
.hub .hub-tile-wide:hover .hub-deck i:nth-child(1) { transform: translateX(-34%) rotate(-20deg); }
.hub .hub-tile-wide:hover .hub-deck i:nth-child(2) { transform: translateX(34%) rotate(17deg); }
@keyframes deck-swipe { 0%, 60%, 100% { transform: rotate(-2deg); } 70% { transform: translateX(36%) rotate(14deg); } 79% { transform: translateX(-6%) rotate(-5deg); } 88% { transform: rotate(-1deg); } }
/* The venue door: a dark tile, so it reads as the other side of the house */
.hub .hub-tile-ink { --c: #FF8A4C; background: linear-gradient(150deg, #262626, var(--ink) 62%); border-color: var(--ink); color: var(--paper); }
.hub .hub-tile-ink > span { color: rgba(244, 242, 238, .7); }
.hub .hub-tile-ink .hub-ic { background: rgba(255, 255, 255, .1); color: #FF8A4C; }
.hub .hub-tile-ink:hover .hub-ic { background: #FF8A4C; color: var(--ink); }

/* What is on, the featured artists, the next open nights and the venues, sized for Home */
.hub .live-strip { max-width: none; padding: 0; margin-top: 1.8rem; }
.hub .landing-artists { max-width: none; padding: 0; margin-top: 1.2rem; }
.hub .landing-artists .from-blog-head { margin-bottom: 1rem; }
.hub .nights-row { border-left: 4px solid #6E40C9; transition: transform .2s var(--ease), box-shadow .2s; }
.hub .nights-row:hover { transform: translateX(3px); box-shadow: var(--shadow-sm); }
.hub .hub-venue { transition: transform .2s var(--ease), border-color .15s, box-shadow .2s; }
.hub .hub-venue:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }

/* See what you get: three more screens of the same kit, one phone each, the words under them as page text */
.screens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 2rem); margin-top: 1.6rem; }
.screen { margin: 0; display: grid; gap: .9rem; justify-items: center; align-content: start; }
.screen .phone { width: min(100%, 250px); transition: transform .45s var(--ease); }
.screen:hover .phone { transform: translateY(-4px); }
.screen figcaption { display: grid; gap: .2rem; max-width: 28ch; text-align: center; }
.screen figcaption b { font-family: var(--font-display); font-size: 1.1rem; }
.screen figcaption span { color: var(--ink-2); font-size: .92rem; line-height: 1.45; }
.see-what .side-foot { justify-content: center; gap: 1.4rem; flex-wrap: wrap; }

/* The featured kit's own photos: one still row, every picture the same height at its own shape (--r = width / height) */
.photo-band { margin: 2.2rem 0 0; }
.photo-band-row { display: flex; gap: .6rem; }
.photo-band-row img { flex: var(--r) 1 0%; min-width: 0; aspect-ratio: var(--r); height: auto; object-fit: cover; display: block;
    border-radius: var(--radius-sm); background: var(--line); }
.photo-band figcaption { margin-top: .6rem; font-size: .85rem; color: var(--ink-3); }
.photo-band figcaption a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* A blog row with the post's cover: the picture on the left, the words where they were */
.from-blog-row.has-cover { position: relative; padding-left: calc(1.1rem + 168px + 1rem); min-height: calc(2rem + 105px); }
.from-blog-cover { position: absolute; left: 1.1rem; top: 1rem; width: 168px; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius-sm); background: var(--line); }

@media (max-width: 720px) {
    .hero-wave { height: 44px; }
    .hero-wave i:nth-child(even) { display: none; }   /* half the bars, the same shape, readable widths on a phone */
    .artist-row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; gap: .8rem; padding-bottom: .5rem; }
    .artist-tile { flex: 0 0 64%; scroll-snap-align: start; }
    .phone-hero { margin-top: 1.5rem; width: min(66%, 250px); }
    .phone-hero .phone { animation: none; }
    .screens { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; gap: 1rem; padding-bottom: .6rem; }
    .screen { flex: 0 0 70%; scroll-snap-align: center; }
    .photo-band-row { overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; padding-bottom: .4rem; }
    .photo-band-row img { flex: none; width: auto; height: 220px; scroll-snap-align: start; }
    .from-blog-row.has-cover { padding-left: calc(1.1rem + 96px + .8rem); min-height: calc(2rem + 60px); }
    .from-blog-cover { width: 96px; }
}
@media (max-width: 719.98px) {
    .hub .hub-tiles { gap: .6rem; }
    .hub .hub-tile { min-height: 8.4rem; padding: .9rem; }
    .hub .hub-tile > span:not(.hub-ic):not(.hub-deck) { font-size: .8rem; }
    .hub .hub-tile-wide { padding-right: 42%; }
}
/* Home per role (2026-10-13): the role's main button under the lede with its one line, four tiles beside Explore artists
   (between 720 and 999 px the big tile stays one row tall so the four fill the rows), and one quiet line with the other
   roles' ways in. */
.hub-next { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: 1.1rem; }
.hub-next span { color: rgba(244, 242, 238, .72); font-size: .95rem; max-width: 40ch; }
@media (min-width: 720px) and (max-width: 999.98px) { .hub .hub-tiles-4 .hub-tile-wide { grid-row: auto; } }
.hub-also { margin: .9rem 0 0; color: var(--ink-2); font-size: .92rem; }
.hub-also a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.hub-also a:hover { color: var(--ink); }
@media (max-width: 719.98px) { .hub-next .btn-lg { width: 100%; text-align: center; } }