/* Detail pages only. Keep homepage styling in style.css. */
.detail-page{overflow-wrap:anywhere}
.detail-header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.97);border-bottom:1px solid var(--line)}
.detail-header-inner{min-height:76px;display:flex;align-items:center;gap:28px}
.detail-brand{display:flex;align-items:center;gap:9px;white-space:nowrap;font-size:21px;font-weight:650;letter-spacing:-.65px;line-height:1}
.detail-brand img{width:30px;height:30px;flex:none}
.detail-brand-dot{color:var(--blue)}
.detail-nav{display:flex;align-items:center;gap:25px;margin-left:auto;font-size:14px;color:var(--muted)}
.detail-nav a:hover,.detail-footer a:hover,.detail-breadcrumb a:hover{color:var(--blue)}
.detail-header .language-switch{display:flex;align-items:center;gap:4px;font-size:12px;flex:none}
.detail-header .language-switch a{padding:5px 7px;border-radius:6px;color:var(--muted)}
.detail-header .language-switch a[aria-current="page"]{color:var(--blue);background:#edf4ff}
.detail-header .detail-nav-contact{border:1px solid var(--line);border-radius:8px;padding:8px 13px;font-weight:600;font-size:13px;color:var(--ink)}
.detail-breadcrumb{padding-top:24px;font-size:13px;color:var(--muted)}
.detail-breadcrumb ol{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.detail-breadcrumb li+li::before{content:"/";margin-right:8px;color:#adb0b8}
.detail-hero{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,.8fr);gap:70px;padding:52px 0 54px;align-items:start}
.detail-kicker{font-size:13px;color:var(--blue);font-weight:600;letter-spacing:.3px;margin-bottom:17px}
.detail-hero h1{font-size:clamp(32px,3.6vw,47px);line-height:1.3;letter-spacing:-1.2px;max-width:20ch}
.detail-lead{font-size:18px;line-height:1.85;color:var(--muted);margin-top:22px;max-width:36em}
.detail-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:27px}
.detail-hero-note{font-size:13px;color:var(--muted);margin-top:15px;line-height:1.7}
.detail-aside{border-left:3px solid #dce9ff;padding:3px 0 3px 24px;margin-top:10px}
.detail-aside h2{font-size:18px;line-height:1.5;margin-bottom:13px}
.detail-aside p{font-size:15px;color:var(--muted);line-height:1.85}
.detail-aside p+p{margin-top:15px}
.detail-content{max-width:980px;margin-inline:auto}
.detail-section{padding:38px 0;border-top:1px solid var(--line)}
.detail-section h2{font-size:25px;font-weight:600;line-height:1.4;letter-spacing:-.4px;margin-bottom:18px}
.detail-section h3{font-size:18px;font-weight:600;line-height:1.5;margin-bottom:10px}
.detail-section p{color:var(--muted);line-height:1.85}
.detail-section p+p{margin-top:14px}
.detail-section a:not(.button){color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.detail-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:46px}
.detail-list{margin:0;padding-left:20px;color:var(--muted);line-height:1.85}
.detail-list li+li{margin-top:10px}
.detail-definitions{margin:0;display:grid;grid-template-columns:minmax(120px,.35fr) minmax(0,1fr);gap:16px 28px}
.detail-definitions dt{font-weight:600}
.detail-definitions dd{margin:0;color:var(--muted);line-height:1.85}
.detail-flow{background:#f3f6fb;border:1px solid #e2e9f3;border-radius:15px;padding:28px;margin:0}
.detail-flow figcaption{display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap;font-size:13px;color:var(--muted);margin-bottom:18px}
.detail-flow ol{list-style:none;margin:0;padding:0;counter-reset:detail-step;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.detail-flow li{counter-increment:detail-step;min-width:0}
.detail-flow li::before{content:"0" counter(detail-step);display:block;color:var(--blue);font-size:13px;font-weight:600;margin-bottom:12px}
.detail-flow h3{font-size:17px;margin-bottom:8px;line-height:1.5}
.detail-flow p{font-size:15px;color:var(--muted);line-height:1.85}
.detail-inline-note{margin-top:17px;font-size:13px;color:var(--muted)}
.detail-cta{background:var(--tile);border-radius:15px;padding:30px;margin-top:12px;margin-bottom:52px;display:flex;align-items:center;justify-content:space-between;gap:30px}
.detail-cta h2{font-size:23px;line-height:1.4;margin-bottom:8px}
.detail-cta p{color:var(--muted);font-size:15px;max-width:38em}
.detail-cta .button{flex:none}
.detail-footer{border-top:1px solid var(--line);padding:30px 0 24px;color:var(--muted);font-size:13px}
.detail-footer-inner{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:32px}
.detail-footer h2{font-size:13px;font-weight:600;color:var(--ink);margin-bottom:9px}
.detail-footer ul{list-style:none;padding:0;margin:0;display:grid;gap:7px}
.detail-footer p{max-width:28em;line-height:1.85}
.detail-footer-bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:26px;padding-top:18px;border-top:1px solid var(--line);font-size:12px}
@media(max-width:900px){
 .detail-header-inner{gap:18px}.detail-nav{gap:17px}.detail-hero{gap:36px;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
 .detail-nav-contact{display:none}.detail-columns{gap:30px}
}
@media(max-width:700px){
 .detail-header-inner{flex-wrap:wrap;gap:12px;min-height:92px;padding-top:14px;padding-bottom:12px}
 .detail-brand{font-size:19px}.detail-header .language-switch{margin-left:auto}
 .detail-nav{order:3;flex-basis:100%;margin:0;justify-content:flex-start;gap:23px;font-size:13px}
 .detail-hero{grid-template-columns:1fr;gap:28px;padding-top:34px;padding-bottom:36px}
 .detail-hero h1{max-width:24ch;font-size:35px;letter-spacing:-.8px}.detail-lead{font-size:17px}
 .detail-aside{margin:0;padding-left:18px}.detail-aside p{font-size:14px}.detail-aside p+p{margin-top:10px}
 .detail-section{padding:29px 0}.detail-section h2{font-size:23px}.detail-columns{grid-template-columns:1fr;gap:25px}
 .detail-definitions{grid-template-columns:1fr;gap:6px}.detail-definitions dd{margin-bottom:15px}
 .detail-flow{padding:22px}.detail-flow ol{grid-template-columns:1fr;gap:23px}.detail-flow li::before{margin-bottom:6px}
 .detail-cta{align-items:flex-start;flex-direction:column;padding:24px;gap:20px;margin-bottom:38px}
 .detail-footer-inner{grid-template-columns:1fr 1fr;gap:23px}.detail-footer-inner>div:first-child{grid-column:1/-1}
}
@media(max-width:380px){
 .detail-page .wrap{width:calc(100% - 32px)}.detail-brand{font-size:17px;gap:7px}.detail-brand img{width:27px;height:27px}
 .detail-header .language-switch a{padding:5px}.detail-nav{gap:18px}.detail-hero h1{font-size:31px}
 .detail-actions{gap:9px}.detail-actions .button{font-size:13px;padding:12px 14px}
}

/* Actual frontend previews share the homepage's restrained card treatment. */
.actual-showcase{padding:30px 0;border-top:1px solid var(--line);margin-bottom:26px}
.actual-showcase h2{font-size:24px;line-height:1.4;margin-bottom:10px}
.actual-showcase>p{font-size:13px;color:var(--muted);line-height:1.8;margin-bottom:18px}
.actual-showcase-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:20px 0}
.actual-showcase-grid figure{margin:0;min-width:0;background:var(--tile);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.actual-showcase-grid img{width:100%;height:auto;display:block;aspect-ratio:390/844}
.actual-showcase-grid figcaption{font-size:14px;padding:12px;display:flex;justify-content:space-between;gap:5px}
.table-showcase img{display:block;width:100%;max-width:390px;height:auto;border:1px solid var(--line);border-radius:12px;margin-bottom:18px}
@media(max-width:700px){.actual-showcase-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.actual-showcase h2{font-size:22px}}

/* Full screenshots and captions keep the detail page useful before a preview. */
.shop-showcase .actual-showcase-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:780px;margin-inline:auto;gap:24px}
.actual-showcase-grid img{aspect-ratio:auto}
.actual-showcase-grid figcaption{display:block;line-height:1.7}
.actual-showcase-grid figcaption strong{display:block;font-weight:600}
.actual-showcase-grid figcaption p{margin-top:6px;font-size:13px;color:var(--muted)}
.table-records-figure{margin:20px 0}
.table-showcase .table-records-figure img{max-width:none;width:100%;height:auto;margin:0}
.table-records-figure figcaption{font-size:13px;color:var(--muted);line-height:1.8;margin-top:10px}
@media(max-width:480px){.shop-showcase .actual-showcase-grid,.club-showcase .actual-showcase-grid{grid-template-columns:minmax(0,1fr);max-width:390px;gap:20px}}

.table-showcase-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}
.table-showcase-grid .table-records-figure{min-width:0;margin-top:0}
@media(max-width:700px){.table-showcase-grid{grid-template-columns:minmax(0,1fr);gap:4px}}