/* Image to Prompt — scanner page. Adaptive light/dark (uses the site's normal background). Scoped under .i2p-root. */
.i2p-root{
  --acc:#12a06b;--accrgb:18,160,107;--scan:#3ee0a2;--acctx:#4fdd9c;
  --surf:rgba(255,255,255,.045);--surfbrd:rgba(255,255,255,.11);
  --imgbg:#15181a;--muted:#9a9aa6;--ink:#ededf2;--hairline:rgba(255,255,255,.09);
  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}
body.brightness-light .i2p-root{
  --acctx:#0c885a;--surf:rgba(0,0,0,.035);--surfbrd:rgba(0,0,0,.12);
  --imgbg:#e9ecee;--muted:#5c5c65;--ink:#15151a;--hairline:rgba(0,0,0,.09)}
.i2p-root *{box-sizing:border-box}
/* The green used to be one centred blob, 600px tall and boxed inside the 1180px column, so it died
   just past the fold and drew a soft rectangle on the way out. Now it is a fixed, full-bleed veil of
   scattered blooms over the site's own background. Deliberately anchored on the opposite diagonal to
   the pink on the girlfriend page, and cut tighter so the green reads as green and not as haze:
   two of the blooms use the bright scan tone rather than the deep one. */
.i2p-root:before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(34% 26% at 80% 2%,rgba(62,224,162,.17),rgba(62,224,162,0) 62%),
    radial-gradient(40% 30% at 12% 22%,rgba(18,160,107,.19),rgba(18,160,107,0) 64%),
    radial-gradient(46% 24% at 58% 48%,rgba(18,160,107,.10),rgba(18,160,107,0) 66%),
    radial-gradient(32% 26% at 20% 76%,rgba(62,224,162,.12),rgba(62,224,162,0) 62%),
    radial-gradient(38% 28% at 92% 94%,rgba(18,160,107,.13),rgba(18,160,107,0) 64%)}
body.brightness-light .i2p-root:before{
  background:
    radial-gradient(34% 26% at 80% 2%,rgba(18,160,107,.10),rgba(18,160,107,0) 62%),
    radial-gradient(40% 30% at 12% 22%,rgba(18,160,107,.11),rgba(18,160,107,0) 64%),
    radial-gradient(46% 24% at 58% 48%,rgba(18,160,107,.06),rgba(18,160,107,0) 66%),
    radial-gradient(32% 26% at 20% 76%,rgba(18,160,107,.07),rgba(18,160,107,0) 62%),
    radial-gradient(38% 28% at 92% 94%,rgba(18,160,107,.08),rgba(18,160,107,0) 64%)}
.i2p-inner{position:relative;z-index:1}

.i2p-root .eyebrow{text-align:center;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--acctx);font-weight:700}
.i2p-root h1{font-size:44px;line-height:1.04;margin:14px 0 12px;text-transform:uppercase;font-weight:800;text-align:center}
.i2p-root h1 .g{color:var(--acctx)}
.i2p-root .lead{text-align:center;color:var(--muted);max-width:56ch;margin:0 auto;font-size:15px;line-height:1.6}
.i2p-root .privacy{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),.12);border:1px solid rgba(var(--accrgb),.4);padding:7px 15px;border-radius:999px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.i2p-root .center{text-align:center}
@media(max-width:560px){.i2p-root .privacy{font-size:10px;letter-spacing:.04em;padding:7px 13px;flex-wrap:wrap;justify-content:center;max-width:100%}}
/* 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.
   Placed after the h1 rule above on purpose, otherwise that one wins on equal specificity. */
.i2p-hero{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:18px;padding:2rem var(--box-padding-desktop);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  margin-bottom:1.5rem}
.i2p-root .i2p-hero > *:first-child{margin-top:0}
.i2p-root .i2p-hero > *:last-child{margin-bottom:0}
@media(max-width:640px){.i2p-hero{padding:1.25rem 1rem;margin-bottom:1rem}}

.i2p-glass{background:var(--surf);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--surfbrd)}
.i2p-panel{margin:30px 0 0;border-radius:18px;padding:22px}

.i2p-stage{display:flex;gap:22px;align-items:stretch}
@media(max-width:820px){.i2p-stage{flex-direction:column}}
.i2p-left{flex:0 0 330px;max-width:330px}
@media(max-width:820px){.i2p-left{flex:none;max-width:340px;width:100%;margin:0 auto}}
.i2p-right{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}

.i2p-drop{width:100%;height:440px;border:2px dashed var(--surfbrd);border-radius:14px;cursor:pointer;transition:.2s;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center}
@media(max-width:820px){.i2p-drop,.i2p-imgbox{height:380px}}
.i2p-drop:hover,.i2p-drop.drag{border-color:rgba(var(--accrgb),.6);background:rgba(var(--accrgb),.05)}
.i2p-drop .di{width:54px;height:54px;border-radius:50%;background:rgba(var(--accrgb),.14);color:var(--acctx);display:flex;align-items:center;justify-content:center;font-size:26px}
.i2p-drop .lbl{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--acctx);background:rgba(var(--accrgb),.14);border:1px solid rgba(var(--accrgb),.5);padding:11px 22px;border-radius:11px}
.i2p-drop small{font-size:11.5px;color:var(--muted);letter-spacing:.03em}

.i2p-imgbox{position:relative;width:100%;height:440px;border-radius:14px;overflow:hidden;background:var(--imgbg)}
.i2p-imgbox img{position:absolute;inset:0;width:100% !important;height:100% !important;object-fit:cover !important;filter:blur(4px)}
.i2p-corner span{position:absolute;width:20px;height:20px;border:2px solid var(--acc);z-index:6}
.i2p-corner span:nth-child(1){top:8px;left:8px;border-right:0;border-bottom:0}
.i2p-corner span:nth-child(2){top:8px;right:8px;border-left:0;border-bottom:0}
.i2p-corner span:nth-child(3){bottom:8px;left:8px;border-right:0;border-top:0}
.i2p-corner span:nth-child(4){bottom:8px;right:8px;border-left:0;border-top:0}
.i2p-mosaic{position:absolute;inset:0;z-index:2;display:grid;pointer-events:none;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.i2p-cell{background:rgba(var(--accrgb),.05);box-shadow:inset 0 0 0 .5px rgba(0,0,0,.3)}
.i2p-imgbox.i2p-scanning .i2p-cell{animation:i2pShim 1s ease-in-out infinite}
@keyframes i2pShim{0%,100%{background:rgba(var(--accrgb),.05)}45%{background:rgba(var(--accrgb),.5)}}
.i2p-beam{position:absolute;left:0;right:0;top:0;height:3px;background:var(--scan);box-shadow:0 0 20px 5px rgba(var(--accrgb),.9);z-index:4;opacity:0}
.i2p-imgbox.i2p-scanning .i2p-beam{opacity:1;animation:i2pSweep 1.1s cubic-bezier(.5,0,.5,1) infinite alternate}
@keyframes i2pSweep{0%{top:2%}100%{top:98%}}
.i2p-hud{position:absolute;top:12px;left:12px;z-index:7;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--acctx);background:rgba(0,0,0,.55);padding:4px 9px;border-radius:6px}

.i2p-hint{color:var(--muted);font-size:13.5px;text-align:center;letter-spacing:.03em;padding:20px}
.i2p-detected{text-align:center}
.i2p-detected .h{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700}
.i2p-detected .s{font-size:13.5px;color:var(--acctx);margin:4px 0 2px;letter-spacing:.04em;text-transform:uppercase;font-weight:700;transition:opacity .3s;min-height:18px}
.i2p-status-sub{font-size:11px;color:var(--muted);letter-spacing:.05em;text-transform:uppercase;min-height:14px;transition:opacity .3s}
.i2p-idc{height:4px;border-radius:99px;background:var(--surf);overflow:hidden;max-width:240px;margin:12px auto 8px}
.i2p-idc i{display:block;height:100%;width:35%;border-radius:99px;background:var(--acc);animation:i2pInd 1.3s ease-in-out infinite}
@keyframes i2pInd{0%{margin-left:-35%}100%{margin-left:100%}}
.i2p-idc.det i{animation:none;margin-left:0;transition:width .25s ease}
.i2p-tags{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.i2p-tag{font-size:12px;padding:6px 11px;border-radius:8px;background:rgba(var(--accrgb),.10);border:1px solid rgba(var(--accrgb),.34)}
.i2p-tag b{color:var(--acctx);margin-left:5px;font-weight:700}

.i2p-promptbox{margin-top:18px;border-radius:14px;padding:16px 18px;background:var(--surf);border:1px solid var(--surfbrd)}
.i2p-promptbox .rlbl{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--acctx);font-weight:700;margin-bottom:10px}
.i2p-prompt{font-size:14px;line-height:1.6}
.i2p-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.i2p-btn{font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:12px 20px;border-radius:11px;text-decoration:none;width:100%;
  border:1px solid transparent;cursor:pointer;-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);display:inline-flex;align-items:center;justify-content:center;gap:7px}
.i2p-acc{background:var(--acc);border-color:var(--acc);color:#04241a}
.i2p-neutral{background:var(--surf);border-color:var(--surfbrd);color:inherit}
.i2p-vio{background:rgba(167,139,250,.16);border-color:rgba(167,139,250,.5);color:#8b5cf6}
body.brightness-light .i2p-vio{color:#6d28d9}
.i2p-again{grid-column:1 / -1;background:rgba(59,130,246,.16);border-color:rgba(59,130,246,.55);color:#8fb6ff}
body.brightness-light .i2p-again{color:#2563eb}
.i2p-again:hover{background:rgba(59,130,246,.26)}
.i2p-btn.lg{padding:15px 28px}
.i2p-linkbtns .i2p-btn{flex:1 1 240px;max-width:320px}
@media(max-width:820px){.i2p-promptbox{text-align:center}}

.i2p-root .sec-title{text-align:center;font-size:26px;font-weight:800;text-transform:uppercase;margin:60px 0 6px}
.i2p-root .sec-sub{text-align:center;color:var(--muted);font-size:14px;margin:0 auto 26px;max-width:52ch}

.i2p-tools{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:0}
@media(max-width:860px){.i2p-tools{grid-template-columns:repeat(2,1fr);gap:16px}}
/* --edge and --btn come from madeprompt_brand_card_style(): the brand colour when it can carry
   the card, a neutral when it cannot. #000000 used to draw no border and no glow at all. */


/* Il colore lo mette la palette dei badge in base.css. :where() tiene la specificita' a (0,1,0)
   cosi' la palette vince sempre, qualunque sia l'ordine di caricamento, e uno slug sconosciuto
   resta comunque leggibile invece di sparire. */


@media(max-width:560px){


}

.i2p-linkbtns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:26px}

/* auto-fit, so the row still reads right if the girlfriend card is ever gated back off */
.i2p-next{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin:0}
@media(max-width:640px){.i2p-next{grid-template-columns:1fr}}
.i2p-next-card{display:block;border-radius:14px;padding:24px 22px;text-decoration:none;text-align:center;transition:.2s;color:var(--ink)}
.i2p-next-card:hover{transform:translateY(-3px);border-color:var(--surfbrd)}
.i2p-next-card.lib:hover{border-color:rgba(139,92,246,.4)}
.i2p-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);font-size:21px;margin-bottom:12px}
.i2p-next-card .ic svg{width:22px;height:22px;display:block}
.i2p-next-card.lib .ic{background:rgba(139,92,246,.16);color:#a78bfa}
body.brightness-light .i2p-next-card.lib .ic{color:#7c3aed}
.i2p-next-card b{display:block;font-size:16px;font-weight:800;text-transform:uppercase;letter-spacing:.02em;margin-bottom:6px;color:var(--ink)}
.i2p-next-card p{margin:0 0 16px;font-size:13.5px;color:var(--muted);line-height:1.55}
.i2p-next-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}
.i2p-next-card.lib .i2p-next-cta{border-color:rgba(139,92,246,.5);background:rgba(139,92,246,.16);color:#a78bfa}
body.brightness-light .i2p-next-card.lib .i2p-next-cta{color:#6d28d9}
.i2p-next-card.gf:hover{border-color:rgba(255,90,158,.4)}
.i2p-next-card.gf .ic{background:rgba(255,90,158,.16);color:#ff9cc4}
body.brightness-light .i2p-next-card.gf .ic{color:#c2185b}
.i2p-next-card.gf .i2p-next-cta{border-color:rgba(255,90,158,.5);background:rgba(255,90,158,.16);color:#ff9cc4}
body.brightness-light .i2p-next-card.gf .i2p-next-cta{color:#c2185b}

.i2p-desc{margin:60px 0 0;border-radius:16px;padding:28px 30px}
.i2p-desc h2{font-size:20px;text-transform:uppercase;font-weight:800;margin:0 0 14px;text-align:center}
.i2p-desc p{font-size:14.5px;line-height:1.75;color:var(--muted);margin:0 auto 13px;text-align:center;max-width:70ch}
.i2p-desc p:last-child{margin-bottom:0}

.i2p-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:26px 0 0}
@media(max-width:620px){.i2p-steps{grid-template-columns:1fr}}
.i2p-step{text-align:center;padding:22px 16px;border-radius:14px}
.i2p-step .n{width:34px;height:34px;border-radius:50%;background:rgba(var(--accrgb),.12);color:var(--acctx);font-weight:800;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;font-size:15px;border:1px solid rgba(var(--accrgb),.4)}
.i2p-step b{display:block;margin-bottom:5px;font-size:13px;text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.i2p-step p{margin:0;font-size:13px;color:var(--muted);line-height:1.5}

.i2p-legal{max-width:72ch;margin:22px auto 0;text-align:center;font-size:11.5px;line-height:1.55;color:var(--muted)}
.i2p-legal a{color:var(--acctx);text-decoration:underline}

/* Full-screen prohibited-content block screen (covers everything, red glass box + countdown) */
.i2p-block-overlay{position:fixed;inset:0;z-index:2147483647;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(13,13,16,.96);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:i2pBlockIn .25s ease}
@keyframes i2pBlockIn{from{opacity:0}to{opacity:1}}
.i2p-block-box{max-width:560px;width:100%;text-align:center;padding:44px 34px;border-radius:22px;background:rgba(220,38,38,.14);border:2px solid rgba(239,68,68,.75);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);box-shadow:0 0 70px rgba(239,68,68,.4),0 20px 60px rgba(0,0,0,.6)}
.i2p-block-mark{font-size:48px;line-height:1;margin-bottom:14px}
.i2p-block-title{font-size:26px;font-weight:800;text-transform:uppercase;letter-spacing:.02em;color:#ff6b6b;margin:0 0 14px;line-height:1.15}
.i2p-block-msg{font-size:15px;line-height:1.55;color:#ffd5d5;max-width:44ch;margin:0 auto 26px}
.i2p-block-timer{width:88px;height:88px;margin:0 auto;border-radius:50%;border:3px solid rgba(239,68,68,.8);display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 30px rgba(239,68,68,.5),0 0 24px rgba(239,68,68,.4)}
.i2p-block-count{font-size:40px;font-weight:800;color:#ff6b6b;font-variant-numeric:tabular-nums}
@media(max-width:560px){.i2p-block-box{padding:34px 22px}.i2p-block-title{font-size:21px}.i2p-block-count{font-size:34px}.i2p-block-timer{width:76px;height:76px}}

.i2p-hide{display:none !important}

/* Related reads (articles <-> i2p bidirectional linking) */
.i2p-reads{margin:0}
.i2p-reads-title{text-align:center;font-size:26px;font-weight:800;text-transform:uppercase;margin:58px 0 8px;color:var(--ink)}
.i2p-reads-intro{text-align:center;color:var(--muted);max-width:52ch;margin:0 auto 28px;font-size:15px;line-height:1.6}
.i2p-reads-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:720px){.i2p-reads-grid{grid-template-columns:1fr;max-width:420px;margin:0 auto;gap:20px}}
.i2p-read-card{display:flex;flex-direction:column;border-radius:14px;overflow:hidden;text-decoration:none;background:var(--surf);border:1px solid var(--surfbrd);box-shadow:0 10px 28px -14px rgba(0,0,0,.6);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.i2p-read-card:hover{transform:translateY(-3px);border-color:var(--muted);box-shadow:0 16px 38px -14px rgba(0,0,0,.7)}
.i2p-read-img{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--imgbg)}
.i2p-read-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease}
.i2p-read-card:hover .i2p-read-img img{transform:scale(1.04)}
.i2p-read-body{display:flex;flex-direction:column;gap:10px;padding:15px 16px 17px}
.i2p-read-h{margin:0;font-size:15px;font-weight:700;line-height:1.34;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.i2p-read-go{font-size:13px;font-weight:700;color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:var(--surfbrd)}
.i2p-read-card:hover .i2p-read-go{text-decoration-color:var(--ink)}

/* ------------------------------------------------------------------
   Anteprima privata 2026-08-20: il consigliato dentro il riquadro del
   risultato. Il riquadro e' gia' nascosto finche' il prompt non c'e',
   quindi questo blocco compare da solo nel momento giusto, senza JS.
   Stesso linguaggio del blocco sul generatore: etichetta tinta del
   colore del brand, barra in vetro colorato, alternativa discreta.
   ------------------------------------------------------------------ */
.i2p-lead{margin-top:14px;padding-top:14px;border-top:1px solid var(--hairline);text-align:center}
.i2p-lead-h{font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;margin-bottom:9px;
  color:rgba(255,255,255,.6);
  color:color-mix(in srgb, var(--tool, #ffffff) 45%, rgba(255,255,255,.85))}
.i2p-lead-btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;max-width:420px;
  margin:0 auto;padding:.85rem 1rem;border-radius:11px;text-decoration:none;font-size:15px;
  color:var(--btntx,#fff);
  border:1px solid var(--btnbrd,rgba(255,255,255,.28));
  background:var(--btn,#12a06b);
  transition:filter .2s ease, transform .2s ease}
.i2p-lead-btn:hover{filter:brightness(1.12);transform:translateY(-1px)}
.i2p-lead-ar{font-size:17px}
.i2p-lead-alt{display:inline-block;margin-top:11px;font-size:13px;text-decoration:none;
  color:rgba(255,255,255,.5);border-bottom:1px solid rgba(255,255,255,.2);transition:color .2s ease}
.i2p-lead-alt:hover{color:rgba(255,255,255,.92);border-bottom-color:var(--edgeon,rgba(255,255,255,.55))}
body.brightness-light .i2p-lead-h{color:color-mix(in srgb, var(--bc, #000000) 60%, rgba(0,0,0,.7))}
body.brightness-light .i2p-lead-alt{color:rgba(0,0,0,.55);border-bottom-color:rgba(0,0,0,.2)}

/* ------------------------------------------------------------------
   Anteprima 2026-08-20: schede brand orizzontali, stesso impianto di
   quelle sulla pagina girlfriend ma nel verde di questa pagina.
   Con due sole schede la griglia a quattro colonne lasciava mezza riga
   vuota su desktop; queste occupano la larghezza e portano anche un
   testo, che il poster verticale non poteva contenere.
   ------------------------------------------------------------------ */
.i2p-tools{grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:900px){.i2p-tools{grid-template-columns:1fr}}

.i2p-card{display:flex;gap:20px;align-items:stretch;border-radius:18px;padding:18px;
  background:rgba(var(--accrgb),.05);border:1px solid rgba(var(--accrgb),.3);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);transition:.2s}
.i2p-card:hover{border-color:rgba(var(--accrgb),.65);transform:translateY(-3px);
  box-shadow:0 20px 50px -26px rgba(var(--accrgb),1)}
.i2p-card-shot{flex:0 0 195px;width:195px;height:auto;aspect-ratio:2/3;object-fit:cover;
  display:block;border-radius:12px}
@media(max-width:1020px){.i2p-card-shot{flex:0 0 155px;width:155px}}
@media(max-width:900px){.i2p-card-shot{flex:0 0 190px;width:190px}}
.i2p-card-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}
.i2p-card-name{margin:0;font-size:25px;font-weight:800;text-transform:uppercase;line-height:1.05;color:var(--ink)}
.i2p-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}
.i2p-card-why{margin:0;font-size:13.5px;color:var(--muted);line-height:1.6}
.i2p-card-act{margin:6px 0 0;display:flex;flex-direction:column;align-items:center;gap:11px}
.i2p-card-cta{display:inline-flex;align-items:center;gap:8px;padding:.75rem 1.5rem;border-radius:11px;
  text-decoration:none;font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--btntx,#fff);
  border:1px solid var(--btnbrd,rgba(255,255,255,.28));
  background:var(--btn,#12a06b);
  transition:filter .2s ease, transform .2s ease}
.i2p-card-cta:hover{filter:brightness(1.12);transform:translateY(-1px)}
.i2p-card-read{font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;
  color:var(--muted);text-decoration:none}
.i2p-card-read:hover{color:var(--acctx)}
@media(max-width:620px){.i2p-card{flex-direction:column;align-items:center}
  .i2p-card-shot{flex:none;width:100%;max-width:240px}}

/* Il riquadro del risultato: la colonna sinistra si allunga per pareggiare la
   destra, ma l'immagine aveva altezza fissa a 440px e lasciava il vuoto sotto,
   peggiorato dal blocco brand che allunga la colonna destra. Solo da desktop
   in su, perche' sotto gli 820px le due colonne si impilano e non serve. */
@media(min-width:821px){
  .i2p-left{display:flex;flex-direction:column}
  .i2p-imgbox{height:auto;flex:1;min-height:440px}
}