.product-landing { --product-accent: var(--motion); }
.product-landing--ergothrive { --product-accent: var(--ergo); }
.product-landing--hfstudio { --product-accent: #0b6f78; }
[data-theme="dark"] .product-landing--hfstudio { --product-accent: #69c6d1; }
.product-hero {
  overflow: hidden;
  padding: clamp(58px, 7vw, 96px) 0 0;
  border-bottom: 1px solid var(--line);
  background: radial-gradient(circle at 82% 8%, color-mix(in srgb, var(--product-accent) 12%, transparent), transparent 29%), var(--bg);
}
.product-hero__grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(520px, 1.18fr); gap: clamp(44px, 6vw, 88px); align-items: center; }
.product-identity { display: flex; align-items: center; gap: 12px; margin-bottom: 34px; }
.product-identity > span { color: var(--ink-strong); font-size: 17px; font-weight: 720; letter-spacing: -.02em; }
.product-identity em, .validation-status { display: inline-flex; padding: 5px 9px; border: 1px solid color-mix(in srgb, var(--product-accent) 55%, var(--line)); color: var(--ink-strong); font-size: 10px; font-style: normal; font-weight: 700; letter-spacing: .08em; line-height: 1.2; text-transform: uppercase; }
.product-hero h1 { max-width: 680px; margin-bottom: 24px; font-size: clamp(2.65rem, 4.6vw, 4.85rem); }
.product-hero__lede { max-width: 650px; color: var(--ink); font-size: clamp(1.08rem, 1.5vw, 1.28rem); }
.product-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 30px 0; }
.product-evidence { display: grid; max-width: 650px; grid-template-columns: auto 1fr; gap: 14px; align-items: start; margin: 0; font-size: 13px; }
.product-evidence > span { padding-right: 14px; border-right: 1px solid var(--product-accent); color: var(--ink-strong); font-family: var(--font-technical); font-size: 8px; letter-spacing: .12em; text-transform: uppercase; }
.product-proof { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: clamp(50px, 7vw, 82px); border-top: 1px solid var(--line); }
.product-proof span { padding: 20px 26px; border-right: 1px solid var(--line); color: var(--ink-strong); font-size: 12px; font-weight: 650; text-align: center; }
.product-proof span:last-child { border-right: 0; }
.product-subnav { position: sticky; top: 88px; z-index: 50; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(16px); }
.product-subnav .shell { display: flex; overflow-x: auto; scrollbar-width: none; }
.product-subnav .shell::-webkit-scrollbar { display: none; }
.product-subnav a { display: inline-flex; min-height: 44px; flex: 0 0 auto; align-items: center; padding: 12px 18px; color: var(--muted); font-size: 11px; font-weight: 650; }
.product-subnav a:first-child { padding-left: 0; }
.product-subnav a:hover { color: var(--ink-strong); }
.product-overview-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.product-overview-grid article { min-height: 310px; padding: 30px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.product-overview-grid article:first-child { border-left: 1px solid var(--line); }
.product-overview-grid article > span { color: var(--product-accent); font-family: var(--font-technical); font-size: 9px; }
.product-overview-grid h3 { margin: 90px 0 16px; font-size: clamp(1.4rem, 2vw, 1.9rem); }
.product-overview-grid p { margin: 0; }
.product-workflow { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.product-workflow li { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 24px; padding: 26px 0; border-bottom: 1px solid var(--line); }
.product-workflow li > span { color: var(--product-accent); font-family: var(--font-technical); font-size: 9px; }
.product-workflow h3 { margin: 0 0 7px; font-size: 1.25rem; }
.product-workflow p { max-width: 760px; margin: 0; }
.product-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.product-feature-grid article { min-height: 260px; padding: 30px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.product-feature-grid article > span { display: block; width: 36px; height: 3px; margin-bottom: 56px; background: var(--product-accent); }
.product-feature-grid p { margin: 0; }
.product-screens .section-heading { max-width: 760px; }
.product-shot-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.product-shot-card { margin: 0; }
.product-shot-card--wide { grid-column: 1 / -1; }
.product-shot-card figcaption { display: grid; grid-template-columns: 34px 1fr; gap: 14px; padding: 18px 0 4px; }
.product-shot-card figcaption > span { color: var(--product-accent); font-family: var(--font-technical); font-size: 8px; }
.product-shot-card figcaption b { display: block; margin-bottom: 3px; color: #fff; }
.product-shot-card figcaption p { margin: 0; font-size: 13px; }
.product-shot { position: relative; overflow: hidden; border: 1px solid #315976; background: #061729; }
.product-shot--image { aspect-ratio: 16 / 9; }
.product-shot--image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.product-shot--measure.product-shot--image img { width: 150%; max-width: none; object-position: 24% center; }
.product-shot--graph.product-shot--image img { width: 145%; max-width: none; transform: translateX(-31%); }
.product-shot--ui { min-height: 430px; color: #e7f1f5; }
.product-shot-card:not(.product-shot-card--wide) .product-shot--ui { min-height: 330px; }
.ui-top { display: grid; grid-template-columns: 1fr auto 9px; gap: 15px; align-items: center; height: 48px; padding: 0 18px; border-bottom: 1px solid #29465e; }
.ui-top b { font-size: 13px; }
.ui-top span { color: #8fa9b7; font-family: var(--font-technical); font-size: 7px; letter-spacing: .12em; }
.ui-top i { width: 8px; height: 8px; border-radius: 50%; background: var(--product-accent); }
.ui-body { display: grid; min-height: inherit; grid-template-columns: 52px 1fr; }
.ui-rail { display: grid; align-content: start; gap: 17px; padding: 22px 16px; border-right: 1px solid #29465e; }
.ui-rail span { width: 18px; height: 2px; background: #577489; }
.ui-rail span:first-child { background: var(--product-accent); }
.ui-canvas { padding: clamp(24px, 4vw, 46px); background-image: linear-gradient(rgba(47,91,122,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(47,91,122,.14) 1px,transparent 1px); background-size: 32px 32px; }
.ui-canvas > small { color: var(--product-accent); font-family: var(--font-technical); font-size: 7px; letter-spacing: .11em; }
.ui-canvas h3 { margin: 8px 0 28px; color: #fff; font-size: clamp(1.25rem, 2.2vw, 1.9rem); }
.ui-workspace { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(180px, .7fr); gap: 18px; }
.ui-media { position: relative; min-height: 220px; border: 1px solid #3b5f79; background: linear-gradient(145deg,#0d3048,#061522); }
.ui-pose { position: absolute; left: 48%; top: 21%; width: 1px; height: 135px; transform: rotate(-13deg); background: #9fc3d4; }
.ui-pose::before,.ui-pose::after,.ui-pose i { position:absolute;width:9px;height:9px;border:2px solid var(--product-accent);border-radius:50%;background:#071827;content:""; }
.ui-pose::before{left:-4px;top:-8px}.ui-pose::after{left:-4px;bottom:-5px}.ui-pose i:nth-child(1){left:-42px;top:42px}.ui-pose i:nth-child(2){left:34px;top:54px}.ui-pose i:nth-child(3){left:-35px;top:112px}.ui-pose i:nth-child(4){left:30px;top:130px}.ui-pose i:nth-child(5){left:-4px;top:62px}
.ui-fields { display:grid;gap:13px;align-content:start;padding:18px;border:1px solid #3b5f79;background:#081d2e }
.ui-fields > span:not(.ui-button){display:block;height:26px;border:1px solid #35536a;background:#0c2639}.ui-fields .ui-button{display:flex;min-height:34px;align-items:center;justify-content:center;border:0;background:var(--product-accent);color:#fff;font-size:10px;font-weight:700}
.ui-records { display: grid; gap: 10px; }
.ui-records article { display: grid; grid-template-columns: 38px 1fr auto; gap: 12px; align-items: center; padding: 17px; border: 1px solid #385a72; background: rgba(5,23,38,.88); }
.ui-records small{color:#7894a5}.ui-records b{color:#fff}.ui-records span{color:var(--product-accent);font-size:10px;text-transform:uppercase}
.ui-review { display: grid; grid-template-columns: 1fr .8fr; gap: 24px; padding: 24px; border: 1px solid #385a72; background: rgba(5,23,38,.88); }
.ui-review span{color:var(--product-accent);font-family:var(--font-technical);font-size:7px}.ui-review strong{display:block;margin:12px 0;color:#fff;font-size:1.45rem}.ui-review p{margin:0;color:#9fb7c4;font-size:12px}
.ui-chart{display:flex;align-items:end;gap:9px;border-bottom:1px solid #527187}.ui-chart i{flex:1;background:var(--product-accent);opacity:.72}.ui-chart i:nth-child(1){height:30%}.ui-chart i:nth-child(2){height:56%}.ui-chart i:nth-child(3){height:42%}.ui-chart i:nth-child(4){height:86%}.ui-chart i:nth-child(5){height:68%}
.product-output-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.product-output-grid article { padding: 28px; border: 1px solid var(--line); background: var(--surface); }
.product-output-grid article > span{color:var(--product-accent);font-family:var(--font-technical);font-size:8px;letter-spacing:.12em}.output-paper{display:grid;gap:8px;height:150px;margin:24px 0 28px;padding:24px;border:1px solid var(--line);background:var(--bg)}.output-paper i{display:block;height:5px;background:var(--line)}.output-paper i:nth-child(2){width:75%;background:var(--product-accent)}.output-paper i:nth-child(3){width:88%}.output-paper i:nth-child(4){width:62%}.product-output-grid p{margin:0}
.format-table { border-top: 1px solid var(--line); }
.format-row { display: grid; grid-template-columns: .65fr .9fr 1.45fr; gap: 24px; padding: 20px 18px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); }
.format-row > *{margin:0}.format-row p{font-size:14px}.format-head{color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:var(--surface)}
.product-assurance-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.product-assurance-grid > article { padding: clamp(30px, 4vw, 50px); border: 1px solid var(--line); }
.product-assurance-grid h2{font-size:clamp(2rem,3vw,3.15rem)}.product-assurance-grid ul,.access-grid ul{display:grid;gap:12px;margin:28px 0;padding-left:20px;color:var(--muted)}.product-assurance-grid li::marker,.access-grid li::marker{color:var(--product-accent)}
.validation-card{border-top:4px solid var(--product-accent)!important;background:var(--surface)}.validation-card .validation-status{margin-bottom:28px}
.access-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #315976; border-left: 1px solid #315976; }
.access-grid--2{grid-template-columns:repeat(2,1fr)}.access-grid article{display:flex;min-height:430px;flex-direction:column;padding:clamp(28px,3vw,40px);border-right:1px solid #315976;border-bottom:1px solid #315976}.access-grid h3{color:#fff;font-size:clamp(2rem,3vw,3rem)}.access-grid .button{align-self:flex-start;margin-top:auto}
.faq-layout { display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(50px,8vw,120px); align-items:start; }
.faq-layout .section-heading{position:sticky;top:170px;margin:0}.product-faq{border-top:1px solid var(--line)}.product-faq details{border-bottom:1px solid var(--line)}.product-faq summary{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;padding:24px 0;color:var(--ink-strong);font-size:1.08rem;font-weight:650;cursor:pointer;list-style:none}.product-faq summary::-webkit-details-marker{display:none}.product-faq summary span{font-size:1.5rem;font-weight:400;transition:transform .2s ease}.product-faq details[open] summary span{transform:rotate(45deg)}.product-faq details p{max-width:720px;padding:0 42px 24px 0}
.documentation-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.documentation-grid article{min-height:230px;padding:30px;border:1px solid var(--line);background:var(--surface)}.documentation-grid p{margin-bottom:24px}
.product-contact{padding:clamp(72px,8vw,110px) 0;background:#031426;color:#fff}.product-contact .shell{display:grid;grid-template-columns:1.25fr .75fr;gap:60px;align-items:end}.product-contact h2{max-width:850px;color:#fff;font-size:clamp(2.2rem,4vw,4rem)}.product-contact p{max-width:760px;color:#adc2ce}.product-contact .shell>div:last-child{display:flex;flex-direction:column;gap:22px;align-items:flex-start}
@media (max-width: 980px) {
  .product-hero__grid{grid-template-columns:1fr}.product-hero__copy{max-width:760px}.product-overview-grid,.product-feature-grid,.product-output-grid,.documentation-grid{grid-template-columns:repeat(2,1fr)}.product-overview-grid article:nth-child(3){border-left:1px solid var(--line)}.product-assurance-grid,.faq-layout{grid-template-columns:1fr}.faq-layout .section-heading{position:static}.access-grid{grid-template-columns:1fr}.access-grid article{min-height:0}.product-contact .shell{grid-template-columns:1fr}
}
@media (max-width: 700px) {
  .product-hero__grid{gap:42px}.product-hero h1{font-size:clamp(2.35rem,11vw,3.35rem)}.product-hero__actions,.product-hero__actions .button{width:100%}.product-evidence{grid-template-columns:1fr}.product-evidence>span{padding:0;border:0}.product-proof{grid-template-columns:1fr}.product-proof span{border-right:0;border-bottom:1px solid var(--line)}.product-subnav{top:72px}.product-overview-grid,.product-feature-grid,.product-shot-grid,.product-output-grid,.documentation-grid{grid-template-columns:1fr}.product-overview-grid article,.product-overview-grid article:nth-child(3){min-height:0;border-left:1px solid var(--line)}.product-overview-grid h3{margin-top:42px}.product-shot-card--wide{grid-column:auto}.product-shot--ui{min-height:360px}.ui-workspace,.ui-review{grid-template-columns:1fr}.ui-media{min-height:150px}.format-head{display:none}.format-row{grid-template-columns:1fr;gap:7px;padding:22px}.product-contact .button{width:100%}
}
@media (prefers-reduced-motion: reduce) { .product-faq summary span { transition: none; } }


/* Final product-page polish */
.product-hero { padding-top: clamp(54px, 6vw, 82px); }
.product-hero__grid {
  grid-template-columns: minmax(0, .9fr) minmax(500px, 1.1fr);
  gap: clamp(42px, 5vw, 72px);
}
.product-identity { margin-bottom: 26px; }
.product-hero h1 {
  max-width: 620px;
  margin-bottom: 20px;
  font-size: clamp(2.7rem, 4vw, 4.15rem);
  letter-spacing: -.038em;
  line-height: 1.035;
}
.product-hero__lede { font-size: clamp(1.05rem, 1.35vw, 1.2rem); line-height: 1.58; }
.product-hero__actions { margin-block: 26px; }
.product-evidence > span { font-size: 9px; }
.product-proof { margin-top: clamp(44px, 5vw, 66px); }
.product-proof span { padding-block: 18px; }
.product-subnav { top: 74px; }
.product-subnav a {
  position: relative;
  padding-inline: 16px;
  transition: color var(--transition-fast);
}
.product-subnav a::after {
  position: absolute;
  right: 16px;
  bottom: 7px;
  left: 16px;
  height: 1px;
  background: var(--product-accent);
  content: "";
  transform: scaleX(0);
  transition: transform var(--transition-fast);
}
.product-subnav a:hover::after { transform: scaleX(1); }

.product-hero > .product-hero__grid > .product-shot {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.product-shot { border-radius: var(--radius-md); }
.product-shot--image img { transition: transform 560ms var(--ease-out); }
.product-shot-card:hover .product-shot--image img { transform: scale(1.012); }

.product-overview-grid article {
  min-height: 270px;
  padding: 28px;
  transition: background-color var(--transition-fast);
}
.product-overview-grid article:hover { background: var(--surface); }
.product-overview-grid h3 { margin-top: 60px; }
.product-feature-grid article { min-height: 235px; padding: 28px; }
.product-feature-grid article > span { margin-bottom: 42px; }
.product-workflow li { transition: background-color var(--transition-fast), padding-inline var(--transition-fast); }
.product-workflow li:hover {
  padding-inline: 14px;
  background: color-mix(in srgb, var(--surface) 62%, transparent);
}

.product-output-grid article,
.documentation-grid article,
.product-assurance-grid > article {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}
.product-output-grid article,
.documentation-grid article {
  transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}
.product-output-grid article:hover,
.documentation-grid article:hover {
  border-color: color-mix(in srgb, var(--product-accent) 46%, var(--line));
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}
.access-grid article { min-height: 390px; }
.faq-layout .section-heading { top: 146px; }
.product-faq details[open] summary { color: var(--product-accent); }
.product-contact h2 { font-size: clamp(2.2rem, 3.5vw, 3.5rem); }

@media (max-width: 980px) {
  .product-hero__grid { grid-template-columns: 1fr; gap: 38px; }
  .product-hero__copy { max-width: 720px; }
  .product-hero > .product-hero__grid > .product-shot { box-shadow: var(--shadow-sm); }
}

@media (max-width: 700px) {
  .product-hero { padding-top: 48px; }
  .product-identity { margin-bottom: 24px; }
  .product-hero h1 { font-size: clamp(2.25rem, 10.3vw, 3rem); }
  .product-hero__lede { font-size: 1rem; }
  .product-subnav { top: 70px; }
  .product-overview-grid h3 { margin-top: 38px; }
  .product-workflow li:hover { padding-inline: 0; background: transparent; }
  .product-output-grid article:hover,
  .documentation-grid article:hover { transform: none; }
  .product-shot-card:hover .product-shot--image img { transform: none; }
}

@media (hover: none) {
  .product-output-grid article:hover,
  .documentation-grid article:hover { transform: none; box-shadow: var(--shadow-xs); }
}