/* WorkloadWall — workloadwall.com
   Visual identity is the app's own: paper ground, cork, post-it notes. */

:root{
  --ground:#f4efe6;
  --panel:#fffdf8;
  --ink:#2b2620;
  --muted:#7a7166;
  --line:#e2d9cb;
  --accent:#b5532b;
  --accent-dark:#93401f;
  --cork:#c9955a;
  --cork-dark:#a9763f;
  --postit:#fff3a3;

  /* note colour = priority */
  --p-low:#dcebc4;
  --p-normal:#fff3a3;
  --p-high:#ffd79a;
  --p-critical:#ff9f9f;
  /* pin colour = severity */
  --s-minor:#8d8579;
  --s-moderate:#4a7fd4;
  --s-major:#e08a2c;
  --s-critical:#cf3b3b;

  --radius:10px;
  --shadow-sm:0 1px 2px rgba(43,38,32,.06), 0 2px 6px rgba(43,38,32,.05);
  --shadow-md:0 2px 4px rgba(43,38,32,.07), 0 12px 28px rgba(43,38,32,.09);
  --maxw:1120px;
  --ff:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --ff-hand:"Kalam","Comic Sans MS",cursive;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--ff);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{line-height:1.18;margin:0 0 .5em;letter-spacing:-.02em;font-weight:700}
h1{font-size:clamp(2.1rem,1.4rem + 2.6vw,3.3rem);letter-spacing:-.03em}
h2{font-size:clamp(1.5rem,1.15rem + 1.4vw,2.1rem)}
h3{font-size:1.15rem}
p{margin:0 0 1em}
hr{border:0;border-top:1px solid var(--line);margin:2.5rem 0}
code,kbd{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88em;
  background:#efe8dc;border:1px solid var(--line);border-radius:5px;padding:.1em .38em}
pre{background:#2b2620;color:#f4efe6;border-radius:9px;padding:15px 17px;overflow-x:auto;
  font-size:.85rem;line-height:1.55;margin:1.3em 0;position:relative}
pre code{background:none;border:0;border-radius:0;padding:0;color:inherit;font-size:inherit;
  white-space:pre}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:2px;border-radius:4px}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.narrow{max-width:760px}
.section{padding:72px 0}
.section--tight{padding:48px 0}
.section--alt{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.eyebrow{font-size:.76rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);margin:0 0 .8rem}
.lede{font-size:1.16rem;color:#5c554c;max-width:66ch}
.muted{color:var(--muted)}
.small{font-size:.9rem}
.center{text-align:center}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,253,248,.92);
  backdrop-filter:saturate(150%) blur(8px);border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:center;gap:20px;height:62px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.03rem;
  color:var(--ink);letter-spacing:-.02em}
.brand:hover{text-decoration:none}
.brand-mark{width:22px;height:22px;flex:none;border-radius:4px;background:var(--postit);
  border:1px solid #e4d16d;box-shadow:var(--shadow-sm);position:relative;transform:rotate(-4deg)}
.brand-mark::after{content:"";position:absolute;top:-3px;left:50%;width:6px;height:6px;
  margin-left:-3px;border-radius:50%;background:var(--s-critical);box-shadow:0 1px 2px rgba(0,0,0,.3)}
.nav{margin-left:auto;display:flex;align-items:center;gap:4px}
.nav a{color:#4c463e;font-size:.95rem;font-weight:500;padding:8px 11px;border-radius:7px}
.nav a:hover{background:#f1eadd;text-decoration:none}
.nav a[aria-current="page"]{color:var(--ink);background:#f1eadd;font-weight:600}
.nav .btn{margin-left:8px}
.nav-toggle{display:none;margin-left:auto;background:var(--panel);border:1px solid var(--line);
  border-radius:8px;padding:7px 10px;font:inherit;font-size:.9rem;cursor:pointer;color:var(--ink)}
@media (max-width:860px){
  .nav-toggle{display:block}
  .nav{position:absolute;top:62px;left:0;right:0;background:var(--panel);flex-direction:column;
    align-items:stretch;gap:2px;padding:10px 16px 16px;border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-md);display:none}
  .nav.open{display:flex}
  .nav .btn{margin:6px 0 0}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:inherit;font-size:.97rem;font-weight:600;line-height:1;cursor:pointer;
  padding:13px 20px;border-radius:9px;border:1px solid transparent;
  background:var(--accent);color:#fff;box-shadow:var(--shadow-sm);
  transition:background .15s ease,transform .06s ease,box-shadow .15s ease}
.btn:hover{background:var(--accent-dark);color:#fff;text-decoration:none;box-shadow:var(--shadow-md)}
.btn:active{transform:translateY(1px)}
.btn--ghost{background:var(--panel);color:var(--ink);border-color:var(--line)}
.btn--ghost:hover{background:#f6f0e5;color:var(--ink);border-color:#d3c8b6}
.btn--sm{padding:9px 14px;font-size:.9rem}
.btn--lg{padding:16px 26px;font-size:1.05rem}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* ---------- cork board ---------- */
.cork{
  position:relative;border-radius:14px;padding:22px;
  background-color:var(--cork);
  background-image:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,.10) 0 2px, transparent 2px),
    radial-gradient(circle at 62% 38%, rgba(0,0,0,.09) 0 2.5px, transparent 3px),
    radial-gradient(circle at 82% 72%, rgba(255,255,255,.08) 0 2px, transparent 2px),
    radial-gradient(circle at 33% 78%, rgba(0,0,0,.08) 0 2px, transparent 2px),
    radial-gradient(circle at 8% 62%, rgba(0,0,0,.07) 0 3px, transparent 3px),
    linear-gradient(160deg,#d3a068 0%,var(--cork) 42%,var(--cork-dark) 100%);
  background-size:37px 37px,53px 53px,71px 71px,43px 43px,89px 89px,100% 100%;
  box-shadow:inset 0 0 0 6px rgba(120,80,40,.30), inset 0 3px 18px rgba(60,35,10,.35),
    0 12px 34px rgba(43,38,32,.16);
}
.cork--frame{border:8px solid #8a5e2f;border-radius:16px}
.board{display:flex;flex-wrap:wrap;align-content:flex-start;gap:14px;min-height:220px}

/* ---------- post-it note ---------- */
.note{
  position:relative;flex:none;padding:12px 12px 10px;border-radius:2px;
  background:var(--p-normal);color:#3a3226;
  box-shadow:0 1px 1px rgba(0,0,0,.14), 0 8px 16px -6px rgba(40,24,8,.5);
  display:flex;flex-direction:column;
  transition:transform .18s ease, box-shadow .18s ease;
}
.note::after{content:"";position:absolute;inset:auto 0 0 0;height:16px;
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.05));pointer-events:none}
.note:hover{transform:translateY(-3px) rotate(0deg);box-shadow:0 2px 3px rgba(0,0,0,.16), 0 16px 26px -8px rgba(40,24,8,.55);z-index:3}
.note--low{background:var(--p-low)}
.note--normal{background:var(--p-normal)}
.note--high{background:var(--p-high)}
.note--critical{background:var(--p-critical)}
.note .pin{position:absolute;top:-7px;left:50%;transform:translateX(-50%);
  width:14px;height:14px;border-radius:50%;background:var(--s-moderate);
  box-shadow:0 2px 3px rgba(0,0,0,.35), inset -2px -2px 3px rgba(0,0,0,.25), inset 2px 2px 3px rgba(255,255,255,.55)}
.note .pin--minor{background:var(--s-minor)}
.note .pin--moderate{background:var(--s-moderate)}
.note .pin--major{background:var(--s-major)}
.note .pin--critical{background:var(--s-critical)}
.note-top{display:flex;justify-content:space-between;gap:8px;font-size:.6rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:rgba(58,50,38,.62);margin-bottom:5px}
.note-title{font-family:var(--ff-hand);font-size:1.02rem;line-height:1.22;font-weight:700;
  margin:0 0 3px;overflow-wrap:anywhere}
.note-sub{font-size:.76rem;font-style:italic;color:rgba(58,50,38,.72);line-height:1.3}
.note-foot{margin-top:auto;padding-top:10px;display:flex;justify-content:space-between;gap:8px;
  font-size:.72rem;color:rgba(58,50,38,.75)}
.note--quick{width:104px;min-height:104px}
.note--small{width:132px;min-height:126px}
.note--medium{width:168px;min-height:158px}
.note--large{width:208px;min-height:198px}
.note--major{width:252px;min-height:238px}
.note--quick .note-title,.note--small .note-title{font-size:.9rem}
.note--large .note-title,.note--major .note-title{font-size:1.2rem}
.note--new{animation:pinup .5s cubic-bezier(.2,1.4,.4,1) both}
@keyframes pinup{from{opacity:0;transform:translateY(-16px) rotate(-6deg) scale(.9)}
  to{opacity:1;transform:none}}

.legend{display:flex;flex-wrap:wrap;gap:6px 20px;margin:14px 0 0;padding:0;list-style:none;
  font-size:.82rem;color:var(--muted)}
.legend li{display:flex;align-items:center;gap:7px}
.swatch{width:13px;height:13px;border-radius:3px;border:1px solid rgba(0,0,0,.12);flex:none}
.dot{width:11px;height:11px;border-radius:50%;flex:none;box-shadow:inset -1px -1px 2px rgba(0,0,0,.25)}

/* ---------- hero ---------- */
.hero{padding:64px 0 24px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:52px;align-items:center}
@media (max-width:940px){.hero-grid{grid-template-columns:1fr;gap:34px}.hero{padding:44px 0 12px}}
.tagline{font-family:var(--ff-hand);font-size:clamp(1.35rem,1rem + 1.4vw,1.9rem);
  color:var(--accent);margin:0 0 18px;transform:rotate(-1.2deg);display:inline-block;font-weight:700}
.hero h1{margin-bottom:.35em}
.hero .lede{font-size:1.2rem}
.hero-meta{margin-top:22px;font-size:.9rem;color:var(--muted)}

/* ---------- generic panels / cards ---------- */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px;box-shadow:var(--shadow-sm)}
.grid{display:grid;gap:22px}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.card h3{margin-bottom:.35em}
.card p:last-child{margin-bottom:0}
.card-icon{width:34px;height:34px;border-radius:6px;background:var(--postit);border:1px solid #e6d571;
  transform:rotate(-5deg);margin-bottom:14px;box-shadow:var(--shadow-sm)}

/* feature rows */
.frow{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:44px;align-items:center;
  padding:44px 0;border-top:1px solid var(--line)}
.frow:first-of-type{border-top:0}
.frow--flip .frow-media{order:-1}
@media (max-width:800px){.frow--flip .frow-media{order:0}.frow{gap:26px;padding:34px 0}}
.frow-media img{border-radius:10px;border:1px solid var(--line);box-shadow:var(--shadow-md);background:var(--panel)}
.frow h2{font-size:1.6rem}
.ticks{list-style:none;margin:0;padding:0}
.ticks li{position:relative;padding-left:26px;margin-bottom:.5em}
.ticks li::before{content:"";position:absolute;left:0;top:.52em;width:11px;height:11px;border-radius:3px;
  background:var(--postit);border:1px solid #e0ce6a;transform:rotate(-6deg)}
.ticks--plain li::before{background:var(--accent);border-color:var(--accent)}

/* ---------- pricing ---------- */
.price-grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(246px,1fr));align-items:stretch}
.plan{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:26px 24px;
  display:flex;flex-direction:column;box-shadow:var(--shadow-sm);position:relative}
.plan--featured{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),var(--shadow-md)}
.plan--soon{background:#faf5ec}
.plan-flag{position:absolute;top:-11px;left:24px;background:var(--accent);color:#fff;font-size:.68rem;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:20px}
.plan h3{font-size:1.22rem;margin-bottom:.15em}
.plan .price{font-size:2.05rem;font-weight:700;letter-spacing:-.03em;margin:.25em 0 0}
.plan .price small{font-size:.9rem;font-weight:500;color:var(--muted);letter-spacing:0}
.plan .per{font-size:.85rem;color:var(--muted);margin:0 0 16px}
.plan ul{list-style:none;margin:0 0 22px;padding:0;font-size:.94rem}
.plan ul li{position:relative;padding-left:22px;margin-bottom:.45em}
.plan ul li::before{content:"✓";position:absolute;left:0;color:var(--accent);font-weight:700}
.plan ul li.no{color:var(--muted)}
.plan ul li.no::before{content:"–";color:var(--muted)}
.plan .btn{margin-top:auto;width:100%}

.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);
  border-radius:10px;background:var(--panel)}
table{border-collapse:collapse;width:100%;min-width:620px;font-size:.95rem}
th,td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:top}
thead th{background:#f6f0e5;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
tbody tr:last-child td{border-bottom:0}

/* ---------- faq / details ---------- */
details.faq{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:0;margin-bottom:10px}
details.faq>summary{cursor:pointer;padding:16px 20px;font-weight:600;list-style:none;display:flex;
  justify-content:space-between;gap:16px;align-items:center}
details.faq>summary::-webkit-details-marker{display:none}
details.faq>summary::after{content:"+";color:var(--accent);font-size:1.3rem;line-height:1;flex:none}
details.faq[open]>summary::after{content:"–"}
details.faq .faq-body{padding:0 20px 18px;color:#544d44}
details.faq .faq-body p:last-child{margin-bottom:0}

/* ---------- request form (demo + contact) ---------- */
.form-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.field{display:flex;flex-direction:column;gap:6px}
.field--full{grid-column:1/-1}
label{font-size:.85rem;font-weight:600;color:#4c463e}
.req{color:var(--accent)}
input,select,textarea{font:inherit;font-size:.97rem;color:var(--ink);background:var(--panel);
  border:1px solid #d8cebd;border-radius:8px;padding:11px 12px;width:100%}
textarea{min-height:96px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}
.hint{font-size:.82rem;color:var(--muted)}
.formnote{background:#f6f0e5;border:1px dashed #d3c6b0;border-radius:8px;padding:12px 14px;
  font-size:.88rem;color:var(--muted)}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- callouts ---------- */
.callout{border-left:4px solid var(--accent);background:var(--panel);border-radius:0 10px 10px 0;
  padding:16px 20px;margin:22px 0}
.callout p:last-child{margin-bottom:0}
.draft-banner{background:#fff6d8;border:1px solid #e6d071;border-radius:8px;padding:12px 16px;
  font-size:.9rem;margin:0 0 26px}

/* ---------- docs ---------- */
.docs-layout{display:grid;grid-template-columns:246px minmax(0,1fr);gap:48px;align-items:start}
@media (max-width:900px){.docs-layout{grid-template-columns:1fr;gap:26px}}
.docs-nav{position:sticky;top:82px;font-size:.94rem}
@media (max-width:900px){.docs-nav{position:static}}
.docs-nav ol{list-style:none;margin:0;padding:0;counter-reset:d}
.docs-nav li{counter-increment:d;margin-bottom:1px}
.docs-nav a{display:block;padding:7px 11px;border-radius:7px;color:#4c463e}
.docs-nav a::before{content:counter(d) ". ";color:var(--muted)}
.docs-nav a:hover{background:#f1eadd;text-decoration:none}
.docs-nav a[aria-current="page"]{background:#f1eadd;color:var(--ink);font-weight:600}
.doc-body h2{margin-top:2em;font-size:1.42rem;scroll-margin-top:82px}
.doc-body h3{margin-top:1.6em;font-size:1.08rem}
.doc-body ul,.doc-body ol{padding-left:1.3em}
.doc-body li{margin-bottom:.4em}
.doc-nav-foot{display:flex;justify-content:space-between;gap:16px;margin-top:56px;padding-top:22px;
  border-top:1px solid var(--line);font-size:.94rem}

/* ---------- footer ---------- */
.site-footer{background:var(--panel);border-top:1px solid var(--line);padding:52px 0 34px;margin-top:0}
.foot-grid{display:grid;gap:30px;grid-template-columns:1.4fr repeat(3,minmax(130px,1fr))}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr 1fr}}
.foot-grid h4{font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:.9em}
.foot-grid ul{list-style:none;margin:0;padding:0;font-size:.94rem}
.foot-grid li{margin-bottom:.45em}
.foot-grid a{color:#4c463e}
.foot-bottom{margin-top:38px;padding-top:20px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:space-between;font-size:.87rem;color:var(--muted)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:12px;z-index:100;background:var(--accent);color:#fff;padding:10px 16px;border-radius:8px}

/* hero board figure */
.hero-grid{align-items:start}
.hero-grid > div:last-child{padding-top:6px}
.wall-figure{margin:40px 0 0}
.wall-caption{display:flex;flex-wrap:wrap;gap:6px 22px;justify-content:space-between;
  margin-top:12px;font-size:.9rem;color:#4c463e}
@media (max-width:940px){.wall-figure{margin-top:28px}}

/* doc body: tables and code blocks from the Help files */
.doc-body .table-wrap{margin:1.4em 0}
.doc-body table{min-width:0}
.doc-body th,.doc-body td{font-size:.94rem}
.doc-body pre[data-lang]::before{content:attr(data-lang);position:absolute;top:8px;right:12px;
  font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(244,239,230,.42)}
.doc-body>.callout{margin:1.5em 0}
.doc-body h2:first-child{margin-top:1.2em}

/* download page: platform tabs */
.tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin:0 0 28px;flex-wrap:wrap}
.tab{appearance:none;background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;
  font:inherit;font-size:.98rem;font-weight:600;color:var(--muted);padding:11px 16px;cursor:pointer;
  border-radius:8px 8px 0 0}
.tab:hover{color:var(--ink);background:#f1eadd}
.tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent)}
.tab-note{font-size:.72rem;font-weight:500;color:var(--muted);margin-left:7px}
.panel-hidden{display:none}
.verify{margin-top:16px}
.verify summary{cursor:pointer;font-size:.88rem;color:var(--muted);font-weight:500}
.verify .hashes{margin-top:10px;font-size:.8rem;word-break:break-all;color:var(--muted)}
.verify .hashes div{margin-bottom:.5em}
.whats-new{background:#f6f0e5;border:1px dashed #d3c6b0;border-radius:9px;padding:14px 18px;margin:22px 0 0}
.whats-new p{margin:0}
.whats-new strong{display:block;margin-bottom:.3em}