/* solooperator.dev — production build
   transcribed 1:1 from Figma page `final` (node 38:3, 1440×5497)
   strokes: Figma paints strokes INSIDE without affecting layout →
   reproduced with `outline + outline-offset:-2px` so Figma padding
   values can be used verbatim. */

@font-face {
  font-family: 'Space Grotesk';
  src: url('../fonts/SpaceGrotesk.woff2') format('woff2');
  font-weight: 300 700;
  font-display: block;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Italic.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: block;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/JetBrainsMono.woff2') format('woff2');
  font-weight: 100 800;
  font-display: block;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { background: #1c111b; }

.page {
  position: relative;
  width: 1440px;
  height: 5497px;
  margin: 0 auto;
  overflow: hidden;
  background: #1c111b; /* root frame 38:3 fill */
  font-synthesis: none;
}

.page a { color: inherit; text-decoration: none; }
.page img { display: block; }

/* ---- shared primitives ---- */
.abs { position: absolute; }
.stroke-ink { outline: 2px solid #2b2129; outline-offset: -2px; }
.stroke-raised { outline: 2px solid #433040; outline-offset: -2px; }
.sg { font-family: 'Space Grotesk', sans-serif; font-weight: 700; }
.mono { font-family: 'JetBrains Mono', monospace; font-weight: 400; }
.inter { font-family: 'Inter', sans-serif; font-weight: 400; }
/* figma rotated-node wrapper: bbox-sized flex centering, inner gets the transform */
.rotwrap { position: absolute; display: flex; align-items: center; justify-content: center; }
.rotwrap > * { flex: none; }

/* ================= hero (38:4) ================= */
.hero {
  position: absolute; left: 0; top: 0;
  width: 1440px; height: 628px;
  background: #241322;
}
.hero-word {
  position: absolute; left: 0; top: 485px;
  width: 1440px; height: 170px;
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  font-size: 186px; line-height: 0.85; letter-spacing: -7.44px;
  text-align: center; color: #f3ede9;
  text-shadow: 0px 10px 50px rgba(20, 13, 20, 0.45);
  word-break: break-word;
}
.terminal {
  position: absolute; left: 308.54px; top: 197.17px;
  width: 547.74px; height: 214.061px;
  background: #2e1e2c; overflow: hidden;
}
.term-titlebar {
  position: absolute; left: -1.54px; top: -2.17px;
  width: 434px; height: 25px;
  background: #433040; overflow: hidden;
}
.term-titlebar img { position: absolute; left: 12px; top: 8px; width: 217.057px; height: 8.657px; }
.term-body {
  position: absolute; left: -1.54px; top: 22.83px;
  width: 380px; height: 171px; overflow: hidden;
}
.term-body img { position: absolute; left: 36px; }
.tl1 { top: 26px;  width: 169px; height: 15px; }
.tl2 { top: 46px;  width: 163px; height: 12px; }
.tl3 { top: 62px;  width: 236px; height: 15px; }
.tl4 { top: 81px;  width: 272px; height: 15px; }
.tl5 { top: 100px; width: 257px; height: 15px; }
.tl6 { top: 120px; width: 257px; height: 14px; }
.filecard {
  position: absolute; left: 719.15px; top: 88.54px;
  width: 403.598px; height: 229.523px;
  background: #fdfbf7; overflow: hidden;
  box-shadow: 6px 6px 0px 0px rgba(0, 0, 0, 0.45);
}
.filecard-title { position: absolute; left: 18px; top: 16px; width: 364.413px; height: 11.557px; }
.filecard-body  { position: absolute; left: 18px; top: 39.41px; width: 220.262px; height: 120.293px; }
.sq { position: absolute; }
.hero-sq1 { left: 262px;    top: 282.19px; width: 17.297px; height: 17.297px; }
.hero-sq2 { left: 296.59px; top: 319.67px; width: 23.063px; height: 23.063px; }
.hero-sq3 { left: 273.53px; top: 371.56px; width: 11.531px; height: 11.531px; }
.hero-sq4 { left: 313.89px; top: 403.27px; width: 17.297px; height: 17.297px; }
.hero-tag {
  position: absolute; left: 310px; top: 142px;
  font-family: 'JetBrains Mono', monospace; font-size: 12px;
  line-height: 1.55; color: #f3ede9; white-space: nowrap;
  word-break: break-word;
}
.btn-buy {
  position: absolute; left: 879px; top: 363px;
  display: flex; align-items: flex-start;
  padding: 16px 30px;
  background: #c9b037; overflow: hidden;
}
.btn-buy img { width: 150.926px; height: 15.75px; }
.nav {
  position: absolute; left: 0; top: 1px;
  width: 1440px; height: 55px;
  background: #1c111b; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between;
  padding-left: 1010px; padding-right: 53px;
  font-family: 'JetBrains Mono', monospace; font-size: 13px;
  color: #c9a8bc; white-space: nowrap;
}

/* ================= 01-why (38:322) ================= */
.why {
  position: absolute; left: 0; top: 628px;
  width: 1440px; height: 484px;
  background: #f8f4ed;
}
.why-goldbar { position: absolute; left: 786px; top: 114px; width: 395px; height: 38px; background: #d8c45c; }
.why h2 {
  position: absolute; left: 160px; top: 110px; width: 1015px;
  font-size: 48px; line-height: 1.08; letter-spacing: -0.72px;
  color: #241323; word-break: break-word;
}
.why-p1 { position: absolute; left: 160px; top: 182px; width: 700px; font-size: 18px;   line-height: 1.55; color: #2b2129; word-break: break-word; }
.why-p2 { position: absolute; left: 160px; top: 258px; width: 700px; font-size: 15.5px; line-height: 1.55; color: #5a4f57; word-break: break-word; }
.why-p3 { position: absolute; left: 160px; top: 326px; width: 700px; font-size: 15.5px; line-height: 1.55; color: #5a4f57; word-break: break-word; }
.potato-wrap { left: 902px; top: 171px; width: 236.691px; height: 209.688px; }
.potato-rot { transform: rotate(-170.35deg) scaleY(-1); }
.potato-rot img { width: 210px; height: 177px; object-fit: cover; pointer-events: none; }

/* ================= 02-modes (38:328) ================= */
.modes {
  position: absolute; left: 0; top: 1112px;
  width: 1440px; height: 714.03px;
  background: #e5dae2;
}
.eyebrow {
  position: absolute; font-family: 'JetBrains Mono', monospace;
  font-size: 13px; letter-spacing: 1.04px; white-space: nowrap;
  word-break: break-word;
}
.modes .eyebrow { left: 160px; top: 110px; color: #7a5a74; }
.modes h2 {
  position: absolute; left: 160px; top: 151px;
  font-size: 48px; letter-spacing: -0.72px; color: #241323; white-space: nowrap;
}
.underline-wrap { left: 490px; top: 212px; width: 459.965px; height: 10.028px; }
.underline-rot { transform: rotate(1deg); width: 460px; height: 2px; position: relative; }
.underline-rot img { position: absolute; inset: -150% -0.65%; width: 101.3%; height: 400%; }
.mode-cards {
  position: absolute; left: 160px; right: 160px; top: 222px; height: 325px;
  display: flex; gap: 30px; align-items: flex-start; padding-top: 30px;
  overflow: hidden;
}
.mode-card {
  display: flex; flex-direction: column; gap: 12px; align-items: flex-start;
  padding: 30px 28px 34px; overflow: hidden;
  word-break: break-word;
}
.mode-card .m-label { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; letter-spacing: 0.92px; color: #7a5a74; white-space: nowrap; }
.mode-card h3 { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 21px; color: #241323; white-space: nowrap; }
.mode-card p  { font-family: 'Inter', sans-serif; font-size: 14px; line-height: 1.55; color: #5a4f57; width: 100%; }
.mode-1 { flex: 0 0 auto; width: calc((100% - 60px) / 3); background: #fdfbf7; }
.mode-2-wrap { flex: 0 0 auto; width: calc((100% - 60px) / 3); height: 284px; display: flex; align-items: center; justify-content: center; position: relative; }
.mode-2-rot { flex: none; transform: rotate(-0.14deg) skewX(-0.04deg); width: 100%; }
.mode-2 { background: #f8f4ed; height: 283.153px; width: 100%; }
.mode-3-wrap { flex: 0 0 auto; width: calc((100% - 60px) / 3); height: 283.511px; display: flex; align-items: center; justify-content: center; position: relative; }
.mode-3-rot { flex: none; transform: rotate(-0.06deg) skewX(-0.06deg); width: 100%; }
.mode-3 { background: #efe9e0; height: 283.153px; width: 100%; outline-style: dashed; }
.mode-3 .m-label { color: #8c8189; }
.free-v1 {
  position: absolute; left: 1029.78px; top: 558.94px;
  font-family: 'JetBrains Mono', monospace; font-weight: 500;
  font-size: 13px; color: #241323; white-space: nowrap; word-break: break-word;
}
.arrow-wrap { left: 1192px; top: 458px; width: 106.127px; height: 143.511px; }
.arrow-rot { transform: rotate(99.96deg); width: 130.818px; height: 84.774px; position: relative; }
.arrow-rot img { position: absolute; inset: -2.36% -7.41% -2.36% -1.53%; width: 108.94%; height: 104.72%; }
.circle-wrap { left: 1012px; top: 532px; width: 176.585px; height: 72.22px; }
.circle-rot { transform: rotate(-2.01deg) scaleY(-1); width: 174.368px; height: 66.132px; position: relative; }
.circle-rot img { position: absolute; inset: -3.02% -1.15%; width: 102.3%; height: 106.04%; }

/* ================= 03-universal (38:348) ================= */
.universal {
  position: absolute; left: 0; top: 1826.03px;
  width: 1440px; height: 709px;
  background: #1c111b;
  word-break: break-word;
}
.universal .eyebrow { left: 160px; top: 110px; color: #c9a8bc; }
.universal h2 {
  position: absolute; left: 160px; top: 147px;
  font-size: 48px; letter-spacing: -0.72px; color: #f3ede9; white-space: nowrap;
}
.universal .sub {
  position: absolute; left: 160px; top: 228px;
  font-size: 15.5px; color: #c9a8bc; white-space: nowrap;
}
.u-grid {
  position: absolute; left: 160px; right: 160px; top: 267px;
  display: flex; flex-direction: column; gap: 34px; align-items: flex-start;
  padding-top: 36px; overflow: hidden;
}
.u-row { display: flex; gap: 34px; align-items: flex-start; width: 100%; overflow: hidden; }
.u-card {
  flex: 1 0 0; min-width: 1px;
  background: #2e1e2c;
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
  padding: 26px 26px 28px; overflow: hidden;
}
.u-card .u-label { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #c9a8bc; white-space: nowrap; }
.u-card h3 { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 18px; color: #f3ede9; width: 100%; }
.u-card p  { font-family: 'Inter', sans-serif; font-size: 14px; line-height: 1.55; color: #c9a8bc; width: 100%; }

/* ================= 04-bundle (38:371) ================= */
.bundle {
  position: absolute; left: 0; top: 2535.03px;
  width: 1440px; height: 459px;
  background: #1c111b;
}
.bundle .eyebrow { left: 160px; top: 40px; color: #c9a8bc; }
.bundle h2 {
  position: absolute; left: 160px; top: 77px;
  font-size: 48px; letter-spacing: -0.72px; color: #f3ede9; white-space: nowrap;
  word-break: break-word;
}
.bundle h2 .gold { color: #d8c45c; }
.floppy-wrap { left: 978px; top: -51.03px; width: 420.927px; height: 420.927px; }
.floppy-rot { transform: rotate(18.96deg); }
.floppy-rot img { width: 331.27px; height: 331.27px; object-fit: cover; pointer-events: none; }
.zip-label-wrap { left: 1277.59px; top: 79.91px; width: 67.12px; height: 31.166px; }
.zip-label-rot { transform: rotate(18deg); }
.zip-label-rot p {
  font-family: 'JetBrains Mono', monospace; font-weight: 700;
  font-size: 4px; color: #241323; width: 67px; height: 11px;
  word-break: break-word;
}
.bundle-term {
  position: absolute; left: 160px; right: 160px; top: 158px;
  background: #2e1e2c; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start;
}
.bundle-term-head {
  background: #433040; width: 100%;
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 10px 16px; overflow: hidden;
  font-family: 'JetBrains Mono', monospace; font-size: 12px;
  word-break: break-word;
}
.bundle-term-head .cmd  { color: #c9a8bc; width: 216px; }
.bundle-term-head .done { color: #5f7d52; white-space: nowrap; }
.bundle-term-body {
  width: 100%;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 24px 26px 28px; overflow: hidden;
}
.bundle-tree {
  font-family: 'JetBrains Mono', monospace; font-size: 14px;
  line-height: 1.7; color: #f3ede9; white-space: pre;
  word-break: break-word;
}

/* ================= loose page-level nodes ================= */
.paper {
  position: absolute; left: -278px; top: 2943.37px;
  width: 1861px; height: 849px;
  transform: rotate(-6.4588deg); transform-origin: 0 0;
  object-fit: fill; pointer-events: none;
}
.email-copy {
  position: absolute; left: 200px; top: 3269px; width: 577px;
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
  white-space: nowrap; word-break: break-word;
}
.email-copy h3 { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 24px; color: #241323; }
.email-copy p  { font-family: 'Inter', sans-serif; font-size: 14px; color: #5a4f57; }
.email-form {
  position: absolute; left: 886px; top: 3280px;
  display: flex; gap: 10px; align-items: flex-start;
}
.email-input {
  width: 250px; height: 40px;
  background: #fdfbf7; border: none; overflow: hidden;
  padding: 14px 16px; display: flex; align-items: flex-start;
  font-family: 'JetBrains Mono', monospace; font-size: 14px; color: #8c8189;
}
.email-input::placeholder { color: #8c8189; opacity: 1; }
.email-send {
  background: #c9b037; border: none; cursor: pointer; overflow: hidden;
  padding: 14px 24px; display: flex; align-items: flex-start;
  font-family: 'JetBrains Mono', monospace; font-weight: 700;
  font-size: 14px; color: #2b2129; white-space: nowrap;
  box-shadow: 4px 4px 0px 0px #2b2129;
}
.uni-highlight { position: absolute; left: 689px; top: 1978px; width: 198px; height: 36px; background: rgba(201, 176, 55, 0.5); }

/* EmailOctopus host: rendered but off-screen so its script can initialise.
   reveal state (.eo-host-shown) used only as a fallback if proxy submit fails. */
#eo-host {
  position: absolute; left: 0; top: 3280px;
  width: 1px; height: 1px; overflow: hidden;
  opacity: 0; pointer-events: none;
  clip: rect(0 0 0 0); clip-path: inset(50%);
}
#eo-host.eo-host-shown {
  width: 626px; height: auto; overflow: visible;
  opacity: 1; pointer-events: auto;
  clip: auto; clip-path: none;
  left: 886px; z-index: 20;
}

/* zine success / status — hidden until JS reveals them; no static-render footprint */
.signup-status, .signup-success {
  position: absolute; left: 886px; top: 3330px;
  width: 380px; display: none;
  font-family: 'JetBrains Mono', monospace; font-size: 13px;
  line-height: 1.5; word-break: break-word; z-index: 20;
}
.signup-status  { color: #b04a4f; }
.signup-success { color: #241323; }
.signup-success.show, .signup-status.show { display: block; }
.email-form.sent { display: none; }
.pg-sq1 { left: 103px;    top: 2196px;    width: 17.297px; height: 17.297px; background: #cba9bc; }
.pg-sq2 { left: 140.59px; top: 2239.48px; width: 23.063px; height: 23.063px; background: #d8c45c; }
.pg-sq3 { left: 114.53px; top: 2285.37px; width: 11.531px; height: 11.531px; background: #cba9bc; }
.pg-sq4 { left: 154.89px; top: 2317.08px; width: 17.297px; height: 17.297px; background: #d8c45c; }

/* ================= 05-who (38:390) ================= */
.who {
  position: absolute; left: 0; top: 3433px;
  width: 1440px; height: 689px;
  background: #f8f4ed;
  display: flex; flex-direction: column; gap: 20px; align-items: flex-start;
  padding: 210px 160px 120px;
  word-break: break-word;
}
.who h2 {
  font-size: 48px; letter-spacing: -0.72px; color: #241323; white-space: nowrap;
}
.who-cards { display: flex; gap: 40px; align-items: flex-start; padding-top: 26px; width: 100%; overflow: hidden; }
.who-card {
  flex: 1 0 0; min-width: 1px;
  display: flex; flex-direction: column; gap: 14px; align-items: flex-start;
  padding: 30px 30px 34px; overflow: hidden;
}
.who-for { background: #e5dae2; }
.who-not { background: #efe9e0; box-shadow: 6px 6px 0px 0px rgba(43, 33, 41, 0.85); }
.who-card .w-label {
  font-family: 'JetBrains Mono', monospace; font-weight: 700;
  font-size: 14px; letter-spacing: 0.84px; color: #241323; white-space: nowrap;
}
.who-card p {
  font-family: 'Inter', sans-serif; font-size: 14.5px; line-height: 1.5;
  color: #5a4f57; width: 100%; white-space: pre-wrap;
}
.who-card p .plus  { color: #c9b037; }
.who-card p .minus { color: #b04a4f; }
.who-for p.w453 { width: 453px; }

/* ================= final-cta (38:403) ================= */
.cta {
  position: absolute; left: 0; top: 4122px;
  width: 1440px; height: 529px;
  background: #1c111b;
}
.torn-wrap { left: 821.96px; top: 25.93px; width: 476.807px; height: 476.807px; }
.torn-rot { transform: rotate(3.11deg) scaleY(-1); }
.torn-rot img { width: 452.883px; height: 452.883px; object-fit: cover; pointer-events: none; }
.cta-sq1 { left: 1230px; top: 116.97px; width: 12px; height: 12px; background: #d8c45c; }
.cta-sq2 { left: 1200px; top: 144.97px; width: 8px;  height: 8px;  background: #cba9bc; }
.cta-sq3 { left: 1258px; top: 172.97px; width: 16px; height: 16px; background: #d8c45c; }
.cta-sq4 { left: 1222px; top: 212.97px; width: 8px;  height: 8px;  background: #d8c45c; }
.cta h2 {
  position: absolute; left: 160px; top: 138.97px;
  width: 510px; height: 251px;
  font-size: 82px; line-height: 0.98; letter-spacing: -1.23px;
  color: #f3ede9; word-break: break-word;
}
.cta-btn {
  position: absolute; left: 483px; top: 236.97px;
  display: flex; align-items: flex-start;
  padding: 16px 30px; overflow: hidden;
  background: #c9b037;
  outline: 2px solid #8b7a1e; outline-offset: -2px;
  font-family: 'JetBrains Mono', monospace; font-weight: 700;
  font-size: 15px; color: #2b2129; white-space: nowrap;
  word-break: break-word;
}
.cta-highlight { position: absolute; left: 154px; top: 331px; width: 196px; height: 48px; background: rgba(201, 176, 55, 0.5); }
.note-name-wrap { left: 945.49px; top: 163.62px; width: 237.824px; height: 65.05px; }
.note-name-rot { transform: rotate(6.67deg); }
.note-name-rot p {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  font-size: 30px; color: #241323; white-space: nowrap; word-break: break-word;
}
.note-body-wrap { left: 930.5px; top: 215.27px; width: 320.905px; height: 150.201px; }
.note-body-rot { transform: rotate(6.67deg); }
.note-body-rot > div {
  width: 309.639px;
  font-family: 'Inter', sans-serif; font-size: 15px; line-height: 1.55;
  color: #5a4f57; white-space: pre-wrap; word-break: break-word;
}
.note-email { font-weight: 500; font-style: italic; color: #c9a8bc; }
.smiley-wrap { left: 1136px; top: 318.97px; width: 39.338px; height: 44.485px; }
.smiley-rot { transform: rotate(23.24deg); width: 27px; height: 36.818px; position: relative; }
.smiley-rot img { position: absolute; inset: -4.07% -5.56% -4.08% -5.56%; width: 111.12%; height: 108.15%; }
.tape-wrap { left: 756.4px; top: 36.12px; width: 301.456px; height: 223.728px; }
.tape-rot { transform: rotate(-17.14deg) scaleY(-1); }
.tape-rot img { width: 268.831px; height: 151.217px; object-fit: cover; pointer-events: none; }

/* ================= 07-faq (38:421) ================= */
.faq {
  position: absolute; left: 0; top: 4651px;
  width: 1440px; height: 753px;
  background: #f8f4ed;
}
.faq h2 {
  position: absolute; left: 922px; top: 147px;
  font-size: 48px; color: #241323; white-space: nowrap; word-break: break-word;
}
.faq-row {
  position: absolute; left: 290px; right: 290px; height: 66px;
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 20px 0; overflow: hidden;
  border-bottom: 2px solid #c9c0c2;
  white-space: nowrap; word-break: break-word;
}
.faq-q1 { top: 228px; } .faq-q2 { top: 314px; } .faq-q3 { top: 400px; }
.faq-q4 { top: 486px; } .faq-q5 { top: 572px; }
.faq-row .q { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 17px; color: #241323; }
.faq-row .plus { font-family: 'JetBrains Mono', monospace; font-size: 20px; color: #8a6378; }
.faq-sq1 { left: 939px; top: 151.97px; width: 12px; height: 12px; background: #d8c45c; }
.faq-sq2 { left: 917px; top: 191.97px; width: 8px;  height: 8px;  background: #cba9bc; }
.faq-sq3 { left: 903px; top: 139.97px; width: 8px;  height: 8px;  background: #d8c45c; }
.hand-wrap { left: 79px; top: 40.97px; width: 211.221px; height: 197.277px; }
.hand-rot { transform: rotate(15.46deg); }
.hand-rot img { width: 176px; height: 156px; object-fit: cover; pointer-events: none; }

/* ================= footer (38:443) ================= */
.footer {
  position: absolute; left: 0; top: 5404px;
  width: 1440px; height: 93px;
  background: #1c111b;
  border-top: 2px solid #433040;
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 38px 160px;
  font-family: 'JetBrains Mono', monospace; font-size: 13px;
  color: #c9a8bc; white-space: nowrap; word-break: break-word;
}

/* motion layer: under prefers-reduced-motion the page is the exact static copy */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}