/*
 * INPLUG product design system.
 * This file is loaded last and owns the public product surface.
 */
:root {
  --inplug-font: "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
  --inplug-space-1: 4px;
  --inplug-space-2: 8px;
  --inplug-space-3: 12px;
  --inplug-space-4: 16px;
  --inplug-space-5: 24px;
  --inplug-space-6: 32px;
  --inplug-space-7: 48px;
  --inplug-space-8: 72px;
  --inplug-radius-sm: 10px;
  --inplug-radius-md: 16px;
  --inplug-radius-lg: 24px;
  --inplug-grid: 1240px;
  --inplug-accent: #a3e82f;
  --inplug-ink: #0b1311;
  --inplug-muted: #65736f;
}

html,
body,
button,
input,
select,
textarea {
  font-family: var(--inplug-font);
}

.platform-page {
  --section-gap: var(--inplug-space-8);
  font-family: var(--inplug-font);
  overflow: clip;
}

.platform-page :where(h1, h2, h3, p) {
  overflow-wrap: normal;
}

.platform-page :where(.platform-nav, .site-main, .site-footer) {
  width: min(calc(100% - 48px), var(--inplug-grid));
  margin-inline: auto;
}

.platform-nav {
  min-height: 76px;
  padding-block: var(--inplug-space-3);
}

.site-main {
  display: grid;
  gap: 0;
}

.site-hero {
  min-height: auto;
  padding-block: clamp(56px, 7vw, 92px);
  grid-template-columns: minmax(0, 1.06fr) minmax(420px, .94fr);
  gap: clamp(36px, 6vw, 84px);
  align-items: center;
}

.site-hero-copy,
.product-preview,
.site-product-card,
.price-card {
  min-width: 0;
}

.site-hero h1 {
  max-width: 760px;
  font-size: clamp(48px, 4.75vw, 68px);
  line-height: .96;
  letter-spacing: -.055em;
  text-wrap: balance;
  word-break: normal;
  hyphens: none;
}

.site-lead {
  max-width: 640px;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.52;
}

.site-section {
  padding-block: clamp(64px, 8vw, 104px);
}

.section-heading {
  margin-bottom: var(--inplug-space-6);
}

.section-heading h2 {
  font-size: clamp(38px, 4.3vw, 64px);
  line-height: 1;
  letter-spacing: -.045em;
}

.site-product-grid,
.pricing-grid {
  gap: var(--inplug-space-5);
}

.site-product-card,
.price-card,
.preview-window,
.download-center-card {
  border-radius: var(--inplug-radius-lg);
}

.site-product-card,
.price-card {
  padding: clamp(26px, 3vw, 40px);
}

.site-product-card h3,
.price-card h3 {
  max-width: 100%;
  font-size: clamp(34px, 3.4vw, 54px);
  line-height: 1;
  letter-spacing: -.045em;
  word-break: normal;
  hyphens: none;
}

.price-card h3 {
  font-size: clamp(34px, 2.8vw, 40px);
}

.site-product-card > *,
.price-card > * {
  max-width: 100%;
}

.product-card-visual {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.price-card .primary-btn,
.price-card .ghost-btn,
.site-product-card .primary-btn,
.site-product-card .ghost-btn {
  width: 100%;
  max-width: 100%;
}

.preview-window {
  box-shadow: 0 28px 80px rgba(0, 0, 0, .16);
}

.product-preview {
  padding-right: 0;
  overflow: hidden;
}

.floating-result {
  right: 0 !important;
}

.operation-preview {
  display: grid;
  grid-template-columns: minmax(150px, .8fr) minmax(240px, 1.2fr);
  gap: var(--inplug-space-4);
  padding: var(--inplug-space-4);
  min-height: 330px;
  background:
    linear-gradient(135deg, rgba(163, 232, 47, .08), transparent 42%),
    var(--surface);
}

.operation-canvas {
  position: relative;
  min-height: 270px;
  border-radius: var(--inplug-radius-md);
  overflow: hidden;
  background:
    linear-gradient(rgba(101, 115, 111, .12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(101, 115, 111, .12) 1px, transparent 1px),
    var(--surface-strong);
  background-size: 24px 24px;
}

.sheet-outline {
  position: absolute;
  border: 2px solid var(--line-strong);
  border-radius: 5px;
}

.sheet-one {
  inset: 38px 32px 88px 24px;
}

.sheet-two {
  inset: 82px 18px 42px 48px;
  border-color: var(--inplug-accent);
}

.axis-line {
  position: absolute;
  z-index: 2;
  background: var(--inplug-accent);
  opacity: .85;
}

.axis-x {
  width: calc(100% - 38px);
  height: 1px;
  left: 19px;
  top: 50%;
}

.axis-y {
  height: calc(100% - 38px);
  width: 1px;
  top: 19px;
  left: 50%;
}

.alignment-node {
  position: absolute;
  z-index: 3;
  left: calc(50% - 7px);
  top: calc(50% - 7px);
  width: 14px;
  height: 14px;
  border: 3px solid var(--inplug-accent);
  border-radius: 50%;
  background: var(--surface-strong);
  box-shadow: 0 0 0 8px rgba(163, 232, 47, .13);
}

.operation-feed {
  display: grid;
  align-content: center;
  gap: var(--inplug-space-3);
}

.operation-step {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 24px;
  align-items: center;
  gap: var(--inplug-space-3);
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--inplug-radius-md);
  background: var(--surface-strong);
}

.operation-step b,
.operation-step small {
  display: block;
  min-width: 0;
}

.operation-step b {
  font-size: 13px;
}

.operation-step small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.operation-step > i {
  color: var(--inplug-accent);
  font-style: normal;
  font-weight: 800;
}

.tool-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--inplug-radius-sm);
  color: var(--inplug-ink);
  background: var(--inplug-accent);
}

.tool-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.operation-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--line);
  border-top-color: var(--inplug-accent);
  border-radius: 50%;
  animation: inplug-spin .9s linear infinite;
}

.floating-result {
  border-radius: var(--inplug-radius-md);
}

@keyframes inplug-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .operation-spinner {
    animation: none;
    border-color: var(--inplug-accent);
  }
}

@media (max-width: 980px) {
  .site-hero {
    grid-template-columns: 1fr;
  }

  .site-hero-copy {
    max-width: 780px;
  }

  .product-preview {
    width: 100%;
  }
}

@media (max-width: 680px) {
  .platform-page :where(.platform-nav, .site-main, .site-footer) {
    width: min(calc(100% - 28px), var(--inplug-grid));
  }

  .site-hero {
    padding-block: 44px 60px;
    gap: var(--inplug-space-6);
  }

  .site-hero h1 {
    font-size: clamp(38px, 11.5vw, 48px);
    line-height: .98;
  }

  .site-section {
    padding-block: 58px;
  }

  .operation-preview {
    grid-template-columns: 1fr;
  }

  .operation-canvas {
    min-height: 190px;
  }

  .site-product-card h3,
  .price-card h3 {
    font-size: clamp(32px, 10vw, 44px);
  }

  .price-card h3 {
    font-size: 34px;
  }
}