/* ==================================================================
   Shared styles for the main-site use-case pages (/use-cases/<slug>/).
   Ported from the original use-case page inline styles so the generated
   vertical pages match the existing look, plus the workflow-card and
   context-chip styles used to embed software into the workflow prose.
   ================================================================== */
:root{
  --font-display:'Instrument Sans',"Helvetica Neue",Arial,sans-serif;
  --font-sans:'Instrument Sans',"Helvetica Neue",Arial,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;
  --accent:#A9542C;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#F5F0E9;color:#2B2620;font-family:var(--font-sans);-webkit-font-smoothing:antialiased}
::selection{background:#2B2620;color:#F5F0E9}
a{color:inherit}a:hover{color:var(--accent)}img{max-width:100%}
section[id],div[id]{scroll-margin-top:86px}[data-cal-link]{cursor:pointer}
:focus-visible{outline:3px solid rgba(169,84,44,.44);outline-offset:3px}
@keyframes ossRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* Header / nav */
.site-header{position:sticky;top:0;z-index:90;background:rgba(245,240,233,.92);backdrop-filter:blur(14px);border-bottom:1px solid rgba(43,38,32,.09)}
.site-nav{max-width:1180px;margin:0 auto;padding:15px 32px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.nav-logo{display:flex;align-items:center;text-decoration:none}.nav-logo img{height:25px;width:auto;display:block}
.nav-links{display:flex;align-items:center;gap:6px;font-size:14.5px;font-weight:500}
.nav-link,.nav-uc-trigger{text-decoration:none;color:rgba(43,38,32,.72);padding:9px 13px;border-radius:100px}.nav-link:hover,.nav-uc-trigger:hover{color:#2B2620}.nav-uc-trigger{color:#2B2620;font-weight:600;display:inline-flex;align-items:center;gap:6px}.nav-uc-trigger .caret{font-size:9px;transform:translateY(1px)}
.nav-cta{text-decoration:none;background:#2B2620;color:#F5F0E9;padding:10px 19px;border-radius:100px;font-weight:600;margin-left:8px;transition:background .2s ease;display:inline-flex;align-items:center}.nav-cta:hover{background:var(--accent);color:#F5F0E9}.nav-burger{display:none}
.ucdd{position:absolute;left:0;right:0;top:100%;background:#F5F0E9;border-bottom:1px solid rgba(43,38,32,.14);box-shadow:0 26px 60px rgba(43,38,32,.16);animation:ossRise .22s ease;z-index:95}
.ucdd-grid{max-width:1180px;margin:0 auto;padding:20px 32px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ucdd-card{text-decoration:none;color:#2B2620;padding:13px 14px;border-radius:14px;border:1px solid rgba(43,38,32,.1);background:#F8F4ED;transition:background .18s ease,border-color .18s ease;display:flex;flex-direction:column;gap:9px}.ucdd-card:hover{background:#EFE8DE;color:#2B2620}
.ucdd-head{display:flex;align-items:center;gap:10px}.ucdd-ic{width:30px;height:30px;border-radius:9px;background:#F5F0E9;border:1px solid rgba(43,38,32,.12);display:grid;place-items:center;flex:none;color:var(--accent)}.ucdd-ic svg{width:18px;height:18px;display:block}.ucdd-title{font-weight:700;font-size:14px;letter-spacing:-.01em}.ucdd-sub{font-size:12px;line-height:1.45;color:rgba(43,38,32,.55)}

/* Footer */
.site-footer{border-top:1px solid rgba(43,38,32,.1);background:#2B2620;color:#F5F0E9}.site-footer a:hover{color:#F5F0E9}.footer-shell{max-width:1100px;margin:0 auto;padding:clamp(48px,6vw,72px) 32px 34px}.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;margin-bottom:48px}.footer-h4{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(245,240,233,.5);margin:0 0 16px;font-weight:500}.footer-col{display:flex;flex-direction:column;gap:11px;font-size:14.5px}.footer-col a{text-decoration:none;color:rgba(245,240,233,.8)}.footer-bottom{border-top:1px solid rgba(245,240,233,.14);padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:12.5px;color:rgba(245,240,233,.5)}

/* Page primitives */
.shell1180{max-width:1180px;margin:0 auto;padding-left:32px;padding-right:32px}
.btn-dark,.btn-ghost,.btn-cream{text-decoration:none;padding:14px 26px;border-radius:100px;font-weight:700;font-size:15px;display:inline-block}
.btn-dark{background:#2B2620;color:#F5F0E9}.btn-dark:hover{background:var(--accent);color:#F5F0E9}
.btn-ghost{color:#2B2620;padding-inline:22px;border:1px solid rgba(43,38,32,.2)}.btn-ghost:hover{border-color:rgba(169,84,44,.42);color:var(--accent)}
.btn-cream{background:#F5F0E9;color:#2B2620;padding:15px 30px;font-size:15.5px}.btn-cream:hover{background:#A9542C;color:#F5F0E9}
.section-kicker{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin:0 0 16px}

/* Help grid */
.help-section-intro{max-width:760px;font-size:16px;line-height:1.65;color:rgba(43,38,32,.68);margin:0 0 clamp(28px,4vw,44px)}
.help-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;counter-reset:help}
.help-card{background:#F5F0E9;border:1px solid rgba(43,38,32,.11);border-radius:18px;padding:26px;counter-increment:help}
.help-card::before{content:"0" counter(help);display:block;margin-bottom:14px;color:var(--accent);font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.08em}
.help-card h3{font-size:19px;font-weight:700;margin:0 0 10px;letter-spacing:-.01em;line-height:1.25}
.help-card p{font-size:14.5px;line-height:1.6;color:rgba(43,38,32,.64);margin:0}

/* Context chips (software embedded in workflow prose) */
.ctx-chip{display:inline-flex;align-items:center;gap:5px;background:#F5F0E9;border:1px solid rgba(43,38,32,.16);border-radius:7px;padding:1px 8px 1px 6px;font-weight:700;white-space:nowrap;line-height:1.5}
.ctx-chip img{width:14px;height:14px;object-fit:contain;border-radius:3px}
.ctx-chip--person{background:#F7E9DE;border-color:rgba(169,84,44,.24);padding-left:4px}
.ctx-person-avatar{width:16px;height:16px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:7px;font-weight:800;letter-spacing:-.02em}
.uc2-context{font-size:14.5px;line-height:1.75;color:rgba(43,38,32,.78);margin:0;padding:16px 18px;background:rgba(245,240,233,.72);border:1px solid rgba(43,38,32,.1);border-radius:12px}
.uc2-checks{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:12px}
.uc2-checks li{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.5;color:rgba(43,38,32,.72)}
.uc2-checks .tick{width:18px;height:18px;border-radius:50%;background:oklch(.6 .09 150 / .16);color:oklch(.42 .09 150);display:grid;place-items:center;flex:none;font-size:11px;margin-top:1px}

/* Workflow cards */
.wf-item{padding:clamp(42px,5.5vw,76px) 0}
.wf-item+.wf-item{border-top:1px solid rgba(43,38,32,.12)}
.wf-grid{display:grid;grid-template-columns:.86fr 1.14fr;gap:clamp(30px,4vw,60px);align-items:start}
.wf-kicker{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);margin:0 0 14px}
.wf-item h3{font-weight:600;font-size:clamp(22px,2.6vw,33px);line-height:1.13;letter-spacing:-.025em;margin:0 0 14px}
.wf-body{font-size:15.5px;line-height:1.62;color:rgba(43,38,32,.66);margin:0 0 22px}
.wf-scenario-label{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#6B5F52;margin:0 0 10px}
.wf-demo{margin-top:20px}
.wf-demo iframe{display:block;width:100%;height:560px;border:0;border-radius:14px;background:#fff;box-shadow:0 16px 40px rgba(43,38,32,.1)}

/* Responsive */
@media (max-width:1020px){.ucdd-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:900px){.wf-grid{grid-template-columns:1fr;gap:24px}}
@media (max-width:820px){.help-grid{grid-template-columns:1fr}}
@media (max-width:768px){
  .site-nav{padding:14px 20px;position:relative}
  .nav-burger{display:inline-flex!important;flex-direction:column;justify-content:center;gap:5px;width:44px;height:40px;padding:9px 10px;background:none;border:1px solid rgba(43,38,32,.18);border-radius:10px;cursor:pointer}
  .nav-burger span{display:block;height:2px;width:100%;background:#2B2620;border-radius:2px}
  .nav-links{position:absolute;top:calc(100% + 1px);left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:rgba(245,240,233,.98);backdrop-filter:blur(12px);border-bottom:1px solid rgba(43,38,32,.09);padding:6px 20px 14px;z-index:60;display:none}
  .site-nav.open .nav-links{display:flex}
  .nav-link,.nav-uc-trigger{padding:14px 2px;border-top:1px solid rgba(43,38,32,.08);border-radius:0}
  .nav-cta{margin:14px 0 0;text-align:center;justify-content:center}
  .ucdd{display:none!important}
  .footer-grid{grid-template-columns:1fr;gap:28px}.footer-grid a,.footer-grid p{font-size:16px}
}
@media (max-width:620px){.shell1180{padding-left:20px;padding-right:20px}.ucdd-grid{grid-template-columns:1fr}}