/* Same Exo2, palette and button system as the main keln.studio pages. */
.syntx-page { background:var(--cream); }
.syntx-header { padding-top:32px; padding-bottom:24px; }
.syntx-header img { display:block; width:120px; height:auto; }
.syntx-hero { padding-top:58px; padding-bottom:80px; }
.syntx-hero h1 { font-size:clamp(42px,6.2vw,82px); font-weight:400; line-height:1.06; letter-spacing:-.035em; margin:0 0 30px; }
.syntx-intro { max-width:55ch; font-size:21px; line-height:1.6; margin-bottom:28px; }
.syntx-page .hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:18px; }
.syntx-page .btn { min-height:50px; height:auto; padding:14px 24px; white-space:normal; text-align:center; }
.syntx-page .btn-outline { border:1px solid var(--line-strong); }
.syntx-note { max-width:80ch; color:var(--muted); font-size:14px; line-height:1.65; }
.syntx-note a { text-decoration:underline; text-underline-offset:3px; }
.syntx-flow { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:56px; border-top:1px solid var(--line-strong); border-bottom:1px solid var(--line-strong); }
.syntx-flow div { padding:24px 24px 24px 0; }
.syntx-flow div + div { border-left:1px solid var(--line-strong); padding-left:24px; }
.syntx-flow span { display:block; color:var(--accent); margin-bottom:8px; }
.syntx-flow b { font-size:20px; font-weight:500; }
.syntx-section { max-width:980px; padding-top:64px; padding-bottom:32px; }
.syntx-section h2,.syntx-final h2 { font-weight:400; line-height:1.15; letter-spacing:-.025em; font-size:clamp(30px,3.8vw,48px); margin:0 0 26px; }
.syntx-section h3 { font-size:25px; font-weight:500; line-height:1.3; margin:0 0 18px; }
.syntx-section p,.syntx-section li { font-size:18px; line-height:1.75; }
.syntx-section p { margin:0 0 22px; }
.syntx-task-list { border-top:1px solid var(--line); margin:28px 0; }
.syntx-task-list details { border-bottom:1px solid var(--line); padding:22px 0; }
.syntx-task-list summary { cursor:pointer; font-size:21px; font-weight:500; padding-right:16px; }
.syntx-task-list details p { margin:18px 0 0; }
.syntx-step { margin-top:44px; }
.syntx-page pre { position:relative; margin:24px 0; padding:46px 24px 24px; border:1px solid var(--line); border-radius:16px; background:#fff; white-space:pre-wrap; overflow-wrap:anywhere; }
.syntx-page pre code { font-family:Exo2,sans-serif; font-size:15px; line-height:1.65; }
.syntx-page .code-copy { position:absolute; top:8px; right:12px; border:0; border-radius:8px; padding:5px 10px; background:var(--cream); color:var(--ink); font:inherit; font-size:13px; cursor:pointer; }
.syntx-check { background:#fff; border:1px solid var(--line); border-radius:20px; padding:28px; margin:28px 0; }
.syntx-check ul { padding-left:22px; margin:0; }
.syntx-check li + li { margin-top:10px; }
.syntx-reading { display:grid; gap:14px; padding:24px 0; border-top:1px solid var(--line); }
.syntx-reading a { color:var(--accent); text-decoration:underline; text-underline-offset:4px; }
.syntx-final { padding-top:96px; padding-bottom:96px; text-align:center; }
.syntx-final p { font-size:20px; max-width:56ch; margin:0 auto 28px; }
.syntx-footer { display:flex; flex-wrap:wrap; gap:24px; border-top:1px solid var(--line); padding-top:24px; padding-bottom:32px; color:var(--muted); }
@media(max-width:600px) {
 .syntx-header { padding-top:24px; }
 .syntx-hero { padding-top:32px; padding-bottom:32px; }
 .syntx-hero h1 { font-size:clamp(36px,9.6vw,50px); }
 .syntx-intro { font-size:18px; }
 .syntx-page .hero-actions { display:grid; }
 .syntx-page .btn { width:100%; }
 .syntx-flow { grid-template-columns:1fr; margin-top:36px; }
 .syntx-flow div,.syntx-flow div + div { padding:18px 0; border-left:0; }
 .syntx-flow div + div { border-top:1px solid var(--line); }
 .syntx-section { padding-top:44px; }
 .syntx-section h2,.syntx-final h2 { font-size:31px; }
 .syntx-section h3 { font-size:23px; }
 .syntx-check { padding:22px; }
 .syntx-page pre { padding:44px 18px 20px; }
 .syntx-final { padding-top:64px; padding-bottom:64px; }
 .syntx-footer { gap:16px; }
}

.syntx-page .copy-block { position:relative; margin:24px 0; }
.syntx-page .copy-block pre { margin:0; }
.syntx-page .copy-block__bar { position:absolute; z-index:1; top:8px; right:12px; }
.syntx-page [data-copy-code] { border:0; border-radius:8px; padding:5px 10px; background:var(--cream); color:var(--ink); font:inherit; font-size:13px; cursor:pointer; min-height:32px; }
.syntx-page [data-copy-status] { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }