/* t7_panel — Notion-style with persistent sidebar. */
:root {
  --pn-bg: #ffffff;
  --pn-bg-side: #fafaf7;
  --pn-ink: #2f2c28;
  --pn-ink-soft: #6f6a63;
  --pn-line: #ece8e1;
  --pn-accent: #ea580c;
  --pn-radius: 8px;
}
.pn-page { background: var(--pn-bg); color: var(--pn-ink);
  font-family: -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif; }

.pn-side { position: fixed; top: 0; left: 0; bottom: 0; width: 280px;
  background: var(--pn-bg-side); border-right: 1px solid var(--pn-line);
  padding: 24px 20px; display: flex; flex-direction: column;
  overflow-y: auto; z-index: 50; }
.pn-side__brand { display: flex; gap: 12px; align-items: center; padding: 4px 8px 24px;
  border-bottom: 1px solid var(--pn-line); margin-bottom: 18px; }
.pn-side__brand img { border-radius: var(--pn-radius); }
.pn-side__brand strong { display: block; font-size: 1rem; }
.pn-side__brand span { display: block; font-size: .82rem; color: var(--pn-ink-soft); }
.pn-side__nav { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.pn-side__group { text-transform: uppercase; letter-spacing: .12em;
  font-size: .7rem; font-weight: 700; color: var(--pn-ink-soft);
  margin: 16px 8px 6px; }
.pn-side__group:first-child { margin-top: 0; }
.pn-side__nav a { padding: 7px 10px; border-radius: var(--pn-radius);
  font-size: .93rem; color: var(--pn-ink); transition: background .12s; }
.pn-side__nav a:hover { background: var(--pn-line); }
.pn-side__cta { display: block; margin-top: 16px; padding: 11px 16px;
  background: var(--pn-accent); color: #fff; border-radius: var(--pn-radius);
  text-align: center; font-weight: 600; font-size: .92rem; }
.pn-side__cta:hover { filter: brightness(1.08); }

.pn-mobile-bar { display: none; position: sticky; top: 0; z-index: 100;
  background: #fff; border-bottom: 1px solid var(--pn-line);
  padding: 12px 18px; align-items: center; gap: 14px; }
.pn-mobile-bar .pn-top__brand { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.pn-mobile-bar .pn-top__brand img { border-radius: 6px; }
.pn-mobile-toggle { margin-left: auto; background: none; border: 0; font-size: 1.4rem; }

@media (max-width: 880px) {
  .pn-side { transform: translateX(-110%); transition: transform .25s;
    width: 280px; box-shadow: 4px 0 20px rgba(0,0,0,.12); }
  .pn-side[data-open] { transform: translateX(0); }
  .pn-mobile-bar { display: flex; }
}

.pn-main { margin-left: 280px; padding: 56px 64px 100px; max-width: 920px; }
@media (max-width: 880px) { .pn-main { margin-left: 0; padding: 32px 22px 80px; } }

.pn-crumbs { font-size: .82rem; color: var(--pn-ink-soft); margin: 0 0 16px; }
.pn-crumbs a { color: var(--pn-ink-soft); border-bottom: 1px dashed transparent; }
.pn-crumbs a:hover { border-bottom-color: var(--pn-ink-soft); }
.pn-crumbs span[aria-hidden] { margin: 0 6px; }

.pn-hero h1 { font-size: clamp(2.2rem, 4.5vw, 3.4rem); letter-spacing: -.022em;
  margin: 0 0 18px; line-height: 1.1; }
.pn-hero__lead { font-size: 1.12rem; color: var(--pn-ink-soft); max-width: 580px; margin: 0 0 30px; }
.pn-hero__row { display: flex; gap: 36px; align-items: center; flex-wrap: wrap;
  margin-bottom: 36px; padding: 18px 0; border-top: 1px solid var(--pn-line);
  border-bottom: 1px solid var(--pn-line); }
.pn-hero__cta { display: flex; gap: 12px; flex-wrap: wrap; }
.pn-hero__stats { display: flex; gap: 28px; margin-left: auto; }
.pn-hero__stats dt { font-size: 1.2rem; font-weight: 700; margin: 0; }
.pn-hero__stats dd { font-size: .8rem; color: var(--pn-ink-soft); margin: 2px 0 0; }
.pn-hero__shot img { max-width: 100%; border-radius: var(--pn-radius);
  border: 1px solid var(--pn-line); }

.pn-btn { display: inline-flex; align-items: center; padding: 9px 18px;
  border-radius: var(--pn-radius); font-weight: 600; font-size: .92rem;
  border: 1px solid transparent; transition: background .15s, transform .05s; }
.pn-btn:active { transform: translateY(1px); }
.pn-btn--solid { background: var(--pn-ink); color: #fff; }
.pn-btn--solid:hover { background: var(--pn-accent); }
.pn-btn--ghost { background: transparent; color: var(--pn-ink); border-color: var(--pn-line); }
.pn-btn--ghost:hover { background: var(--pn-bg-side); }

.pn-section { padding: 40px 0; border-top: 1px solid var(--pn-line); }
.pn-h2 { font-size: 1.7rem; letter-spacing: -.015em; margin: 0 0 22px; }

.pn-prose { font-size: 1rem; line-height: 1.75; color: var(--pn-ink); }
.pn-prose h3 { font-size: 1.05rem; margin: 1.6em 0 .4em; }
.pn-prose p { margin: 0 0 1em; color: var(--pn-ink-soft); }
.pn-prose a { color: var(--pn-accent); border-bottom: 1px solid currentColor; }

.pn-reviews { display: flex; flex-direction: column; gap: 16px; }
.pn-review { display: flex; gap: 14px; align-items: flex-start;
  padding: 18px; background: var(--pn-bg-side); border-radius: var(--pn-radius); }
.pn-review__avatar { width: 40px; height: 40px; border-radius: 50%;
  background: var(--pn-accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; flex-shrink: 0; }
.pn-review__body { flex: 1; }
.pn-review__body header { display: flex; gap: 12px; align-items: baseline;
  margin-bottom: 6px; font-size: .92rem; }
.pn-review__body p { margin: 0; font-size: .96rem; }
.pn-stars { color: #fbbf24; font-size: .85rem; letter-spacing: 1px; }

.pn-shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.pn-shots figure { margin: 0; border-radius: var(--pn-radius);
  border: 1px solid var(--pn-line); overflow: hidden; }
.pn-shots img { width: 100%; display: block; }
@media (max-width: 600px) { .pn-shots { grid-template-columns: 1fr; } }

.pn-faq details { border-bottom: 1px solid var(--pn-line); }
.pn-faq summary { list-style: none; padding: 16px 0; cursor: pointer; font-weight: 600;
  display: flex; justify-content: space-between; gap: 16px; }
.pn-faq summary::-webkit-details-marker { display: none; }
.pn-faq summary::after { content: '›'; color: var(--pn-accent); font-size: 1.2rem;
  transition: transform .15s; }
.pn-faq details[open] summary::after { transform: rotate(90deg); }
.pn-faq details > p { padding: 0 0 18px; color: var(--pn-ink-soft); margin: 0; }

.pn-form { display: flex; flex-direction: column; gap: 14px; max-width: 480px; }
.pn-form label { display: flex; flex-direction: column; gap: 6px;
  font-size: .88rem; font-weight: 600; }
.pn-form input, .pn-form textarea { padding: 10px 12px; border: 1px solid var(--pn-line);
  border-radius: var(--pn-radius); font: inherit; }
.pn-form input:focus, .pn-form textarea:focus { outline: 0; border-color: var(--pn-accent);
  box-shadow: 0 0 0 3px rgba(234,88,12,.15); }
.pn-form button { align-self: flex-start; border: 0; cursor: pointer; }
.pn-form__ok { color: #1f7d52; font-weight: 600; }

.site-footer { margin-left: 280px; }
@media (max-width: 880px) { .site-footer { margin-left: 0; } }