/* GPLGuide HOME 2: layout polish for the brands intro, FAQ contact link and products link. */
.gplguide-home2 .brand-intro{align-items:center}
.gplguide-home2 .brand-intro-right{max-width:400px;padding-left:26px;border-left:2px solid var(--accent)}
.gplguide-home2 .brand-intro-right p{margin:0;color:var(--muted);font-size:15px;line-height:1.75}
.gplguide-home2 .brand-intro-right .brand-pause{margin-top:16px}

.gplguide-home2 .faq-section>div>p:not(.eyebrow){margin:22px 0 28px;max-width:380px}
.gplguide-home2 .faq-section .text-link,.gplguide-home2 .section-heading .text-link{gap:14px;padding:7px 7px 7px 22px;border:1px solid var(--line);border-radius:99px;background:var(--bg);font-size:14px;box-shadow:0 5px 16px #17120f08;transition:translate .25s ease,border-color .25s ease,box-shadow .25s ease}
.gplguide-home2 .faq-section .text-link::after,.gplguide-home2 .section-heading .text-link::after{display:none}
.gplguide-home2 .faq-section .text-link span,.gplguide-home2 .section-heading .text-link span{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--accent);color:var(--ink);font-size:18px;font-family:Arial,sans-serif;transition:rotate .3s cubic-bezier(.22,1,.36,1)}
.gplguide-home2 .section-heading .text-link{flex-shrink:0}
@media(hover:hover){.gplguide-home2 .faq-section .text-link:hover,.gplguide-home2 .section-heading .text-link:hover{translate:0 -3px;border-color:#ffb297;box-shadow:0 14px 28px #a94a2114}.gplguide-home2 .faq-section .text-link:hover span,.gplguide-home2 .section-heading .text-link:hover span{rotate:45deg}}

@media(max-width:960px){.gplguide-home2 .brand-intro-right{padding-left:18px}}
@media(prefers-reduced-motion:reduce){.gplguide-home2 .faq-section .text-link,.gplguide-home2 .faq-section .text-link span,.gplguide-home2 .section-heading .text-link,.gplguide-home2 .section-heading .text-link span{transition:none}}

/* Smooth FAQ icon: rotate with the panel and reset as soon as it starts closing. */
.gplguide-home2 .faqs summary span{transition:transform .5s cubic-bezier(.33,1,.68,1),background .35s ease,box-shadow .35s ease}
.gplguide-home2 .faqs details.is-closing summary span{transform:none;background:var(--bg);box-shadow:none}
.gplguide-home2 .faqs details{transition:border-color .35s ease,box-shadow .35s ease,background .35s ease}

/* Hero: rotating rings with dots on both sides (sasico/gplkit geometry, 2026-10-10), smaller heading. */
.gplguide-home2 .orbit{width:48vw;height:48vw;top:0;border:0;opacity:1;pointer-events:none}
.gplguide-home2 .orbit::before,.gplguide-home2 .orbit::after{content:none}
.gplguide-home2 .orbit-left{left:0;transform:translate(-64%,-46%)}
.gplguide-home2 .orbit-right{right:0;left:auto;transform:translate(64%,-46%)}
.gplguide-home2 .orbit svg{display:block;width:100%;height:100%;overflow:visible}
.gplguide-home2 .orbit-spin{transform-origin:457px 457px;animation:orbit-spin 15s linear infinite}
.gplguide-home2 .orbit-ring{fill:none;stroke:var(--ink);stroke-opacity:.1;stroke-width:.5}
.gplguide-home2 .orbit-dot{fill:var(--ink)}
@keyframes orbit-spin{to{transform:rotate(360deg)}}
.gplguide-home2 .hero h1{font-size:clamp(44px,5.2vw,76px);letter-spacing:-3px}
@media(min-width:1700px){.gplguide-home2 .hero h1{font-size:90px;letter-spacing:-3.5px}}
@media(max-width:1200px){.gplguide-home2 .hero h1{letter-spacing:-2.6px}}
@media(max-width:960px){.gplguide-home2 .orbit{width:56vw;height:56vw;opacity:.8}.gplguide-home2 .hero h1{font-size:clamp(42px,6.8vw,64px);letter-spacing:-2.2px}}
@media(max-width:600px){.gplguide-home2 .orbit{width:300px;height:300px;opacity:.7}.gplguide-home2 .hero h1{font-size:clamp(33px,8.8vw,50px);letter-spacing:-1.5px}}
@media(prefers-reduced-motion:reduce){.gplguide-home2 .orbit-spin{animation:none}}
/* Hero grid: same box as sasico (9 cells wide, 83px cells at 1920 wide and scaling with the screen, ink at 7%), ending at the search bar (height set by home2-motion.js). */
.gplguide-home2 .grid-art{inset:auto;top:-89px;left:50%;transform:translateX(-50%);width:calc(9 * 4.3vw + 1px);height:calc(10 * 4.3vw + 1px);background-image:linear-gradient(#17120f12 1px,transparent 1px),linear-gradient(90deg,#17120f12 1px,transparent 1px);background-size:4.3vw 4.3vw;background-position:0 0;border-bottom:1px solid #17120f12;-webkit-mask-image:none;mask-image:none}
@media(max-width:1024px){.gplguide-home2 .grid-art{width:640px;height:640px;background-size:71px 71px}}
@media(max-width:600px){.gplguide-home2 .grid-art{top:-74px}}
/* Product cards show the product's category instead of a price (Swapnil, 2026-10-10: prices off the cards; product pages keep them). */
.product-cat{font-size:13px;font-weight:500;color:var(--muted);line-height:1.4}
@media(max-width:600px){.product-cat{font-size:11.5px}}
/* Home hero tryouts (Swapnil, 2026-10-10): brand logos ride the rings instead of the dots (slower spin so they stay readable, each chip stays upright; hidden at 960px and below where they would cross the title); the hero Search button is white. */
.gplguide-home2 .orbit{--orbit:48vw;--chip:46px}
.gplguide-home2 .orbit-logos{position:absolute;inset:0;animation:orbit-spin 40s linear infinite}
.gplguide-home2 .orbit-logo{position:absolute;left:50%;top:50%;width:var(--chip);height:var(--chip);margin:calc(var(--chip) / -2) 0 0 calc(var(--chip) / -2);transform:rotate(var(--a)) translateY(calc(var(--orbit) * var(--r) * -1)) rotate(calc(var(--a) * -1))}
.gplguide-home2 .orbit-chip{display:block;width:100%;height:100%;padding:4px;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:0 8px 22px #17120f14;animation:orbit-spin 40s linear infinite reverse}
.gplguide-home2 .orbit-chip img{display:block;width:100%;height:100%;object-fit:contain;border-radius:10px}
.gplguide-home2 .hero-search .search-submit{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
@media(max-width:960px){.gplguide-home2 .orbit-logos{display:none}}
@media(prefers-reduced-motion:reduce){.gplguide-home2 .orbit-logos,.gplguide-home2 .orbit-chip{animation:none}}
/* Both sides in sync (Swapnil, 2026-10-11): the right ring turns the other way, so its logos mirror the left ones. */
.gplguide-home2 .orbit-right .orbit-logos{animation-direction:reverse}
.gplguide-home2 .orbit-right .orbit-chip{animation-direction:normal}

/* Hero badge: a small glowing orange dot before "Trusted GPL club since 2017" (soft pulse, still with reduced motion). */
.gplguide-home2 .hero-badge{display:inline-flex;align-items:center;gap:12px}
.gplguide-home2 .hero-badge::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:#ff6733;box-shadow:0 0 8px 1px #ff673399;animation:gplguide-badge-dot 2.2s ease-out infinite}
@keyframes gplguide-badge-dot{0%{box-shadow:0 0 8px 1px #ff673399,0 0 0 0 #ff673366}70%{box-shadow:0 0 8px 1px #ff673399,0 0 0 8px #ff673300}100%{box-shadow:0 0 8px 1px #ff673399,0 0 0 0 #ff673300}}
@media(max-width:600px){.gplguide-home2 .hero-badge{gap:8px}.gplguide-home2 .hero-badge::before{width:7px;height:7px}}
@media(prefers-reduced-motion:reduce){.gplguide-home2 .hero-badge::before{animation:none}}

/* Swapnil, 2026-10-11: the logo chips on the rings are round and a little smaller; the badge reads in capitals. */
.gplguide-home2 .orbit{--chip:38px}
.gplguide-home2 .orbit-chip{padding:5px;border-radius:50%}
.gplguide-home2 .orbit-chip img{border-radius:50%}
.gplguide-home2 .hero-badge{text-transform:uppercase;letter-spacing:.06em}
/* Swapnil, 2026-10-11 01:22: the badge as a small, narrow tag (was 17px text, 20px on very wide screens). */
.gplguide-home2 .hero-badge{gap:9px;padding:7px 16px;font-size:13px;letter-spacing:.08em}
.gplguide-home2 .hero-badge::before{width:7px;height:7px}
@media(min-width:1700px){.gplguide-home2 .hero-badge{font-size:14px}}
@media(max-width:600px){.gplguide-home2 .hero-badge{gap:7px;padding:6px 13px;font-size:11px}.gplguide-home2 .hero-badge::before{width:6px;height:6px}}
/* Swapnil, 2026-10-11 01:24: no white circle behind the ring logos, and the logos a bit larger (each logo is clipped to a circle; 42px since 01:28). */
.gplguide-home2 .orbit{--chip:42px}
.gplguide-home2 .orbit-chip{padding:0;border:0;border-radius:50%;overflow:hidden;background:none;box-shadow:none;filter:drop-shadow(0 6px 12px #17120f1f)}
.gplguide-home2 .orbit-chip img{border-radius:50%}
/* The Astra logo file has a white margin around its purple circle; zoom it so no white edge shows. */
.gplguide-home2 .orbit-chip img[src$="/Untitled-design-5.png"]{object-fit:cover;transform:scale(1.15)}
/* Hero notes (Swapnil, 2026-10-11 01:32 "use latest icon"): current Lucide icons (badge-check, refresh-cw, globe) in a two-tone style, a little larger. */
.gplguide-home2 .hero-note svg{width:17px;height:17px;stroke-width:1.9}
.gplguide-home2 .hero-note svg .duo{fill:var(--accent);fill-opacity:.16}
.gplguide-home2 .hero-note svg .duo-only{stroke:none}
@media(max-width:600px){.gplguide-home2 .hero-note svg{width:15px;height:15px}}

/* Swapnil, 2026-10-14: the ring logos sit in white circles again with the logos a bit smaller (32px inside a 46px circle), and the ring lines are a bit darker. */
.gplguide-home2 .orbit{--chip:46px}
.gplguide-home2 .orbit-chip{padding:6px;border:1px solid var(--line);background:#fff;box-shadow:0 8px 20px #17120f14;filter:none}
.gplguide-home2 .orbit-ring{stroke-opacity:.25}

/* Swapnil, 2026-10-14: the "Browse Products" button next to "Latest premium plugins." keeps its full width (below 1024px it was squeezed and its label cut off); on phones it sits under the text. */
.gplguide-home2 .section-heading>.button{flex:none}
@media(max-width:600px){.gplguide-home2 .section-heading{flex-direction:column;align-items:flex-start;gap:22px}}

/* Swapnil, 2026-10-15: Home heading about 10% smaller (was 90px wide screens, clamp 44-76px desktop, 42-64px tablet, 33-50px phone). */
.gplguide-home2 .hero #hero-title{font-size:clamp(40px,4.7vw,68px);letter-spacing:-2.7px}
@media(min-width:1700px){.gplguide-home2 .hero #hero-title{font-size:80px;letter-spacing:-3.1px}}
@media(max-width:1200px){.gplguide-home2 .hero #hero-title{letter-spacing:-2.3px}}
@media(max-width:960px){.gplguide-home2 .hero #hero-title{font-size:clamp(38px,6.1vw,58px);letter-spacing:-2px}}
@media(max-width:600px){.gplguide-home2 .hero #hero-title{font-size:clamp(31px,8.2vw,46px);letter-spacing:-1.4px}}

/* Swapnil, 2026-10-16: the ring logos a bit bigger (38px instead of 32px); the white 46px circle stays the same size. */
.gplguide-home2 .orbit-chip{padding:3px}

/* Swapnil, 2026-10-16 ("correct this"): the Astra file is 526x564 with its purple circle (469px) off-centre, so the old 1.15 zoom pushed it up and left.
   Centre it (object-position 50% 18.4%, nudge right 1.71%) and zoom it to exactly the 38px of the other logos (526/469 = 1.1215). */
.gplguide-home2 .orbit-chip img[src$="/Untitled-design-5.png"]{object-fit:cover;object-position:50% 18.4%;transform:scale(1.1215) translateX(1.71%)}