/* AI Girlfriend Generator — soft pink, one hue only. Adaptive light/dark like the rest of the site.
   Scoped under .gf-root. Every box uses --pad / --rad / --gap so padding, corners and spacing
   stay identical everywhere on the page. */
.gf-root{
  --acc:#ff5a9e;--accrgb:255,90,158;--soft:#ff8fbb;--acctx:#ff9cc4;
  --surf:rgba(255,143,187,.045);--surfbrd:rgba(255,143,187,.15);
  --field:#1a1219;--muted:#a79aa2;--ink:#f2eaee;--hairline:rgba(255,143,187,.14);
  --pad:18px;--rad:14px;--gap:14px;
  position:relative;max-width:1180px;margin:0 auto;padding:0 20px 70px;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink)}
body.brightness-light .gf-root{
  --acctx:#c2185b;--surf:rgba(255,90,158,.06);--surfbrd:rgba(255,90,158,.22);
  --field:#fdf3f7;--muted:#6b5a63;--ink:#1a1015;--hairline:rgba(255,90,158,.16)}
.gf-root *{box-sizing:border-box}

/* No pink panel: a fixed, full-bleed veil of soft blooms over the site's own background, with
   nothing that draws an edge. Deliberately faint, it is atmosphere and not a colour field. */
.gf-root:before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(40% 32% at 10% 6%,rgba(255,90,158,.10),rgba(255,90,158,0) 72%),
    radial-gradient(34% 26% at 90% 20%,rgba(255,124,178,.07),rgba(255,124,178,0) 74%),
    radial-gradient(44% 30% at 28% 58%,rgba(255,90,158,.055),rgba(255,90,158,0) 76%),
    radial-gradient(32% 26% at 82% 78%,rgba(255,124,178,.065),rgba(255,124,178,0) 74%),
    radial-gradient(48% 24% at 46% 100%,rgba(255,90,158,.06),rgba(255,90,158,0) 76%)}
body.brightness-light .gf-root:before{
  background:
    radial-gradient(40% 32% at 10% 6%,rgba(255,90,158,.06),rgba(255,90,158,0) 72%),
    radial-gradient(34% 26% at 90% 20%,rgba(255,124,178,.045),rgba(255,124,178,0) 74%),
    radial-gradient(44% 30% at 28% 58%,rgba(255,90,158,.035),rgba(255,90,158,0) 76%),
    radial-gradient(32% 26% at 82% 78%,rgba(255,124,178,.04),rgba(255,124,178,0) 74%)}

/* Visible to screen readers only. */
.gf-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.gf-inner{position:relative;z-index:1}

/* ---- head ---- */
.gf-root .eyebrow{text-align:center;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--acctx);font-weight:700}
.gf-root h1{font-size:44px;line-height:1.04;margin:14px 0 12px;text-transform:uppercase;font-weight:800;text-align:center}
.gf-root h1 .g{color:var(--acctx)}
.gf-root .lead{text-align:center;color:var(--muted);max-width:56ch;margin:0 auto;font-size:15px;line-height:1.6}
.gf-free{display:inline-flex;gap:7px;margin:18px auto 0;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--acctx);background:rgba(var(--accrgb),.16);border:1px solid rgba(var(--accrgb),.5);
  padding:7px 15px;border-radius:999px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.gf-root .center{text-align:center}
@media(max-width:560px){.gf-root h1{font-size:31px}.gf-free{font-size:10px;letter-spacing:.04em;flex-wrap:wrap;justify-content:center}}
/* Same glass family as the brand and x-rated hero boxes, deliberately shorter: the panel below is
   already a box, and every pixel spent here pushes the tool itself further down the fold.
   The first child here is the eyebrow, not the h1, so the collapse targets whatever comes first
   rather than a named tag. Over-qualified on purpose, to win on specificity not source order. */
.gf-head{width:100%;background:rgba(var(--glass-rgb),.3);
  -webkit-backdrop-filter:blur(25px) saturate(200%);backdrop-filter:blur(25px) saturate(200%);
  border:none;border-radius:var(--rad);padding:2rem var(--box-padding-desktop);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  margin-bottom:1.5rem}
.gf-root .gf-head > *:first-child{margin-top:0}
.gf-root .gf-head > *:last-child{margin-bottom:0}
@media(max-width:640px){.gf-head{padding:1.25rem 1rem;margin-bottom:1rem}}

/* ---- section headings, shared ---- */
/* Same shape as .sec-title / .sec-sub on the other tool pages: uppercase, centred, 60px of air. */
.gf-h2{text-align:center;font-size:26px;font-weight:800;text-transform:uppercase;margin:60px 0 6px}
.gf-sub{text-align:center;color:var(--muted);font-size:14px;margin:0 auto 26px;max-width:52ch;line-height:1.55}

/* ---- shared box ---- */
.gf-glass{background:var(--surf);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--surfbrd)}
.gf-panel{margin:var(--gap) 0 0;border-radius:var(--rad);padding:var(--pad)}
.gf-label{display:block;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin:0 0 10px}
.gf-top>.gf-label{text-align:center}

/* ---- step 1: what do you want ---- */
.gf-top{margin-top:26px}
.gf-choice{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
@media(max-width:760px){.gf-choice{grid-template-columns:repeat(2,1fr)}}
.gf-choice button{background:var(--surf);border:1px solid var(--surfbrd);border-radius:var(--rad);padding:var(--pad);
  cursor:pointer;text-align:center;color:var(--ink);font:inherit;transition:.18s;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:5px}
.gf-choice button:hover{border-color:rgba(var(--accrgb),.6);background:rgba(var(--accrgb),.1)}
.gf-choice button[aria-checked="true"]{border-color:var(--acc);background:rgba(var(--accrgb),.18);
  box-shadow:inset 0 0 0 1px rgba(var(--accrgb),.4)}
.gf-choice .t{font-weight:800;font-size:13.5px;text-transform:uppercase;letter-spacing:.03em}
.gf-choice .d{font-size:12px;color:var(--muted);line-height:1.45}

/* ---- chips ---- */
.gf-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
/* Same component as .category-btn on the prompt generator: 12px corners, uppercase, glass, and a
   bright filled active state. Only the active glow is pink instead of white, to tie it to this page. */
.gf-chip{font-family:inherit;padding:.7rem 1.35rem;font-size:.82rem;font-weight:700;text-transform:uppercase;
  letter-spacing:1px;border:1px solid rgba(255,255,255,.15);border-radius:12px;cursor:pointer;
  transition:all .3s ease;background:rgba(var(--glass-rgb), .7);color:rgba(255,255,255,.8);
  -webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);
  box-shadow:0 4px 16px rgba(0,0,0,.2)}
.gf-chip:hover{background:rgba(var(--glass-hover-rgb), .75);border-color:rgba(255,255,255,.25);
  color:rgba(255,255,255,.95);box-shadow:0 6px 20px rgba(0,0,0,.3)}
/* Active is pink, not a white flash: the same family as the selected card above it, one step more
   solid so it still reads as a toggle. The border stays 1px in every state, otherwise the chip
   grew by two pixels when picked and shoved its neighbours along the row. */
.gf-chip[aria-checked="true"]{background:rgba(var(--accrgb),.3);border:1px solid var(--acc);
  color:#fff;font-weight:800;
  box-shadow:inset 0 0 0 1px rgba(var(--accrgb),.45),0 5px 20px -7px rgba(var(--accrgb),.9)}
.gf-chip[aria-checked="true"]:hover{background:rgba(var(--accrgb),.38)}
body.brightness-light .gf-chip{background:rgba(255,255,255,.7);border-color:rgba(0,0,0,.12);color:#3a2d34}
body.brightness-light .gf-chip:hover{background:rgba(255,255,255,.9);border-color:rgba(0,0,0,.2);color:#1a1015}
body.brightness-light .gf-chip[aria-checked="true"]{background:rgba(var(--accrgb),.17);border-color:var(--acc);
  color:var(--acctx);box-shadow:inset 0 0 0 1px rgba(var(--accrgb),.4)}

.gf-row{display:flex;flex-wrap:wrap;gap:22px;align-items:flex-start;margin-top:22px}
.gf-rowcol{flex:1;min-width:250px;text-align:center}
.gf-rowcol .gf-label{text-align:center}

/* ---- the two big buttons ---- */
/* Two buttons of equal weight. The pink one no longer shouts, and the details one stopped looking
   like a filter nobody needs: it carries an icon, a sub-line and its own colour. */
.gf-actions{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);margin-top:22px}
@media(max-width:700px){.gf-actions{grid-template-columns:1fr}}
.gf-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-height:84px;border:0;border-radius:var(--rad);padding:15px 20px;font:inherit;font-weight:800;
  font-size:14px;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;transition:.18s;text-align:center}
.gf-btn-ic{display:block;line-height:0}
.gf-btn-ic svg{width:20px;height:20px;display:block}
.gf-btn-tx{display:block}
.gf-btn-sub{display:block;font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:none;opacity:.72}
.gf-btn-main{background:var(--acc);color:#fff;box-shadow:0 4px 16px rgba(var(--accrgb),.26)}
.gf-btn-main:hover{background:var(--soft);box-shadow:0 7px 22px rgba(var(--accrgb),.36)}
.gf-btn-alt{background:rgba(var(--accrgb),.1);color:var(--acctx);border:1px solid rgba(var(--accrgb),.5);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.gf-btn-alt:hover{background:rgba(var(--accrgb),.19);border-color:var(--acc);color:#fff}

/* Glass, quiet, and only there once there is a character to release. It is the way out of the
   locked state, not an action anyone is looking for on arrival. */
.gf-reset-row{margin:12px 0 0;text-align:center}
.gf-reset{background:var(--surf);border:1px solid var(--surfbrd);color:var(--muted);font:inherit;
  font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:9px 20px;border-radius:10px;cursor:pointer;transition:.16s;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.gf-reset:hover{border-color:rgba(var(--accrgb),.5);color:var(--ink)}
.gf-reset[hidden]{display:none}
body.brightness-light .gf-btn-alt:hover{color:var(--acctx)}

/* Waiting, not broken: the row dims until a lane and a heat level exist. The generate buttons
   also stop responding, because generating before those two choices means inventing them. */
.gf-btn.is-idle,.gf-cta.is-idle{opacity:.5;filter:saturate(.45)}
.gf-btn-main.is-idle,.gf-cta-solid.is-idle{cursor:not-allowed;box-shadow:none}
.gf-btn-alt.is-idle{cursor:pointer}
.gf-btn.is-idle:hover,.gf-cta.is-idle:hover{opacity:.62}
.gf-btn-alt.is-idle:hover{opacity:.82}

/* When you press generate with nothing chosen, the group that is missing says so. */
@keyframes gfNeeds{0%,100%{box-shadow:0 0 0 0 rgba(var(--accrgb),0)}
  35%{box-shadow:0 0 0 5px rgba(var(--accrgb),.3)}}
.gf-chips.needs{border-radius:14px;animation:gfNeeds .85s ease-out 2}
@media(prefers-reduced-motion:reduce){.gf-chips.needs{animation:none;box-shadow:0 0 0 3px rgba(var(--accrgb),.45)}}


/* ---- accordion ---- */
.gf-sections{margin-top:26px;display:flex;flex-direction:column;gap:var(--gap)}
.gf-sec{border:1px solid var(--surfbrd);border-radius:var(--rad);background:var(--surf);overflow:hidden}
.gf-sec.is-off{opacity:.34;pointer-events:none}
/* Number, field count and caret are all generated content now. Generated content is not part of
   the document text, so the heading reads exactly "Face" while the row still shows everything.
   The number sits on .gf-sec so the button keeps its two pseudo-elements; pointer-events:none
   lets the click fall through to the button underneath it. */
.gf-sections{counter-reset:gfsec}
.gf-sec{counter-increment:gfsec}
.gf-sec::before{content:counter(gfsec);position:absolute;left:var(--pad);top:calc(var(--pad) + 1px);
  width:26px;height:26px;border-radius:8px;background:rgba(var(--accrgb),.2);color:var(--acctx);
  display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:800;
  pointer-events:none;z-index:1}
.gf-sec-head{width:100%;display:flex;align-items:center;padding:var(--pad) var(--pad) var(--pad) 56px;
  background:none;border:0;cursor:pointer;color:var(--ink);font:inherit;text-align:left;
  font-weight:700;font-size:15px}
.gf-sec-head:hover{background:rgba(var(--accrgb),.07)}
.gf-sec-head::after{content:attr(data-count);margin-left:auto;padding-right:22px;font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:400}
.gf-sec-h{position:relative}
.gf-sec-h::after{content:"";position:absolute;right:var(--pad);top:50%;width:7px;height:7px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s;pointer-events:none}
.gf-sec.open .gf-sec-h::after{transform:translateY(-30%) rotate(-135deg);border-color:var(--acctx)}
@media(max-width:760px){.gf-sec-head::after{display:none}}
.gf-sec-h{margin:0;font-size:inherit;font-weight:inherit}
.gf-sec-body{display:block;padding:0 var(--pad) var(--pad);border-top:1px solid var(--hairline)}
.gf-sec-body[hidden]{display:none}
.gf-sections[hidden]{display:none}
.gf-field{margin:0;padding-top:var(--pad)}
.gf-field .gf-label{margin-bottom:8px}
.gf-select{width:100%;background:var(--field);border:1px solid var(--surfbrd);border-radius:10px;color:var(--ink);
  padding:10px 12px;font:inherit;font-size:13.5px}
.gf-select:focus{outline:none;border-color:rgba(var(--accrgb),.7)}

/* ---- output ---- */
.gf-out{margin-top:26px;display:none}
.gf-out.on{display:block}
.gf-card{border-radius:var(--rad);padding:var(--pad);background:var(--surf);border:1px solid var(--surfbrd)}
.gf-card+.gf-card{margin-top:var(--gap)}
/* Uppercase like every other card title on the page and on the sibling tool pages. The article
   titles below stay sentence case on purpose: those are real titles out of the database. */
.gf-card h3{margin:0 0 4px;font-size:15px;font-weight:800;text-transform:uppercase;letter-spacing:.03em}
.gf-card .hint{font-size:12px;color:var(--muted);margin:0 0 12px;line-height:1.5}
.gf-text{width:100%;background:var(--field);border:1px solid var(--surfbrd);border-radius:10px;color:var(--ink);
  padding:14px;font:inherit;font-size:13.5px;line-height:1.65;resize:vertical;min-height:120px}
.gf-text:focus{outline:none;border-color:rgba(var(--accrgb),.7)}

/* Persona as boxes, not a list: each trait is its own card so it can be read at a glance. */
.gf-pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:10px}
.gf-pbox{background:var(--field);border:1px solid var(--surfbrd);border-radius:11px;padding:12px 14px;
  display:flex;flex-direction:column;gap:5px;min-width:0}
.gf-pbox.wide{grid-column:span 2}
@media(max-width:640px){.gf-pgrid{grid-template-columns:1fr}.gf-pbox.wide{grid-column:auto}}
.gf-pbox .k{font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--acctx);font-weight:800}
.gf-pbox .v{font-size:13.5px;line-height:1.55;overflow-wrap:anywhere}

/* The site's pill button. Same metrics as .i2p-next-cta so every page presses the same shape. */
.gf-cta{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:10px 22px;border-radius:10px;border:1px solid var(--surfbrd);background:var(--surf);color:inherit}
.gf-cta-solid{font-size:12.5px;padding:14px 30px;border:0;color:#fff;
  background:linear-gradient(135deg,var(--acc),var(--soft));box-shadow:0 6px 22px rgba(var(--accrgb),.42)}
.gf-cta-solid:hover{box-shadow:0 10px 28px rgba(var(--accrgb),.55)}
/* The brand button wears the brand's own colour; the ink is picked in PHP from its luminance. */
.gf-cta-brand{font-size:12.5px;padding:14px 30px;border:0;background:var(--bc,var(--acc));color:var(--bctx,#fff);
  box-shadow:0 6px 22px -7px var(--bc,var(--acc));transition:.2s}
.gf-cta-brand:hover{filter:brightness(1.09);box-shadow:0 11px 28px -8px var(--bc,var(--acc))}

/* Sticky bar at the foot of the field list: without it you have to scroll twelve sections back up
   to generate what you just chose. */
.gf-fieldbar{position:sticky;bottom:12px;z-index:3;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  justify-content:space-between;margin-top:4px;padding:13px 16px;border-radius:14px;
  background:rgba(22,16,21,.9);border:1px solid rgba(var(--accrgb),.35);
  -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
  box-shadow:0 12px 34px -14px rgba(0,0,0,.9)}
body.brightness-light .gf-fieldbar{background:rgba(255,250,252,.93)}
.gf-fieldcount{font-size:12px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:var(--muted)}
.gf-fieldcount b{color:var(--acctx);font-size:15px}
/* The two buttons in this bar are one action apart, not one rank apart: same height, same padding,
   same radius, side by side. Before, Start over was a small chip and the primary was a full-width
   gradient slab with a glow, which made the bar look like it had a banner stuck to the bottom. The
   primary is now flat accent, one step quieter, and nothing here competes with the brand button. */
.gf-fieldbar{justify-content:center}
.gf-fieldcount{margin:0;width:100%;text-align:center}
.gf-fieldbar .gf-clear,
.gf-fieldbar .gf-cta-solid{flex:0 1 auto;min-height:40px;padding:10px 20px;border-radius:10px;
  font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center}
.gf-fieldbar .gf-clear{background:var(--surf);border:1px solid var(--surfbrd);color:var(--muted);
  text-transform:uppercase}
.gf-fieldbar .gf-clear:hover{border-color:rgba(var(--accrgb),.5);color:var(--ink);background:var(--surf)}
.gf-fieldbar .gf-cta-solid{background:var(--acc);border:0;color:#fff;box-shadow:none}
.gf-fieldbar .gf-cta-solid:hover{background:var(--soft);box-shadow:none}
@media(max-width:520px){.gf-fieldbar .gf-clear,.gf-fieldbar .gf-cta-solid{flex:1 1 0;min-width:0}}

/* The one line that explains why a refusal is not written into the prompt. */
/* A footnote, not a warning. It used to carry an accent bracket that gave it the weight of
   something you must read before continuing; it is a detail you notice on the second visit. */
.gf-clean{margin:0 0 12px;font-size:11px;line-height:1.55;color:var(--muted);opacity:.62;max-width:74ch}
/* The copy button and the destination sit side by side: the moment the character exists is the
   moment the visitor has something to paste, and the tool that takes it should be one click away. */
/* Copy and the destination are peers: same height, same padding, same radius, and on a phone the
   same width. The paid one is told apart by its brand colour, not by being louder. It used to be a
   wide filled slab with a glow, which read as an ad sitting on top of the thing you came for. */
.gf-cardfoot{margin:14px 0 0;display:flex;gap:10px;justify-content:center;flex-wrap:wrap;align-items:stretch}
.gf-cardfoot > *{flex:0 1 auto;min-height:40px;display:inline-flex;align-items:center;justify-content:center}
/* Dark ground on a pink page: this is the one element in the area that is not pink, which is what
   makes it read as a way out rather than as more of the same. The brand carries its colour on its
   own name, and the outbound arrow says where the click goes before it is clicked. */
.gf-try{padding:10px 18px;border-radius:10px;font-size:12px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;text-decoration:none;color:var(--ink);
  background:rgba(16,14,20,.92);border:1px solid var(--bc,var(--acc));
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:.18s}
.gf-try:hover{background:rgba(16,14,20,1);box-shadow:0 0 0 1px var(--bc,var(--acc))}
.gf-try .gf-try-name{color:var(--bc,var(--acc));margin-left:.36em}
.gf-try .gf-try-arr{margin-left:.5em;font-size:1.05em;line-height:1;opacity:.75}
body.brightness-light .gf-try{background:#17141b;color:#f2eaee}
.gf-try[hidden]{display:none}
@media(max-width:560px){.gf-cardfoot > *{flex:1 1 100%}}
.gf-copy{background:rgba(var(--accrgb),.18);border:1px solid rgba(var(--accrgb),.55);
  color:var(--acctx);border-radius:10px;padding:10px 18px;font:inherit;font-weight:800;font-size:12px;
  letter-spacing:.07em;text-transform:uppercase;cursor:pointer;transition:.16s}
.gf-copy:hover{background:rgba(var(--accrgb),.3);color:#fff}
/* Same shape as the legal line on image to prompt: centred, 72ch, small and quiet, with the
   difference that this one carries an icon and points at the Content Policy, whose first three
   sections are literally the three limits named here. */
.gf-limits{max-width:72ch;margin:22px auto 0;text-align:center;font-size:11.5px;line-height:1.6;
  color:var(--muted)}
.gf-limits-ic{display:inline-block;vertical-align:-3px;margin-right:6px;line-height:0;color:var(--acctx)}
.gf-limits-ic svg{width:14px;height:14px;display:block}
.gf-limits a{color:var(--acctx);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.gf-limits a:hover{color:var(--acc)}

/* ---- the two featured tools ----
   Covers are 1200x1800, so the frame keeps the same 2/3 ratio and nothing is cropped. */
.gf-tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:900px){.gf-tool-grid{grid-template-columns:1fr}}
.gf-tool{display:flex;gap:20px;align-items:stretch;border-radius:18px;padding:18px;
  background:rgba(255,143,187,.05);border:1px solid rgba(var(--accrgb),.3);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);transition:.2s}
.gf-tool:hover{border-color:rgba(var(--accrgb),.65);transform:translateY(-3px);
  box-shadow:0 20px 50px -26px rgba(var(--accrgb),1)}
.gf-tool-shot{flex:0 0 195px;width:195px;height:auto;aspect-ratio:2/3;object-fit:cover;display:block;border-radius:13px}
@media(max-width:1020px){.gf-tool-shot{flex:0 0 155px;width:155px}}
@media(max-width:900px){.gf-tool-shot{flex:0 0 190px;width:190px}}
.gf-tool-body{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;min-width:0;text-align:center;padding:6px 4px;flex:1}
.gf-tool-name{margin:0;font-size:25px;font-weight:800;text-transform:uppercase;line-height:1.02}
.gf-tool-why{margin:0;font-size:13.5px;color:var(--muted);line-height:1.6}
.gf-tool-act{margin:6px 0 0;display:flex;flex-direction:column;align-items:center;gap:11px}
.gf-tool-read{font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;
  color:var(--muted);text-decoration:none}
.gf-tool-read:hover{color:var(--acctx)}
@media(max-width:620px){.gf-tool{flex-direction:column;align-items:center}
  .gf-tool-shot{flex:none;width:100%;max-width:240px}}
/* The editorial stamp, same shape as everywhere else; the colour comes from base.css. */
.gf-stamp{display:inline-block;margin:0;font-size:10px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;padding:4px 11px;border-radius:999px;white-space:nowrap}
:where(.gf-stamp){background:#3a3a44;color:#fff}

/* ---- keep going: each card wears the colour of the page it opens ---- */
.gf-next{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:860px){.gf-next{grid-template-columns:1fr}}
.gf-next-card{display:block;text-align:center;border-radius:14px;padding:24px 22px;text-decoration:none;
  color:var(--ink);background:var(--surf);border:1px solid var(--surfbrd);transition:.2s}
.gf-next-card:hover{transform:translateY(-3px)}
.gf-next-card .ic{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;
  border-radius:12px;background:var(--surf);color:var(--muted);margin-bottom:12px}
.gf-next-card .ic svg{width:22px;height:22px;display:block}
.gf-next-card h3{margin:0 0 6px;font-size:16px;font-weight:800;text-transform:uppercase;letter-spacing:.02em}
.gf-next-card p{margin:0 0 16px;font-size:13.5px;color:var(--muted);line-height:1.55}
/* generator = the site's neutral glass, image to prompt = its green, library = its violet */
.gf-next-card.gen:hover{border-color:rgba(255,255,255,.3)}
.gf-next-card.i2p .ic{background:rgba(18,160,107,.16);color:#4fdd9c}
.gf-next-card.i2p:hover{border-color:rgba(18,160,107,.5)}
.gf-next-card.i2p .gf-cta{border-color:rgba(18,160,107,.5);background:rgba(18,160,107,.16);color:#4fdd9c}
.gf-next-card.lib .ic{background:rgba(139,92,246,.16);color:#a78bfa}
.gf-next-card.lib:hover{border-color:rgba(139,92,246,.5)}
.gf-next-card.lib .gf-cta{border-color:rgba(139,92,246,.5);background:rgba(139,92,246,.16);color:#a78bfa}
body.brightness-light .gf-next-card.i2p .ic,body.brightness-light .gf-next-card.i2p .gf-cta{color:#0c885a}
body.brightness-light .gf-next-card.lib .ic,body.brightness-light .gf-next-card.lib .gf-cta{color:#6d28d9}

/* ---- related reads ---- */
.gf-reads-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
@media(max-width:860px){.gf-reads-grid{grid-template-columns:1fr}}
.gf-read{border-radius:var(--rad);overflow:hidden;background:var(--surf);border:1px solid var(--surfbrd);transition:.2s}
.gf-read:hover{border-color:rgba(var(--accrgb),.6);transform:translateY(-2px)}
.gf-read-link{display:flex;flex-direction:column;height:100%;text-decoration:none;color:var(--ink)}
.gf-read-img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.gf-read-body{padding:var(--pad);display:flex;flex-direction:column;align-items:center;gap:11px;text-align:center;flex:1}
/* Every title occupies exactly two lines, clamped with an ellipsis past that. Without it a three
   line title stretched its card and left the short-title cards with a canyon above their button. */
.gf-read-h{margin:0;font-size:14.5px;font-weight:700;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:calc(14.5px * 1.35 * 2)}
.gf-read .gf-cta{margin-top:auto}

/* ---- the words ---- */
/* Centred body copy and an uppercase heading, exactly like .i2p-desc. */
.gf-desc{margin:60px 0 0;border-radius:16px;padding:28px 30px;background:var(--surf);border:1px solid var(--surfbrd)}
.gf-desc h2{font-size:20px;font-weight:800;text-transform:uppercase;text-align:center;margin:0 0 14px}
.gf-desc p{font-size:14.5px;line-height:1.75;color:var(--muted);margin:0 auto 13px;text-align:center;max-width:70ch}
.gf-desc p:last-child{margin-bottom:0}
.gf-desc strong{color:var(--ink);font-weight:700}
.gf-desc .gf-note{font-size:12.5px;margin-top:20px;padding-top:16px;border-top:1px solid var(--hairline);
  border-left:0;padding-left:0;max-width:62ch}

/* ---- mobile ---- */
@media(max-width:760px){
  .gf-root{--pad:15px;--gap:12px;padding:0 14px 54px}
  .gf-choice{grid-template-columns:repeat(2,1fr)}
  .gf-h2{font-size:21px;margin:44px 0 6px}
  .gf-sub{font-size:13px;margin-bottom:20px}
  .gf-desc{margin-top:44px;padding:22px 18px}
  .gf-desc h2{font-size:18px}
  .gf-desc p{font-size:14px}
  .gf-tool-name{font-size:21px}
  .gf-sec-head .cnt{display:none}
}
@media(max-width:560px){
  .gf-chip{padding:.55rem 1rem;font-size:.71rem;letter-spacing:.6px}
  .gf-choice{grid-template-columns:1fr}
  .gf-choice button{flex-direction:row;align-items:center;gap:10px;text-align:left;padding:13px 15px}
  .gf-choice .t{flex:0 0 auto}
  .gf-choice .d{font-size:11.5px}
  .gf-btn{min-height:74px;font-size:12.5px}
  .gf-root h1{font-size:29px}
  .gf-root .lead{font-size:14px}
  .gf-pgrid{grid-template-columns:1fr}
}