/* Hallmark · component: page closing (FAQ + maker card + account strip) · theme: existing LumHub
 * states: default · hover · focus-visible · open · active · reduced-motion
 * One grammar for every tool, game, course and the tools hub (2026-11-05):
 *   1. .lum-faq            shared accordion (app/Views/faq.php)
 *   2. .lum-promotion      maker card: official logo -> lum360.com with UTM; the name is never repeated in text (app/Views/promotion.php)
 *   3. .module-account     sync status, profile and suggestion strip (app/Views/module-account.php)
 * The maker card is dark in both themes so the gold logo always reads. */

/* ---------- 1. FAQ ---------- */
.lum-faq{width:100%;max-width:1280px;margin-inline:auto;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(22px,3vw,32px);margin-top:clamp(48px,7vw,88px);margin-bottom:clamp(28px,4vw,44px);padding-top:clamp(28px,4vw,48px);border-top:1px solid var(--color-rule)}
.lum-faq-head{position:relative;display:grid;gap:12px;align-content:start}
.lum-faq-eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0;font:500 .72rem/1 var(--font-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--color-accent)}
.lum-faq-eyebrow>span{width:22px;height:1px;background:currentColor;opacity:.8}
.lum-faq-head h2{margin:0;font:600 clamp(1.5rem,2.6vw,2.15rem)/1.12 var(--font-display);letter-spacing:-.035em;max-width:16ch;text-wrap:balance}
.lum-faq-lead{margin:0;max-width:38ch;color:var(--color-muted);font-size:.95rem;line-height:1.7}
.lum-faq-count{display:none;margin:0;font:600 clamp(5rem,9vw,8rem)/.78 var(--font-display);letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1px var(--color-rule-strong);opacity:.38;user-select:none}
.lum-faq-list{display:grid;gap:10px;align-content:start;min-width:0}
.lum-faq-item{position:relative;border:1px solid var(--color-rule);border-radius:var(--radius-lg);background:var(--color-surface);box-shadow:inset 0 1px 0 var(--color-rim);overflow:clip;transition:border-color var(--dur-short) var(--ease-out),background-color var(--dur-short) var(--ease-out),box-shadow var(--dur-short) var(--ease-out)}
.lum-faq-item::before{content:"";position:absolute;inset:14px auto 14px 0;width:3px;border-radius:0 3px 3px 0;background:var(--color-accent);transform:scaleY(0);transition:transform var(--dur-short) var(--ease-out)}
.lum-faq-item[open]{border-color:var(--color-accent-line);background:color-mix(in oklch,var(--color-accent) 6%,var(--color-surface));box-shadow:inset 0 1px 0 var(--color-rim),var(--shadow-2)}
.lum-faq-item[open]::before{transform:scaleY(1)}
.lum-faq .lum-faq-item>summary{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;min-height:64px;padding:14px 16px 14px 22px;list-style:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.lum-faq .lum-faq-item>summary::-webkit-details-marker{display:none}
.lum-faq .lum-faq-item>summary::marker{content:""}
.lum-faq-num{font:500 .72rem/1 var(--font-mono);letter-spacing:.08em;color:var(--color-subtle);font-variant-numeric:tabular-nums;transition:color var(--dur-short) var(--ease-out)}
.lum-faq-q{font:500 1.02rem/1.4 var(--font-display);letter-spacing:-.015em;color:var(--color-ink);text-wrap:pretty}
.lum-faq-item[open] .lum-faq-num{color:var(--color-accent)}
.lum-faq-icon{position:relative;width:34px;height:34px;border-radius:50%;border:1px solid var(--color-rule-strong);color:var(--color-accent);background:var(--color-transparent);transition:background-color var(--dur-short) var(--ease-out),border-color var(--dur-short) var(--ease-out),color var(--dur-short) var(--ease-out),transform var(--dur-short) var(--ease-out)}
.lum-faq-icon::before,.lum-faq-icon::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.75px;border-radius:2px;background:currentColor;transform:translate(-50%,-50%);transition:transform var(--dur-short) var(--ease-out)}
.lum-faq-icon::after{transform:translate(-50%,-50%) rotate(90deg)}
.lum-faq-item[open] .lum-faq-icon{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-accent-ink)}
.lum-faq-item[open] .lum-faq-icon::after{transform:translate(-50%,-50%) rotate(0)}
.lum-faq-a{padding:0 64px 22px 60px}
.lum-faq-a p{margin:0;max-width:66ch;color:var(--color-muted);font-size:.95rem;line-height:1.75;text-wrap:pretty}
.lum-faq-item[open] .lum-faq-a{animation:lum-faq-open var(--dur-short) var(--ease-out)}
@keyframes lum-faq-open{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.lum-faq .lum-faq-item>summary:focus-visible{outline:2px solid var(--color-focus);outline-offset:-3px;border-radius:var(--radius-lg)}
@media(hover:hover){
 .lum-faq-item:not([open]):hover{border-color:var(--color-accent-line)}
 .lum-faq-item:not([open]):hover .lum-faq-icon{border-color:var(--color-accent-line);transform:rotate(90deg)}
}
@media(min-width:900px){
 .lum-faq{grid-template-columns:minmax(220px,.62fr) minmax(0,1.7fr);gap:clamp(40px,6vw,88px)}
 .lum-faq-head{position:sticky;top:calc(var(--header-h,72px) + 28px);align-self:start;gap:14px}
 .lum-faq-count{display:block;margin-top:18px}
}
@media(max-width:600px){
 .lum-faq .lum-faq-item>summary{gap:12px;padding:12px 12px 12px 18px;min-height:60px}
 .lum-faq-q{font-size:.98rem}
 .lum-faq-a{padding:0 18px 20px}
}
@media(prefers-reduced-motion:reduce){.lum-faq-item,.lum-faq-item::before,.lum-faq-icon,.lum-faq-icon::before,.lum-faq-icon::after{transition:none}.lum-faq-item[open] .lum-faq-a{animation:none}.lum-faq-item:not([open]):hover .lum-faq-icon{transform:none}}

/* ---------- 2. Maker card ---------- */
.lum-promotion{margin-top:clamp(32px,5vw,64px)}
.lum-promotion-card{--gold:oklch(81% .115 84);--gold-deep:oklch(62% .1 78);position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"logo" "copy" "cta";gap:22px;padding:clamp(26px,4.2vw,46px);border-radius:var(--radius-xl);color:oklch(95% .012 215);background:radial-gradient(110% 150% at 100% 0%,oklch(80% .11 84 / .17),oklch(80% .11 84 / 0) 58%),radial-gradient(70% 90% at 0% 100%,oklch(60% .09 205 / .16),oklch(60% .09 205 / 0) 62%),linear-gradient(140deg,oklch(13.5% .026 252),oklch(19% .032 244));box-shadow:inset 0 1px 0 oklch(100% 0 0 / .08),var(--shadow-3);overflow:hidden;isolation:isolate}
.lum-promotion-card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(135deg,oklch(81% .115 84 / .8),oklch(45% .03 250 / .45) 38%,oklch(45% .03 250 / .25) 62%,oklch(81% .115 84 / .5));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;pointer-events:none;z-index:-1}
/* Two quiet rings that echo the isotype's orbit */
.lum-promotion-card::after{content:"";position:absolute;right:clamp(-190px,-12vw,-90px);top:50%;width:clamp(240px,30vw,400px);aspect-ratio:1;border-radius:50%;border:1px solid oklch(81% .115 84 / .22);box-shadow:0 0 0 clamp(24px,3vw,40px) oklch(81% .115 84 / .035),0 0 0 clamp(25px,3.1vw,41px) oklch(81% .115 84 / .12),0 0 0 clamp(52px,6.4vw,84px) oklch(81% .115 84 / .02);transform:translateY(-50%);pointer-events:none;z-index:-1}
.lum-promotion-logo{grid-area:logo;justify-self:start;display:inline-flex;align-items:center;min-height:44px;padding-block:6px;border-radius:var(--radius-sm);text-decoration:none;transition:transform var(--dur-short) var(--ease-out),filter var(--dur-short) var(--ease-out)}
.lum-promotion-logo img{display:block;width:clamp(150px,17vw,214px);height:auto}
.lum-promotion-copy{grid-area:copy;display:grid;gap:10px;align-content:start;max-width:62ch}
.lum-promotion small{font:500 .68rem/1.4 var(--font-mono);letter-spacing:.2em;text-transform:uppercase;color:oklch(76% .03 215);max-width:none}
.lum-promotion h2{margin:0;font:600 clamp(1.5rem,2.9vw,2.4rem)/1.1 var(--font-display);letter-spacing:-.04em;color:oklch(98% .006 215);text-wrap:balance}
.lum-promotion p{margin:0;max-width:56ch;color:oklch(80% .025 222);font-size:.95rem;line-height:1.7}
.lum-promotion-cta{grid-area:cta;justify-self:start;display:inline-flex;align-items:center;gap:12px;min-height:50px;padding:12px 14px 12px 24px;border-radius:var(--radius-pill);background:linear-gradient(180deg,oklch(86% .115 86),oklch(78% .12 82));color:oklch(20% .04 80);font:600 .95rem/1.25 var(--font-body);text-decoration:none;white-space:normal;box-shadow:inset 0 1px 0 oklch(100% 0 0 / .45),0 16px 34px -16px oklch(80% .12 84 / .75);transition:transform var(--dur-short) var(--ease-out),box-shadow var(--dur-short) var(--ease-out),filter var(--dur-short) var(--ease-out)}
.lum-promotion-cta svg{flex:none;width:30px;height:30px;padding:6px;border-radius:50%;background:oklch(20% .04 80 / .1);transition:transform var(--dur-short) var(--ease-out),background-color var(--dur-short) var(--ease-out)}
.lum-promotion-logo:focus-visible,.lum-promotion-cta:focus-visible{outline:2px solid oklch(88% .12 86);outline-offset:4px}
.lum-promotion .lum-promotion-cta:hover{color:oklch(20% .04 80);text-decoration:none}
@media(hover:hover){
 .lum-promotion-logo:hover{transform:translateY(-1px);filter:brightness(1.14) drop-shadow(0 6px 18px oklch(81% .115 84 / .35))}
 .lum-promotion-cta:hover{transform:translateY(-2px);filter:brightness(1.04);box-shadow:inset 0 1px 0 oklch(100% 0 0 / .5),0 22px 40px -16px oklch(80% .12 84 / .9)}
 .lum-promotion-cta:hover svg{transform:translateX(3px);background:oklch(20% .04 80 / .16)}
}
.lum-promotion-cta:active{transform:translateY(0)}
@media(min-width:900px){
 .lum-promotion-card{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"logo logo" "copy cta";column-gap:48px;row-gap:clamp(26px,3vw,38px);align-items:end}
 .lum-promotion-cta{justify-self:end;align-self:end}
}
@media(max-width:600px){
 .lum-promotion-cta{justify-self:stretch;justify-content:space-between}
}
@media(prefers-reduced-motion:reduce){.lum-promotion-logo,.lum-promotion-cta,.lum-promotion-cta svg{transition:none}.lum-promotion-cta:hover,.lum-promotion-logo:hover{transform:none}}

/* ---------- 3. Account strip ---------- */
.module-account{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 14px;margin-block:14px clamp(36px,5vw,64px);padding:8px 8px 8px 18px;border:1px solid var(--color-rule);border-radius:var(--radius-lg);background:var(--color-surface);box-shadow:inset 0 1px 0 var(--color-rim);font-size:var(--text-sm)}
.sync-line{display:contents}
.sync-line p{display:flex;align-items:center;gap:10px;flex:1 1 240px;order:0;margin:0;min-width:0;color:var(--color-muted);line-height:1.4}
.sync-line p::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--color-subtle);box-shadow:0 0 0 3px color-mix(in oklch,var(--color-subtle) 20%,transparent)}
.sync-line p[data-state=saved]{color:var(--color-ink)}
.sync-line p[data-state=saved]::before{background:oklch(76% .16 152);box-shadow:0 0 0 3px oklch(76% .16 152 / .22)}
.sync-line p[data-state=pending]::before{background:oklch(80% .14 82);box-shadow:0 0 0 3px oklch(80% .14 82 / .22)}
.sync-line p:is([data-state=offline],[data-state=conflict])::before{background:var(--color-error);box-shadow:0 0 0 3px color-mix(in oklch,var(--color-error) 24%,transparent)}
.ma-profile,.suggestion-box>summary{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border:1px solid var(--color-rule-strong);border-radius:var(--radius-pill);background:var(--color-transparent);color:var(--color-ink);font:600 var(--text-sm)/1 var(--font-body);text-decoration:none;cursor:pointer;list-style:none;transition:border-color var(--dur-short) var(--ease-out),background-color var(--dur-short) var(--ease-out),color var(--dur-short) var(--ease-out)}
.ma-profile svg,.suggestion-box>summary svg{flex:none;color:var(--color-accent)}
.suggestion-box>summary::-webkit-details-marker{display:none}
.ma-profile:focus-visible,.suggestion-box>summary:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px}
@media(hover:hover){.ma-profile:hover,.suggestion-box>summary:hover{border-color:var(--color-accent-line);background:var(--color-accent-soft);color:var(--color-ink)}}
.module-account [data-import]{order:1;margin:0;padding:0 4px;min-height:40px}
.ma-profile{order:2;margin-inline-start:auto}
.module-account [data-conflict]{order:9;flex:1 1 100%;display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:12px 4px 4px;border-top:1px solid var(--color-rule)}
.module-account [data-conflict] p{flex:1 1 100%;margin:0;color:var(--color-muted)}
.suggestion-box{order:3;flex:0 0 auto;max-width:100%}
.suggestion-box[open]{flex:1 1 100%;order:8;padding:4px 4px 6px}
.suggestion-box[open]>summary{border-color:var(--color-accent-line);background:var(--color-accent-soft)}
.suggestion-box form{max-width:640px;margin-top:14px;padding:18px;border:1px solid var(--color-rule);border-radius:var(--radius-md);background:var(--color-soft)}
.suggestion-box form p{margin:0;color:var(--color-muted);line-height:1.6}
.suggestion-box form button{justify-self:start}
.module-account [hidden]{display:none!important}
@media(max-width:600px){
 .module-account{padding:12px;gap:10px}
 .sync-line p{flex-basis:100%}
 .ma-profile{margin-inline-start:0;flex:1 1 0;justify-content:center}
 .ma-profile,.suggestion-box>summary{min-height:44px}
 .suggestion-box:not([open]){flex:1 1 100%}
 .suggestion-box:not([open])>summary{display:flex;justify-content:center}
}