@charset "utf-8";
/* ==========================================================================
   gayfetishgoth.com — page builder blocks
   The sections, columns and widgets the admin page builder places on a page
   (Admin > Writing and Blog > Page builder). Loaded by every page published
   from the builder, after /_css/gfg-titles.css, and inside the builder's own
   canvas so what you see while editing is what visitors get.
     <link href="/_css/gfg-blocks.css" rel="stylesheet" type="text/css">
   Colours come from the tokens in gfg-titles.css / gfg.css, with fallbacks so
   a page still reads right if that file is late or missing.

   Sections
     1. Page ground and the builder's page column
     2. Sections: widths, spacing and background colour schemes
     3. Columns
     4. Script titles: left-aligned with the text, swashes hanging out
     5. Text: lede, meta line, small print, eyebrow, text colours
     6. Widgets: cards, callouts, contents box, buttons, lists, table,
        timeline, Q&A, divider, images, logos, icons, "leave now"
   ========================================================================== */


/* 1. Page ground ----------------------------------------------------------- */
:root {
	--gb-ink:       #e9e9ed;
	--gb-ink-muted: #c4bad4;
	--gb-ink-faint: var(--gfg-silver-mid, #8e8e97);
	--gb-black:     var(--gfg-black, #000000);
	--gb-panel:     var(--gfg-panel, #0d0a12);
	--gb-line:      #2a2233;
	--gb-line-soft: #211a2a;
	--gb-900:       var(--gfg-purple-900, #320064);
	--gb-800:       var(--gfg-purple-800, #410e5c);
	--gb-700:       var(--gfg-purple-700, #4e019d);
	--gb-600:       var(--gfg-purple-600, #5f06b8);
	--gb-500:       var(--gfg-purple-500, #7c08ed);
	--gb-300:       var(--gfg-purple-300, #9d73e3);
	--gb-200:       var(--gfg-purple-200, #b5abfc);
	--gb-blue:      var(--gfg-blue, #7b92fb);
	--gb-pink:      #e0457b;
	--gb-silver:    var(--gfg-silver, #d9d9de);
}

html { background: #000000; }

main.gfg-page {
	max-width: none;
	margin: 0;
	padding: 0;
	color: var(--gb-ink);
	font-family: 'Inter', sans-serif;
	font-weight: 300;
	font-size: 16px;
	line-height: 1.7;
	/* the titles' swashes hang into the side gutters; clip only at the screen edge */
	overflow-x: clip;
}
.gfg-page a { color: #ffffff; text-decoration-color: rgba(181, 171, 252, .45); text-underline-offset: 3px; }
.gfg-page a:hover { color: var(--gb-200); }
.gfg-page p { margin: 0 0 14px; }
.gfg-page strong, .gfg-page b { color: #ffffff; font-weight: 600; }
.gfg-page img { max-width: 100%; height: auto; }
.gfg-page :focus-visible { outline: 1px solid var(--gb-300); outline-offset: 3px; }


/* 2. Sections --------------------------------------------------------------- */
/* <section class="gfg-section bg-black w-narrow pad-m"><div class="gfg-wrap">…</div></section> */
.gfg-section { position: relative; padding: 32px 22px; }
.gfg-section.pad-s { padding-top: 16px; padding-bottom: 16px; }
.gfg-section.pad-l { padding-top: 56px; padding-bottom: 56px; }
.gfg-section.pad-0 { padding-top: 0; padding-bottom: 0; }
.gfg-wrap { max-width: 820px; margin: 0 auto; }
.gfg-section.w-wide .gfg-wrap { max-width: 1100px; }
.gfg-section.w-full .gfg-wrap { max-width: none; }
.gfg-wrap > :last-child { margin-bottom: 0; }

/* background colour schemes */
.bg-black   { background: var(--gb-black); }
.bg-panel   { background: var(--gb-panel); border-top: 1px solid var(--gb-line-soft); border-bottom: 1px solid var(--gb-line-soft); }
.bg-deep    { background: var(--gb-900); }
.bg-perse   { background: var(--gb-800); }
.bg-plum    { background: linear-gradient(180deg, var(--gb-700), var(--gb-900)); }
.bg-fade    { background: linear-gradient(90deg, var(--gb-800) 0%, rgba(65, 14, 92, .45) 55%, rgba(65, 14, 92, 0) 100%); }
.bg-glow    { background: radial-gradient(ellipse at 50% 0%, rgba(124, 8, 237, .35), rgba(0, 0, 0, 0) 65%), var(--gb-black); }
.bg-night   { background: #161826; }
.bg-velvet  { background: #232532; }
.bg-midnight { background: linear-gradient(180deg, #262a60 0%, #161826 100%); }
.bg-sinister { background: linear-gradient(90deg, #410e5c 0%, #1a0627 55%, #000000 100%); }
.bg-indigo  { background: radial-gradient(circle at 50% 40%, #353b80, #161826 75%); }
.bg-ube     { background: var(--gb-300); color: #120a1c; }
.bg-silver  { background: linear-gradient(180deg, #f4f4f8 0%, #c9c7d2 55%, #9a98a6 100%); color: #0d0a12; }
.bg-chrome  {
	background: var(--gb-black);
	border-top: 2px solid transparent; border-bottom: 2px solid transparent;
	border-image: linear-gradient(90deg, #7b7987, #f7f7fb 30%, #8c8a97 60%, #e4e4ea) 1;
}
/* light grounds take dark text, links and lines */
.bg-ube a, .bg-silver a { color: #2a0a4a; text-decoration-color: rgba(42, 10, 74, .45); }
.bg-ube strong, .bg-silver strong { color: #000000; }
.bg-ube .gfg-meta, .bg-silver .gfg-meta, .bg-ube .gfg-small, .bg-silver .gfg-small { color: #3a2d4c; }


/* 3. Columns --------------------------------------------------------------- */
.cols-grid { display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr); margin: 0 0 14px; align-items: start; }
.cols-grid > .col { min-width: 0; }
.cols-grid > .col > :last-child { margin-bottom: 0; }
.cols-grid.v-center { align-items: center; }
.cols-grid.gap-s { gap: 12px; }
.cols-grid.gap-l { gap: 36px; }
@media (min-width: 641px) {
	.cols-2   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cols-3   { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.cols-4   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cols-2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
	.cols-1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
}
@media (min-width: 900px) {
	.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}


/* 4. Script titles ---------------------------------------------------------- */
/* Freebooter overhangs its box by up to 0.92em on the left, 0.82em on the right
   and 0.61em below, and the chrome fill (background-clip: text) only paints
   inside the box. Each title gets 1em of padding that sits outside the text
   column (negative margins): the letters line up with the paragraphs and the
   swashes hang out into the margin instead of being cut off. */
.gfg-page .t1, .gfg-page .t2, .gfg-page .t3 {
	text-align: left;
	padding: 0.15em 1em 0.4em;
	margin-left: -1em;
	margin-right: -1em;
	line-height: 1.8;
}
.gfg-page .t1 { margin-top: 0; margin-bottom: 0.05em; }
.gfg-page .t2 { margin-top: 0.3em; margin-bottom: 14px; }
.gfg-page .t2::after { margin: 0.05em 0 0; }
.gfg-page .t3 { margin-top: 0.4em; margin-bottom: 4px; }
.gfg-page .t1.center, .gfg-page .t2.center, .gfg-page .t3.center { text-align: center; }
.gfg-page .t1a, .gfg-page .t1b, .gfg-page .t1c { padding: 0.15em 1em 0.4em; margin-left: -1em; line-height: 1.8; }
.gfg-page .t1a.center, .gfg-page .t1b.center, .gfg-page .t1c.center { margin-left: auto; margin-right: auto; }
/* the T3 inside a card sits at the card's own padding */
.gfg-card > .t3:first-child { margin-top: 0.2em; }


/* 5. Text --------------------------------------------------------------------- */
.gfg-lede { font-size: 17.5px; margin: 0 0 14px; }
.gfg-meta { font-family: 'Manrope', sans-serif; font-size: 12px; letter-spacing: 0.05em; color: var(--gb-ink-faint); margin: 0 0 26px; }
.gfg-small { font-size: 13.5px; color: var(--gb-ink-muted); }
.gfg-eyebrow { display: block; font-family: 'Manrope', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gb-ink-faint); margin: 0 0 8px; }
.gfg-heading { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 19px; color: #ffffff; margin: 18px 0 8px; line-height: 1.35; }
.gfg-center { text-align: center; }

/* text colours (Word style menu): the named brand palette from Admin > Colors */
.gfg-c-black       { color: #000000; }
.gfg-c-night       { color: #161826; }
.gfg-c-velvet      { color: #232532; }
.gfg-c-midnight    { color: #262a60; }
.gfg-c-perse       { color: #410e5c; }
.gfg-c-amethystine { color: #7c08ed; }
.gfg-c-ube         { color: var(--gb-300); }
.gfg-c-bruise      { color: #9184d9; }
.gfg-c-lavender    { color: var(--gb-200); }   /* Alabaster */
.gfg-c-blue        { color: var(--gb-blue); }  /* Zomby, Taier's voice */
.gfg-c-silver      { color: var(--gb-silver); }
.gfg-c-bone        { color: #e9e9ed; }
.gfg-c-pink        { color: var(--gb-pink); }
.gfg-c-faint       { color: var(--gb-ink-faint); }
/* script titles fill their letters with a clipped gradient, so a coloured word inside one
   needs its own fill to show (likewise the highlight) */
[class*="gfg-c-"]:not(.gfg-c-chrome):not(.gfg-c-purple-fade), .gfg-mark { -webkit-text-fill-color: currentColor; }

/* gradient text (Word style menu), from the gradients on Admin > Colors.
   box-decoration-break keeps the gradient whole on each line when words wrap. */
.gfg-text-gradient, .gfg-c-chrome, .gfg-c-purple-fade, .gfg-g-lavender-silver, .gfg-g-t1a, .gfg-g-t1b, .gfg-g-t1c,
.gfg-g-violet-chrome, .gfg-g-emblem-silver, .gfg-g-midnight-bruise, .gfg-g-zomby-alabaster {
	color: transparent;
	-webkit-background-clip: text; background-clip: text;
	-webkit-box-decoration-break: clone; box-decoration-break: clone;
}
/* "Gradient accent": the same silver-to-plum gradient as the classic editor's style of that name */
.gfg-text-gradient      { background-image: linear-gradient(120deg, #c9c5d4, #7d5aa8 70%); }
.gfg-c-chrome           { background-image: linear-gradient(180deg, #ffffff 0%, #d9d9de 30%, #4a4a52 52%, #d9d9de 70%, #8e8e97 100%); }
.gfg-c-purple-fade      { background-image: linear-gradient(90deg, var(--gb-200), var(--gb-500)); }
.gfg-g-lavender-silver  { background-image: linear-gradient(180deg, #ffffff 0%, #cfc6f2 45%, #9d73e3 100%); }
.gfg-g-t1a              { background-image: linear-gradient(90deg, #b5abfc 0%, #9d73e3 35%, #7c08ed 70%, #4e019d 100%); }
.gfg-g-t1b              { background-image: linear-gradient(180deg, #f1ecff 0%, #b5abfc 30%, #4e019d 52%, #9d73e3 72%, #5f06b8 100%); }
.gfg-g-t1c              { background-image: linear-gradient(90deg, #9d73e3 0%, #9d73e3 30%, #410e5c 80%, rgba(65, 14, 92, 0.35) 100%); }
.gfg-g-violet-chrome    { background-image: linear-gradient(180deg, #f5f4ff 0%, #d2cefd 30%, #5d5294 52%, #b5abfc 72%, #796cbf 100%); }
.gfg-g-emblem-silver    { background-image: linear-gradient(180deg, #e9e9ed 0%, #b4b5c0 40%, #7f8190 55%, #c9cad2 75%, #9a9caa 100%); }
.gfg-g-midnight-bruise  { background-image: linear-gradient(90deg, #262a60, #9184d9); }
.gfg-g-zomby-alabaster  { background-image: linear-gradient(90deg, #7b92fb, #b5abfc); }
.gfg-script { font-family: var(--gfg-font-script, "Freebooter Script", cursive); font-size: 1.5em; font-weight: normal; line-height: 1; }
.gfg-mark { background: rgba(124, 8, 237, .35); color: #ffffff; padding: 0 .2em; border-radius: 2px; }
.gfg-caps { font-family: 'Manrope', sans-serif; font-size: .78em; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.gfg-bigger { font-size: 1.2em; }
.gfg-smaller { font-size: .85em; }


/* 6. Widgets ------------------------------------------------------------------ */

/* cards: the purple-edged squares, in a grid of 2 or 3 */
.gfg-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin: 0 0 14px; }
@media (min-width: 641px) {
	.gfg-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.gfg-cards.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.gfg-card { border: 1px solid var(--gb-line); background: var(--gb-panel); padding: 4px 18px 14px; min-width: 0; }
.gfg-card p { margin: 4px 0 0; font-size: 15px; color: var(--gb-ink-muted); }
.gfg-card.plum  { background: var(--gb-800); border-color: var(--gb-700); }
.gfg-card.plum p { color: #e4dcf2; }
.gfg-card.deep  { background: var(--gb-900); border-color: var(--gb-600); }
.gfg-card.deep p { color: #e4dcf2; }
.gfg-card.glow  { box-shadow: 0 0 0 1px var(--gb-700), 0 6px 26px rgba(124, 8, 237, .28); }
.gfg-card.solid { background: var(--gb-500); border-color: var(--gb-300); }
.gfg-card.solid p { color: #ffffff; }

/* callouts */
.gfg-callout { border-left: 4px solid var(--gb-pink); background: rgba(224, 69, 123, .08); padding: 12px 18px; margin: 0 0 18px; }
.gfg-callout > :last-child { margin-bottom: 0; }
.gfg-callout-head { font-family: 'Manrope', sans-serif; font-weight: 700; color: #ffffff; margin: 0 0 4px; }
.gfg-callout.soft { border-left-color: var(--gb-300); background: rgba(124, 8, 237, .08); }
.gfg-callout.soft p { font-style: italic; }
.gfg-callout.blue { border-left-color: var(--gb-blue); background: rgba(123, 146, 251, .08); }
.gfg-danger { border: 1px solid #7a1f3a; border-left: 4px solid var(--gb-pink); background: linear-gradient(90deg, rgba(224, 69, 123, .14), rgba(65, 14, 92, .18) 60%, var(--gb-panel)); padding: 16px 20px; margin: 0 0 26px; }
.gfg-danger > :last-child { margin-bottom: 0; }
.gfg-danger .gfg-callout-head { font-size: 19px; margin-bottom: 6px; }

/* contents box */
.gfg-toc { border: 1px solid var(--gb-line); background: var(--gb-panel); padding: 14px 20px; margin: 0 0 30px; font-size: 14.5px; }
.gfg-toc ol, .gfg-toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; }
.gfg-toc a { color: var(--gb-ink); text-decoration: none; }
.gfg-toc a:hover { color: var(--gb-200); text-decoration: underline; }

/* chrome buttons: the site's silver border with a glimmer every 15s */
.gfg-buttons { text-align: center; margin: 30px 0 10px; }
.gfg-buttons.left { text-align: left; }
.gfg-btn {
	display: inline-block; padding: 12px 26px; margin: 4px; border-radius: 6px;
	color: #ffffff !important; font-family: 'Manrope', sans-serif; font-weight: 600; font-size: 15px; letter-spacing: .02em; text-decoration: none !important;
	--chrome-fill: linear-gradient(180deg, #7c2ca6, #410e5c);
	border: 2px solid transparent;
	background:
		var(--chrome-fill) padding-box,
		linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .95) 50%, transparent 60%) border-box,
		linear-gradient(135deg, #f4f4f8 0%, #9a98a6 16%, #e9e9ef 32%, #7b7987 48%, #f7f7fb 64%, #8c8a97 80%, #e4e4ea 100%) border-box;
	background-size: auto, 250% 100%, auto;
	background-repeat: no-repeat;
	box-shadow: 0 2px 14px rgba(65, 14, 92, .4);
	animation: gfg-btn-glimmer 15s linear infinite;
}
.gfg-btn:hover { box-shadow: 0 4px 20px rgba(65, 14, 92, .55); }
.gfg-btn.black { --chrome-fill: linear-gradient(180deg, #1a1622, #000000); }
.gfg-btn.ghost { background: none; border: 1px solid var(--gb-line); color: var(--gb-ink-muted) !important; box-shadow: none; animation: none; }
.gfg-btn.ghost:hover { border-color: var(--gb-300); color: #ffffff !important; }
@keyframes gfg-btn-glimmer {
	0%, 88% { background-position: 0 0, 0% 0, 0 0; }
	100% { background-position: 0 0, 100% 0, 0 0; }
}

/* lists */
ul.gfg-plain { margin: 8px 0 14px; padding-left: 20px; }
ul.gfg-plain li { margin: 0 0 8px; }
ul.gfg-plain li::marker { color: var(--gb-300); }
ul.gfg-kit { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px 22px; }
@media (min-width: 641px) { ul.gfg-kit.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
ul.gfg-kit li { padding-left: 20px; position: relative; font-size: 15px; }
ul.gfg-kit li::before { content: ""; position: absolute; left: 0; top: .55em; width: 9px; height: 9px; border: 1px solid var(--gb-300); transform: rotate(45deg); }
ul.gfg-links { list-style: none; margin: 0 0 14px; padding: 0; }
ul.gfg-links li { padding: 12px 0; border-bottom: 1px solid var(--gb-line-soft); }
ul.gfg-links li:last-child { border-bottom: 0; }
ul.gfg-links li > a:first-child { font-family: 'Manrope', sans-serif; font-weight: 600; color: #ffffff; }
ul.gfg-links .gfg-link-note { display: block; font-size: 15px; color: var(--gb-ink-muted); margin-top: 2px; }

/* timeline */
ul.gfg-timeline { list-style: none; margin: 14px 0; padding: 0 0 0 4px; border-left: 2px solid var(--gb-800); }
ul.gfg-timeline li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 0 0 12px 16px; position: relative; font-size: 15px; }
ul.gfg-timeline li::before { content: ""; position: absolute; left: -8px; top: .5em; width: 10px; height: 10px; border-radius: 50%; background: var(--gb-500); box-shadow: 0 0 8px var(--gb-500); }
ul.gfg-timeline .gfg-year { font-family: 'Manrope', sans-serif; font-weight: 700; color: var(--gb-200); }
@media (max-width: 640px) { ul.gfg-timeline li { grid-template-columns: minmax(0, 1fr); gap: 0; } }

/* table */
.gfg-table-wrap { overflow-x: auto; margin: 0 0 14px; }
table.gfg-tbl { width: 100%; border-collapse: collapse; font-size: 15px; }
.gfg-tbl th { text-align: left; font-family: 'Manrope', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gb-200); padding: 8px 10px; border-bottom: 1px solid var(--gb-line); }
.gfg-tbl td { padding: 9px 10px; border-bottom: 1px solid var(--gb-line-soft); vertical-align: top; color: var(--gb-ink-muted); }
.gfg-tbl td:first-child { color: var(--gb-ink); }

/* Q&A: Taier's answers in blue */
.gfg-qa { margin: 0 0 22px; }
.gfg-qa-q, .gfg-qa-a { position: relative; padding-left: 42px; min-height: 28px; }
.gfg-qa-q::before, .gfg-qa-a::before { position: absolute; left: 0; top: 2px; width: 28px; height: 28px; box-sizing: border-box; border-radius: 50%; text-align: center; font: 600 13px/26px 'Manrope', sans-serif; }
.gfg-qa-q::before { content: "Q"; background: var(--gb-800); border: 1px solid var(--gb-300); color: #ffffff; }
.gfg-qa-a::before { content: "A"; border: 1px solid var(--gb-blue); color: var(--gb-blue); }
.gfg-qa-q { margin-bottom: 12px; font-weight: 500; color: #ffffff; }
.gfg-qa-a { color: var(--gb-blue); }
.gfg-qa-q > :last-child, .gfg-qa-a > :last-child { margin-bottom: 0; }

/* quote */
blockquote.gfg-quote { margin: 20px 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--gb-300); font-style: italic; color: var(--gb-ink-muted); }
blockquote.gfg-quote cite { display: block; margin-top: 6px; font-style: normal; font-size: 13.5px; color: var(--gb-ink-faint); }

/* dividers */
hr.gfg-divider { border: 0; height: 2px; margin: 28px 0; background: linear-gradient(90deg, var(--gb-300) 0%, var(--gb-700) 40%, rgba(78, 1, 157, 0) 100%); }
hr.gfg-divider.chrome { height: 2px; background: linear-gradient(90deg, rgba(123, 121, 135, 0), #f7f7fb 30%, #8c8a97 60%, rgba(228, 228, 234, 0)); }
hr.gfg-divider.center { background: linear-gradient(90deg, rgba(78, 1, 157, 0), var(--gb-300) 50%, rgba(78, 1, 157, 0)); }

/* images and logos */
figure.gfg-figure { margin: 0 0 18px; }
figure.gfg-figure img { display: block; width: 100%; height: auto; border: 1px solid var(--gb-line); box-shadow: 0 4px 20px rgba(0, 0, 0, .6); }
figure.gfg-figure figcaption { font-size: 13.5px; color: var(--gb-ink-faint); margin-top: 6px; }
.gfg-logo { display: block; margin: 0 auto 18px; max-width: 100%; height: auto; }
.gfg-logo.left { margin-left: 0; }
.gfg-logo.s { width: 120px; } .gfg-logo.m { width: 240px; } .gfg-logo.l { width: 420px; }

/* icons: an inline SVG line glyph, sized with the text */
.gfg-icon { display: inline-flex; vertical-align: -0.2em; line-height: 1; }
.gfg-icon svg { width: 1.15em; height: 1.15em; }
.gfg-icon.lg svg { width: 2em; height: 2em; }
.gfg-icon.xl svg { width: 3.2em; height: 3.2em; }
.gfg-icon.c-ube { color: var(--gb-300); } .gfg-icon.c-lavender { color: var(--gb-200); }
.gfg-icon.c-silver { color: var(--gb-silver); } .gfg-icon.c-blue { color: var(--gb-blue); } .gfg-icon.c-pink { color: var(--gb-pink); }

/* anything as one link (the builder's "Link this to" setting): an empty link
   stretched over the section, card, paragraph or title, or a link around a picture. Links and buttons inside the block
   sit above it and still work on their own. */
.gfg-linked { position: relative; cursor: pointer; transition: box-shadow .15s ease, border-color .15s ease; }
.gfg-linked:hover { box-shadow: 0 0 0 1px var(--gb-300), 0 6px 24px rgba(124, 8, 237, .3); }
.gfg-img-link { display: block; }
.gfg-block-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.gfg-block-link:focus-visible { outline: 2px solid var(--gb-200); outline-offset: 3px; }
.gfg-linked a:not(.gfg-block-link), .gfg-linked button, .gfg-linked input, .gfg-linked select, .gfg-linked textarea { position: relative; z-index: 2; }

/* "leave now": a fixed quick-exit button; /_css/gfg-blocks.js wires it up */
.gfg-quick-exit { position: fixed; right: 16px; bottom: 16px; z-index: 9999; background: #7c08ed; color: #ffffff; border: 1px solid #9d73e3; border-radius: 999px; padding: 10px 18px; font: 600 14px 'Manrope', sans-serif; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, .5); }
.gfg-quick-exit:hover, .gfg-quick-exit:focus-visible { background: #9d73e3; outline: 2px solid #ffffff; outline-offset: 2px; }
.gfg-quick-exit small { display: block; font-weight: 400; font-size: 11px; opacity: .85; }

/* text brought over from the classic editor when a post moves to the builder:
   the classic post's plain headings, quotes and Q&A keep their look */
.gfg-text h1:not([class]), .gfg-text h2:not([class]), .gfg-text h3:not([class]) {
	font-family: 'Manrope', sans-serif; font-weight: 500; margin: 30px 0 14px;
	color: transparent; background: linear-gradient(120deg, #c9c5d4, #7d5aa8 70%); -webkit-background-clip: text; background-clip: text;
}
.gfg-text h1:not([class]) { font-size: 26px; }
.gfg-text h2:not([class]) { font-size: 22px; }
.gfg-text h3:not([class]) { font-size: 19px; }
.gfg-text p { margin: 0 0 18px; }
.gfg-text blockquote { border-left: 3px solid #7d5aa8; margin: 20px 0; padding: 4px 0 4px 18px; color: var(--gb-ink-faint); font-style: italic; }
.gfg-text .gfg-text-xl { font-family: 'Manrope', sans-serif; font-weight: 500; font-size: 26px; }
.gfg-text .gfg-text-lg { font-family: 'Manrope', sans-serif; font-weight: 500; font-size: 22px; }
.gfg-text .gfg-text-md { font-family: 'Manrope', sans-serif; font-weight: 500; font-size: 19px; }

@media (max-width: 640px) {
	.gfg-section { padding-left: 16px; padding-right: 16px; }
}
@media (prefers-reduced-motion: reduce) { .gfg-btn { animation: none; } }
@media print { .gfg-quick-exit { display: none !important; } }