/* Blot uses the existing studio typefaces and navigation with warm paper. */
.blot-nav { display:flex; gap:1.4rem; align-items:center; flex-wrap:wrap; padding-block:.8rem 1.2rem; font-size:.95rem; }
.blot-nav>span { color:var(--gold-light); font-weight:700; margin-right:.3rem; }
.blot-nav a { display:inline-flex; align-items:center; min-height:44px; color:var(--muted); text-decoration:none; }
.blot-nav a[aria-current],.blot-nav a:hover { color:var(--gold-light); text-decoration:underline; }
.blot-paper { background-color:#fbf2df; color:#28231e; background-image:radial-gradient(ellipse at 12% 20%,#e5c99430,transparent 55%),radial-gradient(ellipse at 92% 80%,#edd7a62c,transparent 55%); }
.blot-paper .eyebrow { color:#80652c; }
.blot-paper .lead { color:#5d5548; }
.blot-paper a { color:#006d7c; }
.blot-paper a:hover { color:#004e59; }
.blot-paper a:focus-visible { outline-color:#006d7c; }
.blot-paper .button { background:#087d8e; border-color:#076a77; color:#fff9eb; border-radius:.55rem; box-shadow:0 3px 0 #064c58; }
.blot-paper .button:hover { color:#fff; background:#006272; }
.blot-hero { padding-block:3.5rem 3rem; border-block:1px solid #bea477; }
.blot-hero-grid { display:grid; grid-template-columns:1.1fr 1fr; gap:3rem; align-items:center; }
.blot-hero-copy { min-width:0; }
.blot-hero h1 { font-size:clamp(4.2rem,7.8vw,7.6rem); line-height:.9; letter-spacing:-.055em; margin-bottom:2rem; }
.blot-hero h1 span { display:block; font-size:clamp(1.3rem,2.2vw,2rem); letter-spacing:.01em; line-height:1.5; margin-top:.7rem; }
.blot-tagline { font-size:clamp(2rem,3.2vw,3rem); letter-spacing:-.035em; margin-bottom:1.4rem; }
.blot-hero-copy>p:not(.eyebrow) { max-width:490px; }
.blot-hero-copy .lead { font-size:1.2rem; line-height:1.5; }
.blot-hero-art { position:relative; margin:0; min-width:0; padding-block:1.8rem 0; }
.blot-hero-art>img { position:relative; width:90%; margin:0 auto; z-index:1; transform:rotate(-4deg); }
.blot-ink-swoop { position:absolute; inset:0; width:100%; height:100%; }
.blot-hero-art figcaption { position:relative; z-index:1; color:#5d5548; text-align:center; font-size:.95rem; margin-top:1.5rem; }
.blot-testing { display:flex; align-items:flex-start; gap:.8rem; border-top:1px solid #bdaa87; padding-top:1.35rem; margin-top:2rem; max-width:500px; }
.blot-status-dot { width:.55rem; height:.55rem; background:#087d8e; border-radius:50%; margin-top:.55rem; flex-shrink:0; }
.blot-testing strong { font-size:.95rem; }
.blot-testing p { font-size:.9rem; color:#5d5548; margin:.25rem 0 0; }
.blot-modes { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:1.2rem; }
.blot-mode { min-width:0; grid-column:span 2; position:relative; background:var(--bg-deep); border:1px solid var(--line); border-radius:.8rem; padding:2rem 1.8rem; }
.blot-mode:nth-child(n+4) { grid-column:span 3; }
.blot-mode p:last-child { color:var(--muted); margin-bottom:0; }
.blot-mode h3 { font-family:var(--display); font-size:1.6rem; padding-right:1rem; }
.blot-mode .eyebrow { margin-bottom:1rem; padding-right:2rem; }
.blot-mode-number { position:absolute; right:1.5rem; top:1.7rem; font-size:1.1rem; font-family:var(--display); color:#a1b0b5; }
.blot-wonder { border-block:1px solid #bea477; }
.blot-wonder-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:5rem; align-items:center; }
.blot-wonder-grid>div { min-width:0; }
.blot-local-note { font-size:.95rem; color:#655a4a; border-top:1px solid #c6b799; padding-top:1.2rem; margin-top:1.6rem; margin-bottom:0; }
.blot-paper-note { position:relative; border:1px solid #beab83; border-radius:.3rem; background:#fffbef; padding:2.5rem 3rem; transform:rotate(2deg); box-shadow:7px 8px 0 #dbcba67d; }
.blot-note-title { font-size:clamp(2.3rem,4vw,3.4rem); line-height:1.12; font-family:var(--display); font-weight:700; letter-spacing:-.03em; }
.blot-note-title em { color:#087d8e; }
.blot-paper-note p:last-child { margin-bottom:0; color:#655a4a; }
.blot-note-stroke { display:block; width:5rem; height:.4rem; border-radius:1rem; background:#bc5879; margin-bottom:1.8rem; transform:rotate(-6deg); }
.blot-screens { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:1.3rem; align-items:start; }
.blot-screens figure { margin:0; min-width:0; }
.blot-screens .screenshot-link { display:block; overflow:hidden; border:1px solid #9d865b; border-radius:.8rem; background:#fbf2df; }
.blot-screens .screenshot-link img { width:100%; }
.blot-screens figcaption { font-size:1rem; line-height:1.5; font-weight:700; margin-top:1rem; }
.blot-screens figcaption small { display:block; font-size:.85rem; font-weight:400; color:var(--muted); margin-top:.35rem; }
.blot-help { display:flex; align-items:center; justify-content:space-between; gap:3rem; border-top:1px solid var(--line); }
.blot-help>div { min-width:0; }
.blot-help>div:first-child { max-width:630px; }
.blot-help p:not(.eyebrow) { color:var(--muted); margin-bottom:0; }
.blot-help .button-row { justify-content:flex-end; margin-top:0; }
.blot-support-heading { display:grid; grid-template-columns:1fr 260px; gap:4rem; align-items:center; }
.blot-support-heading>div { min-width:0; }
.blot-support-heading>img { width:100%; padding:1rem; filter:drop-shadow(0 0 22px #e7c38435); }
.blot-policy .document-body { overflow-wrap:anywhere; }
.blot-policy .document-toc { max-height:calc(100vh - 3rem); overflow-y:auto; }
.blot-card-art { height:100%; background:#fbf2df; background-image:radial-gradient(ellipse at center,#edd7a645,transparent); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:1.5rem; gap:.7rem; }
.blot-card-art img { width:78%; max-height:82%; object-fit:contain; }
.blot-card-art>span { display:block; color:#4c4439; font-family:var(--display); font-size:1.2rem; font-weight:700; line-height:1.3; text-align:center; }
.product-card-blot .product-card-art { aspect-ratio:1.4; }
@media(max-width:1000px) {
  .blot-hero-grid { gap:1.7rem; }
  .blot-wonder-grid { gap:3rem; }
  .blot-screens { grid-template-columns:repeat(3,minmax(0,1fr)); gap:2rem 1.3rem; }
  .blot-help { align-items:flex-start; }
  .blot-help .button-row { flex-direction:column; align-items:flex-start; min-width:180px; }
}
@media(max-width:760px) {
  .blot-hero { padding-block:2.5rem; }
  .blot-hero-grid { display:flex; flex-direction:column; align-items:stretch; gap:0; }
  .blot-hero-copy { display:contents; }
  .blot-hero-copy>.eyebrow { order:0; }
  .blot-hero-copy>h1 { order:1; margin-bottom:.4rem; }
  .blot-hero-copy>.blot-tagline { order:3; }
  .blot-hero-copy>.lead { order:4; }
  .blot-hero-copy>p:not(.eyebrow):not(.lead) { order:5; }
  .blot-hero-copy>.button-row { order:6; }
  .blot-hero-copy>.blot-testing { order:7; }
  .blot-hero h1 { font-size:5.5rem; }
  .blot-hero h1 span { font-size:1.6rem; }
  .blot-hero-art { order:2; width:min(100%,250px); align-self:center; padding-block:0; margin-block:.5rem 1.5rem; }
  .blot-tagline { font-size:2.3rem; }
  .blot-hero-art>img { width:83%; }
  .blot-hero-art figcaption { margin-top:.8rem; font-size:.85rem; }
  .blot-modes { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .blot-mode,.blot-mode:nth-child(n+4) { grid-column:auto; }
  .blot-mode:last-child { grid-column:span 2; }
  .blot-wonder-grid { grid-template-columns:minmax(0,1fr); gap:2rem; }
  .blot-paper-note { width:min(100%,460px); padding:2rem; transform:none; box-shadow:4px 5px 0 #dbcba67d; }
  .blot-screens { grid-template-columns:repeat(2,minmax(0,1fr)); gap:2rem 1.1rem; }
  .blot-help { flex-direction:column; gap:1.5rem; }
  .blot-help .button-row { flex-direction:row; margin:0; justify-content:flex-start; }
  .blot-support-heading { grid-template-columns:minmax(0,1fr); gap:1rem; }
  .blot-support-heading>img { max-width:140px; padding:0; }
  .blot-nav { gap:.3rem 1.15rem; }
  .blot-policy .document-toc { max-height:none; overflow:visible; }
}
@media(max-width:420px) {
  .blot-hero h1 { font-size:4.7rem; }
  .blot-hero h1 span { font-size:1.35rem; }
  .blot-tagline { font-size:2rem; }
  .blot-modes { grid-template-columns:minmax(0,1fr); }
  .blot-mode:last-child { grid-column:auto; }
  .blot-mode { padding:1.8rem 1.5rem; }
  .blot-paper-note { width:calc(100% - 5px); }
  .blot-screens { grid-template-columns:minmax(0,1fr); max-width:290px; margin-inline:auto; }
  .blot-card-art>span { font-size:1rem; }
  .blot-hero-art { max-width:240px; }
}
@media(prefers-reduced-motion:reduce) { .blot-hero-art>img { transform:none; } }