/* Community Prompt Center — Phase 1. Black-slate chalkboard, dark glass, violet/orange accents.
   All scoped under .pc-* to avoid touching the rest of the site. */

.pc-main { background: #0d0d10; overflow-x: clip; }
.pc-main, .pc-root, .pc-root *, .pc-root *::before, .pc-root *::after { box-sizing: border-box; }
.pc-root { min-width: 0; }
.pc-root *, .pc-root *::before, .pc-root *::after { min-width: 0; }
.pc-root {
    --pc-violet: #a78bfa; --pc-violet-d: #8b5cf6; --pc-orange: #ff7a33; --pc-green: #34d399;
    --pc-ink: #f2f0ea; --pc-mut: rgba(255,255,255,.6); --pc-line: rgba(255,255,255,.1);
    --pc-glass: rgba(8,8,11,.58); --pc-sans: 'Space Grotesk','Inter',system-ui,sans-serif;
    --pc-chalk: 'Caveat','Segoe Print','Bradley Hand',cursive;
    background: #0d0d10; color: var(--pc-ink); font-family: var(--pc-sans);
    max-width: 1180px; margin: 0 auto; padding: 16px 20px 4rem;
    display: flex; flex-direction: column; gap: 44px;
}
.pc-eyebrow { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--pc-violet); font-weight: 600; }

/* HERO */
.pc-hero { position: relative; overflow: hidden; border: 1px solid var(--pc-line); border-radius: 18px; padding: 40px 28px 34px; background: #0c0c0f; }
.pc-wall { position: absolute; inset: 0; opacity: .09; pointer-events: none; overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent); }
.pc-wall-col { position: absolute; top: 0; font-family: var(--pc-chalk); font-size: 30px; line-height: 1.75; white-space: nowrap; color: #fff; animation: pc-drift 26s linear infinite; }
@keyframes pc-drift { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.pc-hero-inner { position: relative; z-index: 1; }
.pc-kick { display: inline-block; margin-bottom: 10px; }
.pc-title { font-size: clamp(1.9rem, 4.5vw, 3rem); font-weight: 600; line-height: 1.05; margin: 0 0 12px; color: #fff; letter-spacing: -.02em; max-width: 20ch; }
.pc-count { display: inline-flex; align-items: baseline; gap: 8px; background: var(--pc-glass); border: 1px solid var(--pc-line); border-radius: 12px; padding: 7px 14px; margin-bottom: 14px; }
.pc-count-n { font-size: 1.6rem; font-weight: 700; color: var(--pc-violet); font-variant-numeric: tabular-nums; }
.pc-count-l { font-size: 13px; color: var(--pc-mut); }
.pc-intro { color: var(--pc-mut); font-size: 1.02rem; line-height: 1.6; max-width: 62ch; margin: 0 0 18px; }
.pc-search { max-width: 440px; margin-bottom: 14px; }
.pc-search input { width: 100%; background: var(--pc-glass); border: 1px solid rgba(255,255,255,.16); border-radius: 12px; padding: 12px 16px; color: #fff; font-size: 15px; font-family: inherit; }
.pc-search input::placeholder { color: rgba(255,255,255,.45); }
.pc-search input:focus { outline: 2px solid var(--pc-violet); outline-offset: 1px; border-color: transparent; }
.pc-portals { display: flex; gap: 8px; flex-wrap: wrap; }
.pc-portal { font-family: inherit; font-size: 13px; padding: 7px 15px; border-radius: 22px; background: rgba(8,8,11,.55); border: 1px solid var(--pc-line); color: rgba(255,255,255,.82); cursor: pointer; transition: all .18s ease; }
.pc-portal:hover { border-color: rgba(255,255,255,.28); color: #fff; }
.pc-portal.active { background: rgba(139,92,246,.22); border-color: rgba(139,92,246,.6); color: #c4b5fd; }

/* TOP TOOLS */
.pc-tools { margin: 0; }
.pc-tools-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.pc-tools-sub { font-size: 13px; color: var(--pc-mut); }
.pc-tools-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 860px) { .pc-tools-grid { grid-template-columns: repeat(2, 1fr); } }
.pc-tool { position: relative; display: block; border-radius: 16px; overflow: hidden; text-decoration: none; aspect-ratio: 3 / 4;
    background: #15151a; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    border: 2px solid var(--edge, rgba(255,255,255,.22));
    box-shadow: 0 6px 22px -12px var(--edge, rgba(255,255,255,.22)); }
.pc-tool:hover { transform: translateY(-4px); border-color: var(--edgeon, rgba(255,255,255,.55)); box-shadow: 0 14px 36px -10px var(--edgeon, rgba(255,255,255,.55)); }
.pc-tool-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pc-tool-ov { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.88) 4%, rgba(0,0,0,.15) 55%, rgba(0,0,0,0) 100%); }
.pc-tool-meta { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 14px; text-align: center; z-index: 2; }
.pc-tool-name { display: block; font-weight: 800; color: #fff; font-size: 17px; text-transform: uppercase; letter-spacing: .02em; text-shadow: 0 1px 8px rgba(0,0,0,.7); }
/* Colore dalla palette in base.css; il fallback in :where() e' (0,1,0) e non le fa mai ombra. */
:where(.pc-tool-badge) { background: #3a3a44; color: #fff; }
.pc-tool-badge { display: inline-block; margin-top: 6px; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; }
.pc-tool-cta { display: block; margin-top: 11px; font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--btntx, #fff); background: var(--btn, rgba(255,255,255,.14)); border: 1px solid var(--btnbrd, rgba(255,255,255,.28)); padding: 10px; border-radius: 9px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
@media (max-width: 560px) { .pc-tool-meta { padding: 12px 10px; } .pc-tool-name { font-size: 14px; } .pc-tool-badge { font-size: 9px; } .pc-tool-cta { font-size: 9.5px; padding: 8px; } }
.pc-tool, .pc-tool:hover, .pc-tool:focus, .pc-tool:visited { text-decoration: none; }
.pc-root a:hover, .pc-root a:focus { text-decoration: none; }

/* LIBRARY */
.pc-library { margin: 0; }
.pc-lib-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.pc-lib-count { font-size: 13px; color: var(--pc-mut); font-variant-numeric: tabular-nums; }
.pc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 14px; }
.pc-empty { grid-column: 1/-1; text-align: center; color: var(--pc-mut); padding: 3rem 1rem; }

.pc-card { display: flex; flex-direction: column; gap: 10px; background: var(--pc-glass); border: 1px solid var(--pc-line); border-radius: 14px; padding: 15px; }
.pc-card-badges { display: flex; gap: 6px; }
.pc-badge { font-size: 10px; letter-spacing: .04em; padding: 3px 8px; border-radius: 6px; background: rgba(96,165,250,.15); color: #93c5fd; }
.pc-badge-cat[data-cat="straight"] { background: rgba(248,113,113,.16); color: #fca5a5; }
.pc-badge-cat[data-cat="hentai"] { background: rgba(249,168,212,.16); color: #f9a8d4; }
.pc-badge-cat[data-cat="gay"] { background: rgba(74,222,128,.16); color: #86efac; }
.pc-badge-cat[data-cat="lesbian"] { background: rgba(192,132,252,.16); color: #d8b4fe; }
.pc-badge-cat[data-cat="shemale"] { background: rgba(255,122,51,.16); color: #ffb488; }
.pc-card-text { font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,.82); margin: 0; overflow-wrap: anywhere; max-height: 7.5em; overflow-y: auto; padding-right: 4px; }
.pc-card-custom { font-size: 12px; line-height: 1.45; color: rgba(255,255,255,.45); margin: 0; overflow-wrap: anywhere; max-height: 4.6em; overflow-y: auto; padding-right: 4px; }
.pc-card-custom span { color: var(--pc-green); }
.pc-card-text::-webkit-scrollbar, .pc-card-custom::-webkit-scrollbar { width: 6px; }
.pc-card-text::-webkit-scrollbar-thumb, .pc-card-custom::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 3px; }
.pc-card-text, .pc-card-custom { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.22) transparent; }
.pc-card-actions { display: flex; align-items: center; gap: 7px; margin-top: auto; transition: gap .3s ease; }
/* Remix dropped its "Remix" label on 2026-07-30 to match the other two icon buttons, and now
   carries a violet spark instead. Neutral ground like copy and share: what tells the three apart
   is the icon hue, violet for the generator, plain for copy, orange for share. */
.pc-remix { flex: 1 1 0; min-width: 0; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; height: 34px; text-decoration: none; border-radius: 8px; background: rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.14); transition: flex-grow .3s ease, padding .3s ease, margin .3s ease, border-width .3s ease, opacity .22s ease, background .18s ease; }
.pc-remix:hover { background: rgba(139,92,246,.22); border-color: rgba(139,92,246,.5); }
.pc-remix .pc-ic { color: var(--pc-violet); }
.pc-remix:hover .pc-ic { color: #d6c6ff; }
.pc-icon-btn { display: inline-flex; align-items: center; justify-content: center; flex: 1 1 0; min-width: 0; overflow: hidden; height: 34px; font-size: 15px; border-radius: 8px; background: rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.8); cursor: pointer; transition: flex-grow .3s ease, padding .3s ease, margin .3s ease, border-width .3s ease, opacity .22s ease, background .18s ease, color .18s ease; }
.pc-icon-btn:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.3); color: #fff; }
.pc-copy:hover .pc-ic { color: #fff; }
/* Share keeps its orange, but on the icon only: the filled orange button competed with the gold
   quick, while a dimmed icon read as broken. Hue separates the two actions, brightness does not.
   Icons are line art now (see madeprompt_cl_share_icon_svg), so they take colour from currentColor. */
.pc-ic { display: inline-flex; align-items: center; justify-content: center; line-height: 0; }
.pc-ic svg { width: 16px; height: 16px; display: block; }
.pc-share .pc-ic { color: var(--pc-orange); }
.pc-share:hover { background: rgba(255,87,0,.16); border-color: rgba(255,87,0,.5); }
.pc-share:hover .pc-ic { color: #ff9457; }
.pc-icon-btn.copied, .pc-share.copied { background: rgba(52,211,153,.2); border-color: rgba(52,211,153,.45); color: var(--pc-green); }
.pc-share.copied .pc-ic { color: var(--pc-green); }

/* Quick "try on tool" — gold glass bolt. On tap, the other actions COLLAPSE (they don't get
   overlapped or squashed) and the button fills the row; bolt sits left of the brand name. */
.pc-card-actions.pc-tool-open { gap: 0; }
.pc-card-actions.pc-tool-open .pc-remix,
.pc-card-actions.pc-tool-open .pc-icon-btn { flex-grow: 0; opacity: 0; padding-left: 0; padding-right: 0; margin: 0; border-width: 0; pointer-events: none; }
.pc-quick { flex: 1.9 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; height: 34px; border-radius: 8px; border: 1px solid rgba(255,207,51,.45); background: rgba(255,207,51,.10); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: background .25s ease, border-color .25s ease; }
.pc-quick:hover { background: rgba(255,207,51,.18); border-color: rgba(255,207,51,.7); }
.pc-card-actions.pc-tool-open .pc-quick { background: rgba(255,207,51,.08); }
.pc-quick-tg { order: 1; flex: none; width: 32px; height: 32px; display: grid; place-items: center; border: 0; background: none; padding: 0; margin: 0; cursor: pointer; color: #ffcf33; }
.pc-quick-tg svg { width: 18px; height: 18px; display: block; }
/* Warm ivory rather than the brand's own colour: an orange brand name inside a gold border was
   three warm tones fighting in one row. visibility keeps the link out of the tab order while it
   is folded away, delayed on close so the name still fades instead of popping. */
.pc-quick-nm { order: 2; flex: none; white-space: nowrap; max-width: 0; opacity: 0; padding: 0; overflow: hidden; visibility: hidden; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--tool-ink, #fff2c2); text-decoration: none; transition: max-width .3s ease, opacity .22s ease, padding .3s ease, visibility 0s linear .3s; }
.pc-card-actions.pc-tool-open .pc-quick-nm { max-width: 240px; opacity: 1; padding-left: 8px; visibility: visible; transition: max-width .3s ease, opacity .22s ease, padding .3s ease, visibility 0s; }
.pc-card-actions.pc-tool-open .pc-quick { cursor: pointer; }

.pc-loadmore-wrap { text-align: center; margin-top: 26px; }
.pc-loadmore { font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: .04em; padding: 11px 26px; border-radius: 10px; background: var(--pc-glass); border: 1px solid var(--pc-line); color: #fff; cursor: pointer; transition: all .18s ease; }
.pc-loadmore:hover { border-color: rgba(255,255,255,.3); }

/* PASSWORD GATE (private preview) */
.pc-gate { display: flex; align-items: center; justify-content: center; min-height: 60vh; }
.pc-gate-card { background: var(--pc-glass); border: 1px solid var(--pc-line); border-radius: 16px; padding: 32px 28px; max-width: 440px; width: 100%; }
.pc-gate-card .post-password-form { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.pc-gate-card p { color: var(--pc-mut); font-size: 14px; line-height: 1.55; margin: 0; }
.pc-gate-card label { color: #fff; font-size: 14px; display: flex; flex-direction: column; gap: 8px; }
.pc-gate-card input[type="password"] { background: rgba(8,8,11,.6); border: 1px solid rgba(255,255,255,.16); border-radius: 10px; padding: 11px 14px; color: #fff; font-size: 15px; font-family: inherit; }
.pc-gate-card input[type="password"]:focus { outline: 2px solid var(--pc-violet); outline-offset: 1px; border-color: transparent; }
.pc-gate-card input[type="submit"] { align-self: flex-start; background: rgba(139,92,246,.28); border: 1px solid rgba(139,92,246,.6); color: #c4b5fd; font-weight: 600; font-family: inherit; padding: 10px 22px; border-radius: 10px; cursor: pointer; transition: all .18s ease; }
.pc-gate-card input[type="submit"]:hover { background: rgba(139,92,246,.4); color: #fff; }

/* ============ PHASE 2: engagement ============ */
/* Hotness flame on cards */
.pc-card-badges { align-items: center; }
.pc-hot { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; color: #ffb488; background: rgba(255,122,51,.14); border: 1px solid rgba(255,122,51,.3); border-radius: 8px; padding: 2px 7px; font-variant-numeric: tabular-nums; }
.pc-hot[hidden] { display: none; }

/* "Online now" pill */
.pc-online { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: rgba(255,255,255,.72); }
.pc-online-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pc-green); animation: pc-pulse 2.4s ease-out infinite; }
#pc-online-n { color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Activity ticker */
.pc-ticker { display: flex; align-items: center; gap: 9px; margin-top: 16px; min-height: 20px; font-size: 12.5px; color: rgba(255,255,255,.62); }
.pc-ticker[aria-hidden="true"]:empty { display: none; }
.pc-ticker-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--pc-orange); }
.pc-ticker-txt { animation: pc-fadein .5s ease; }
@keyframes pc-fadein { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }

/* Sort toggle (Newest / Trending) + library sub-line */
.pc-lib-head { justify-content: space-between; align-items: center; margin-bottom: 0; }
.pc-sort { display: inline-flex; gap: 4px; background: rgba(8,8,11,.55); border: 1px solid var(--pc-line); border-radius: 22px; padding: 3px; }
.pc-sort-btn { font-family: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 14px; border-radius: 18px; background: transparent; border: none; color: rgba(255,255,255,.66); cursor: pointer; transition: all .18s ease; }
.pc-sort-btn:hover { color: #fff; }
.pc-sort-btn.active { background: rgba(139,92,246,.24); color: #c4b5fd; }
.pc-lib-sub { display: flex; align-items: baseline; gap: 12px; margin: 10px 0 16px; flex-wrap: wrap; }

@media (max-width: 640px) {
    .pc-hero { padding: 30px 18px 26px; }
    .pc-grid { grid-template-columns: minmax(0, 1fr); }
    .pc-wall-col:nth-child(3) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .pc-wall-col { animation: none; }
    .pc-fresh-dot { animation: none; }
}

/* ── Full-bleed slate: neutralise the theme's grey body gradient on THIS page only.
   The grey is the <body> diagonal gradient (base.css) showing through the already
   transparent header, above where .pc-main starts. Scoped to page-id-452. */
html:has(body.page-id-452) { background: #0d0d10 !important; }
body.page-id-452 { background: #0d0d10 !important; }
body.page-id-452 .site-header,
body.page-id-452 .header-gradient-background { background: transparent !important; }

/* ── Count row + freshness signal */
.pc-count-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.pc-count-row .pc-count { margin-bottom: 0; }
.pc-fresh { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: rgba(255,255,255,.7); }
.pc-fresh-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pc-green); animation: pc-pulse 2.4s ease-out infinite; }
@keyframes pc-pulse { 0% { box-shadow: 0 0 0 0 rgba(52,211,153,.55); } 70% { box-shadow: 0 0 0 7px rgba(52,211,153,0); } 100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); } }

/* ── Category chip counts */
.pc-portal { display: inline-flex; align-items: center; gap: 7px; }
.pc-portal-n { font-size: 11px; font-variant-numeric: tabular-nums; color: rgba(255,255,255,.5); background: rgba(255,255,255,.07); padding: 1px 7px; border-radius: 10px; }
.pc-portal.active .pc-portal-n { color: #c4b5fd; background: rgba(139,92,246,.25); }

/* ── Real headings that keep the eyebrow look */
.pc-h2 { margin: 0; font-weight: 600; }

/* ── Live result feedback (also read by screen readers) */
.pc-status { min-height: 1em; margin: 0 0 12px; font-size: 12.5px; color: var(--pc-mut); font-variant-numeric: tabular-nums; }
.pc-status:empty { display: none; }

/* ── Closing editorial block (glass card, centred like the rest of the site) */
.pc-about { margin: 0; background: var(--pc-glass); border: 1px solid var(--pc-line); border-radius: 18px; padding: 34px 36px; }
.pc-about-title { text-align: center; font-size: 1.5rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #fff; margin: 0 0 20px; }
.pc-about-p { color: var(--pc-mut); font-size: 15px; line-height: 1.7; margin: 0 auto 14px; max-width: 72ch; text-align: center; }
.pc-about-p:last-child { margin-bottom: 0; }

/* ── This page ignores the theme's brightness toggle (it is always dark) */
body.page-id-452 .nav-brightness-control { display: none !important; }

/* ── Closing CTA to the generator */
.pc-cta { margin: 0; }
.pc-cta-inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; background: linear-gradient(135deg, rgba(139,92,246,.14), rgba(8,8,11,.5)); border: 1px solid rgba(139,92,246,.3); border-radius: 16px; padding: 28px 26px; }
.pc-cta-title { font-size: 1.25rem; font-weight: 600; color: #fff; margin: 0 0 6px; }
.pc-cta-sub { color: var(--pc-mut); font-size: 14px; line-height: 1.55; margin: 0 auto; max-width: 52ch; }
.pc-cta-btn { flex-shrink: 0; text-decoration: none; font-weight: 600; font-size: 14px; padding: 13px 24px; border-radius: 11px; background: rgba(139,92,246,.28); border: 1px solid rgba(139,92,246,.6); color: #c4b5fd; transition: all .18s ease; white-space: nowrap; }
.pc-cta-btn:hover { background: rgba(139,92,246,.42); color: #fff; transform: translateY(-1px); }

@media (max-width: 640px) {
    .pc-root { gap: 30px; padding: 10px 16px 3rem; }
    /* Centered, tidy mobile presentation */
    .pc-hero-inner { text-align: center; }
    .pc-title, .pc-intro { max-width: none; }
    .pc-count-row { gap: 9px; justify-content: center; }
    .pc-portals { justify-content: center; }
    /* Title and its description stack instead of sitting side by side, otherwise the row
       wraps and reads off-centre on a phone. Same treatment as .pc-lib-head below. */
    .pc-tools-head { flex-direction: column; align-items: center; gap: 4px; text-align: center; }
    .pc-lib-head { flex-direction: column; align-items: center; gap: 10px; }
    .pc-lib-sub, .pc-ticker { justify-content: center; }
    .pc-search { margin-left: auto; margin-right: auto; }
    .pc-about { padding: 24px 20px; }
    .pc-about-title { text-align: center; }
    .pc-cta-inner { flex-direction: column; align-items: center; text-align: center; }
    .pc-cta-sub { max-width: none; }
    .pc-cta-btn { width: 100%; text-align: center; }
}

/* The three "keep going" boxes at the foot of the hub.
   On a phone each one was a third of a screen tall: icon on its own line, title, paragraph, button,
   all centred. Three of those in a column is a lot of scrolling for what is a signpost. Below 640px
   they turn horizontal, icon left and text right, which fits all three in roughly one screen and
   keeps the tap targets full width. The inline styles on these elements are colour only; layout
   lives here, hence the !important, which is what it takes to beat a style attribute. */
@media (max-width: 640px) {
    .pc-cta-box {
        display: grid !important;
        grid-template-columns: 44px 1fr;
        grid-template-areas: "icon title" "icon text" "cta cta";
        align-items: center;
        column-gap: 13px;
        row-gap: 2px;
        padding: 15px 16px !important;
        text-align: left !important;
    }
    .pc-cta-box > span:not([class]) { grid-area: icon; width: 40px !important; height: 40px !important; margin-bottom: 0 !important; }
    .pc-cta-box > span:not([class]) svg { width: 19px !important; height: 19px !important; }
    .pc-cta-box h3 { grid-area: title; font-size: 14.5px !important; margin: 0 !important; line-height: 1.25; }
    .pc-cta-box p  { grid-area: text;  font-size: 12px !important; margin: 0 !important; line-height: 1.4; }
    .pc-cta-box a  { grid-area: cta;   margin-top: 12px; text-align: center; }
    .pc-cta-box .gf-new { top: -9px !important; right: 12px !important; }
}