/* Product walkthrough on /about. Keep styles scoped to the sp- namespace. */
.sp-hero-links { display:flex; flex-wrap:wrap; gap:10px 19px; margin-top:25px; }.sp-hero-links a { font-size:11px; color:var(--gold-light); padding-block:8px; border-bottom:1px solid #69502d; }.sp-hero-links a:hover { color:#fff4d1; border-color:var(--gold-light); }
.sp-heading { max-width:800px; margin-bottom:38px; }
.sp-heading h2,.sp-bot h2 { font-size:clamp(42px,5vw,70px); line-height:1.04; margin-bottom:24px; }
.sp-heading h2 em,.sp-bot h2 em { font-weight:500; color:var(--gold-light); }
.sp-heading>p:last-child { max-width:720px; font-size:16px; color:var(--soft); }
.sp-intro { background:#101210; border-top:1px solid var(--line-dark); }
.sp-paths { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.sp-paths>a { padding:30px; border:1px solid var(--line-dark); border-radius:20px; background:linear-gradient(140deg,#20231e,#121510); transition:border-color .2s,transform .2s; }
.sp-paths>a:hover { border-color:var(--gold); transform:translateY(-3px); }
.sp-paths span,.sp-detail-grid>article>span,.sp-prompt>span,.sp-phone-step { display:block; font-size:10px; font-weight:800; letter-spacing:.13em; color:var(--gold-light); margin-bottom:25px; }
.sp-paths h3 { font-family:var(--serif); font-size:31px; font-weight:600; margin-bottom:12px; }
.sp-paths p { color:var(--soft); font-size:14px; }
.sp-paths b { display:block; margin-top:25px; color:var(--gold-light); font-size:11px; }
.sp-studio,.sp-mcp { background:var(--paper); color:var(--ink); }
.sp-studio .sp-heading>p:last-child,.sp-mcp .sp-heading>p:last-child { color:#686256; }
.sp-tabs { display:flex; gap:8px; flex-wrap:wrap; margin:0 0 24px; }
.sp-tabs button { cursor:pointer; padding:13px 20px; min-height:46px; border:1px solid #ccc5b9; border-radius:100px; color:#635d53; background:transparent; font-size:12px; font-weight:700; }
.sp-tabs button[aria-selected=true] { background:var(--ink); color:var(--white); border-color:var(--ink); }
.sp-tabs button:hover { border-color:#92703a; }
.sp-tabs button:focus-visible,.sp-screen:focus-visible,.sp-phone:focus-visible,.sp-paths a:focus-visible { outline:3px solid var(--gold); outline-offset:5px; }
.sp-panel[hidden] { display:none; }
.sp-screen { margin:0; border:1px solid #2e2b26; border-radius:17px; overflow:hidden; background:#0c0d0e; box-shadow:0 22px 50px #342b191f; cursor:zoom-in; }
.sp-window-bar { height:36px; padding:0 15px; display:flex; align-items:center; gap:6px; color:#a59d8d; background:#1b1c1b; }
.sp-window-bar i { width:6px; height:6px; border-radius:50%; background:#716857; }
.sp-window-bar span { margin-left:10px; font-size:8px; letter-spacing:.15em; }
.sp-window-bar b { margin-left:auto; color:var(--gold-light); }
.sp-screen img { width:100%; height:auto; aspect-ratio:1920/855; object-fit:contain; }
.sp-screen figcaption { display:flex; gap:15px; justify-content:space-between; padding:15px 20px; color:#b4ada0; font-size:11px; line-height:1.5; border-top:1px solid #292a28; }
.sp-screen figcaption span { color:var(--gold-light); white-space:nowrap; }
.sp-panel-title { font-family:var(--serif); font-size:35px; font-weight:600; margin:34px 0 20px; }
.sp-feature-row,.sp-detail-grid,.sp-mcp-flow,.sp-portal-bottom { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px; }
.sp-feature-row h4 { font-size:14px; margin:0 0 10px; }
.sp-feature-row p { font-size:13px; color:#686256; margin:0; }
.sp-detail-grid { border-top:1px solid var(--line); margin-top:48px; padding-top:40px; }
.sp-detail-grid>article>span { color:#856326; margin-bottom:18px; }
.sp-detail-grid h3,.sp-mcp-flow h3,.sp-mcp-access h3,.sp-portal-bottom h3 { font-size:20px; line-height:1.3; margin-bottom:14px; }
.sp-detail-grid p,.sp-mcp-flow p,.sp-mcp-access p { font-size:14px; color:#686256; }
.sp-fine { font-size:12px!important; line-height:1.7; opacity:.78; }
.sp-section-action { display:flex; align-items:center; flex-wrap:wrap; gap:25px; margin-top:35px; }
.sp-inline-link { font-size:12px; font-weight:700; text-decoration:underline; text-underline-offset:5px; }
.sp-bot { background:radial-gradient(ellipse at 85% 40%,#314034 0,transparent 55%),#151e18; }
.sp-bot-grid { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:80px; align-items:center; }
.sp-bot h2 { font-size:clamp(40px,4vw,58px); }
.sp-lede { color:#c6cec3; font-size:16px; }
.sp-steps-text { list-style:none; counter-reset:botsteps; margin:30px 0; padding:0; }
.sp-steps-text li { position:relative; padding:0 0 23px 42px; counter-increment:botsteps; }
.sp-steps-text li:before { content:counter(botsteps); position:absolute; left:0; top:0; color:var(--gold-light); border:1px solid #768065; border-radius:50%; width:26px; height:26px; display:grid; place-items:center; font-size:11px; }
.sp-steps-text b { display:block; font-size:14px; margin-bottom:7px; }
.sp-steps-text span { display:block; font-size:13px; line-height:1.65; color:#b0bcae; }
.sp-bot .sp-fine { color:#b0bcae; }
.sp-chat { border:1px solid #667659; border-radius:26px; padding:26px; background:#e9ede2; color:#1c261b; box-shadow:0 30px 80px #0004; }
.sp-chat-head { display:flex; align-items:center; gap:12px; padding-bottom:20px; border-bottom:1px solid #cad3c0; }
.sp-chat-head>span { display:grid; place-items:center; width:42px; height:42px; background:#283c29; color:#f6d28b; border-radius:50%; font-size:24px; }
.sp-chat-head b { display:block; font-size:13px; }.sp-chat-head small { font-size:10px; color:#71806a; }
.sp-chat-day { text-align:center; font-size:9px; letter-spacing:.1em; color:#72816a; padding:20px 0; }
.sp-bubble { padding:16px 18px; border-radius:17px; margin-bottom:12px; font-size:14px; line-height:1.5; }
.sp-bubble small,.sp-bubble span { display:block; font-size:11px; margin-bottom:5px; color:#607555; }
.sp-out { background:#d6e1c8; margin-left:35px; border-bottom-right-radius:3px; }
.sp-in { background:#fffef8; margin-right:25px; border-bottom-left-radius:3px; }.sp-in b { display:block; margin-bottom:8px; }
.sp-chat-finish { display:flex; align-items:center; gap:9px; justify-content:flex-end; margin:22px 0; font-size:11px; }
.sp-chat-finish span { background:#344b31; color:white; padding:9px 12px; border-radius:9px; }.sp-chat-finish b { color:#667b5a; }
.sp-chat>p { font-size:11px; color:#63715a; margin:20px 0 0; }
.sp-mcp-top { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:65px; align-items:center; }
.sp-prompt { background:#e5ddcc; border:1px solid #cabea6; border-radius:20px; padding:30px; }
.sp-prompt>span { color:#8a682a; margin-bottom:15px; }
.sp-prompt blockquote { margin:0; font-family:var(--serif); font-size:27px; line-height:1.35; }
.sp-prompt p { margin:20px 0 0; font-size:12px; color:#71654e; }
.sp-mcp-flow { margin-top:40px; }.sp-mcp-flow article { border-top:1px solid #bfb5a0; padding-top:25px; }
.sp-ai-clients { display:flex; flex-wrap:wrap; gap:9px; margin-top:22px; }.sp-ai-clients span { padding:8px 14px; border:1px solid #c4b9a4; border-radius:30px; font-size:12px; font-weight:700; color:#6f5832; }
.sp-mcp-details { margin-top:25px; border-top:1px solid #cfc5b5; }.sp-mcp-details details { border-bottom:1px solid #cfc5b5; }.sp-mcp-details summary { cursor:pointer; display:flex; justify-content:space-between; gap:20px; padding:22px 0; font-size:14px; font-weight:700; list-style:none; }.sp-mcp-details summary::-webkit-details-marker { display:none; }.sp-mcp-details summary span { color:#93703b; }.sp-mcp-details details[open] summary span { transform:rotate(45deg); }.sp-mcp-details p { max-width:900px; font-size:14px; color:#686256; margin-bottom:24px; }
.sp-mcp-flow article>b { display:block; font:38px var(--serif); color:#a47b32; margin-bottom:15px; }
.sp-mcp-access { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:40px; margin-top:35px; padding:30px; background:#e8e2d6; border-radius:18px; }.sp-mcp-access p:last-child { margin:0; }
.sp-portal { overflow:hidden; background:radial-gradient(ellipse at 70% 0,#2f291d 0,transparent 48%),#11120f; }
.sp-portal-top { display:flex; align-items:center; justify-content:space-between; gap:50px; }
.sp-portal-badge { display:flex; align-items:center; gap:20px; flex:none; border-left:1px solid #5c513c; padding-left:30px; }
.sp-portal-badge b { font:100px var(--serif); color:var(--gold-light); line-height:1; }.sp-portal-badge span { font-size:12px; color:#afa696; line-height:1.7; }
.sp-phone-grid { display:grid; grid-template-columns:repeat(5,minmax(220px,1fr)); gap:20px; overflow-x:auto; padding:12px 4px 22px; scroll-snap-type:x mandatory; scrollbar-color:#b68d45 #24251e; }
.sp-phone-card { min-width:0; scroll-snap-align:start; }
.sp-phone { border:5px solid #393a31; border-radius:28px; background:#171a12; margin:0 0 25px; overflow:hidden; cursor:zoom-in; box-shadow:0 12px 25px #0004; }
.sp-phone img { width:100%; height:auto; aspect-ratio:390/844; object-fit:contain; }
.sp-phone figcaption { text-align:center; padding:10px 5px; font-size:9px; color:#d1bf99; border-top:1px solid #393a31; }
.sp-phone-step { font-size:9px; margin-bottom:9px; }.sp-phone-card h3 { font-size:18px; margin-bottom:12px; }.sp-phone-card>p { color:#afa99c; font-size:12px; margin-bottom:0; }
.sp-portal-note { font-size:11px; color:#8e8e80; max-width:930px; margin:25px 0 40px; }
.sp-more-portal { margin-top:20px; border-block:1px solid #3a3b30; }.sp-more-portal summary { cursor:pointer; padding:22px 0; display:flex; align-items:center; justify-content:space-between; gap:20px; list-style:none; font-size:13px; color:var(--gold-light); }.sp-more-portal summary::-webkit-details-marker { display:none; }.sp-more-portal[open] summary span { transform:rotate(45deg); }.sp-extra-phones { display:grid; grid-template-columns:repeat(3,minmax(0,280px)); justify-content:space-between; gap:25px; padding:12px 0 30px; }
.sp-portal-bottom { grid-template-columns:repeat(2,minmax(0,1fr)); border-top:1px solid #3a3b30; padding-top:30px; }.sp-portal-bottom h3 { font-size:17px; }.sp-portal-bottom p { color:#b8b3a6; font-size:13px; }
@media(max-width:980px) {
  .sp-paths>a { padding:23px; }.sp-paths h3 { font-size:26px; }
  .sp-bot-grid { gap:35px; }.sp-mcp-top { gap:30px; }
  .sp-mcp-access { grid-template-columns:1fr; }.sp-mcp-access .button { justify-self:start; }
  .sp-portal-badge { display:none; }.sp-phone-grid { grid-template-columns:repeat(5,245px); }
}
@media(max-width:680px) {
  .sp-paths,.sp-feature-row,.sp-detail-grid,.sp-mcp-flow,.sp-portal-bottom,.sp-bot-grid,.sp-mcp-top { grid-template-columns:1fr; gap:25px; }
  .sp-heading { margin-bottom:28px; }.sp-heading h2,.sp-bot h2 { font-size:43px; }
  .sp-heading>p:last-child { font-size:14px; }.sp-paths h3 { font-size:29px; }
  .sp-tabs { gap:7px; }.sp-tabs button { font-size:11px; padding:11px 15px; }
  .sp-screen { border-radius:10px; }.sp-window-bar { height:27px; }.sp-screen figcaption { padding:11px 12px; font-size:9px; display:block; }.sp-screen figcaption span { display:block; margin-top:6px; }
  .sp-panel-title { font-size:31px; margin-top:27px; }.sp-feature-row { gap:20px; }
  .sp-detail-grid { margin-top:32px; padding-top:30px; }.sp-detail-grid>article { padding-bottom:15px; }
  .sp-chat { padding:20px; }.sp-bot-grid { gap:35px; }.sp-out { margin-left:15px; }
  .sp-prompt { padding:25px; }.sp-prompt blockquote { font-size:25px; }.sp-mcp-flow { margin-top:30px; }
  .sp-mcp-access { padding:22px; gap:20px; }.sp-mcp-access .button { width:100%; padding-inline:12px; font-size:11px; }
  .sp-phone-grid { grid-template-columns:repeat(5,265px); gap:20px; }.sp-phone-card h3 { font-size:20px; }
  .sp-extra-phones { grid-template-columns:repeat(3,265px); overflow-x:auto; scroll-snap-type:x mandatory; }
  .sp-section-action { align-items:flex-start; flex-direction:column; gap:22px; }
}