/* PLOTPDFPRO-WEB-REDESIGN-HOMEPAGE-001 / 002 / 003 / 004
   Single-screen conversion workspace. It deliberately consumes the existing design tokens and
   signature component; no framework, font, image, or animation dependency is introduced. */

.pp-header-auth,
.pp-header-auth form {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
}

.pp-header-auth button.pp-nav__link {
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.pp-home {
  position: relative;
  isolation: isolate;
  min-block-size: calc(100svh - 136px);
  padding: clamp(var(--space-4), 4vw, var(--space-6));
  overflow: hidden;
  background:
    radial-gradient(circle at 14% 18%, color-mix(in srgb, var(--accent-subtle) 58%, transparent), transparent 27rem),
    var(--surface-canvas);
}

.pp-home.pp-sheet > .pp-home-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  opacity: .22;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse at center, var(--text-primary) 18%, color-mix(in srgb, var(--text-primary) 88%, transparent) 70%, transparent 100%);
  mask-image: radial-gradient(ellipse at center, var(--text-primary) 18%, color-mix(in srgb, var(--text-primary) 88%, transparent) 70%, transparent 100%);
  transition: opacity var(--motion-slow) var(--ease-standard);
}

.pp-home-video__media {
  inline-size: 100%;
  block-size: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

:root[data-theme="dark"] .pp-home-video { opacity: .32; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pp-home-video { opacity: .32; }
}

.pp-home[data-ui-state="UPLOADING"] .pp-home-video,
.pp-home[data-ui-state="CONVERTING"] .pp-home-video { opacity: .27; }

:root[data-theme="dark"] .pp-home[data-ui-state="UPLOADING"] .pp-home-video,
:root[data-theme="dark"] .pp-home[data-ui-state="CONVERTING"] .pp-home-video { opacity: .36; }

.pp-home.pp-sheet > .pp-home-blueprint {
  position: absolute;
  inset: -4% -3%;
  z-index: 0;
  overflow: hidden;
  opacity: 0.72;
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--accent-default) 10%, transparent));
  transition: opacity var(--motion-slow) var(--ease-standard), filter var(--motion-slow) var(--ease-standard);
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse at center, var(--text-primary) 20%, color-mix(in srgb, var(--text-primary) 92%, transparent) 66%, transparent 100%);
  mask-image: radial-gradient(ellipse at center, var(--text-primary) 20%, color-mix(in srgb, var(--text-primary) 92%, transparent) 66%, transparent 100%);
}

.pp-home[data-ui-state="UPLOADING"] .pp-home-blueprint,
.pp-home[data-ui-state="CONVERTING"] .pp-home-blueprint {
  opacity: 0.78;
  filter: drop-shadow(0 0 18px color-mix(in srgb, var(--accent-default) 14%, transparent));
}

.pp-home[data-ui-state="COMPLETED"] .pp-home-blueprint {
  opacity: 0.75;
}

.pp-home-blueprint__canvas {
  inline-size: 100%;
  block-size: 100%;
  display: block;
}

.pp-home-blueprint__plan {
  transform-origin: 700px 400px;
  animation: pp-home-blueprint-drift 36s var(--ease-standard) infinite alternate;
}

.pp-home-blueprint__grid,
.pp-home-blueprint__dimensions,
.pp-home-blueprint__walls,
.pp-home-blueprint__columns,
.pp-home-blueprint__windows,
.pp-home-blueprint__doors,
.pp-home-blueprint__fixtures,
.pp-home-blueprint__accent {
  fill: none;
  vector-effect: non-scaling-stroke;
}

.pp-home-blueprint__grid {
  stroke: color-mix(in srgb, var(--text-tertiary) 20%, transparent);
  stroke-width: 1;
  stroke-dasharray: 3 11;
}

.pp-home-blueprint__grid text,
.pp-home-blueprint__dimensions text,
.pp-home-blueprint__labels text {
  fill: color-mix(in srgb, var(--text-tertiary) 52%, transparent);
  stroke: none;
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: .12em;
  text-anchor: middle;
}

.pp-home-blueprint__dimensions {
  stroke: color-mix(in srgb, var(--signature-line) 42%, transparent);
  stroke-width: 1;
}

.pp-home-blueprint__dimensions path:nth-of-type(2),
.pp-home-blueprint__dimensions path:nth-of-type(4) {
  fill: color-mix(in srgb, var(--signature-line) 38%, transparent);
}

.pp-home-blueprint__walls {
  stroke: color-mix(in srgb, var(--signature-line-strong) 64%, transparent);
  stroke-width: 14;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

.pp-home-blueprint__columns {
  stroke: color-mix(in srgb, var(--signature-line-strong) 65%, transparent);
  stroke-width: 3;
  fill: color-mix(in srgb, var(--surface-sunken) 34%, transparent);
}

.pp-home-blueprint__windows {
  stroke: color-mix(in srgb, var(--signature-line-strong) 76%, transparent);
  stroke-width: 2;
}

.pp-home-blueprint__doors {
  stroke: color-mix(in srgb, var(--signature-line) 68%, transparent);
  stroke-width: 2;
}

.pp-home-blueprint__fixtures {
  stroke: color-mix(in srgb, var(--signature-line) 32%, transparent);
  stroke-width: 1.5;
}

.pp-home-blueprint__labels text { font-size: 11px; }

.pp-home-blueprint__accent {
  stroke: color-mix(in srgb, var(--accent-default) 72%, transparent);
  stroke-width: 2;
  fill: color-mix(in srgb, var(--accent-default) 56%, transparent);
  animation: pp-home-blueprint-accent 5.5s ease-in-out infinite;
}

.pp-home.pp-sheet > .pp-home__shell {
  position: relative;
  z-index: 1;
  inline-size: min(1180px, 100%);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(var(--space-4), 3vw, var(--space-6));
  align-items: start;
}

@media (prefers-reduced-motion: reduce) {
  .pp-home-blueprint {
    transition: none;
  }

  .pp-home-blueprint__plan,
  .pp-home-blueprint__accent {
    animation: none;
  }
}

/* One column, one centre axis. This was "minmax(0, 1fr) auto", with the AutoCAD card occupying the
   second column: every other element was centred inside column 1 only, so the whole composition sat
   left of the page centre by exactly the width of that card, and the hero never shared an axis with
   the action below it. The AutoCAD route now lives inside the primary capsule, so a single column is
   both correct and simpler. */
.pp-home__main {
  min-inline-size: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.pp-home__brand {
  grid-column: 1;
  grid-row: 1;
  margin-block-end: var(--space-4);
  text-align: center;
}

.pp-home__main > .pp-home__availability {
  grid-column: 1;
  grid-row: 2;
  margin-block-end: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--type-caption-size);
}

.pp-home__main > .pp-home-control {
  grid-column: 1;
  grid-row: 3;
}

/* Row 4 previously held the permanently-visible output-profile cards. The choice now lives inside
   the upload control, so the remaining rows close up rather than leaving a gap behind. */
.pp-home__main > .pp-home__statuses {
  grid-column: 1;
  grid-row: 4;
}

.pp-home__main > .pp-home__navigation-note {
  grid-column: 1;
  grid-row: 5;
}

.pp-home__main > .pp-home__info {
  grid-column: 1;
  grid-row: 6;
}

/* The two informational lines read as one group: tight internal spacing, shared centring. */
.pp-home__info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
}

.pp-home__info > .pp-home__micro { margin-block-start: 0; }

/* Revealed inside the upload interaction once the customer asks to convert. */
.pp-home__profile-sheet {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  inline-size: 100%;
  margin-block-start: var(--space-3);
  padding: var(--space-3);
  border: var(--hairline) solid var(--border-default);
  border-radius: var(--radius-medium, 10px);
  background-color: var(--surface-raised, var(--surface-default));
}

.pp-home__product {
  margin: 0;
  color: var(--text-primary);
  font-size: clamp(2.25rem, 5vw, 4.6rem);
  line-height: 0.98;
  font-weight: var(--weight-strong);
  letter-spacing: -0.055em;
}

.pp-home__product-name {
  display: block;
}

.pp-home__product-name > span {
  color: var(--accent-default);
}

.pp-home__slogan {
  display: block;
  max-inline-size: min(76rem, 100%);
  margin: var(--space-3) auto 0;
  color: var(--text-secondary);
  font-size: clamp(.9rem, 1.2vw, 1rem);
  line-height: 1.35;
  font-weight: var(--weight-regular);
  letter-spacing: normal;
  white-space: nowrap;
}

.pp-home__format {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-block-end: var(--space-3);
  padding: 6px 10px;
  border: var(--hairline) solid var(--accent-border);
  border-radius: var(--radius-full);
  background: var(--accent-subtle);
  color: var(--accent-default);
  font-size: var(--type-caption-size);
  line-height: 1;
  font-weight: var(--weight-strong);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/*
  One capsule holds the whole primary interaction: orb, file, actions, divider, AutoCAD route.

  Desktop uses an explicit five-column grid rather than flex-wrap. Wrapping was a heuristic: whether
  the AutoCAD route stayed on the row depended on how much intrinsic width the other segments happened
  to want, so it could silently drop to a second line on one machine and not another. A grid states
  the contract instead — orb, actions, divider and AutoCAD are all intrinsic, and only the file column
  is elastic, so the file information gives up space first and the AutoCAD route CANNOT be pushed
  below the convert action at any desktop width.
*/
.pp-home-control {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: var(--space-3);
  min-block-size: 76px;
  padding: 9px 10px 9px 9px;
  border: var(--hairline) solid var(--border-strong);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--surface-raised) 94%, transparent);
  box-shadow: var(--elevation-2);
  transition: border-color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard);
}

/* min-inline-size: 0 lets the elastic column actually shrink; without it the text content sets an
   automatic minimum and the row overflows instead of the file area yielding. */
.pp-home-control__file { min-inline-size: 0; }

/* Hairline between the PLT route and the AutoCAD route. Presentational only. */
.pp-home-control__divider {
  inline-size: var(--hairline);
  align-self: stretch;
  min-block-size: 44px;
  margin-inline: var(--space-1);
  background-color: var(--border-default);
}

/*
  Below the established 980px breakpoint the shell narrows to 800px and one row can no longer carry
  both routes without clipping, so the layout stacks deliberately: the capsule becomes a two-column
  grid for the PLT row and the AutoCAD route spans the full width beneath it. A vertical hairline
  would read as a stray line once stacked, so it becomes a horizontal rule.
*/
@media (max-width: 980px) {
  .pp-home-control {
    grid-template-columns: auto minmax(0, 1fr) auto;
    border-radius: var(--radius-2xl);
  }
  .pp-home-control__divider {
    grid-column: 1 / -1;
    inline-size: 100%;
    block-size: var(--hairline);
    min-block-size: 0;
    margin-inline: 0;
  }
  .pp-home-control__aside { grid-column: 1 / -1; }
  .pp-home-addin__trigger { justify-content: center; }
}

.pp-home-control:focus-within {
  border-color: var(--accent-default);
  box-shadow: var(--elevation-2), 0 0 0 3px var(--accent-subtle);
}

.pp-home-control.is-ready,
.pp-home-control.is-completed { border-color: var(--success-default); }
.pp-home-control.is-failed { border-color: var(--danger-default); }
.pp-home-control.is-dragging { border-color: var(--accent-default); }
.pp-home-control.is-disabled { opacity: .72; }

.pp-home-control__effect {
  position: relative;
  inline-size: 58px;
  block-size: 58px;
  background: transparent;
  border: 0;
  pointer-events: none;
}

.pp-solving-orb__canvas {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  pointer-events: none;
}

.pp-home-control__file {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-inline-size: 0;
}

.pp-home-control__file strong,
.pp-home-control__file span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pp-home-control__file strong { color: var(--text-primary); font-size: .95rem; }
.pp-home-control__file span { color: var(--text-tertiary); font-size: var(--type-caption-size); }

.pp-home-control__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.pp-home-control__picker {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 46px;
  padding-inline: var(--space-3);
  border-radius: var(--radius-full);
  color: var(--text-primary);
  font-weight: var(--weight-strong);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--motion-fast) var(--ease-standard);
}

.pp-home-control__picker:hover { background: var(--surface-sunken); }
.pp-home-control__picker.is-disabled { opacity: .48; cursor: not-allowed; }

.pp-home-control__input {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  opacity: 0;
  cursor: pointer;
}

.pp-home-control__input:disabled { cursor: not-allowed; }

.pp-home__convert,
.pp-home__download {
  min-block-size: 48px;
  padding-inline: var(--space-4);
  border: 0;
  border-radius: var(--radius-full);
  background: var(--accent-default);
  color: var(--text-on-accent);
  font: inherit;
  font-weight: var(--weight-strong);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard);
}

.pp-home__convert:hover:not(:disabled),
.pp-home__download:hover:not(:disabled) { background: var(--accent-hover); transform: translateY(-1px); }
.pp-home__convert:disabled { opacity: .42; cursor: not-allowed; }

.pp-home__download { background: var(--success-default); }
.pp-home__download:hover:not(:disabled) { background: var(--success-hover); }

.pp-home__statuses {
  display: grid;
  gap: var(--space-2);
  margin-block-start: var(--space-3);
}

.pp-home-status {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  min-block-size: 58px;
  padding: 10px var(--space-3);
  border: var(--hairline) solid var(--border-default);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-default) 96%, transparent);
  box-shadow: var(--elevation-1);
  animation: pp-home-reveal 260ms var(--ease-enter) both;
}

.pp-home-status__icon {
  display: grid;
  place-items: center;
  inline-size: 34px;
  block-size: 34px;
  border-radius: 50%;
  background: var(--surface-sunken);
  color: var(--text-secondary);
  font-weight: var(--weight-strong);
}

.pp-home-status.is-active .pp-home-status__icon { background: var(--accent-subtle); color: var(--accent-default); }
.pp-home-status.is-success { border-color: color-mix(in srgb, var(--success-default) 42%, var(--border-default)); }
.pp-home-status.is-success .pp-home-status__icon { background: var(--success-subtle); color: var(--success-default); }
.pp-home-status.is-failed { border-color: color-mix(in srgb, var(--danger-default) 42%, var(--border-default)); }
.pp-home-status.is-failed .pp-home-status__icon { color: var(--danger-default); }

.pp-home-status__copy { min-inline-size: 0; }
.pp-home-status__copy strong { display: block; color: var(--text-primary); }
.pp-home-status__copy span { display: block; margin-block-start: 2px; color: var(--text-tertiary); font-size: var(--type-caption-size); }
.pp-home-status__meta { color: var(--text-secondary); font-variant-numeric: tabular-nums; font-weight: var(--weight-strong); }

.pp-home-status__track {
  grid-column: 2 / -1;
  block-size: 3px;
  overflow: hidden;
  border-radius: var(--radius-full);
  background: var(--surface-sunken);
}

.pp-home-status__track span {
  display: block;
  block-size: 100%;
  border-radius: inherit;
  background: var(--accent-default);
  transition: inline-size 240ms var(--ease-standard);
}

.pp-home-status__actions { display: flex; align-items: center; gap: var(--space-2); }

.pp-home__quiet-action {
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  font: inherit;
}

.pp-home__tools {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-block-start: var(--space-4);
}

.pp-home__tools button {
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--type-caption-size);
  cursor: pointer;
}

.pp-home__tools button:hover { color: var(--accent-default); }

/* No grid placement of its own any more: it is a segment of the capsule that contains it, so it
   inherits that capsule's position instead of claiming a second column on the page. */
.pp-home-addin {
  inline-size: auto;
  margin-block-start: 0;
}

.pp-home-addin__trigger {
  inline-size: 100%;
  min-block-size: 76px;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 20px;
  gap: var(--space-3);
  align-items: center;
  padding: 11px 13px;
  border: var(--hairline) solid color-mix(in srgb, var(--accent-border) 72%, var(--border-default));
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--surface-raised) 92%, transparent);
  box-shadow: var(--elevation-1);
  color: var(--text-primary);
  font: inherit;
  text-align: start;
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: border-color var(--motion-fast) var(--ease-standard),
              background-color var(--motion-fast) var(--ease-standard),
              box-shadow var(--motion-fast) var(--ease-standard),
              transform var(--motion-fast) var(--ease-standard);
}

.pp-home-addin__trigger:hover {
  border-color: var(--accent-default);
  background: color-mix(in srgb, var(--surface-raised) 96%, var(--accent-subtle));
  box-shadow: var(--elevation-2);
  transform: translateY(-2px);
}

.pp-home-addin__trigger:focus-visible {
  outline: 2px solid var(--accent-default);
  outline-offset: 3px;
}

.pp-home-addin__mark {
  inline-size: 46px;
  block-size: 46px;
  display: grid;
  place-items: center;
  position: relative;
  border: var(--hairline) solid var(--accent-border);
  overflow: hidden;
  border-radius: 14px;
  background: var(--surface-raised);
  color: var(--accent-default);
}

.pp-home-addin__mark img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}

.pp-home-addin__copy {
  display: grid;
  gap: 3px;
}

.pp-home-addin__copy small {
  color: var(--accent-default);
  font-size: 10px;
  font-weight: var(--weight-strong);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.pp-home-addin__copy strong {
  color: var(--text-primary);
  font-size: .92rem;
  line-height: 1.2;
}

.pp-home-addin__chevron {
  display: grid;
  align-items: center;
  color: var(--text-tertiary);
  transform: rotate(-90deg);
}

.pp-home-addin-detail {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.pp-home-addin-detail section {
  position: relative;
  padding: var(--space-4);
  border: var(--hairline) solid var(--border-default);
  border-radius: var(--radius-xl);
  background: var(--surface-sunken);
}

.pp-home-addin-detail section > span {
  position: absolute;
  inset: var(--space-3) var(--space-3) auto auto;
  color: var(--accent-default);
  font-size: var(--type-caption-size);
  font-weight: var(--weight-strong);
}

.pp-home-addin-detail h3 {
  margin: 0 0 var(--space-3);
  color: var(--text-primary);
  font-size: 1rem;
}

.pp-home-addin-detail ol {
  gap: var(--space-2);
  padding-inline-start: var(--space-4);
  color: var(--text-secondary);
  font-size: .9rem;
}

.pp-home-addin-detail__note {
  margin: var(--space-4) 0 0;
  padding-inline-start: var(--space-3);
  border-inline-start: 2px solid var(--accent-default);
  font-size: var(--type-caption-size);
}

.pp-home-addin-detail__download {
  min-block-size: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-block-start: var(--space-3);
  padding: 8px 14px;
  border: var(--hairline) solid var(--accent-default);
  border-radius: var(--radius-full);
  background: var(--accent-default);
  color: var(--text-on-accent);
  font: inherit;
  font-size: .86rem;
  font-weight: var(--weight-strong);
  text-decoration: none;
}

.pp-home-addin-detail__download:disabled {
  border-color: var(--border-default);
  background: var(--surface-raised);
  color: var(--text-tertiary);
  cursor: not-allowed;
}

.pp-home-addin-detail__availability {
  display: block;
  margin-block-start: var(--space-2);
  color: var(--text-tertiary);
  font-size: var(--type-caption-size);
}

.pp-home__micro {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  color: var(--text-tertiary);
  font-size: var(--type-caption-size);
}

.pp-home__micro span + span::before { content: "·"; margin-inline-end: var(--space-4); }

.pp-home-demo {
  position: fixed;
  z-index: 35;
  inset: auto var(--space-3) var(--space-3) auto;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  border: var(--hairline) solid var(--border-default);
  border-radius: var(--radius-full);
  background: var(--surface-raised);
  box-shadow: var(--elevation-2);
}

.pp-home-demo > span { padding-inline: 8px; color: var(--text-tertiary); font-size: 11px; font-weight: var(--weight-strong); }
.pp-home-demo button { inline-size: 28px; block-size: 28px; border: 0; border-radius: 50%; background: transparent; color: var(--text-secondary); cursor: pointer; font-size: 11px; }
.pp-home-demo button:hover { background: var(--accent-subtle); color: var(--accent-default); }

.pp-home__navigation-note {
  margin: var(--space-2) 0 0;
  text-align: center;
  color: var(--danger-default);
  font-size: var(--type-caption-size);
}

/* Same-site chrome is visibly unavailable while work is active. The browser guard handles
   keyboard/programmatic navigation and reload/close; this rule also prevents an accidental pointer
   click before it ever becomes navigation. Modal information actions inside the homepage remain
   usable because they are buttons, not links. */
.pp-app:has(.pp-home[data-ui-state="UPLOADING"]) .pp-header a,
.pp-app:has(.pp-home[data-ui-state="UPLOADING"]) .pp-footer a,
.pp-app:has(.pp-home[data-ui-state="CONVERTING"]) .pp-header a,
.pp-app:has(.pp-home[data-ui-state="CONVERTING"]) .pp-footer a {
  pointer-events: none;
  opacity: .48;
}

.pp-home-dialog ol,
.pp-home-dialog ul { display: grid; gap: var(--space-3); margin: 0; padding-inline-start: var(--space-4); }
.pp-home-dialog p { color: var(--text-secondary); }

@keyframes pp-home-blueprint-drift {
  from { transform: translate3d(-7px, -4px, 0) scale(1.012); }
  to { transform: translate3d(9px, 6px, 0) scale(1.022); }
}

@keyframes pp-home-blueprint-accent {
  0%, 100% { opacity: .42; }
  50% { opacity: .88; }
}

@keyframes pp-home-reveal {
  from { opacity: 0; transform: translateY(-8px) scale(.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 980px) {
  .pp-home { overflow: visible; }
  .pp-home.pp-sheet > .pp-home__shell { grid-template-columns: 1fr; max-inline-size: 800px; }
  .pp-home__main { grid-template-columns: minmax(0, 1fr); }
  /* The AutoCAD route no longer has page-level placement; it is a segment of the capsule. */
  .pp-home__micro { margin-block-start: 0; }
  .pp-home__slogan { white-space: normal; }
}

@media (max-width: 700px) {
  .pp-home { min-block-size: 0; inline-size: 100%; max-inline-size: 100%; padding: var(--space-4) var(--space-3); overflow-x: clip; }
  .pp-home__brand { inline-size: 100%; }
  .pp-home__product { font-size: clamp(2rem, 9.5vw, 2.35rem); letter-spacing: -.04em; }
  .pp-home__product-name { white-space: nowrap; }
  .pp-home__slogan { padding-inline: var(--space-2); font-size: .94rem; white-space: normal; }
  .pp-home__format { max-inline-size: 100%; font-size: 11px; letter-spacing: .04em; }
  .pp-home-control { border-radius: var(--radius-2xl); padding: var(--space-2); }
  .pp-home-control__effect { inline-size: 48px; block-size: 48px; }
  .pp-home-control__actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr; inline-size: 100%; }
  .pp-home-control__picker,
  .pp-home__convert { inline-size: 100%; white-space: normal; }
  .pp-home-status { grid-template-columns: 30px minmax(0, 1fr); }
  .pp-home-status__meta,
  .pp-home-status__actions { grid-column: 2; justify-self: start; }
  .pp-home-status__track { grid-column: 2; inline-size: 100%; }
  .pp-home.pp-sheet > .pp-home-blueprint { inset-inline: -32%; opacity: .58; }
  .pp-home-addin { inline-size: 100%; }
  .pp-home-addin-detail { grid-template-columns: 1fr; }
  .pp-home__micro { display: none; }
  .pp-home-demo { position: static; justify-content: center; margin: var(--space-3) auto 0; max-inline-size: max-content; }
  .pp-header__inner { gap: var(--space-1); }
  .pp-brand { gap: 6px; font-size: .95rem; }
  .pp-brand__logo { inline-size: 44px; }
  .pp-nav .pp-theme-toggle { display: inline-flex; }
  .pp-nav .pp-language { min-width: 64px; padding-inline: 4px; }
  .pp-header-auth { gap: 0; }
  .pp-header-auth .pp-nav__link,
  .pp-header-auth .pp-button { min-block-size: 34px; padding-inline: 9px; font-size: .78rem; }
  .pp-home__tools { flex-direction: column; align-items: center; gap: var(--space-2); }
  .pp-home__tools > span[aria-hidden="true"] { display: none; }
}

@media (max-width: 430px) {
  .pp-brand__logo { inline-size: 40px; }
  .pp-brand__wordmark { display: none; }
}

/*
  A "(max-height: 760px) and (min-width: 981px)" block used to live here and it was the cause of the
  two-computer discrepancy. It re-sized the hero from a width-based clamp to a height-based one
  (6.5vh) and hid .pp-home__micro outright, so the same release rendered as two different designs
  depending only on viewport HEIGHT. A 1606x787 screen at 125% Windows scaling reports roughly
  1285x630 CSS pixels: 630 <= 760 and 1285 >= 981, so it matched, the hero shrank and half the
  information group vanished. A 1708x931 screen at 100% reports 931 and never matched.

  It is deliberately not replaced. Composition is a function of available WIDTH; a short desktop
  viewport should scroll, which costs a scroll wheel, not a layout. Keeping the information group
  visible also satisfies its hard rule: it stays below the primary action at every desktop size.
*/

@media (prefers-reduced-motion: reduce) {
  .pp-home-video { transition: none; }
  .pp-home-status { animation: none !important; }
  .pp-home__convert,
  .pp-home__download,
  .pp-home-addin__trigger { transition: none; }
}