/* Shared page shell, ported from verified live model renderer 97926b3. */
/* Same Inter v20 latin-ext asset used by the live model website. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/part-assets/34b9c504cab7a73e37b746343a449132e56cf7b5481af2cb81dc74dcff25c956.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Same Inter v20 latin asset used by the live model website. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/part-assets/3100e775e8616cd2611beecfa23a4263d7037586789b43f035236a2e6fbd4c62.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Homepage-matched base: warm cream bg + the marketing site's exact 4-layer
   tan radial-gradient atmosphere (ported 1:1 from www.heavyparts.ai). */
body.breakdown-page.layout-workshop {
  background-color:#faf4ec; color:#3f3f46; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  background-image:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(218, 192, 158, 0.35) 0%, transparent 65%),
    radial-gradient(ellipse 90% 60% at 50% 100%, rgba(180, 150, 115, 0.18) 0%, transparent 70%),
    radial-gradient(ellipse 55% 45% at 18% 40%, rgba(228, 208, 178, 0.22) 0%, transparent 60%),
    radial-gradient(ellipse 55% 45% at 82% 60%, rgba(228, 208, 178, 0.22) 0%, transparent 60%);
  background-attachment: fixed;
}
/* iOS: fixed background attachment is janky/unsupported — same fallback the
   homepage uses. */
@supports (-webkit-touch-callout: none) {
  body {
    background-attachment: scroll !important;
  }
}

/* ===== "Flowing waves" ambient layer — ported 1:1 from the homepage .bgfx
   block (index.html). Markup lives in components/BgWaves.tsx. Paths are
   authored 2400 wide (2x a 1200 viewport); the SVG spans 200vw so one
   wavelength == one viewport and the -50% loop is seamless. ===== */
.bgfx .wave {
  position: absolute;
  left: 0;
  width: 200vw;
  height: 60vh;
  will-change: transform;
  backface-visibility: hidden;
}
.bgfx .wave svg {
  display: block;
  width: 100%;
  height: 100%;
}
.bgfx .wave-1 {
  top: 8vh;
  opacity: 0.9;
  animation:
    bgfx-flow-a 52s ease-in-out infinite,
    bgfx-bob-a 29s ease-in-out infinite;
}
.bgfx .wave-2 {
  top: 34vh;
  opacity: 0.85;
  animation:
    bgfx-flow-b 38s ease-in-out infinite,
    bgfx-bob-b 24s ease-in-out infinite;
}
.bgfx .wave-3 {
  top: 56vh;
  opacity: 0.8;
  animation:
    bgfx-flow-a 31s ease-in-out infinite,
    bgfx-bob-c 21s ease-in-out infinite;
}
@keyframes bgfx-flow-a {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}
@keyframes bgfx-flow-b {
  0% {
    transform: translate3d(-50%, 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes bgfx-bob-a {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 2.4vh;
  }
}
@keyframes bgfx-bob-b {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -2.8vh;
  }
}
@keyframes bgfx-bob-c {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 1.8vh;
  }
}
@media (prefers-reduced-motion: reduce) {
  .bgfx .wave {
    animation: none;
  }
}


.bgfx{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.site-frame{position:relative;z-index:10;display:flex;min-height:100vh;flex-direction:column}

body.breakdown-page.layout-workshop{font-family:Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:16px;line-height:1.5;min-height:100vh}
.breakdown-page .breakdown-main{width:100%;max-width:1152px;flex:1;margin:0 auto;padding:32px 16px}
.site-header .sign-in{line-height:20px}
.site-footer{background:transparent}
@media(min-width:640px){.breakdown-page .breakdown-main{padding-inline:24px}}