*{box-sizing:border-box} html,body{height:100%}
    body{margin:0;background:var(--bg);color:var(--ink);
      font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.4}
    a{color:inherit;text-decoration:none} img{display:block;max-width:100%;height:auto}

    /* header row + menu */
    .header-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
    nav.main{display:flex;align-items:center;gap:14px}
    nav.main a{display:inline-block;padding:8px 10px;border-radius:10px}
    nav.main a:focus-visible{outline:var(--focus);outline-offset:2px}

    main{padding:24px 0 48px}
    .hero{text-align:center;margin:8px 0 24px;padding:20px 12px;border-radius:16px;
      background: radial-gradient(120% 100% at 50% 0%, var(--hero-wash) 0%, rgba(255,255,255,0) 70%)}
    .hero h1{margin:0 0 8px;font-weight:900;letter-spacing:.2px;font-size:clamp(28px,4vw,44px)}
    .hero h2{margin:6px 0;font-weight:900;font-size:clamp(18px,2.6vw,26px)}
    .hero .sub{margin:0 auto;color:var(--muted);max-width:820px;font-size:clamp(15px,1.8vw,18px)}

    .tiles{display:grid;grid-template-columns:1fr;gap:14px;margin:28px 0 18px}
    @media (min-width:1024px){.tiles{grid-template-columns:1fr 1fr}}

    .tile{position:relative;overflow:hidden;background:var(--paper);border-radius:var(--radius);
      outline:none;border:1px solid var(--border);box-shadow:var(--shadow-rest);
      transition:transform 160ms ease, box-shadow 160ms ease}
    .tile:focus-visible{outline:var(--focus);outline-offset:2px}
    .tile:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover)}

    /* Media area: soft color wash + faint halftone */
    .tile-media{position:relative;display:grid;place-items:center;aspect-ratio:16/9;padding:12px;
      background:radial-gradient(120% 100% at 50% 50%, #ffffff 0%, rgba(0,0,0,0) 70%),
                 radial-gradient(circle at 12% 18%, rgba(0,0,0,0.025) 1px, transparent 1px),
                 radial-gradient(circle at 62% 74%, rgba(0,0,0,0.02) 1px, transparent 1px);
      background-size:100% 100%,6px 6px,8px 8px}
    .tile.AEO .tile-media{background-image:
      radial-gradient(120% 100% at 50% 50%, rgba(18,214,163,0.08) 0%, rgba(18,214,163,0.00) 70%),
      radial-gradient(circle at 12% 18%, rgba(0,0,0,0.025) 1px, transparent 1px),
      radial-gradient(circle at 62% 74%, rgba(0,0,0,0.02) 1px, transparent 1px)}
    .tile.SRCH .tile-media{background-image:
      radial-gradient(120% 100% at 50% 50%, rgba(58,134,255,0.10) 0%, rgba(58,134,255,0.00) 72%),
      radial-gradient(circle at 12% 18%, rgba(0,0,0,0.025) 1px, transparent 1px),
      radial-gradient(circle at 62% 74%, rgba(0,0,0,0.02) 1px, transparent 1px)}
    @media (max-width:480px){.tile-media{aspect-ratio:4/5}}

    /* Sticker frame with neon hover ring */
    .sticker{position:relative;width:min(760px,88%);padding:10px;border-radius:18px;background:#fff;border:3px solid #fff;
      filter:drop-shadow(0 10px 26px rgba(0,0,0,0.10));transition:filter 160ms ease, transform 160ms ease}
    .tile:hover .sticker{filter:drop-shadow(0 18px 40px rgba(0,0,0,0.14))}
    .tile.AEO .sticker::after,.tile.SRCH .sticker::after{content:'';position:absolute;inset:-7px;border-radius:22px;opacity:0;pointer-events:none;transition:opacity 160ms ease}
    .tile.AEO:hover .sticker::after{box-shadow:0 0 0 2px var(--neon-aeo),0 0 28px 2px rgba(255,46,154,0.25);opacity:.45}
    .tile.SRCH:hover .sticker::after{box-shadow:0 0 0 2px var(--neon-srch),0 0 28px 2px rgba(0,210,255,0.25);opacity:.45}

    .tile-body{background:#fff;border:1px solid var(--border);padding:14px 16px 18px;display:grid;gap:6px}
    .tile h2{margin:0;font-weight:900;letter-spacing:.8px;text-transform:uppercase;font-size:clamp(18px,2.2vw,22px)}
    .tile p.caption{margin:0;color:var(--muted);font-size:clamp(14px,1.8vw,16px)}
    .tile .cta{margin-top:6px;display:inline-block;font-weight:800;font-size:14px;padding:10px 14px;border-radius:12px;border:0;
      background:var(--cta);color:<?php echo ($SELECTION['cta'] === 3) ? '#FFFFFF' : 'var(--ink)'; ?>;box-shadow:inset 0 -1px 0 rgba(0,0,0,0.08)}

    .below-tiles{text-align:center;margin:20px 0 10px}
    .btn-primary{display:inline-block;background:var(--brand);color:#fff;font-weight:800;letter-spacing:.2px;
      padding:12px 18px;border-radius:999px;border:0;cursor:pointer}
    .btn-primary:focus-visible{outline:var(--focus)}

    footer.site{margin-top:36px;border-top:1px solid var(--border);background:#fff}
    footer .foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;
      font-size:14px;color:var(--muted);padding:12px 0}
    .foot a{color:var(--brand);text-decoration:underline}

    details.small{margin-top:6px;font-size:13px}

    /* Color panel */
    .palette{margin:20px 0 0;padding:12px;border:1px dashed var(--border);border-radius:12px;background:#fff}
    .palette .row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:8px 0}
    .sw{display:inline-block;width:28px;height:20px;border-radius:6px;border:1px solid var(--border)}
    .chip{display:inline-block;padding:6px 10px;border-radius:10px;border:1px solid var(--border);font-size:13px}
    .chip a{text-decoration:none}



.pill {
 display: inline-flex;
 align-items: center;
 gap: .4rem;
 padding: .6rem .9rem;
 border: 1px solid #e3e3e3;
 border-radius: 999px;
 background: #fff;
 color: #0a0a0a;
 font-weight: 600;
 line-height: 1;
 text-decoration: none;
 box-shadow: 0 2px 0 rgba(0,0,0,.04);
}

  summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    font-size: large;
    margin: 5px 0;
    outline:0;
  }
  summary::-webkit-details-marker { display: none; }

  /* left arrow */
  summary::before {
    content: '▶';
    flex: 0 0 1em;      /* fixed space for arrow */
    margin-right: 8px;  /* gap before text */
    transform: rotate(0deg);
    transition: transform .15s ease;
  }
  details[open] > summary::before {
    transform: rotate(90deg);
  }

  details > ul {
    background: #eee;
    margin: 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border, #E8EEF5);
    border-radius: 8px;
  }