/* v4 "pro" primitives, shared by A4 / B4 / C4 (html.pro): a quieter type scale and rhythm, plus the device frames used to show the
   illustrative design concepts (laptop, phone, browser window). Frames use a warm near-black (#2A2023), never pure black.
   Motion stays at taste level 4: press feedback and hover from the Emil primitives, a short entrance on desktop, nothing looping. */
html.pro { --frame: #2A2023; --frame-2: #3A2E32; --pro-shadow: 0 1px 2px rgba(39, 21, 34, .06), 0 28px 56px -30px rgba(39, 21, 34, .38); --pro-r: 20px; }
.pro h1 { font-size: clamp(2.35rem, 1.6rem + 2.7vw, 3.65rem); line-height: 1.04; letter-spacing: -.032em; font-weight: 600; margin-bottom: 20px; max-width: 15ch; }
.pro h2 { font-size: clamp(1.75rem, 1.4rem + 1.3vw, 2.5rem); line-height: 1.08; letter-spacing: -.025em; }
.pro h3 { letter-spacing: -.01em; }
.pro .kicker { font-size: 13px; letter-spacing: .1em; }
.pro .section { padding-block: clamp(72px, 4vw + 48px, 128px); }
.pro .hero__sub { font-family: var(--buka-font-heading); font-weight: 500; font-size: var(--buka-step-2); line-height: 1.2; letter-spacing: -.015em; margin: 0 0 12px; max-width: 28ch; }
.pro .hero__support { color: var(--text-muted); max-width: 46ch; }
.pro .hero__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 28px; }
.pro .hero__note { font-size: var(--buka-step--1); color: var(--text-muted); margin: 18px 0 0; max-width: 56ch; }
.pro .btn-row { margin-top: 8px; }
/* Laptop: screen with a warm bezel and a slim base */
.pro-laptop { position: relative; margin: 0; }
.pro-laptop__screen { border: 9px solid var(--frame); border-bottom-width: 11px; border-radius: 14px 14px 4px 4px; background: var(--frame); overflow: hidden; box-shadow: var(--pro-shadow); }
.pro-laptop__screen img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.pro-laptop__base { position: relative; height: 12px; margin: 0 -5%; border-radius: 0 0 18px 18px; background: linear-gradient(#DAD3D5, #B7AFB2); }
.pro-laptop__base::after { content: ""; position: absolute; left: 50%; top: 0; width: 18%; height: 5px; transform: translateX(-50%); border-radius: 0 0 8px 8px; background: #9B9396; }
/* Phone */
.pro-phone { position: relative; margin: 0; aspect-ratio: 390 / 820; border: 6px solid var(--frame); border-radius: 28px; background: var(--frame); overflow: hidden; box-shadow: var(--pro-shadow); }
.pro-phone::after { content: ""; position: absolute; top: 5px; left: 50%; width: 28%; height: 5px; transform: translateX(-50%); border-radius: 3px; background: var(--frame); z-index: 1; }
.pro-phone img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 22px; }
/* Browser window (clip-path reveals still apply to the inner image) */
.pro-browser { margin: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface); box-shadow: var(--pro-shadow); }
.pro-browser__bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.pro-browser__bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); flex: none; }
.pro-browser__bar span { margin-left: 8px; font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pro-browser img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
/* Burak chip: real photo, small, never upscaled */
.pro-chip { display: inline-flex; align-items: center; gap: 12px; padding: 8px 16px 8px 8px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--pro-shadow); font-size: 13px; line-height: 1.25; color: var(--text-muted); }
.pro-chip img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: center 22%; flex: none; }
.pro-chip strong { display: block; color: var(--text); font-family: var(--buka-font-heading); font-size: 14px; }
.pro .shot-label { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; }
@media (prefers-reduced-motion: reduce) { .pro .ek-reveal { clip-path: none !important; } }
/* Grid safety (zero specificity, so every theme rule still wins): single-column tracks must be allowed to shrink — a long unbreakable
   string or a wide child must never widen the page on phones. */
:where(.pro) :where(.pk-list, .bento, .gallery, .ed-row, .ed-split, .stack, .flow5, .pr, .pk__cols, .pr__cols, .own-rows, .meet, .final, .ek-two) { grid-template-columns: minmax(0, 1fr); }
:where(.pro) :where(.hero > .container) { grid-template-columns: minmax(0, 1fr); }
:where(.pro) :where(.pk-list, .bento, .gallery, .ed-row, .ed-split, .pr, .meet, .final, .ek-two, .hero > .container) > * { min-width: 0; }
.pro h1, .pro h2, .pro h3 { overflow-wrap: anywhere; }
/* the +/– on FAQ rows is decoration: give it an empty alternative text where the browser supports it (ignored elsewhere) */
.pro .faq summary::after { content: "+" / ""; } .pro .faq details[open] summary::after { content: "–" / ""; }
@media print {
  .review-bar, .consent, .s1-nav-toggle { display: none !important; }
  .pro .ek-reveal, html.emil.ek-js .ek-reveal:not(.is-in) { clip-path: none !important; }
  .pro .stack li { position: static !important; } .pro .ek-enter > * { opacity: 1 !important; transform: none !important; }
  .pro .rail { overflow: visible; grid-auto-flow: row; grid-auto-columns: 1fr; }
}
@media print { .pro figure, .pro .pro-browser, .pro .pro-phone, .pro .shot { break-inside: avoid; } }