/* Branding & logo guide page only (branding-logo-guide.html). Sample fonts are self-hosted in assets/fonts/guide (SIL Open Font License). */
@font-face{font-family:'Bebas Neue';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/guide/bebas-neue-400.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Great Vibes';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/guide/great-vibes-400.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/guide/jetbrains-mono-500.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:500;font-display:swap;src:url(../fonts/guide/playfair-display-500-italic.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/guide/playfair-display-500.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/guide/roboto-slab-500.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* Branding & logo guide page (preview) */
.bgp{--lg-tile:#F7F3EC;--lg-ink:#2B2724;--lg-acc:url(#foil)}
.bgp .bg-sec .kicker,.bgp section .kicker{justify-content:flex-start;margin:0}
.bgp section h2{margin:12px 0 0;text-align:left}
.bgp .bg-intro{margin:14px 0 0;color:var(--muted,#b6aacb);line-height:1.5}
.bgp h3{font-size:var(--fs-h3);margin:0}
.bgp .bg-sub{margin:32px 0 0;font-size:var(--fs-h3)}
.bgp .bg-sub+.bg-intro{margin-top:8px}
.bg-note{margin:12px 0 0;font-size:var(--fs-note);color:#b6aacb}
.bg-tile{position:relative;border-radius:18px;background:var(--lg-tile);overflow:hidden}
.bg-art{display:block;width:100%;height:auto}

/* hero extras */
.bg-jump{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px}
.bg-jump a{padding:8px 14px;border-radius:999px;background:var(--one-bg);border:var(--one-edge);color:#fff;font-family:var(--font-display,'Techna Sans'),sans-serif;font-size:var(--fs-small);text-decoration:none}
.bg-how{display:flex;gap:10px;align-items:baseline;margin:16px 0 0;color:#d9d0ea;font-size:var(--fs-small);line-height:1.5}
.bg-how i{flex:none;width:8px;height:8px;background:#C9A8FF;clip-path:polygon(0 0,100% 50%,0 100%)}
.bg-how b{color:#fff;font-weight:500}

/* pick button */
.bg-pick{-webkit-appearance:none;appearance:none;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 16px;border-radius:999px;border:1px solid rgba(201,168,255,.55);background:none;color:#fff;font:inherit;font-family:var(--font-display,'Techna Sans'),sans-serif;font-size:var(--fs-small);cursor:pointer;transition:background-color .2s,color .2s,box-shadow .2s}
.bg-pick::before{content:"";width:12px;height:12px;border-radius:4px;border:1.5px solid #C9A8FF;box-sizing:border-box}
.bg-pick[aria-pressed=true]{background:#C9A8FF;color:#140E22;border-color:#C9A8FF;box-shadow:0 0 22px -6px rgba(123,92,255,.8)}
.bg-pick[aria-pressed=true]::before{border-color:#140E22;background:linear-gradient(#140E22,#140E22) center/6px 6px no-repeat}
.bg-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px}
.bg-next{-webkit-appearance:none;appearance:none;display:inline-flex;align-items:center;gap:8px;background:none;border:0;padding:8px 0;color:#fff;font:inherit;font-family:var(--font-display,'Techna Sans'),sans-serif;font-size:var(--fs-small);cursor:pointer}
.bg-next::after{content:"";width:8px;height:8px;background:#C9A8FF;clip-path:polygon(0 0,100% 50%,0 100%)}

/* 01 logos: tabs + one card at a time */
.bg-tabs{display:flex;gap:20px;overflow-x:auto;scrollbar-width:none;margin-top:24px;border-bottom:1px solid rgba(255,255,255,.12);-webkit-mask:linear-gradient(90deg,#000 85%,transparent)}
.bg-tabs::-webkit-scrollbar{display:none}
.bg-tabs button{flex:none;position:relative;-webkit-appearance:none;appearance:none;background:none;border:0;padding:0 0 12px;color:#b6aacb;font:inherit;font-family:var(--font-display,'Techna Sans'),sans-serif;font-size:var(--fs-small);cursor:pointer;white-space:nowrap}
.bg-tabs button[aria-selected=true]{color:#fff}
.bg-tabs button[aria-selected=true]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1.5px;background:linear-gradient(90deg,#7B5CFF,#C9A8FF)}
.bg-lts{margin-top:16px}
.bg-lt{border-radius:22px;background:var(--one-bg);border:var(--one-edge);padding:12px}
.bg-lt+.bg-lt{margin-top:16px}
.bg-ready .bg-lt{display:none}.bg-ready .bg-lt.on{display:block;animation:bgIn .35s cubic-bezier(.22,.8,.24,1)}
@keyframes bgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.bg-lt .bg-tile{touch-action:pan-y}
.bg-n{position:absolute;right:12px;bottom:10px;font-size:var(--fs-note);color:#6d6280}
.bg-lt-body{padding:16px 6px 4px}
.bg-lt-body>p{margin:8px 0 0;color:#e9e3f5;line-height:1.5}
.bg-dl{margin:16px 0 0;display:grid;gap:12px}
.bg-dl div{padding-top:12px;border-top:1px solid rgba(255,255,255,.1)}
.bg-dl dt{font-family:var(--font-display,'Techna Sans'),sans-serif;font-size:var(--fs-note);letter-spacing:.12em;text-transform:uppercase;color:#C9A8FF}
.bg-dl dd{margin:4px 0 0;line-height:1.5;color:#e9e3f5}

/* 02 fonts */
.bg-try{display:block;margin-top:16px}
.bg-try span{display:block;font-size:var(--fs-note);color:#b6aacb;margin-bottom:8px}
.bg-try input{width:100%;min-height:48px;padding:12px 16px;border-radius:14px;background:var(--one-bg);border:1px solid rgba(201,168,255,.45);color:#fff;font:inherit;font-size:1rem;outline:none}
.bg-try input:focus{border-color:#C9A8FF;box-shadow:0 0 0 3px rgba(201,168,255,.18)}
.bg-fts{margin-top:16px;border-top:1px solid rgba(255,255,255,.12)}
.bg-ft{display:grid;grid-template-columns:1fr auto;gap:8px 12px;align-items:start;padding:20px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.bg-ft-s{grid-column:1/-1;margin:0;font-size:2.4rem;line-height:1.15;color:#fff;overflow-wrap:anywhere}
.bg-ft-meta p{margin:4px 0 0;line-height:1.5;color:#d9d0ea}
.bg-ft-meta .bg-feel,.bgp .bg-feel{color:#C9A8FF;font-size:var(--fs-small);margin-top:4px}
.bg-ft .bg-pick{align-self:center}
.bg-pairs{display:grid;gap:12px;margin-top:16px}
.bg-pair{padding:18px 18px 16px;border-radius:18px;background:var(--one-bg);border:var(--one-edge)}
.bg-pair-l{margin:0;font-family:var(--font-display,'Techna Sans'),sans-serif;font-size:var(--fs-note);letter-spacing:.12em;text-transform:uppercase;color:#C9A8FF}
.bg-pair-h{margin:12px 0 0;font-size:2rem;line-height:1.1;color:#fff;overflow-wrap:anywhere}
.bg-pair-t{margin:8px 0 0;line-height:1.5;color:#d9d0ea}
.bg-pair-b{margin:12px 0 0;font-size:var(--fs-note);color:#b6aacb}

/* 03 colours */
.bg-mean{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.bg-mean li{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center;padding:10px 12px;border-radius:14px;background:var(--one-bg);border:var(--one-edge)}
.bg-mean i{grid-row:span 2;width:28px;height:28px;border-radius:50%;border:1px solid rgba(255,255,255,.2)}
.bg-mean b{color:#fff;font-weight:500;font-size:var(--fs-small)}
.bg-mean span{color:#b6aacb;font-size:var(--fs-note);line-height:1.3}
.bg-bar{display:flex;height:10px;border-radius:999px;overflow:hidden}
.bg-bar i{display:block}
.bg-603{margin-top:16px}
.bg-bar-l{height:18px}
.bg-603 ul{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.bg-603 li{line-height:1.5;color:#d9d0ea}.bg-603 b{color:#fff;font-weight:600;margin-right:4px}
.bg-pals{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:16px calc(var(--gutter,16px)*-1) 0;padding:0 var(--gutter,16px) 4px;scroll-padding-inline:var(--gutter,16px);scrollbar-width:none}
.bg-pals::-webkit-scrollbar{display:none}
.bg-pal{flex:none;width:84%;max-width:340px;scroll-snap-align:start;border-radius:22px;background:var(--one-bg);border:var(--one-edge);padding:12px;display:flex;flex-direction:column}
.bg-mock{position:relative;aspect-ratio:16/10;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border:1px solid rgba(255,255,255,.12)}
.bg-mock svg{width:38px;height:38px}
.bg-mock-n{margin:6px 0 0;font-family:'Playfair Display',Georgia,serif;font-style:italic;font-size:2rem;line-height:1}
.bg-mock-t{margin:6px 0 0;font-size:.62rem;letter-spacing:.3em;opacity:.8}
.bg-mock-b{margin-top:12px;padding:5px 12px;border-radius:999px;font-size:.7rem;font-weight:600}
.bg-pal .bg-bar{margin-top:12px}
.bg-pal-body{padding:16px 4px 4px;display:flex;flex-direction:column;flex:1}
.bg-pal-body>p{margin:4px 0 0;line-height:1.5;color:#d9d0ea}
.bg-src{order:-1;margin:0 0 8px!important;font-size:var(--fs-note)!important;color:#b6aacb!important}
.bg-sws{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:16px 0}
.bg-sw{-webkit-appearance:none;appearance:none;display:grid;grid-template-columns:auto 1fr;column-gap:8px;align-items:center;text-align:left;padding:6px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);color:#fff;font:inherit;cursor:pointer}
.bg-sw i{grid-row:span 2;width:30px;height:30px;border-radius:8px;border:1px solid rgba(255,255,255,.18)}
.bg-sw b{font-weight:500;font-size:var(--fs-note);line-height:1.2}
.bg-sw span{font-size:var(--fs-note);color:#b6aacb;font-family:ui-monospace,monospace;line-height:1.2}
.bg-sw.copied span{color:#C9A8FF}
.bg-pal .bg-pick{margin-top:auto;align-self:flex-start}
.bg-count{margin:12px 0 0;font-size:var(--fs-note);color:#b6aacb}

/* 04 rules */
.bg-vers,.bg-dos{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bg-vers li,.bg-dos li{display:flex;flex-direction:column}
.bg-vt{border-radius:14px;background:var(--lg-tile);overflow:hidden;display:grid;place-items:center;aspect-ratio:16/10}
.bg-vt .bg-art{width:100%}
.bg-v.is-dark .bg-vt{background:#2B2724}
.bg-vers b,.bg-dos b{margin-top:8px;color:#fff;font-weight:500;font-size:var(--fs-small)}
.bg-vers span,.bg-dos span{margin-top:2px;color:#b6aacb;font-size:var(--fs-note);line-height:1.4}
.bg-fx{display:block;width:100%}
.bg-fx .bg-art{width:100%}
.bg-do b{color:#C9A8FF}
.bg-do.is-dont b{color:#fff}
.bg-do.is-dont .bg-vt{position:relative}
.bg-do.is-dont .bg-vt::after{content:"";position:absolute;right:8px;top:8px;width:18px;height:18px;border-radius:50%;background:#140E22 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M6 6l6 6M12 6l-6 6' stroke='%23fff' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/18px no-repeat}
.bg-do.is-busy .bg-vt{background:repeating-linear-gradient(35deg,#c96b9a 0 10px,#f1c84b 10px 20px,#4bb3a3 20px 30px,#7a4fd6 30px 40px)}
.bg-space{display:grid;gap:16px;margin-top:16px}
.bg-space-box{border-radius:14px;background:var(--lg-tile);padding:20px}
.bg-space-in{border:1.5px dashed #A8853F;border-radius:6px;padding:8%;position:relative}
.bg-space p{margin:0;line-height:1.5;color:#d9d0ea}
.bg-files{list-style:none;margin:16px 0 0;padding:0;border-top:1px solid rgba(255,255,255,.12)}
.bg-files li{display:grid;grid-template-columns:76px 1fr;gap:12px;padding:14px 2px;border-bottom:1px solid rgba(255,255,255,.12);line-height:1.45}
.bg-files b{color:#C9A8FF;font-family:var(--font-display,'Techna Sans'),sans-serif;font-weight:600;font-size:var(--fs-small)}
.bg-files span{color:#e9e3f5}
.bg-same{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px 12px}
.bg-same li{display:flex;gap:10px;align-items:baseline;line-height:1.45;color:#e9e3f5}
.bg-same li::before{content:"";flex:none;width:8px;height:8px;background:#C9A8FF;clip-path:polygon(0 0,100% 50%,0 100%)}

/* 05 picks */
.bg-picks{margin-top:16px;padding:8px 18px 20px;border-radius:22px;background:var(--one-bg);border:1px solid rgba(201,168,255,.4);box-shadow:0 0 30px -14px rgba(123,92,255,.7)}
.bg-pk{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 12px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.bg-pk span{grid-column:1;font-size:var(--fs-note);color:#b6aacb;text-transform:uppercase;letter-spacing:.12em;font-family:var(--font-display,'Techna Sans'),sans-serif}
.bg-pk b{grid-column:1;color:#6d6280;font-weight:500}
.bg-pk.has b{color:#fff}
.bg-pk a{grid-column:2;grid-row:1/3;color:#fff;font-size:var(--fs-small);text-decoration:none;padding:8px 0;background:linear-gradient(90deg,#7B5CFF,#C9A8FF) 0 100%/100% 1px no-repeat}
.bg-pk.has a{opacity:.6}
.bg-pk-act{margin-top:24px}
.bgp .bg-picks .bg-note{text-align:center}

/* FAQ as plain rows, like the service pages */
.bgp .faq-list{margin-top:16px;gap:0;border-top:1px solid rgba(255,255,255,.12)}
.bgp .faq-item,.bgp .faq-item:not([open]),.bgp .faq-item[open]{margin:0;background:none!important;border:0!important;border-bottom:1px solid rgba(255,255,255,.12)!important;border-radius:0!important;box-shadow:none!important}
.bgp .faq-item::before,.bgp .faq-item::after{display:none!important}
.bgp .faq-item summary,.bgp .faq-item .faq-a{padding-left:2px;padding-right:2px}

@media (min-width:761px){
  .bg-lt.on,.bg-lt{display:grid;grid-template-columns:1.1fr 1fr;gap:20px;align-items:center}
  .bg-ready .bg-lt.on{display:grid}
  .bg-pairs{grid-template-columns:repeat(3,1fr)}
  .bg-pair-h{font-size:1.6rem}
  .bg-mean{grid-template-columns:repeat(4,1fr)}
  .bg-vers,.bg-dos{grid-template-columns:repeat(3,1fr)}
  .bg-vers{grid-template-columns:repeat(4,1fr)}
  .bg-space{grid-template-columns:1fr 1fr;align-items:center}
  .bg-pals{margin-inline:0;padding-inline:0}
  .bg-pal{width:calc(50% - 6px)}
  .bg-ft-s{font-size:2.8rem}
}
@media (prefers-reduced-motion:reduce){.bg-ready .bg-lt.on{animation:none}.bg-pals{scroll-behavior:auto}}
.bg-goldtxt{background:linear-gradient(120deg,#B8975A,#F6EBCB 50%,#C9A96A);-webkit-background-clip:text;background-clip:text;color:transparent}
.bg-gnote{display:flex;gap:8px;align-items:baseline;margin:-4px 0 16px!important;font-size:var(--fs-note)!important;color:#b6aacb!important;line-height:1.4!important}
.bg-gnote i{flex:none;width:10px;height:10px;border-radius:3px;background:linear-gradient(120deg,#B8975A,#F6EBCB,#C9A96A)}
.bg-own{margin-top:16px;padding:18px;border-radius:20px;border:1.5px dashed rgba(201,168,255,.5)}
.bg-own .bg-own-k{margin:0;font-family:var(--font-display,'Techna Sans'),sans-serif;font-size:var(--fs-note);letter-spacing:.12em;text-transform:uppercase;color:#C9A8FF}
.bg-own h3{margin-top:12px}
.bg-own>p:not(.bg-own-k){margin:8px 0 16px;line-height:1.5;color:#d9d0ea}
.bg-pal-own{background:none;border:1.5px dashed rgba(201,168,255,.5)}
.bg-mock-own{background:#F7F3EC;color:#2B2724;border-style:dashed}
.bg-wheel{width:64px;height:64px;border-radius:50%;background:conic-gradient(#C9A96A,#B87333,#D11F7A,#E8CFC0,#C6E84A,#1F5C63,#9EDFC3,#C9A96A);box-shadow:inset 0 0 0 18px #F7F3EC}
.bg-mock-own .bg-mock-t{margin-top:12px}
/* font pairs as spec sheets */
.bg-pairs{grid-template-columns:1fr!important}
.bg-spec{margin-top:16px;padding:18px 16px;border-radius:14px;background:rgba(10,6,20,.35);border:1px solid rgba(255,255,255,.08)}
.bg-el{position:relative;padding-right:32px}
.bg-spec .bg-pair-h{margin:0;line-height:1.1;color:#fff;overflow-wrap:anywhere}
.bg-spec .bg-pair-t{margin:0;font-size:1rem;line-height:1.5;color:#d9d0ea}
.bg-pair-q{margin:0;line-height:1.3;color:#fff}
.bg-num{position:absolute;right:0;top:50%;transform:translateY(-50%);width:22px;height:22px;border-radius:50%;background:#C9A8FF;color:#140E22;font:600 13px/22px Outfit,sans-serif;font-style:normal;text-align:center}
.bg-gap{position:relative;margin-right:32px;background:repeating-linear-gradient(90deg,rgba(201,168,255,.75) 0 4px,transparent 4px 8px) 0 0/100% 1px no-repeat,repeating-linear-gradient(90deg,rgba(201,168,255,.75) 0 4px,transparent 4px 8px) 0 100%/100% 1px no-repeat}
.bg-gap span{position:absolute;right:-32px;top:50%;transform:translateY(-50%);width:32px;text-align:right;font-size:var(--fs-note);line-height:1;color:#C9A8FF;white-space:nowrap}
.bg-legend{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px}
.bg-legend li{display:flex;gap:10px;align-items:baseline;line-height:1.45;color:#d9d0ea;font-size:var(--fs-small)}
.bg-legend i{flex:none;width:20px;height:20px;border-radius:50%;background:#C9A8FF;color:#140E22;font:600 12px/20px Outfit,sans-serif;font-style:normal;text-align:center;transform:translateY(4px)}
.bg-legend b{color:#fff;font-weight:600;margin-right:4px}
.bg-rule{display:flex;gap:10px;align-items:baseline;margin:16px 0 0;line-height:1.5;color:#d9d0ea}
.bg-rule i{flex:none;width:8px;height:8px;background:#C9A8FF;clip-path:polygon(0 0,100% 50%,0 100%)}
.bg-rule b{color:#fff;font-weight:600}
/* logo card rows S4: icon + label + open triangle */
.bg-acs{margin-top:16px;display:grid;gap:4px}
.bg-ac-hd{-webkit-appearance:none;appearance:none;display:flex;align-items:center;gap:12px;width:100%;min-height:48px;padding:0;background:none;border:0;color:inherit;font:inherit;text-align:left;cursor:pointer}
.bg-ac-ic{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:rgba(201,168,255,.14);border:1px solid rgba(201,168,255,.3)}
.bg-ac-ic svg{width:15px;height:15px;stroke:#C9A8FF;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bg-ac-l{flex:1;font-family:var(--font-display,'Techna Sans'),sans-serif;font-size:var(--fs-note);letter-spacing:.12em;text-transform:uppercase;color:#C9A8FF}
.bg-ac-t{flex:none;width:12px;height:11px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 11'%3E%3Cpath d='M1 1h10L6 10z' fill='none' stroke='%23fff' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .3s}
.bg-ac.open .bg-ac-t{transform:rotate(180deg)}
.bg-ac-pn{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s cubic-bezier(.22,.8,.24,1)}
.bg-ac-pn>div{overflow:hidden}
.bg-ac.open .bg-ac-pn{grid-template-rows:1fr}
.bg-ac-pn p{margin:0;padding:0 0 12px 42px;line-height:1.5;color:#e9e3f5;opacity:0;transform:translateY(-4px);transition:opacity .3s,transform .3s}
.bg-ac.open .bg-ac-pn p{opacity:1;transform:none}
/* Pick this stretches up to Next type */
.bg-lt .bg-row .bg-pick{flex:1;justify-content:center}
.bg-lt .bg-row{gap:20px}
@media (prefers-reduced-motion:reduce){.bg-ac-pn,.bg-ac-pn p,.bg-ac-t{transition:none}}
.bg-lt .bg-row .bg-pick{flex:1;width:100%;min-height:48px}
/* tab underline U3: 3px rounded with a soft lilac glow, fully inside the strip */
.bg-tabs button[aria-selected=true]::after{bottom:0;height:3px;border-radius:3px;box-shadow:0 0 10px rgba(123,92,255,.9),0 0 3px rgba(201,168,255,.8)}
/* Pick button triangle T2 (owner 2026-10-07): white outline pointing right; picked = turns down and fills dark on the lilac button */
.bg-pick::before{width:13px;height:12px;border:0;border-radius:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 12'%3E%3Cpath d='M1 1h11L6.5 11z' fill='none' stroke='%23fff' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;transform:rotate(-90deg);transition:transform .35s cubic-bezier(.3,1.5,.5,1)}
.bg-pick[aria-pressed=true]::before{border:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 12'%3E%3Cpath d='M1 1h11L6.5 11z' fill='%23140E22' stroke='%23140E22' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;transform:rotate(0)}
@media (prefers-reduced-motion:reduce){.bg-pick::before{transition:none}}
/* Logo type picker P2 (owner 2026-10-07): icon tiles instead of plain word tabs; the chosen one has a lilac edge and glow */
.bg-tabs{gap:8px;border-bottom:0;padding-bottom:2px;-webkit-mask:none;mask:none}
.bg-tabs button{width:86px;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px 9px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:var(--one-bg);color:#b6aacb;font-size:var(--fs-note);line-height:1.2;text-align:center;white-space:normal;transition:border-color .25s,color .25s,box-shadow .25s}
.bg-tabs button .bg-mi{width:26px;height:26px;color:#b6aacb;transition:color .25s}
.bg-tabs button[aria-selected=true]{color:#fff;border-color:rgba(201,168,255,.8);box-shadow:0 0 18px -6px rgba(123,92,255,.9)}
.bg-tabs button[aria-selected=true] .bg-mi{color:#C9A8FF}
.bg-tabs button[aria-selected=true]::after{display:none}
/* Card change A1 crossfade (owner 2026-10-07): all logo cards share one grid cell (no height jump); the old card fades out while the new one fades in, 0.8 s */
.bg-lts.bg-ready{display:grid}
.bg-ready .bg-lt,.bg-ready .bg-lt.on{display:block;grid-area:1/1;margin:0;animation:none}
.bg-ready .bg-lt{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .8s ease,visibility 0s .8s}
.bg-ready .bg-lt.on{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .8s ease,visibility 0s}
@media (min-width:761px){.bg-ready .bg-lt,.bg-ready .bg-lt.on{display:grid}}
@media (prefers-reduced-motion:reduce){.bg-ready .bg-lt,.bg-ready .bg-lt.on{transition:none}}
/* Hero J3 journey line (owner 2026-10-08): the 5 sections as numbered circles on one lilac line, replaces the pill buttons */
.bg-jr{position:relative;display:flex;justify-content:space-between;margin-top:24px}
.bg-jr::before{content:"";position:absolute;left:10%;right:10%;top:14px;height:1px;background:linear-gradient(90deg,#7B5CFF,#C9A8FF)}
.bg-jr a{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;width:20%;font-size:var(--fs-note);color:#d9d0ea;text-align:center;text-decoration:none;line-height:1.25}
.bg-jr a i{width:28px;height:28px;border-radius:50%;background:#1E1432;border:1px solid rgba(201,168,255,.6);display:grid;place-items:center;font-style:normal;font-family:var(--font-display,'Techna Sans'),sans-serif;font-size:var(--fs-note);color:#C9A8FF;transition:background-color .25s,color .25s}
.bg-jr a:hover i,.bg-jr a:focus-visible i{background:#C9A8FF;color:#140E22}
.bg-how-c{justify-content:center;text-align:center;margin-top:20px}
.bg-how-c b{color:#fff;font-weight:500}
/* A1 timer line under the logo card (owner 2026-10-08): fills over the 7 s, fades away once the visitor takes over */
.bg-timer{height:3px;border-radius:3px;background:rgba(255,255,255,.1);margin-top:12px;overflow:hidden;transition:opacity .4s}
.bg-timer i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#7B5CFF,#C9A8FF);transform-origin:0 50%;transform:scaleX(0)}
.bg-timer.off{opacity:0}

/* "My picks" bar B1 + pick message (owner 2026-10-11) */
.bg-pbar{position:fixed;z-index:44;left:calc(16px + env(safe-area-inset-left));right:calc(92px + env(safe-area-inset-right));bottom:calc(24px + env(safe-area-inset-bottom));max-width:420px;display:flex;align-items:center;gap:8px;height:56px;padding:0 8px 0 16px;border-radius:999px;background:rgba(30,20,50,.94);border:1px solid rgba(201,168,255,.45);box-shadow:0 10px 26px rgba(0,0,0,.4);transform:translateY(calc(100% + 40px));opacity:0;transition:transform .45s cubic-bezier(.22,.8,.24,1),opacity .3s;pointer-events:none}
.bg-pbar.show{transform:none;opacity:1;pointer-events:auto}
.bg-pbar-main{flex:1;min-width:0;display:flex;align-items:center;gap:6px;color:inherit;text-decoration:none}
.bg-pbar-t{flex:1;min-width:0;white-space:nowrap;font:600 12px var(--font-display);letter-spacing:.06em;text-transform:uppercase;color:#C9A8FF}.bg-pbar-t b{color:#fff;font-weight:600}
.bg-pbar-s{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:9px;border:1.5px dashed rgba(201,168,255,.5);color:rgba(201,168,255,.65);font:600 13px var(--font-display);overflow:hidden}
.bg-pbar-s.on{border:0;background:#F4EFFF;color:#1E1432;font-size:15px}
.bg-pbar-s.on svg{width:26px;height:26px}
.bg-pbar-s i{display:inline-block;width:7px;height:16px;margin:0 1px;border-radius:2px}
.bg-pbar-s.on:has(i){display:flex;justify-content:center;align-items:center}
.bg-pbar-go{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;color:#fff;background:linear-gradient(120deg,#7B5CFF,#B79CFF 30%,#EDE3FF 50%,#B79CFF 70%,#7B5CFF);background-size:300% 300%;animation:diag 10s linear infinite alternate}
.bg-pbar-go svg{width:20px;height:20px}
.bg-ptoast{position:fixed;z-index:46;left:50%;bottom:calc(96px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:8px;margin:0;padding:9px 14px;border-radius:999px;background:#2a1f48;border:1px solid rgba(201,168,255,.45);color:#fff;font-size:var(--fs-note);white-space:nowrap;transform:translate(-50%,16px);opacity:0;transition:.3s;pointer-events:none}
.bg-ptoast.on{transform:translate(-50%,0);opacity:1}.bg-ptoast b{color:#C9A8FF;font-weight:600}
.bg-ptoast i{width:8px;height:9px;background:#C9A8FF;clip-path:polygon(0 0,100% 50%,0 100%)}
@media (prefers-reduced-motion:reduce){.bg-pbar,.bg-ptoast{transition:none}.bg-pbar-go{animation:none}}

/* A4 Build it live (owner 2026-10-11) */
.bgb-on .bg-jr{display:none}
.bgb{padding-top:8px}
.bgb-live{position:sticky;top:calc(var(--header-h,56px) + 8px);z-index:20;margin:0 0 20px}
.bgb-card{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:18px;background:var(--lg-tile);color:var(--lg-ink);box-shadow:0 14px 34px rgba(0,0,0,.45);transition:background-color .4s,color .4s}
.bgb-tile{flex:none;display:grid;place-items:center;width:84px;height:56px;border-radius:12px;background:rgba(255,255,255,.55)}
.bgb-tile svg{width:100%;height:100%}
.bgb-txt{min-width:0;display:flex;flex-direction:column;gap:2px}
.bgb-txt b{font-size:1.45rem;line-height:1.05;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bgb-txt small{font-size:11px;letter-spacing:.16em;opacity:.75}
.bgb-txt em{align-self:flex-start;margin-top:6px;padding:3px 10px;border-radius:999px;background:var(--lg-ink);color:var(--lg-tile);font:600 11px var(--font-display);font-style:normal;letter-spacing:.04em}
.bgb-name{display:grid;gap:6px;margin:0 0 28px;font-size:var(--fs-note);color:var(--muted)}
.bgb-name input{min-height:48px;padding:0 16px;border-radius:14px;border:var(--one-edge);background:var(--one-bg);color:#fff;font:inherit;font-size:1rem}
.bgb h2{margin-bottom:14px}
.bgb-strip{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--gutter) * -1) 10px;padding:4px var(--gutter) 10px;scrollbar-width:none}
.bgb-strip::-webkit-scrollbar{display:none}
.bgb-strip button{flex:none;width:118px;scroll-snap-align:start;display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:16px;border:var(--one-edge);background:var(--one-bg);color:#fff;font:500 13px Outfit,sans-serif;text-align:center;cursor:pointer}
.bgb-strip button.on{border-color:#C9A8FF;box-shadow:0 0 18px -6px rgba(123,92,255,.9)}
.bgb-th{display:grid;place-items:center;aspect-ratio:1;border-radius:12px;background:#F7F3EC;color:#2B2724;font-size:28px;overflow:hidden;--lg-tile:#F7F3EC;--lg-ink:#2B2724;--lg-acc:url(#foil)}
.bgb-th svg{width:100%;height:100%}
.bgb-sw{display:flex;padding:12px}.bgb-sw i{flex:1;height:100%}
.bgb-note{margin:0 0 32px;font-size:var(--fs-note);color:var(--muted)}
.bgb .kicker{margin-top:8px}
.bgb-end{margin-top:12px;padding:20px;border-radius:20px;background:var(--one-bg);border:var(--one-edge);text-align:center}
.bgb-end p{margin:6px 0 16px;color:var(--muted)}
.bgb-help{margin-top:18px}
.bgb-help-open{display:inline-flex;align-items:center;gap:8px;padding:0;border:0;background:none;color:#fff;font:500 1rem Outfit,sans-serif;text-decoration:underline;text-decoration-color:#7B5CFF;text-underline-offset:5px;cursor:pointer}
.bgb-help-open .tri{width:8px;height:9px;background:#C9A8FF;clip-path:polygon(0 0,100% 50%,0 100%)}
.bgb-q{display:grid;gap:12px;margin-top:14px}
.bgb-qi{padding:14px;border-radius:16px;background:var(--one-bg);border:var(--one-edge)}
.bgb-qi p{margin:0 0 10px;font:600 13px var(--font-display);color:#C9A8FF}
.bgb-qi div{display:flex;flex-wrap:wrap;gap:8px}
.bgb-qi button{padding:8px 12px;border-radius:999px;border:1px solid rgba(201,168,255,.4);background:transparent;color:#fff;font:inherit;font-size:14px;cursor:pointer}
.bgb-qi button.on{background:#C9A8FF;color:#140E22;border-color:#C9A8FF}
.bgx{padding-top:8px!important;padding-bottom:8px!important}
.bgx:not(.open)>.wrap>*:not(.bgx-hd){display:none!important}
.bgx-hd{display:flex;justify-content:space-between;align-items:center;width:100%;padding:16px 18px;margin-bottom:0;border-radius:18px;border:var(--one-edge);background:var(--one-bg);color:#fff;font:600 1rem var(--font-display);cursor:pointer;text-align:left}
.bgx.open .bgx-hd{margin-bottom:24px;border-color:rgba(201,168,255,.55)}
.bgx-hd i{position:relative;width:22px;height:22px;border-radius:50%;border:1px solid rgba(255,255,255,.3)}
.bgx-hd i::before,.bgx-hd i::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1.5px;margin:-.75px 0 0 -5px;background:#fff;transition:transform .3s}
.bgx-hd i::after{transform:rotate(90deg)}.bgx.open .bgx-hd i::after{transform:rotate(0)}
@media (prefers-reduced-motion:reduce){.bgb-card{transition:none}}

/* strips: first card keeps the page margin when snapped (2026-10-12) */
.bgb-strip{scroll-padding-inline:var(--gutter)}

/* small phones (2026-10-12 check): the picks bar keeps only the count, the live card is more compact, bigger tap area on the helper link */
.bg-pbar-t{overflow:hidden}
@media (max-width:400px){.bg-pbar-w{display:none}.bg-pbar{padding-left:12px;gap:6px}.bg-pbar-s{width:30px;height:30px}}
@media (max-width:400px){.bgb-card{gap:10px;padding:10px 12px}.bgb-tile{width:66px;height:46px}.bgb-txt b{font-size:1.2rem}.bgb-txt em{margin-top:4px}}
.bgb-help-open{min-height:44px}

/* desktop: no sideways swiping with a mouse, the choices wrap into a grid (2026-10-12) */
@media (min-width:761px){.bgb-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));overflow:visible;margin:0 0 10px;padding:4px 0 10px}.bgb-strip button{width:auto}}

/* live card: the whole palette shows along its bottom edge (2026-10-12) */
.bgb-card{position:relative;overflow:hidden;padding-bottom:18px}
.bgb-strip-c{position:absolute;left:0;right:0;bottom:0;display:flex;height:6px}.bgb-strip-c i{flex:1}
.bgb-tile{background:var(--lg-tile)}
.bgb-txt em{transition:background-color .4s,color .4s}
.bgb-th{transition:background-color .4s,color .4s}

.bgb-strip-c{z-index:3}

/* strip tiles without a background (owner 2026-10-12): drawings sit straight on the dark card, light ink + gold until a palette is picked */
.bgb-strip .bgb-th{background:transparent!important;color:#F4EFFF;--lg-ink:#F4EFFF;--lg-acc:url(#foil)}
.bgb-strip .bgb-sw{background:transparent!important;padding:10px 4px}

/* live card: logo straight on the card colour, no box (owner 2026-10-12); script names no longer cut */
.bgb-tile{background:transparent!important}
.bgb-txt b{line-height:1.35;padding:.08em .1em .12em 0;margin:-.08em 0 -.1em}
.bgb-th{line-height:1.3}

/* T1 tagline tick box + F4 font boxes (owner 2026-10-12) */
.bgb-name:has(+.bgb-chk){margin-bottom:12px}
.bgb-chk{display:flex;align-items:center;gap:10px;min-height:44px;margin:0 0 12px;font-size:1rem;color:#fff;cursor:pointer}
.bgb-chk input{position:absolute;opacity:0;width:1px;height:1px}
.bgb-chk i{flex:none;width:22px;height:22px;border-radius:6px;border:1.5px solid #C9A8FF;display:grid;place-items:center}
.bgb-chk.on i{background:#C9A8FF}.bgb-chk.on i::after{content:"";width:11px;height:8px;background:#140E22;clip-path:polygon(0 50%,35% 100%,100% 0,85% 0,35% 70%,15% 40%)}
.bgb-chk input:focus-visible+i{outline:2px solid #C9A8FF;outline-offset:3px}
.bgb-tgbox{margin-bottom:28px}.bgb-chk:not(.on){margin-bottom:28px}
.bgb-txt small[hidden]{display:none}
.bgb-strip.bgb-fg{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;overflow:visible;margin:0 0 10px;padding:4px 0 10px}
.bgb-fbox{min-width:0;padding:8px;border-radius:16px;border:var(--one-edge);background:var(--one-bg);text-align:center}
.bgb-fbox p{margin:2px 0 8px;font:600 12px var(--font-display);letter-spacing:.06em;text-transform:uppercase;color:#C9A8FF}
.bgb-strip .bgb-fbox button{width:100%;display:block;padding:6px 4px;margin:0 0 6px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:transparent;gap:0}
.bgb-strip .bgb-fbox button:last-child{margin:0}
.bgb-ff{display:block;font-size:24px;line-height:1.3;color:#F4EFFF}
.bgb-fbox small{display:block;font-size:var(--fs-note);color:var(--muted)}
.bgb-strip .bgb-fbox button.on{border-color:#C9A8FF;background:rgba(201,168,255,.14);box-shadow:none}

/* round 3 (owner 2026-10-12): B3 paint chip fan palette tiles, E1 rows in one box, F1 font rows, G5 file icons */
.bgb-strip .bgb-sw{position:relative;display:block;padding:0!important}
.bgb-strip .bgb-sw i{position:absolute;left:50%;bottom:8%;width:20%;height:78%;margin-left:-10%;border-radius:7px;transform-origin:50% 100%;box-shadow:0 2px 6px rgba(0,0,0,.35);transition:transform .4s cubic-bezier(.22,.8,.24,1)}
.bgb-strip .bgb-sw i:nth-child(1){transform:rotate(-27deg)}.bgb-strip .bgb-sw i:nth-child(2){transform:rotate(-9deg)}.bgb-strip .bgb-sw i:nth-child(3){transform:rotate(9deg)}.bgb-strip .bgb-sw i:nth-child(4){transform:rotate(27deg)}.bgb-strip .bgb-sw i:nth-child(5){transform:rotate(40deg)}
.bgb-strip button.on .bgb-sw i:nth-child(1){transform:rotate(-36deg)}.bgb-strip button.on .bgb-sw i:nth-child(4){transform:rotate(36deg)}.bgb-strip button.on .bgb-sw i:nth-child(5){transform:rotate(50deg)}
.bg-acs{gap:0;border-radius:16px;border:var(--one-edge);overflow:hidden}
.bg-ac+.bg-ac{border-top:1px solid rgba(255,255,255,.08)}
.bg-ac-hd{padding:0 14px 0 10px}
.bg-ac-pn p{padding:0 14px 12px 52px}
.bg-ft-c{grid-template-columns:96px 1fr auto;gap:0 12px;align-items:center;padding:12px 0;cursor:pointer}
.bg-ft-c .bg-ft-s{grid-column:1;font-size:1.6rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bg-ft-c .bg-ft-meta h3{margin:0;font-size:1rem}
.bg-ft-c .bg-ft-meta .bg-feel{margin:2px 0 0}
.bg-ft-c .bg-ft-meta p:not(.bg-feel){display:none}
.bg-ft-c .bg-pick{display:none}
.bg-ft-c .bg-ft-t{grid-column:3;grid-row:1;width:12px;height:11px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 11'%3E%3Cpath d='M1 1h10L6 10z' fill='none' stroke='%23fff' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .3s}
.bg-ft-c.open .bg-ft-t{transform:rotate(180deg)}
.bg-ft-c.open .bg-ft-meta p:not(.bg-feel){display:block;margin-top:8px}
.bg-ft-c.open .bg-pick{display:inline-flex;grid-column:2/-1;justify-self:start;margin-top:12px}
.bg-ft-rule{display:flex;gap:10px;margin:16px 0 0;font-size:var(--fs-note);line-height:1.5;color:var(--muted)}
.bg-ft-rule i{flex:none;width:8px;height:9px;margin-top:5px;background:#C9A8FF;clip-path:polygon(0 0,100% 50%,0 100%)}
.bg-gf{margin-top:16px}
.bg-gf-row{display:flex;justify-content:space-between;gap:6px}
.bg-gf-row button{-webkit-appearance:none;appearance:none;flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px;padding:4px 0;background:none;border:0;color:var(--muted);font:600 11px var(--font-display,'Techna Sans'),sans-serif;cursor:pointer}
.bg-gf-row button>b{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.bg-gf-d{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bg-gf-row button small{font:inherit}
.bg-doc{width:40px;height:50px;border-radius:6px;background:rgba(201,168,255,.12);border:1.5px solid rgba(201,168,255,.45);clip-path:polygon(0 0,70% 0,100% 24%,100% 100%,0 100%);display:grid;place-items:end center;padding-bottom:6px;font-size:9px;color:#fff;transition:background-color .25s,color .25s}
.bg-gf-row button.on{color:#fff}.bg-gf-row button.on .bg-doc{background:#C9A8FF;color:#140E22}
.bg-gf-out{margin:12px 0 0;min-height:1.5em;color:#e9e3f5}

/* round 4 (owner 2026-10-12): small white GOAT BOLD mark on the last paint chip; C1 builder closing panel; H5 same look hub */
.bgb-strip .bgb-sw i:last-child::after{content:"";position:absolute;left:50%;top:14%;width:62%;aspect-ratio:1;transform:translateX(-50%);background:#fff;-webkit-mask:url(../img/goatbold-mark.svg) center/contain no-repeat;mask:url(../img/goatbold-mark.svg) center/contain no-repeat;filter:drop-shadow(0 0 1px rgba(0,0,0,.45))}
.bgb .bgb-end.cta-panel{margin-top:24px;padding:28px 22px;text-align:center}
.bgb .bgb-end.cta-panel p.lead{margin:0 0 4px;color:#d9d0ea}
.bg-hub{position:relative;height:280px;margin:16px 0 40px}
.bg-hub-ln{position:absolute;inset:0;width:100%;height:100%}
.bg-hub-ln line{stroke:rgba(201,168,255,.35);stroke-width:.4;stroke-dasharray:1.2 1.2;vector-effect:non-scaling-stroke}
.bg-hub-c{position:absolute;left:50%;top:50%;width:88px;height:88px;margin:-44px 0 0 -44px;border-radius:50%;display:grid;place-items:center;background:#F7F3EC;color:#1E1432;font:italic 500 18px "Playfair Display",Georgia,serif;box-shadow:0 0 0 6px rgba(201,168,255,.15)}
.bg-hub ul{list-style:none;margin:0;padding:0}
.bg-hub li{position:absolute;display:flex;flex-direction:column;align-items:center;gap:4px;width:96px;margin:-22px 0 0 -48px;font:600 11px/1.25 var(--font-display,'Techna Sans'),sans-serif;color:var(--muted);text-align:center}
.bg-hub-i{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#241a3c;border:1.5px solid rgba(201,168,255,.45);color:#C9A8FF}
.bg-hub-i svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* round 5 (owner 2026-10-12) */
.bgb-strip button[data-lg="2"] .bgb-sw i:last-child::after{display:none}
.bgb-strip button[data-lg="2"] .bgb-sw i:nth-child(2)::after{content:"";position:absolute;left:50%;top:14%;width:62%;aspect-ratio:1;transform:translateX(-50%);background:#fff;-webkit-mask:url(../img/goatbold-mark.svg) center/contain no-repeat;mask:url(../img/goatbold-mark.svg) center/contain no-repeat;filter:drop-shadow(0 0 1px rgba(0,0,0,.45))}
.bgb-card,.bgb-card *{transition:none!important}
.bgb-card.bgb-pop{animation:bgbPop .28s cubic-bezier(.22,.8,.24,1)}
@keyframes bgbPop{0%{transform:scale(.97)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){.bgb-card.bgb-pop{animation:none}}
#picks{display:none}
.bgb-endw{position:relative}

/* N1 (owner 2026-10-12): template note instead of the name / tagline boxes */
.bgb-n1{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;margin:0 0 28px;border-radius:16px;border:var(--one-edge);background:var(--one-bg)}
.bgb-n1>i{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:rgba(201,168,255,.14);border:1px solid rgba(201,168,255,.3)}
.bgb-n1 svg{width:15px;height:15px;stroke:#C9A8FF;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bgb-n1 b{display:block;font:600 1rem var(--font-display);color:#fff}
.bgb-n1 p{margin:2px 0 0;font-size:var(--fs-note);line-height:1.5;color:var(--muted)}

/* owner 2026-10-12: offer tab hidden while the live card is pinned; hub lights clockwise on scroll; name box in the closing panel */
.fco-trigger{transition:opacity .25s}
html.bgb-stuck .fco-trigger,html.bgb-stuck .fco-pop{opacity:0;pointer-events:none}
.bg-hub-i{transition:background-color .35s,color .35s,border-color .35s,box-shadow .35s}
.bg-hub li{transition:color .35s}
.bg-hub li.on{color:#fff}
.bg-hub li.on .bg-hub-i{background:#C9A8FF;border-color:#C9A8FF;color:#140E22;box-shadow:0 0 16px -4px rgba(201,168,255,.8)}
.bg-hub-ln line{transition:stroke .35s}
.bg-hub-ln line.on{stroke:rgba(201,168,255,.85)}
.bg-hub-c{transition:box-shadow .5s}
.bg-hub.all .bg-hub-c{box-shadow:0 0 0 6px rgba(201,168,255,.45),0 0 28px rgba(201,168,255,.45)}
@media (prefers-reduced-motion:reduce){.bg-hub-i,.bg-hub li,.bg-hub-ln line,.bg-hub-c{transition:none}}
.bgb-end .bgb-endn{max-width:360px;margin:18px auto 6px;text-align:left}
.bgb-lock{display:flex;align-items:center;justify-content:center;gap:6px;margin:0 0 4px;font-size:var(--fs-note);color:var(--muted)}
.bgb-lock svg{width:13px;height:13px;stroke:#C9A8FF;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Same look hub: still, all places shown filled (owner 2026-10-12: no scroll animation) */
.bg-hub li{color:#fff}
.bg-hub li .bg-hub-i{background:#C9A8FF;border-color:#C9A8FF;color:#140E22;box-shadow:0 0 16px -4px rgba(201,168,255,.8)}
.bg-hub-ln line{stroke:rgba(201,168,255,.85)}
.bg-hub .bg-hub-c{box-shadow:0 0 0 6px rgba(201,168,255,.45),0 0 28px rgba(201,168,255,.45)}
/* desktop pass 2 (2026-10-12): 7 logo types and 13 palettes fill even rows (no single tile left alone on a row) */
@media (min-width:900px){.bgb-strip[data-g="logo"],.bgb-strip[data-g="palette"]{grid-template-columns:repeat(7,1fr)}}

/* "Not sure?" button Q1 (owner 2026-10-12, _preview-guide-help.html): lilac strip, the 3 dots light up one after another (3 questions) */
.bgb-help-open.bgb-q1{display:flex;width:100%;max-width:420px;min-height:48px;gap:12px;padding:12px 16px;border-radius:999px;background:linear-gradient(135deg,rgba(123,92,255,.35),rgba(201,168,255,.12));border:1px solid rgba(201,168,255,.5);text-decoration:none;text-align:left;transition:transform .15s}
.bgb-q1:active{transform:scale(.97)}
.bgb-q1 b{flex:1;font:600 14px var(--font-display);color:#fff}
.bgb-q1 .tri{width:9px;height:10px}
.bgb-dots{display:flex;gap:4px}.bgb-dots i{width:6px;height:6px;border-radius:50%;background:#C9A8FF;opacity:.35;animation:bgbDot 2.4s infinite}
.bgb-dots i:nth-child(2){animation-delay:.3s}.bgb-dots i:nth-child(3){animation-delay:.6s}
@keyframes bgbDot{0%,10%{opacity:.35;transform:none}25%,70%{opacity:1;transform:scale(1.4)}90%,100%{opacity:.35;transform:none}}
@media (prefers-reduced-motion:reduce){.bgb-dots i{animation:none;opacity:1}}

/* 3 questions A1 (owner 2026-10-12): one card, one question at a time, 3-part progress line */
.bgb-q{display:block;padding:18px;border-radius:22px;background:var(--one-bg);border:var(--one-edge)}
.bgb-q[hidden]{display:none}
.bgb-qbar{display:flex;gap:6px;margin:0 0 14px}.bgb-qbar i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.12);transition:background-color .3s}.bgb-qbar i.on{background:linear-gradient(90deg,#7B5CFF,#C9A8FF)}
.bgb-qi{padding:0;border:0;background:none}
.bgb-qi .bgb-qk{margin:0 0 8px;font:600 13px var(--font-display);letter-spacing:.06em;color:#C9A8FF}
.bgb-qi .bgb-qt{margin:0 0 12px;font:600 18px var(--font-display);color:#fff}
.bgb-qi.bgb-in{animation:bgbSl .35s cubic-bezier(.22,.8,.24,1)}
@keyframes bgbSl{from{opacity:0;transform:translateX(18px)}}
@media (prefers-reduced-motion:reduce){.bgb-qi.bgb-in{animation:none}}

/* phone pass: file icon labels 12px (were 11px) */
.bg-gf-row button{font-size:12px}