/* Spout Studio elevation. Existing brand colours and self-hosted faces remain authoritative. */
.spout-elevated{--r-panel:3px;--r-control:3px;background:var(--paper);color:var(--ink)}
.spout-elevated .sp-nav{z-index:80;background:var(--paper);border-bottom:1px solid var(--rule);backdrop-filter:none}
.spout-elevated .nav-in{min-height:80px}
.spout-elevated .nav-links{gap:22px}
.spout-elevated .nav-links a{font-size:14px}
.spout-elevated .nav-links a[aria-current]{text-decoration:underline;text-underline-offset:6px}
.spout-elevated .logo-img{object-fit:contain}
.spout-elevated .logo-light{display:none}
.spout-elevated .logo-dark{display:block}
.mobile-chat{display:none}
.spout-elevated .btn{border-radius:3px;min-height:48px;box-shadow:none}
/* Decision content is visible at rest; inherited reveal observers cannot hide it. */
.spout-elevated .sp-in{opacity:1;transform:none;transition:none}
.spout-elevated .sp-lift{box-shadow:none}
.spout-elevated .sp-lift:hover{transform:none;box-shadow:none}
.spout-elevated .flyout{z-index:70}
.spout-elevated a:focus-visible,.spout-elevated button:focus-visible,.spout-elevated input:focus-visible{outline:3px solid var(--plate-ink);outline-offset:5px}
.spout-elevated [hidden]{display:none!important}
.text-link{display:inline-flex;align-items:center;gap:20px;font:600 15px/1.4 var(--face-spine);color:inherit;text-decoration:none;padding-block:12px}
.text-link:hover{text-decoration:underline;text-underline-offset:5px}
.text-link .ic{width:20px;height:20px}

/* The first viewport demonstrates the mechanism rather than borrowing atmosphere. */
.studio-hero{padding:clamp(48px,6vw,86px) 0 0;background:var(--paper)}
.studio-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.96fr);gap:clamp(32px,4.8vw,72px);align-items:center}
.studio-hero-copy h1{font:750 clamp(48px,5.3vw,78px)/1.03 var(--face-display);letter-spacing:-.03em;margin:0;color:var(--ink)}
.studio-hero-copy h1 span{color:var(--plate-ink)}
.studio-hero-copy>p{font:400 clamp(17px,1.5vw,20px)/1.65 var(--face-spine);max-width:47ch;margin:28px 0 0;color:var(--ink-mid)}
.studio-hero-copy .hero-cta{gap:16px 24px;margin-top:30px;align-items:center}
.studio-hero-copy p.studio-price{font-size:13px;line-height:1.7;margin-top:24px;max-width:54ch}
.studio-price strong{color:var(--ink);font-weight:700}
.studio-connections{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:20px;align-items:center;margin-top:64px;border-top:1px solid var(--rule);padding-top:24px;padding-bottom:28px;font:500 14px/1.5 var(--face-spine)}
.studio-connections>a{display:inline-flex;align-items:center;color:var(--ink);text-decoration:none;font-weight:650}
.studio-connections>a:hover{text-decoration:underline;text-underline-offset:4px}
.studio-connections>a span{margin-left:16px}

.copilot-console{background:var(--slab);color:var(--paper);border-radius:3px;overflow:hidden;scroll-margin-top:104px}
.console-head{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:22px 26px;border-bottom:1px solid var(--rule-on-slab)}
.console-brand{font:650 18px/1.3 var(--face-display)}
.console-example{font:400 12px/1.4 var(--face-spine);color:#D0D0D0}
.connection-map{display:flex;align-items:center;justify-content:center;gap:13px;padding:26px 22px 8px;font:500 12px/1.3 var(--face-spine)}
.connection-core{display:grid;place-items:center;border-radius:50%;background:var(--plate);color:var(--ink);width:64px;height:64px;flex:none;font:700 24px/1 var(--face-display)}
.connection-path{height:1px;flex:1;max-width:36px;background:#A7A7A7;position:relative}
.connection-path::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid #A7A7A7;border-right:1px solid #A7A7A7;transform:rotate(45deg)}
.console-body{padding:22px 26px 24px}
.console-body h2{font:650 clamp(24px,2.1vw,30px)/1.12 var(--face-display);letter-spacing:-.02em;color:var(--paper);margin:0 0 22px}
.console-choices{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:22px}
.console-choices button{font:500 12px/1.3 var(--face-spine);min-height:44px;padding:10px 12px;border:1px solid #707070;border-radius:3px;background:none;color:var(--paper);cursor:pointer;transition:background 160ms ease-out,color 160ms ease-out}
.console-choices button:hover{background:var(--slab-raised)}
.console-choices button[aria-pressed="true"]{background:var(--plate);border-color:var(--plate);color:var(--ink)}
.no-js .console-choices{display:none}
.copilot-console button:focus-visible{outline-color:var(--paper)}
.console-draft{padding:20px 0 0;border-top:1px solid var(--rule-on-slab);min-height:194px}
.console-draft p{font:400 16px/1.7 var(--face-spine);color:var(--paper);margin:14px 0 0}
.console-draft p.console-prompt{font-size:12px;line-height:1.6;color:#D0D0D0;margin:0}
.console-note{font:400 11px/1.6 var(--face-spine);color:#D0D0D0;margin:18px 0 0}

/* Each scroll passage has a different job, inside the same visual vocabulary. */
.service-workbench{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,7vw,100px)}
.studio-services{border-top:1px solid var(--rule)}
.service-intro .h-sec{font-size:clamp(38px,4.2vw,60px);line-height:1.06}
.service-intro .sub{font-size:17px;max-width:43ch}
.service-photo{margin-top:32px;max-width:460px}
.service-photo img{display:block;aspect-ratio:16/9;object-fit:cover;width:100%;height:auto;border-radius:3px}
.service-photo>span{display:block;font:400 12px/1.6 var(--face-spine);color:var(--ink-quiet);margin-top:10px}
.service-rows{border-top:1px solid var(--ink)}
.service-rows>a{display:flex;gap:24px;justify-content:space-between;color:var(--ink);text-decoration:none;padding:28px 0;border-bottom:1px solid var(--rule);align-items:flex-start}
.service-rows h3{font:650 clamp(23px,2.2vw,30px)/1.18 var(--face-display);letter-spacing:-.02em;margin:0}
.service-rows p{font:400 15px/1.7 var(--face-spine);color:var(--ink-mid);margin:10px 0 0;max-width:40ch}
.service-rows>a>.ic{flex:none;margin-top:5px;width:22px;height:22px;transition:transform 180ms ease-out}
.service-rows>a:hover>.ic{transform:translate(4px,-2px)}
.studio-ai{background:var(--plate);color:var(--ink)}
.studio-ai-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:clamp(40px,8vw,112px)}
.studio-ai h2{font:700 clamp(42px,5.4vw,76px)/1.04 var(--face-display);letter-spacing:-.035em;color:var(--ink);margin:0}
.studio-ai-grid>div>p{font:400 18px/1.7 var(--face-spine);max-width:42ch;margin:28px 0;color:var(--ink)}
.ai-actions>div{border-top:1px solid rgba(20,23,15,.35);padding:22px 0 26px}
.ai-actions h3{font:650 27px/1.15 var(--face-display);letter-spacing:-.02em;color:var(--ink);margin:0 0 12px}
.ai-actions p{font:400 15px/1.65 var(--face-spine);max-width:42ch;color:var(--ink);margin:0}
.spout-elevated .plan{border-radius:3px;box-shadow:none}
.spout-elevated .plan .price small{font-size:14px;letter-spacing:0;font-weight:500;display:block;margin-bottom:8px}
.spout-elevated .plan .save{opacity:1;font-size:12px}
.spout-elevated .plan .terms,.spout-elevated .plan .for{opacity:1}
.spout-elevated .mission{border:1px solid var(--rule-firm);border-radius:3px}
.spout-elevated .step-n{color:var(--plate-ink)}
.spout-elevated .steps{border-top:1px solid var(--rule);padding-top:28px}
.spout-elevated .ask{border-radius:3px;box-shadow:none}
.spout-elevated .ask input,.spout-elevated .ask textarea{border-radius:3px}
.studio-close{padding:clamp(64px,7vw,100px) 0;background:var(--slab);color:var(--paper)}
.studio-close>.wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(32px,6vw,84px);align-items:end}
.studio-close h2{font:650 clamp(36px,4.8vw,68px)/1.08 var(--face-display);letter-spacing:-.03em;color:var(--paper);margin:0}
.studio-close p{font:400 17px/1.7 var(--face-spine);color:#D0D0D0;max-width:39ch;margin:0 0 26px}
.studio-close .text-link{color:var(--paper);display:flex;margin-top:14px;width:fit-content}
.spout-elevated .foot{border-top:1px solid var(--rule-on-slab)}

/* Blog: all published articles are server-rendered in an open editorial index. */
.blog-heading{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(32px,5vw,72px);align-items:end;padding-top:clamp(54px,7vw,96px);padding-bottom:56px}
.blog-heading h1{font:700 clamp(44px,6.1vw,86px)/1.03 var(--face-display);letter-spacing:-.035em;color:var(--ink);margin:0}
.blog-heading p{font:400 18px/1.7 var(--face-spine);color:var(--ink-mid);max-width:42ch;margin:0 0 14px}
.blog-directory{padding-bottom:90px}
.blog-directory>h2{font:650 28px/1.2 var(--face-display);color:var(--ink);padding-top:34px;border-top:1px solid var(--ink);margin:0 0 28px}
.blog-tools{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:40px}
.blog-search{max-width:560px;width:100%}
.blog-search label{display:block;font:500 14px/1.5 var(--face-spine);margin-bottom:8px;color:var(--ink)}
.blog-search input{width:100%;height:54px;border:1px solid var(--rule-firm);border-radius:3px;padding:12px 16px;background:var(--paper);color:var(--ink);font:400 16px/1.5 var(--face-spine)}
.blog-search input::placeholder{color:var(--ink-quiet);opacity:1}
.blog-tools>p{font:400 14px/1.5 var(--face-spine);white-space:nowrap;color:var(--ink-mid);padding-bottom:14px;margin:0}
.blog-article-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 56px}
.blog-entry{padding:26px 0 32px;border-top:1px solid var(--rule-firm);min-width:0}
.blog-entry-meta{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font:400 12px/1.5 var(--face-spine);color:var(--ink-quiet);margin-bottom:16px}
.blog-entry h3{font:650 clamp(22px,2vw,28px)/1.25 var(--face-display);letter-spacing:-.015em;color:var(--ink);margin:0 0 18px}
.blog-entry h3>a{display:block;color:inherit;text-decoration:none}
.blog-entry h3>a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.blog-entry h3 .ic{width:20px;height:20px;display:inline-block;margin-left:10px;vertical-align:middle}
.blog-read{display:inline-flex;align-items:center;gap:16px;font:500 13px/1.5 var(--face-spine);color:var(--plate-ink);text-decoration:none}
.blog-read:hover{text-decoration:underline;text-underline-offset:4px}
.blog-read span{margin-left:14px}
.blog-empty{padding:40px 0;font:400 18px/1.6 var(--face-spine);color:var(--ink-mid)}
.blog-empty button{font:inherit;color:var(--ink);text-decoration:underline;border:0;background:none;cursor:pointer;min-height:44px}
.blog-section-heading{display:flex;align-items:end;justify-content:space-between;gap:32px;margin-bottom:44px}
.blog-preview-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.blog-preview-list .blog-entry h3{font-size:25px}
.blog-home{background:var(--paper-sunk)}

/* Long-form reader: comfortable measure, persistent desktop wayfinding and real tables. */
.article-heading{padding-top:58px;padding-bottom:50px}
.back-blog{display:inline-flex;gap:12px;min-height:44px;align-items:center;color:var(--ink-mid);text-decoration:none;font:500 14px/1.5 var(--face-spine);margin-bottom:22px}
.back-blog .ic{transform:rotate(180deg)}
.back-blog:hover{text-decoration:underline;text-underline-offset:4px}
.article-heading h1{font:700 clamp(36px,5vw,70px)/1.08 var(--face-display);letter-spacing:-.03em;color:var(--ink);max-width:22ch;margin:0}
.article-byline{font:400 14px/1.5 var(--face-spine);color:var(--ink-quiet);margin:26px 0 0}
.article-byline>span{margin:0 12px}
.article-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:clamp(40px,6vw,90px);align-items:start;border-top:1px solid var(--rule);padding-top:42px}
.article-aside{position:sticky;top:110px}
.article-aside h2{font:650 16px/1.4 var(--face-spine);margin:0 0 18px;color:var(--ink)}
.article-aside ol{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:14px}
.article-aside li{margin:0;padding:0;font:400 13px/1.55 var(--face-spine)}
.article-aside a{color:var(--ink-mid);text-decoration:none}
.article-aside a:hover{text-decoration:underline;text-underline-offset:4px}
.article-contact{display:inline-flex;gap:12px;align-items:center;min-height:48px;margin-top:26px;border-top:1px solid var(--rule);padding-top:18px;font:600 14px/1.5 var(--face-spine)}
.article-prose{max-width:72ch;min-width:0;color:var(--ink);font:400 18px/1.8 var(--face-spine)}
.article-prose p{margin:0 0 1.35em}
.article-prose h2{font:650 clamp(25px,2.5vw,32px)/1.23 var(--face-display);letter-spacing:-.02em;margin:2.3em 0 .8em;scroll-margin-top:110px;color:var(--ink)}
.article-prose h3{font:650 23px/1.3 var(--face-display);margin:1.8em 0 .7em;color:var(--ink)}
.article-prose a{color:var(--plate-ink);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.article-prose ul,.article-prose ol{padding-left:1.5em;margin:0 0 1.5em}
.article-prose li{margin-bottom:.6em}
.article-prose strong{font-weight:650}
.article-prose blockquote{margin:28px 0;padding:24px;background:var(--paper-sunk);border:0;border-radius:3px}
.article-prose blockquote p:last-child{margin-bottom:0}
.article-table{width:100%;overflow-x:auto;overscroll-behavior-inline:contain;margin:30px 0}
.article-table table{border-collapse:collapse;width:100%;min-width:540px;font:400 14px/1.6 var(--face-spine)}
.article-table th{background:var(--paper-sunk);font-weight:650;color:var(--ink)}
.article-table th,.article-table td{text-align:left;vertical-align:top;padding:14px 16px;border-bottom:1px solid var(--rule)}
.reader-close{margin-top:80px;margin-bottom:80px;padding:38px 0;border-top:1px solid var(--ink)}
.reader-close h2{font:650 36px/1.15 var(--face-display);letter-spacing:-.02em;color:var(--ink);margin:0 0 14px}
.reader-close p{font:400 17px/1.7 var(--face-spine);color:var(--ink-mid);margin-bottom:22px}

@media(max-width:1060px){
  .spout-elevated .nav-links .opt{display:none}
  .spout-elevated .nav-links .mobile-chat{display:flex;align-items:center;justify-content:center;width:44px;height:44px;background:var(--plate);color:var(--ink);border-radius:3px}
  .spout-elevated .burger{display:grid;place-items:center;gap:0;width:48px;height:44px;background:none;border:0;cursor:pointer;padding:0}
  .spout-elevated .burger span{display:block;width:32px;height:2.5px;background:var(--ink);margin-block:1.5px}
  .article-layout{grid-template-columns:200px minmax(0,1fr);gap:32px}
}
@media(max-width:980px){
  .studio-hero-grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .studio-hero-copy h1{font-size:clamp(48px,9vw,82px)}
  .studio-hero-copy>p{max-width:54ch}
  .copilot-console{max-width:650px;width:100%}
  .studio-connections{grid-template-columns:1fr 1fr;margin-top:40px}
  .service-workbench,.studio-ai-grid{grid-template-columns:minmax(0,1fr)}
  .service-intro .h-sec br:nth-child(2){display:none}
  .service-photo{max-width:560px}
  .ai-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
  .ai-actions h3{font-size:23px}
  .blog-preview-list{grid-template-columns:1fr;gap:0}
  .blog-preview-list .blog-entry{padding-block:24px}
  .article-aside{display:none}
  .article-layout{grid-template-columns:minmax(0,1fr)}
  .article-prose{max-width:72ch}
}
@media(max-width:680px){
  .spout-elevated .nav-in{min-height:70px}
  .spout-elevated .wa{display:none}
  .studio-hero{padding-top:40px}
  .studio-hero-copy .hero-cta{align-items:flex-start;flex-direction:column;gap:8px}
  .studio-hero-copy .hero-cta>.btn{width:100%;justify-content:space-between}
  .studio-hero-copy p.studio-price{font-size:12px}
  .console-head{padding:18px}
  .console-body{padding:20px 18px}
  .console-brand{font-size:17px}
  .console-example{font-size:11px}
  .connection-map{padding-inline:18px;gap:9px;font-size:10px}
  .connection-core{width:52px;height:52px;font-size:22px}
  .console-choices button{font-size:11px;padding-inline:10px}
  .console-draft{min-height:220px}
  .console-draft p{font-size:15px}
  .studio-connections{font-size:12px;gap:18px 12px}
  .studio-ai h2{font-size:48px}
  .ai-actions{grid-template-columns:minmax(0,1fr);gap:0}
  .ai-actions h3 br{display:none}
  .ai-actions>div{padding:22px 0}
  .studio-close>.wrap{grid-template-columns:minmax(0,1fr)}
  .studio-close h2{font-size:42px}
  .blog-heading{grid-template-columns:minmax(0,1fr);gap:28px;padding-top:46px;padding-bottom:40px}
  .blog-heading h1{font-size:48px}
  .blog-heading p{font-size:17px}
  .blog-article-list{grid-template-columns:minmax(0,1fr)}
  .blog-tools{align-items:start;flex-direction:column;gap:14px;margin-bottom:22px}
  .blog-tools>p{padding:0}
  .blog-section-heading{flex-direction:column;align-items:start;gap:16px;margin-bottom:24px}
  .article-heading{padding-top:30px;padding-bottom:32px}
  .article-heading h1{font-size:36px;max-width:none}
  .article-prose{font-size:17px;line-height:1.8}
  .article-layout{padding-top:28px}
  .article-table table{min-width:520px;font-size:13px}
  .article-table td,.article-table th{padding:12px}
  .reader-close{margin-block:44px}
}
@media(prefers-reduced-motion:reduce){
  .spout-elevated *{scroll-behavior:auto!important;animation-duration:0s!important;transition:none!important}
}