/* R179: practice-first product surfaces. Loaded after product-r178.css. */
html:has(body.pf-product-suite) { background: #f5f8fc; }
body.pf-product-suite {
  --pf-bg: #f5f8fc;
  --pf-surface: #fff;
  --pf-surface-soft: #edf3fb;
  --pf-surface-strong: #e5eefb;
  --pf-text: #14213d;
  --pf-muted: #53627a;
  --pf-line: #d6e0ef;
  --pf-accent: #2457eb;
  --pf-accent-bright: #81a4ff;
  --gk-bg: #f5f8fc;
  --gk-surface: #fff;
  --gk-surface-strong: #e5eefb;
  --gk-text: #14213d;
  --gk-muted: #53627a;
  --gk-line: #d6e0ef;
  --gk-accent: #2457eb;
  color: var(--pf-text);
  background: var(--pf-bg);
}

body.pf-product-suite .pf-product-shell,
body.pf-product-suite .gk-shell { width: min(1280px, calc(100% - 48px)); }
body.pf-product-suite .pf-header { background: rgb(245 248 252 / .96); border-color: var(--pf-line); }
body.pf-product-suite .pf-nav a:hover,
body.pf-product-suite .pf-nav a[aria-current="page"],
body.pf-product-suite .pf-account a:hover { color: var(--pf-accent); }
body.pf-product-suite .pf-nav { background:transparent; box-shadow:none; }
body.pf-product-suite .pf-nav a { font-size:14px; padding:12px 10px; }
body.pf-product-suite .pf-nav a[aria-current="page"] { color:var(--pf-accent); background:transparent; box-shadow:inset 0 -2px var(--pf-accent); border-radius:0; }
body.pf-product-suite .pf-account > .pf-header-cta,
body.pf-product-suite .gk-button:not(.is-outline),
body.pf-product-suite .pf-button:not(.is-outline) { color: #fff; background: var(--pf-accent); border-color: var(--pf-accent); }

body.pf-product-suite .pf-product-hero {
  min-height: min(720px, calc(100svh - 72px));
  padding: 104px 0 48px;
  background: radial-gradient(circle at 82% 16%, rgb(129 164 255 / .18), transparent 28%), var(--pf-bg);
}
body.pf-product-suite .pf-product-hero.is-compact { min-height: 0; padding-block: 64px 38px; }
body.pf-product-suite .pf-product-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(360px, .92fr); gap: clamp(32px, 5vw, 72px); }
body.pf-product-suite .pf-product-hero h1 { max-width: 14ch; font-size: clamp(38px, 4.4vw, 58px); letter-spacing: -.04em; }
body.pf-product-suite .pf-product-lead { max-width: 53ch; margin-top: 20px; font-size: clamp(16px, 1.2vw, 19px); }
body.pf-product-suite .pf-product-eyebrow,
body.pf-product-suite .pf-product-card-code { color: var(--pf-accent); }
body.pf-product-suite .pf-product-button,
body.pf-product-suite .pf-product-link { border-radius: 14px; }
body.pf-product-suite .pf-product-button:hover { background: #1742bd; border-color: #1742bd; }
body.pf-product-suite .pf-product-character { border-radius: 14px; box-shadow: 14px 16px 0 rgb(36 87 235 / .09); }

.pf-product-hero-practice {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--pf-line);
  border-radius: 14px;
  background: var(--pf-surface);
  box-shadow: 0 18px 44px rgb(20 33 61 / .08);
}
.pf-product-hero-practice > .pf-product-card-code { margin-bottom: 10px; }
.pf-product-hero-practice .pf-product-practice-preview { min-width: 0; }
.pf-product-hero-authored { max-width: 100%; margin: 0 0 16px; }
.pf-product-hero-authored .pf-product-character { aspect-ratio: 16 / 5; border-radius: 12px; box-shadow: none; }
.pf-product-hero-authored .pf-product-character :where(img,video) { object-position: center 35%; }
.pf-product-hero-practice .pr-demo-preview h4 { margin-bottom:10px; font-size:18px; }
.pf-product-hero-practice .pr-demo-label { margin-bottom:8px; }
.pf-product-hero-practice .pr-demo-count { margin:10px 0; }
.pf-product-hero-practice .pr-demo-count span { display:inline; margin-left:8px; }
.pf-product-hero-practice .pr-demo-table :where(th,td) { padding-block:6px; }
.pf-product-hero-practice .pr-demo-note { margin-top:10px; }
.pf-product-hero-practice .pf-product-practice-link { display:inline-flex; align-items:center; margin-top:4px; font-size:14px; }
.pf-product-practice-link { min-height: 44px; margin-top: 12px; color: var(--pf-accent); }

.pf-product-practice-preview {
  min-width: 0;
  color: var(--pf-text);
  overflow-wrap: anywhere;
}
.pf-product-practice-preview :where(button, a, input, select, textarea) { min-height: 44px; }
.pf-product-practice-preview :where(button, a) { border-radius: 10px; }
.pf-product-practice-preview :where(input, select, textarea) { max-width: 100%; border-color: var(--pf-line); background: var(--pf-surface); }
.pf-product-practice-preview :where(h3, h4, p) { overflow-wrap: anywhere; }

body.pf-product-suite .pf-product-section { padding: clamp(48px, 6vw, 76px) 0; }
body.pf-product-suite .pf-product-heading { display:block; }
body.pf-product-suite .pf-product-section-lead { margin-top:16px; max-width:65ch; }
body.pf-product-suite .pf-product-fde { background:var(--pf-surface-soft); }
body.pf-product-suite .pf-product-resource-card { grid-template-columns:minmax(0,1fr); }
body.pf-product-suite .pf-product-resource-preview { min-height:0; padding:24px; }
body.pf-product-suite .pf-product-resource-preview .pf-product-card-code { display:none; }
.pr-demo-preview h4 { margin:0 0 18px; font-size:20px; line-height:1.45; color:var(--pf-text); }
.pr-demo-label { margin:0 0 12px; font-size:12px; font-weight:700; color:var(--pf-accent); }
.pr-demo-metrics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:16px 0; }
.pr-demo-metrics dt { color:var(--pf-muted); font-size:13px; line-height:1.5; }
.pr-demo-metrics dd { margin:8px 0 0; font-size:26px; font-weight:750; letter-spacing:-.02em; color:var(--pf-text); }
.pr-demo-note { margin:16px 0 0; color:var(--pf-muted); font-size:13px; line-height:1.65; }
.pr-demo-count { color:var(--pf-muted); font-size:14px; }
.pr-demo-count strong { color:var(--pf-accent); font-size:30px; margin-right:6px; }
.pr-demo-count span { display:block; margin-top:6px; font-size:12px; }
.pr-demo-table { width:100%; border-collapse:collapse; font-size:14px; color:var(--pf-text); }
.pr-demo-table :where(th,td) { padding:10px 6px; text-align:left; border-bottom:1px solid var(--pf-line); }
.pr-demo-table th { color:var(--pf-muted); font-weight:500; font-size:12px; }
.pr-demo-table td:not(:first-child),.pr-demo-table th:not(:first-child) { text-align:right; font-variant-numeric:tabular-nums; }
.pr-demo-flow { display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none; }
.pr-demo-flow li { padding:8px 12px; border:1px solid var(--pf-line); border-radius:8px; background:var(--pf-surface); font-size:13px; }
.pr-practice-example { margin:0 0 36px; padding:28px; background:var(--pf-surface); border:1px solid var(--pf-line); border-radius:14px; scroll-margin-top:90px; }
.pr-practice-example header h2 { font-size:28px; max-width:none; margin:0 0 16px; }
.pr-practice-example header>p:not(.pr-demo-label) { max-width:76ch; color:var(--pf-muted); font-size:15px; line-height:1.75; }
.pr-practice-grid { display:grid; grid-template-columns:1.15fr 1fr; gap:28px; margin-top:24px; }
.pr-practice-output { background:var(--pf-surface-soft); border-radius:12px; padding:22px; }
.pr-practice-output h3 { margin:0 0 18px; font-size:20px; }
.pr-practice-output ul { padding-left:20px; font-size:14px; line-height:1.75; color:var(--pf-muted); }
.pr-practice-example fieldset { min-width:0; margin:0; padding:0; border:0; }
.pr-practice-example legend { margin:0 0 18px; font-weight:700; }
.pr-practice-example label { display:grid; gap:7px; color:var(--pf-muted); font-size:13px; }
.pr-practice-example :where(input,select) { width:100%; min-width:0; min-height:44px; padding:10px; color:var(--pf-text); background:var(--pf-surface); border:1px solid var(--pf-line); border-radius:8px; font-size:15px; }
.pr-demo-order-row,.pr-demo-number-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:18px; }
.pr-demo-order-row>strong { grid-column:1/-1; font-size:14px; }
.pr-practice-example details { margin-top:18px; color:var(--pf-muted); font-size:14px; line-height:1.7; }
.pr-practice-example summary { min-height:44px; cursor:pointer; color:var(--pf-accent); font-weight:650; }
.pr-demo-actions { display:flex; flex-wrap:wrap; gap:10px; }
.pr-demo-actions button { min-height:44px; padding:10px 16px; border:1px solid var(--pf-accent); border-radius:8px; background:var(--pf-accent); color:white; font-size:14px; cursor:pointer; }
.pr-demo-actions button[data-practice-reset] { background:var(--pf-surface); color:var(--pf-accent); border-color:var(--pf-line); }
.pr-demo-actions button:disabled { opacity:.55; cursor:not-allowed; }
.pr-practice-example [role=status] { font-size:14px; color:#a72b34; }
.dashboard-translation { display:flex; align-items:center; gap:8px; margin-top:6px; color:var(--pf-muted); }
.dashboard-translation button { min-height:36px; padding:4px 8px; border:1px solid var(--pf-line); border-radius:6px; background:var(--pf-surface); color:var(--pf-accent); font-size:12px; cursor:pointer; }
body.pf-product-suite .pf-header .pf-app-download { display:none; }
body.pf-product-suite .pf-product-heading { margin-bottom: 30px; }
body.pf-product-suite .pf-product-heading h2 { max-width: 19ch; font-size: clamp(32px, 3.5vw, 44px); }
body.pf-product-suite .pf-product-path-card,
body.pf-product-suite .pf-product-fde-card,
body.pf-product-suite .pf-product-tool-card,
body.pf-product-suite .pf-product-resource-card { border-radius: 14px; border-color: var(--pf-line); box-shadow: 0 10px 30px rgb(20 33 61 / .05); }
body.pf-product-suite .pf-product-path-card.is-primary { border-color: rgb(36 87 235 / .45); box-shadow: 8px 8px 0 rgb(129 164 255 / .18); }
body.pf-product-suite .pf-product-resource-preview { min-width: 0; padding: 14px; background: linear-gradient(155deg, #eaf1ff, #dce8fb); }
body.pf-product-suite .pf-product-resource-preview.is-empty { background: var(--pf-surface-soft); }
body.pf-product-suite .pf-product-resource-preview .pf-product-practice-preview { min-height: 160px; }
body.pf-product-suite .pf-product-resource-copy { padding: 22px; }
body.pf-product-suite .pf-product-resource-actions { gap: 10px; }
body.pf-product-suite .pf-product-tool-grid { align-items:start; grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr); }

.pf-product-news-list { display: grid; gap: 0; margin: 18px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--pf-line); }
.pf-product-news-list li { min-width: 0; padding: 12px 0; border-bottom: 1px solid var(--pf-line); }
.pf-product-news-list a { display: block; color: var(--pf-text); font-size: 14px; font-weight: 700; line-height: 1.45; text-decoration: none; overflow-wrap: anywhere; }
.pf-product-news-list a:hover { color: var(--pf-accent); }
.pf-product-news-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 5px; color: var(--pf-muted); font-size: 12px; }
.pf-product-news-meta time { font-variant-numeric: tabular-nums; }
.pf-product-tool-periods { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 16px; color: var(--pf-muted); font-size: 13px; }
.pf-product-tool-periods a { min-height: 44px; display: inline-flex; align-items: center; padding: 8px 10px; color: var(--pf-accent); border: 1px solid var(--pf-line); border-radius: 10px; text-decoration: none; }

.pf-product-project { margin-top: 22px; padding: 18px; border: 1px solid var(--pf-line); border-radius: 14px; background: var(--pf-surface-soft); }
.pf-product-project h3 { margin: 0; color: var(--pf-text); font-size: 20px; line-height: 1.35; }
.pf-product-project .pf-product-facts { margin-top: 14px; }
.pf-product-project .pf-product-link { margin-top: 14px; }

body.pf-product-suite :where(a, button, input, select, textarea, summary):focus-visible { outline: 3px solid rgb(36 87 235 / .35); outline-offset: 3px; }
body.pf-product-suite :where(a, button, input, select, textarea, summary) { touch-action: manipulation; }
@media (prefers-reduced-motion: reduce) {
  body.pf-product-suite :where(*, *::before, *::after) { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}
@media (max-width: 900px) {
  body.pf-product-suite .pf-nav { background:var(--pf-bg); }
  body.pf-product-suite .pf-nav a { min-height:48px; font-size:18px; padding:12px 10px; }
  body.pf-product-suite .pf-product-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(300px, .8fr); gap: 28px; }
  .pf-product-hero-authored { max-width: 100%; }
}
@media (max-width: 760px) {
  .pr-practice-grid { grid-template-columns:minmax(0,1fr); }
  .pr-practice-example { padding:18px; }
  .pr-demo-metrics dd { font-size:24px; }
  .pr-demo-number-grid { grid-template-columns:minmax(0,1fr); }
  body.pf-product-suite .pf-product-shell,
  body.pf-product-suite .gk-shell { width: min(100% - 32px, 620px); }
  body.pf-product-suite .pf-product-hero { min-height: 0; padding-block: 98px 34px; }
  body.pf-product-suite .pf-product-hero-grid,
  body.pf-product-suite .pf-product-hero.is-compact .pf-product-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  body.pf-product-suite .pf-product-hero h1 { max-width: 16ch; font-size: clamp(36px, 10vw, 48px); }
  .pf-product-hero-authored { max-width: 100%; margin-left: 0; }
  body.pf-product-suite .pf-product-heading { display: block; }
  body.pf-product-suite .pf-product-heading h2 { max-width: 18ch; }
  body.pf-product-suite .pf-product-section-lead { margin-top: 16px; }
  body.pf-product-suite .pf-product-resource-grid,
  body.pf-product-suite .pf-product-path-grid,
  body.pf-product-suite .pf-product-tool-grid { grid-template-columns: minmax(0, 1fr); }
  body.pf-product-suite .pf-product-resource-card { grid-template-columns: minmax(0, 1fr); }
  body.pf-product-suite .pf-product-resource-preview { min-height: 0; }
  body.pf-product-suite .pf-product-resource-preview .pf-product-practice-preview { min-height: 0; }
  body.pf-product-suite .pf-product-actions,
  body.pf-product-suite .pf-product-resource-actions { align-items: stretch; flex-direction: column; }
  body.pf-product-suite .pf-product-actions > *,
  body.pf-product-suite .pf-product-resource-actions > * { width: 100%; }
  body.pf-product-suite .pf-nav { max-width: 100%; }
  body.pf-product-suite .pf-product-tool-grid { grid-template-columns:minmax(0,1fr); }
}
@media (max-width: 390px) {
  body.pf-product-suite .pf-product-shell,
  body.pf-product-suite .gk-shell { width: calc(100% - 24px); }
  .pf-product-hero-authored { max-width: 100%; }
  .pf-product-news-meta { display: block; }
  .pf-product-news-meta time { display: block; margin-top: 4px; }
}