/* TOPHIVE Skills / verified Example product details.
 * Product-first free downloads today, reserved Pro offer state for the future.
 * No fake payment paths, ratings, reviews, testimonials or product metrics. */
.examples-page{
  --case-ink:#1b2720;
  --case-muted:#687c6d;
  --case-line:#dce5dc;
  --case-accent:#588064;
  background:#f9faf8;
}
.examples-page .site-footer{background:#f9faf8}
.examples-overline{
  display:block;
  color:#6b8571;
  font:750 10px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.095em;
}
.examples-case-hero{padding:30px 0 8px}
.examples-case-path{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:12px 24px;
}
.examples-case-path>a{
  display:inline-flex;align-items:center;gap:8px;
  color:#57705f;font-size:12px;line-height:1.5;
  font-weight:740;text-decoration:none;
}
.examples-case-path>a span{font-size:18px;font-weight:400;line-height:1}
.examples-case-path>a:hover{color:#276e43}
.examples-case-category{
  color:#839388;
  font:700 10px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.08em;
}
.examples-case-grid{margin-top:24px}
.examples-case-intro{max-width:875px}
.examples-case-heading{
  margin:0;color:#1b2621;font-size:clamp(40px,4.5vw,61px);
  line-height:1.08;letter-spacing:-.065em;font-weight:780;
}
.examples-case-heading em{color:#90b09a;font-style:normal}
.examples-case-lead{
  max-width:770px;margin:10px 0 0;
  color:#6a7d6d;font-size:clamp(13px,1.08vw,15px);line-height:1.65;
}
.examples-tech-row{
  display:flex;align-items:center;flex-wrap:wrap;gap:12px 17px;
  margin-top:19px;
}
.examples-tech-label{
  color:#718777;white-space:nowrap;
  font:750 10px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.08em;
}
.examples-tech-list{
  display:flex;align-items:center;flex-wrap:wrap;gap:7px;
  margin:0;padding:0;list-style:none;
}
.examples-tech-pill{
  display:inline-flex;align-items:center;gap:8px;min-height:34px;
  padding:6px 11px 6px 7px;
  border:1px solid #dfe8df;border-radius:7px;
  background:#fff;color:#405b48;
  font-size:12px;font-weight:680;line-height:1.25;
}
.examples-tech-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;flex:none;
}
.examples-tech-icon svg{width:20px;height:20px;display:block}
.examples-preview{
  overflow:hidden;margin-top:21px;
  border:1px solid #d8e3da;border-radius:12px;background:#eaf0eb;
}
.examples-preview-top{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:52px;padding:8px 13px 8px 19px;
  border-bottom:1px solid #dee8df;background:#fff;
}
.examples-preview-label{
  display:inline-flex;align-items:center;gap:8px;
  color:#445d4b;font-size:12px;font-weight:730;white-space:nowrap;
}
.examples-live-dot{
  width:7px;height:7px;border-radius:50%;
  background:#70b085;box-shadow:0 0 0 3px #70b0851b;
}
.examples-preview-switch{
  display:inline-flex;flex:none;align-items:center;gap:2px;
  padding:3px;border:1px solid #e0e7df;
  border-radius:7px;background:#f6f8f6;
}
.examples-preview-switch button{
  border:0;border-radius:5px;background:transparent;
  color:#5b7261;font-size:11px;line-height:1.4;font-weight:730;
  padding:7px 13px;cursor:pointer;
}
.examples-preview-switch button[aria-pressed=true]{
  background:#203229;color:#fff;box-shadow:0 1px 2px #13231812;
}
.examples-preview-switch button:focus-visible{outline:2px solid #5f9775;outline-offset:2px}
.examples-preview-canvas{
  display:flex;align-items:flex-start;justify-content:center;
  min-width:0;padding:12px;background:#eaf0eb;
}
.examples-preview iframe{
  display:block;flex:0 1 auto;width:100%;max-width:100%;
  height:clamp(510px,72vh,760px);
  border:1px solid #d8e1d9;border-radius:7px;background:#fff;
  box-shadow:0 9px 28px #27473113;
  transition:width .24s ease;
}
.examples-preview-canvas[data-preview-size=mobile] iframe{
  width:390px;max-width:100%;height:700px;
}
.examples-case-actions{
  display:flex;align-items:center;flex-wrap:wrap;
  gap:10px 23px;padding:14px 0 4px;
}
.examples-link-secondary{
  color:#477352;font-size:12px;font-weight:740;text-decoration:none;
  border-bottom:1px solid #bad1be;padding:4px 0;
}
.examples-link-secondary:hover{color:#245634;border-color:currentColor}
.examples-preview-caption{color:#91a093;font-size:11px}
.examples-market-grid{
  display:grid;grid-template-columns:minmax(0,1fr) 318px;
  align-items:stretch;gap:clamp(30px,4.2vw,64px);
  padding:34px 0 86px;
}
.examples-market-content,.examples-market-aside{min-width:0}
.examples-market-aside{align-self:stretch;position:relative}
.examples-prompt-showcase{
  padding:24px 27px 22px;
  border:1px solid #d7e4d9;border-radius:12px;
  background:#edf4ec;
}
.examples-prompt-top{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:13px 18px;
}
.examples-prompt-top h2{
  margin:8px 0 0;
  color:#1d3024;font-size:clamp(23px,2.4vw,30px);
  font-weight:780;line-height:1.15;letter-spacing:-.052em;
}
.examples-prompt-top .examples-copy-button{margin:0;flex:none}
.examples-prompt-description{
  margin:14px 0 17px;
  color:#62796a;font-size:12.5px;line-height:1.7;
}
.examples-prompt-label{
  display:block;margin-bottom:8px;
  color:#65816e;
  font:740 10px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.08em;
}
.examples-prompt-showcase textarea{
  display:block;width:100%;
  field-sizing:content;
  min-height:147px;
  max-height:400px;
  padding:17px 18px;
  resize:vertical;
  border:1px solid #cddfce;border-radius:8px;
  outline:none;background:#fff;color:#3c5140;
  box-shadow:0 1px 3px #243a2410;
  font:12px/1.75 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  overflow-wrap:anywhere;
}
.examples-prompt-showcase textarea:focus-visible{
  border-color:#729d80;
  box-shadow:0 0 0 3px rgba(128,174,142,.17);
}
.examples-prompt-note{
  color:#7e9180;font-size:11px;line-height:1.65;
  margin:12px 0 0;
}
.examples-overview{padding-top:34px}

.examples-overview h2,
.examples-market-section h2{
  color:var(--case-ink);font-size:clamp(27px,3vw,36px);
  font-weight:780;line-height:1.16;letter-spacing:-.055em;
  margin:12px 0 0;
}
.examples-overview>p{
  color:#708174;font-size:14px;line-height:1.75;
  max-width:730px;margin:16px 0 0;
}
.examples-highlights{
  display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:20px;
}
.examples-highlights>span{
  display:inline-flex;align-items:center;gap:6px;
  color:#4c7055;font-size:12px;font-weight:690;
}
.examples-highlights>span>span{color:#4f9561;font-size:14px}
.examples-market-section{
  border-top:1px solid var(--case-line);
  margin-top:38px;padding-top:34px;
}
.examples-section-top{
  display:flex;align-items:end;justify-content:space-between;
  gap:20px;
}
.examples-section-top h2{margin-top:10px}
.examples-period{color:#90af9a}
.examples-section-count{
  color:#8b9c8d;white-space:nowrap;
  font:700 10px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.07em;
}
.examples-feature-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:26px;margin-top:13px;
}
.examples-feature{
  display:grid;grid-template-columns:18px minmax(0,1fr);
  align-items:start;gap:8px;
  border-top:1px solid #e3eae4;padding:20px 0 19px;
}
.examples-feature-mark{color:#7aab83;font-size:15px;line-height:1.3}
.examples-feature h3{
  font-size:14px;line-height:1.45;font-weight:760;
  margin:0;color:#23372b;letter-spacing:-.014em;
}
.examples-feature p{
  margin:7px 0 0;color:#77867a;font-size:12.5px;line-height:1.65;
}
.examples-useful-for{margin-top:24px}
.examples-useful-for .examples-overline{margin-bottom:11px}
.examples-use-cases{display:flex;flex-wrap:wrap;gap:7px}
.examples-use-cases span{
  display:inline-flex;padding:7px 10px;
  border:1px solid #dce5db;border-radius:5px;
  color:#647969;background:transparent;
  font-size:11px;font-weight:670;line-height:1.4;
}
.examples-market-accordion{
  border-top:1px solid var(--case-line);
  margin-top:34px;
}
.examples-market-accordion + .examples-market-accordion{margin-top:0}
.examples-market-accordion summary{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:23px 1px;cursor:pointer;list-style:none;
}
.examples-market-accordion summary::-webkit-details-marker{display:none}
.examples-market-accordion summary>span:first-child{display:flex;flex-direction:column;gap:5px}
.examples-market-accordion summary strong{color:#294031;font-size:14px;font-weight:750}
.examples-market-accordion summary small{color:#88988a;font-size:11px;line-height:1.5}
.examples-accordion-plus{color:#648a6c;font-size:22px;line-height:1}
.examples-market-accordion[open] .examples-accordion-plus{transform:rotate(45deg)}
.examples-market-accordion summary:focus-visible{outline:2px solid #6b9678;outline-offset:2px}
.examples-accordion-body{padding:0 2px 25px}
.examples-accordion-body>p{
  color:#738578;font-size:12px;line-height:1.72;margin:0 0 18px;
}
.examples-accordion-body label{
  display:block;margin:12px 0 8px;color:#304032;font-size:12px;font-weight:750;
}
.examples-copy-button{
  display:inline-flex;gap:11px;align-items:center;
  padding:10px 13px;border:1px solid #bfd4c4;
  border-radius:6px;background:#fff;color:#305c3d;
  font-family:inherit;font-size:12px;line-height:1.4;font-weight:740;cursor:pointer;
}
.examples-copy-button:hover{background:#eef5ee}
.examples-testing-content>p,.examples-disclosure-note{
  color:#728376;font-size:12px;line-height:1.7;margin:0 0 15px;
}
.examples-disclosure-note strong{color:#4f7158}
.examples-testing-content .examples-evidence{
  margin:18px 0;border-top:1px solid #e1e9e1;
}
.examples-evidence>div{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:14px;border-bottom:1px solid #e2e8e1;padding:11px 0;
}
.examples-evidence dt{color:#708173;font-size:12px}
.examples-evidence dd{
  max-width:65%;margin:0;text-align:right;color:#486a50;
  font-size:12px;font-weight:700;
}
/* One truthful Free offer; no checkout is implied for planned Pro. */
.examples-purchase-card{
  position:sticky;top:22px;
  border:1px solid #dce6dc;border-radius:12px;
  background:#fff;padding:22px;box-shadow:0 9px 25px #20392607;
}
.examples-offer-top{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  font:750 10px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.06em;
}
.examples-offer-free{color:#4a7b57}
.examples-offer-instock{color:#789481;font-size:10px;letter-spacing:0}
.examples-offer-instock>span{font-size:8px;color:#67a978}
.examples-offer-price{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  color:#1d2e23;margin:19px 0 8px;
  font-size:35px;line-height:1.1;letter-spacing:-.06em;font-weight:800;
}
.examples-offer-price span{font-size:21px;font-weight:660;letter-spacing:-.035em;color:#627c6b}
.examples-offer-subtitle{margin:0 0 19px;color:#819082;font-size:12px;line-height:1.6}
.examples-free-button,.examples-preview-button{
  display:flex;align-items:center;justify-content:center;gap:14px;
  min-height:46px;width:100%;border-radius:6px;
  font-size:12px;font-weight:750;text-decoration:none;
}
.examples-free-button{
  background:#1f3228;border:1px solid #1f3228;color:#fff;
}
.examples-free-button:hover{background:#315540;border-color:#315540}
.examples-free-button span{font-size:16px}
.examples-preview-button{
  margin-top:9px;border:1px solid #d7e3d9;
  background:#fff;color:#355c40;
}
.examples-preview-button:hover{background:#f1f6f1}
.examples-free-button:focus-visible,.examples-preview-button:focus-visible,
.examples-link-secondary:focus-visible{
  outline:2px solid #618d70;outline-offset:3px;
}
.examples-buy-contents{
  margin-top:22px;padding-top:19px;border-top:1px solid #e4ebe3;
}
.examples-buy-contents p{
  display:flex;align-items:baseline;gap:9px;
  margin:10px 0;color:#66786b;font-size:11.5px;line-height:1.45;
}
.examples-buy-contents p span{color:#4f9861}
.examples-license-note{
  padding-top:17px;margin-top:17px;
  border-top:1px solid #e6ede6;
  color:#8b988d;font-size:10.5px;line-height:1.55;
}
.examples-toast{
  position:fixed;left:50%;bottom:20px;z-index:90;
  transform:translateX(-50%);padding:12px 17px;
  border-radius:8px;background:#213329;color:#fff;
  box-shadow:0 12px 30px #20392730;font-size:12px;
}
.examples-toast[hidden]{display:none}
@media(max-width:980px){
  .examples-market-grid{
    grid-template-columns:minmax(0,1fr);
    gap:24px;padding-top:27px;
  }
  .examples-market-aside{order:-1}
  .examples-purchase-card{position:static;max-width:none}
  .examples-buy-contents{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
  .examples-preview iframe{height:570px}
}
@media(max-width:640px){
  .examples-case-hero{padding:22px 0 8px}
  .examples-case-grid{margin-top:20px}
  .examples-case-heading{font-size:clamp(39px,9.6vw,51px)}
  .examples-case-lead{margin-top:9px;font-size:13px}
  .examples-tech-row{gap:9px 12px;margin-top:16px}
  .examples-tech-pill{min-height:32px;padding:5px 9px 5px 6px;font-size:11px;gap:6px}
  .examples-tech-icon,.examples-tech-icon svg{width:18px;height:18px}
  .examples-preview{margin-top:18px;border-radius:10px}
  .examples-preview-top{padding:7px 9px 7px 12px;min-height:48px}
  .examples-preview-label{font-size:11px}
  .examples-preview-switch button{padding:7px 9px}
  .examples-preview-canvas{padding:8px}
  .examples-preview iframe{height:540px}
  .examples-market-grid{gap:25px;padding:24px 0 58px}
  .examples-prompt-showcase{padding:18px 16px}
  .examples-prompt-top{align-items:flex-start}
  .examples-prompt-top h2{font-size:26px}
  .examples-prompt-top .examples-copy-button{padding:9px 11px}
  .examples-prompt-showcase textarea{padding:13px;font-size:11.5px;max-height:420px}
  .examples-overview{padding-top:27px}
  .examples-purchase-card{padding:18px}
  .examples-buy-contents{display:block}
  .examples-market-section{margin-top:32px;padding-top:28px}
  .examples-feature-grid{grid-template-columns:1fr}
  .examples-feature{padding:16px 0}
  .examples-section-count{font-size:9px}
  .examples-overview h2,.examples-market-section h2{font-size:29px}
  .examples-preview-caption{display:none}
  .examples-evidence>div{flex-direction:column;gap:4px}
  .examples-evidence dd{max-width:none;text-align:left}
}
@media(prefers-reduced-motion:reduce){
  .examples-preview iframe{transition:none!important}
  .examples-market-accordion .examples-accordion-plus{transition:none!important}
}