/* Product / marketing pages (templates/product.html). Builds on checker.css. */

.pp-hero .wrap { padding: 64px 32px 56px; }
.pp-hero-grid { display: grid; gap: 40px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 960px) { .pp-hero-grid.has-image { grid-template-columns: 1.05fr 0.95fr; } }
.pp-hero h1 { max-width: 20ch; }
.pp-actions { margin-top: 28px; display: flex; gap: 14px; flex-wrap: wrap; }
.pp-hero-art img { display: block; width: 100%; height: auto; border-radius: 16px; border: 1px solid var(--line); box-shadow: var(--shadow-lg); background: var(--surface); }

.pp-grid { margin-top: 40px; display: grid; gap: 1px; grid-template-columns: 1fr; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
@media (min-width: 640px) { .pp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .pp-grid { grid-template-columns: repeat(3, 1fr); } }
.pp-card { background: var(--surface); padding: 26px; }
.pp-card h3 { font-size: 16px; font-weight: 700; color: var(--navy); letter-spacing: -0.01em; }
.pp-card p { margin-top: 7px; font-size: 14.5px; color: var(--ink-soft); }

.pp-steps { margin-top: 40px; list-style: none; display: grid; gap: 18px; grid-template-columns: 1fr; counter-reset: step; }
@media (min-width: 860px) { .pp-steps { grid-template-columns: repeat(3, 1fr); } }
.pp-steps li { counter-increment: step; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 24px; }
.pp-block-alt .pp-steps li { counter-increment: step; background: var(--bg); }
.pp-num { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 999px; background: var(--accent-wash); color: var(--accent-deep); font-family: 'IBM Plex Mono', monospace; font-weight: 600; font-size: 13px; margin-bottom: 14px; }
.pp-num::before { content: counter(step); }
.pp-steps h3 { font-size: 17px; font-weight: 700; color: var(--navy); }
.pp-steps p { margin-top: 7px; font-size: 14.5px; color: var(--ink-soft); }

.pp-callout { margin-top: 32px; max-width: 72ch; background: var(--accent-wash); border: 1px solid oklch(0.88 0.04 158); border-radius: 12px; padding: 22px 26px; }
.pp-callout p { font-size: 15.5px; color: var(--navy); }
.pp-callout p + p { margin-top: 12px; }

@media (max-width: 640px) {
  .pp-hero .wrap { padding: 40px 20px 36px; }
}

/* two-column layout for form + side notes (abuse page) */
.pp-two { display: grid; gap: 32px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 960px) { .pp-two { grid-template-columns: 1.4fr 0.8fr; } }
.pp-side h3 { font-size: 15px; font-weight: 700; color: var(--navy); margin-top: 22px; }
.pp-side h3:first-child { margin-top: 0; }
.pp-side p { margin-top: 6px; font-size: 14.5px; color: var(--ink-soft); }
.pp-side a { color: var(--accent-deep); font-weight: 600; }

/* status page */
.pp-status { display: flex; gap: 16px; align-items: center; padding: 22px 24px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); }
.pp-status-dot { width: 14px; height: 14px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 0 5px oklch(0.52 0.11 158 / 0.2); flex: none; }
.pp-status-title { font-size: 20px; font-weight: 700; color: var(--navy); letter-spacing: -0.01em; }
.pp-status-sub { margin-top: 2px; font-size: 13.5px; color: var(--ink-faint); }
.pp-status-up { background: var(--accent-wash); border-color: oklch(0.88 0.04 158); }
.pp-status-degraded { background: oklch(0.97 0.035 85); border-color: oklch(0.86 0.07 85); }
.pp-status-degraded .pp-status-dot { background: oklch(0.72 0.15 75); box-shadow: 0 0 0 5px oklch(0.72 0.15 75 / 0.25); }
.pp-status-down { background: oklch(0.97 0.025 25); border-color: oklch(0.86 0.07 25); }
.pp-status-down .pp-status-dot { background: var(--danger); box-shadow: 0 0 0 5px oklch(0.55 0.17 25 / 0.2); }
.pp-comp { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 22px; border-top: 1px solid var(--line-soft); }
.pp-comp:first-child { border-top: none; }
.pp-comp-name { font-size: 15px; font-weight: 600; color: var(--navy); }
.pp-comp-detail { margin-top: 2px; font-size: 13.5px; color: var(--ink-soft); }

/* the hidden attribute must win over display rules on form panels */
.ck-fields[hidden] { display: none; }

/* glossary */
.gl-def { margin-top: 18px; max-width: 62ch; font-size: 19px; line-height: 1.5; color: var(--navy); border-left: 3px solid var(--accent); padding-left: 18px; }
.gl-grid { display: grid; gap: 44px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 980px) { .gl-grid { grid-template-columns: minmax(0, 1fr) 320px; } }
.gl-example { margin-bottom: 36px; }
.gl-example-cap { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 8px; }
.gl-code { font-family: 'IBM Plex Mono', monospace; font-size: 14px; line-height: 1.7; background: var(--navy); color: oklch(0.9 0.02 250); border-radius: 12px; padding: 18px 20px; overflow-x: auto; white-space: pre-wrap; word-break: break-all; }
.gl-section { margin-top: 48px; }
.gl-section:first-of-type { margin-top: 0; }
.gl-section h2 { margin-top: 10px; font-size: clamp(22px, 3vw, 28px); letter-spacing: -0.02em; font-weight: 700; color: var(--navy); line-height: 1.15; }
.gl-section .pp-grid, .gl-section .pp-steps { margin-top: 24px; }
.gl-section .pp-steps { grid-template-columns: 1fr; }
@media (min-width: 640px) { .gl-section .pp-grid { grid-template-columns: repeat(2, 1fr); } }
.gl-aside { display: grid; gap: 18px; position: sticky; top: 90px; }
.gl-box { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 20px; }
.gl-box h3 { font-size: 13px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-faint); }
.gl-box ul { margin: 12px 0 0 18px; display: grid; gap: 8px; font-size: 14.5px; color: var(--ink-soft); }
.gl-links { list-style: none; margin-left: 0 !important; }
.gl-links a { color: var(--accent-deep); font-weight: 600; }
.gl-cta { background: var(--accent-wash); border-color: oklch(0.88 0.04 158); }
.gl-cta p { margin: 8px 0 14px; font-size: 14.5px; color: var(--navy); }
.gl-term { display: block; transition: background .15s; }
.gl-term:hover { background: var(--bg); }
.gl-more { display: inline-block; margin-top: 12px; font-size: 13.5px; font-weight: 600; color: var(--accent-deep); }
@media (max-width: 979px) { .gl-aside { position: static; } }

/* status history */
.pp-h2 { margin: 36px 0 14px; font-size: 20px; font-weight: 700; color: var(--navy); letter-spacing: -0.01em; }
.pp-up { padding: 16px 22px; border-top: 1px solid var(--line-soft); }
.pp-up:first-child { border-top: none; }
.pp-up-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.pp-up-pct { font-size: 13.5px; color: var(--ink-soft); font-family: 'IBM Plex Mono', monospace; }
.pp-strip { margin-top: 10px; display: grid; grid-template-columns: repeat(30, 1fr); gap: 3px; }
.pp-day { display: block; height: 26px; border-radius: 3px; background: var(--accent); }
.pp-strip .pp-day:hover { outline: 2px solid var(--navy); outline-offset: 1px; }
.pp-day-degraded { background: oklch(0.78 0.15 75); }
.pp-day-down { background: var(--danger); }
.pp-day-none { background: var(--line); }
.pp-legend { display: flex; gap: 18px; flex-wrap: wrap; padding: 14px 22px; border-top: 1px solid var(--line-soft); font-size: 12.5px; color: var(--ink-faint); }
.pp-legend span { display: inline-flex; align-items: center; gap: 7px; }
.pp-legend .pp-day { width: 12px; height: 12px; }
@media (max-width: 640px) { .pp-strip { gap: 2px; } .pp-day { height: 22px; } }

/* image tiles: use-case hub and home */
.pp-cards { display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .pp-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .pp-cards { grid-template-columns: repeat(3, 1fr); } }
.pp-tile { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; transition: box-shadow .15s, transform .15s; }
.pp-tile:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.pp-tile img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; background: var(--bg); border-bottom: 1px solid var(--line-soft); }
.pp-tile-body { padding: 18px 20px 20px; }
.pp-tile-body h3 { font-size: 17px; font-weight: 700; color: var(--navy); letter-spacing: -0.01em; }
.pp-tile-body p { margin-top: 6px; font-size: 14.5px; color: var(--ink-soft); }
.pp-more { margin-top: 28px; font-size: 15px; font-weight: 600; }
.pp-more a { color: var(--accent-deep); }