/* luckyd3v.com — production build (responsive rebuild, 2026-06-13)
   Motion (motion.js) is entrance-only; this static stylesheet IS the rest state. */

@font-face {
  font-family: 'Space Grotesk';
  src: url('../fonts/SpaceGrotesk.woff2') format('woff2');
  font-weight: 300 700; font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/JetBrainsMono.woff2') format('woff2');
  font-weight: 100 800; font-display: swap;
}

:root {
  /* palette — Figma LOCKED PALETTE */
  --bg: #1c111b;
  --hero-bg: #241322;
  --cream: #f8f4ed;
  --cream2: #fdfbf7;
  --lilac: #e5dae2;
  --sand: #efe9e0;
  --ink: #241323;
  --ink2: #2b2129;
  --muted: #5a4f57;
  --muted2: #7a5a74;
  --pink: #c9a8bc;
  --pink2: #cba9bc;
  --gold: #F28B1E;
  --green: #5f7d52;
  --term: #2e1e2c;
  --term-head: #433040;
  --stroke-ink: #2b2129;
  --stroke-raised: #433040;

  /* pinned content column + hero stage — DESKTOP frame 1440 */
  --content: 1120px;
  --hero-w: 1440px;
  --hero-h: 573px;          
  --section-py: 116px;

  /* type scale — pinned (fixed px) per band */
  --h2: 28px;
  --eyebrow: 13px;
  --body: 14px;
  --card-h3: 21px;
  --card-p: 14px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
html, body { background: var(--bg); overflow-x: hidden; }
body { font-synthesis: none; }

/* FULL-BLEED PAGE — no width cap; section backgrounds span the viewport */

.page { position: relative; width: 100%; background: var(--cream); overflow-x: clip; }
.page a { color: inherit; text-decoration: none; }
.page img { display: block; max-width: none; }

.abs { position: absolute; }
.stroke-ink { outline: 2px solid var(--stroke-ink); outline-offset: -2px; }
.stroke-raised { outline: 2px solid var(--stroke-raised); outline-offset: -2px; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px var(--gold); outline-offset: 2px; border-radius: 1px;
}
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.sg { font-family: 'Space Grotesk', sans-serif; font-weight: 700; }
.mono { font-family: 'JetBrains Mono', monospace; font-weight: 400; }
.space { font-family: 'Space Grotesk', sans-serif; font-weight: 400; }
.desktop-only { display: none; }
.rotwrap { position: absolute; display: flex; align-items: center; justify-content: center; }
.rotwrap > * { flex: none; }

/* PINNED CONTENT COLUMN — fixed design width, centered. Keep a 30px min gutter
   so the column never kisses the edge as it shrinks below its frame width. */

.wrap {
  position: relative; width: var(--content);
  max-width: calc(100% - 60px); margin: 0 auto;
}
.why h2, .modes h2, .universal h2, .bundle h2, .who h2, .faq h2 {
  font-size: var(--h2); line-height: 1.06; letter-spacing: -0.02em;
}
.eyebrow { font-family: 'JetBrains Mono', monospace; font-size: var(--eyebrow); letter-spacing: 1px; }
.sq { position: absolute; z-index: 50; }

/* ===================== HERO ===================== */
.hero { position: relative; background: var(--hero-bg); overflow: hidden; }
.nav {
  position: relative; z-index: 1000; width: 100%; height: 55px; background: var(--bg);
  display: flex; align-items: center; justify-content: flex-end; gap: 40px;
  padding: 0 max(30px, calc((100% - var(--content)) / 2));
  font-family: 'JetBrains Mono', monospace; font-size: 13px;
  color: var(--gold); white-space: nowrap;
}
.nav-links { display: flex; align-items: center; gap: 32px; }
.nav-handle a { color: var(--gold); text-decoration: none; }
.nav-potato { background: none; border: none; cursor: pointer; padding: 4px 2px; line-height: 0; margin-left: auto; }
.nav-potato img { height: 30px; width: auto; display: block; transition: transform 220ms ease; transform: rotate(-170deg) scaleY(-1); }
.nav-potato:hover img { transform: rotate(-158deg) scaleY(-1); }
.nav-potato[aria-expanded="true"] img { transform: rotate(-185deg) scaleY(-1); }

@media (max-width: 600px) { .nav-links { gap: 16px; font-size: 10px; } }
@media (max-width: 768px) {
  .nav-links {
    display: none;
    position: absolute;
    top: 55px;
    left: 0; right: 0;
    background: var(--bg);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 8px 0 16px;
    z-index: 100;
    border-top: 1px solid var(--term-head);
  }
  .nav-potato { margin-left: 0; }
  .nav-links.open { display: flex; }
  .nav-links p { width: 100%; padding: 13px 24px; }
  .nav-links p:hover { background: var(--term); }
  .nav { position: relative; }
}

.hero-stage { position: relative; width: 100%; height: 553px; }
.hero-cluster { position: absolute; inset: 0px;;}
.terminal {
  position: absolute; left: 15%; top: 24.78%; width: 41.67%; height: 214px;
  background: var(--term); overflow: hidden; z-index: 3;
}
.term-titlebar {
  position: absolute; left: 0; top: 0; width: 100%; height: 25px; background: var(--term-head);
  display: flex; align-items: center; gap: 7px; padding: 0 12px;
  font-family: 'JetBrains Mono', monospace; font-size: clamp(7px, 0.76vw, 11px); color: var(--pink); white-space: nowrap;
}
.term-dots { letter-spacing: 1.5px; font-size: 9px; }
.term-body {
  position: absolute; left: 0; top: 25px; width: 100%; height: calc(100% - 25px);
  padding: clamp(12px, 1.46vw, 21px) 0 0 clamp(18px, 2.5vw, 36px);
  font-family: 'JetBrains Mono', monospace; font-size: clamp(8px, 0.97vw, 14px); line-height: 1.39;
}
.term-body .tl { white-space: nowrap; }
.tl-cmd { color: #f3ede9; }
.tl-ok { color: var(--green); }
.tl-note { color: var(--pink); }
.filecard {
  position: absolute; left: 55%; top: 5.93%; width: 30%; height: 230px;
  background: var(--cream2); overflow: hidden; z-index: 4;
  box-shadow: clamp(3px, 0.42vw, 6px) clamp(3px, 0.42vw, 6px) 0 0 rgba(0,0,0,0.45);
}
.filecard-head {
  position: absolute; left: 18px; top: 14px; right: 5.2%; display: flex; justify-content: space-between;
  font-family: 'JetBrains Mono', monospace; font-size: clamp(8px, 0.90vw, 13px); color: var(--ink2);
}
.fc-name { font-weight: 700; }
.filecard-body {
  position: absolute; left: 18px; top: 39px; width: 59.5%;
  font-family: 'JetBrains Mono', monospace; font-size: clamp(8px, 0.90vw, 13px); line-height: 1.62; color: var(--muted);
}
.fc-gap { line-height: 0.5; }
.hero-cluster .sq { z-index: 5; }
.hero-sq1 { left: 48.19%; top: 39.62%; width: 1.20%; aspect-ratio: 1; background: var(--pink2); }
.hero-sq2 { left: 50.60%; top: 46.25%; width: 1.60%; aspect-ratio: 1; background: var(--gold); }
.hero-sq3 { left: 48.99%; top: 55.32%; width: 0.80%; aspect-ratio: 1; background: var(--pink2); }
.hero-sq4 { left: 51.80%; top: 60.73%; width: 1.20%; aspect-ratio: 1; background: var(--gold); }
.hero-tag {
  position: absolute; left: 15%; top: 15.18%;
  max-width: 35%;
  font-family: 'Space Grotesk', monospace; font-size: clamp(10px, 0.84vw, 12px); line-height: 1.55;
  color: #f3ede9; z-index: 5;
}
.btn-buy {
  position: absolute; left: 55%; top: 53.75%; display: inline-flex; align-items: center;
  padding: 16px 30px; background: var(--gold); z-index: 5;
  font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: clamp(11px, 1.04vw, 15px); color: var(--ink2);
  white-space: nowrap; transition: transform 240ms cubic-bezier(0.34, 1.56, 0.64, 1), filter 180ms ease;
}
.btn-buy:hover { transform: translateY(-3px) scale(1.03); filter: brightness(1.08); }
.hero-word {
  position: absolute; left: -2%; right: 0; top: 73%;
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: min(20vw, 220px);
  line-height: 0.85; letter-spacing: -0.04em; text-align: center; color: #f3ede9;
  white-space: nowrap; text-shadow: 0 10px 50px rgba(20,13,20,0.45); z-index: 2;
  pointer-events: none;
}

/* ===================== 01-why ===================== */

.why { position: relative; background: var(--cream); padding-block: var(--section-py); overflow: hidden; }
.why-head { position: relative; display: inline-block; max-width: 1015px; }
.why-goldbar { position: absolute; right: 0%; top: 3px; width: min(395px, 50%); height: 1.2em; background: var(--gold); z-index: 0; }
.why h2 { position: relative; z-index: 1; color: var(--ink); max-width: 1015px; }
.why-p1, .why-p2, .why-p3 { max-width: 600px; line-height: 1.55; color: var(--muted); }
.why-p1 { margin-top: 48px; font-size: 18px;  }
.why-p2 { margin-top: 34px; font-size: 18px; }
.why-p3 { margin-top: 30px;  font-size: 18px; }
.potato-wrap { right: -450px; top: -50px; width: 120%; height: 120%; }
.potato-rot { transform: rotate(-170.35deg) scaleY(-1); }
.potato-rot img { width: 310px; height: 277px; object-fit: cover; pointer-events: none; }

/* ===================== 02-modes ===================== */

.modes { position: relative; background: var(--lilac); padding-block: var(--section-py); overflow: hidden; }
.modes .eyebrow { color: var(--muted2); }
.modes-headwrap { position: relative; display: inline-block; margin-top: 14px; }
.modes h2 { color: var(--ink); }
.underline-wrap { left: 58%; top: calc(125% + 2px); width: 120px;}
.underline-rot { transform: rotate(1deg); width: 220px; height: 2px; position: relative; }
.underline-rot img { position: absolute; inset: -150% -0.65%; width: 105.3%; height: 400%; }
.mode-cards { margin-top: 52px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; align-items: start; }
.mode-card { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; padding: 30px 28px 34px; height: 100%; }
.mode-card .m-label { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; letter-spacing: 0.92px; color: var(--muted2); }
.mode-card h3 { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: var(--card-h3); color: var(--ink); }
.mode-card p { font-family: 'Space Grotesk', sans-serif; font-size: var(--card-p); line-height: 1.55; color: var(--muted); }
.mode-1 { background: var(--cream2); }
.mode-2-wrap, .mode-3-wrap { display: flex; }
.mode-2-rot { transform: rotate(-0.14deg) skewX(-0.04deg); width: 100%; display: flex; }
.mode-3-rot { transform: rotate(-0.06deg) skewX(-0.06deg); width: 100%; display: flex; }
.mode-2 { background: var(--cream); width: 100%; }
.mode-3 { background: var(--sand); width: 100%; outline-style: dashed; }
.mode-3 .m-label { color: #6b6168; }
.free-v1 { position: absolute; left: 71.5%; bottom: 116px; font-family: 'JetBrains Mono', monospace; font-weight: 500; font-size: 13px; color: var(--ink); }
.arrow-wrap { right: 19%; bottom: 70px; 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 { right: 25%; bottom: 56px; 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%; }
.circle-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-weight: 500; font-size: 11px; color: var(--ink); text-align: center; line-height: 1.15; pointer-events: none; }

/* ===================== 03-universal ===================== */

.universal { position: relative; z-index: 3; background: var(--bg); padding-block: var(--section-py); overflow: hidden; }
.universal .eyebrow { color: var(--pink); }
.uni-headwrap { position: relative; display: inline-block; margin-top: 14px; }
.universal h2 { position: relative; z-index: 1; color: #f3ede9; }
.uni-hl { position: relative; z-index: 1; }
.uni-highlight { position: absolute; z-index: 0; left: 40%; top: 0.15em; width: 260px; height: 1.2em; background: rgba(242, 139, 30, 0.5); }
.universal .sub { margin-top: 30px; font-size: var(--body); color: var(--pink); }
.u-grid { margin-top: 52px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 34px; align-items: start; }
.u-card { background: var(--term); display: flex; flex-direction: column; gap: 10px; align-items: flex-start; padding: 26px 26px 28px; height: 100%; }
.u-card .u-label { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--pink); }
.u-card h3 { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 18px; color: #f3ede9; }
.u-card p { font-family: 'Space Grotesk', sans-serif; font-size: var(--card-p); line-height: 1.55; color: var(--pink); }
.pg-sq1 { left: 7%;    top: 40%; width: 17.297px; height: 17.297px; background: var(--pink2); }
.pg-sq2 { left: 9.5%;  top: 46%; width: 23.063px; height: 23.063px; background: var(--gold); }
.pg-sq3 { left: 8%;    top: 53%; width: 11.531px; height: 11.531px; background: var(--pink2); }
.pg-sq4 { left: 10.8%; top: 58%; width: 17.297px; height: 17.297px; background: var(--gold); }

/* ===================== 04-bundle ===================== */

.bundle { position: relative; background: var(--bg); padding-block: 20px; overflow: hidden; }
.bundle .eyebrow { color: var(--pink); }
.bundle .wrap { position: relative; z-index: 2; }   /* lift content column above the decorative folder + zip label */
.bundle h2 { color: #f3ede9; margin-top: 10px; }
.bundle h2 .gold { color: var(--gold); }
/* anchored to the content column's right edge (not the viewport) so the folder
   always tucks behind the terminal's right corner — peeks ~70px past it at any width */
.bundle-term { position: relative; z-index: 1; margin-top: 52px; background: var(--term); overflow: hidden; display: flex; flex-direction: column; align-items: stretch; }
.bundle-term-head { background: var(--term-head); width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 16px; font-family: 'JetBrains Mono', monospace; font-size: 12px; }
.bundle-term-head .cmd { color: var(--pink); }
.bundle-term-head .done { color: #5f7d52; white-space: nowrap; }
.bundle-term-body { width: 100%; padding: 24px 26px 28px; overflow: hidden; }

/* Stacked layout: each filename on its own line, its description indented just
   below it (was a 2-col grid where the description column squeezed narrow and
   the text crammed/wrapped word-by-word). 3ch indent aligns the description
   under the filename, past the "|- " tree prefix. */

.bundle-tree { font-family: 'JetBrains Mono', monospace; font-size: 14px; line-height: 1.6; color: #f3ede9; display: block; }
.bundle-tree .tree-root { display: block; margin-bottom: 8px; }
.bundle-tree .tg { display: block; white-space: pre; }
.bundle-tree .td { display: block; margin: 1px 0 14px 3ch; color: #c2b0bc; font-size: 0.9em; line-height: 1.45; }
.bundle-tree .td:last-child { margin-bottom: 0; }

/* ===================== signup band (paper tear 48:8) ===================== */

.signup { position: relative; background: var(--cream); overflow: visible; padding-block: 300px; }
.paper { position: absolute; left: 50%; top: 45%; width: max(1400px, 100%); height: auto; transform: translate(-50%, -50%) rotate(-3.4588deg); object-fit: fill; pointer-events: none; z-index: 1; }   /* z-index:1 so the bottom torn edge shows over the next (cream) section at every breakpoint */
.signup-inner { position: relative; z-index: 1; width: var(--content); max-width: calc(100% - 60px); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 48px; }
.email-copy { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; flex: 1 1 360px; max-width: 577px; }
.email-copy h3 { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 24px; color: var(--ink); }
.email-copy p { font-family: 'Space Grotesk', sans-serif; font-size: 14px; color: var(--muted); }
.signup-fine { font-family: 'Space Grotesk', sans-serif; font-size: 12px; color: var(--muted); margin-top: 6px; }
.signup-fine a { color: var(--ink); text-decoration: underline; }

/* ===================== 05-who ===================== */

.who { position: relative; background: var(--cream); padding-block: 100px; }
.who .wrap { position: relative; z-index: 2; margin-top: 80px;}   /* keep Who content above the torn paper bottom edge */
.who h2 { color: var(--ink); }
.who-cards { margin-top: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.who-card { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; padding: 30px 30px 34px; height: 100%; }
.who-for { background: var(--lilac); }
.who-not { background: var(--sand); box-shadow: 6px 6px 0 0 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: var(--ink); }
.who-card p { font-family: 'Space Grotesk', sans-serif; font-size: 14.5px; line-height: 1.5; color: var(--muted); white-space: pre-wrap; }
.who-card p .plus { color: var(--gold); }
.who-card p .minus { color: #9c3d42; }

/* ===================== final-cta ===================== */

.cta {background: var(--bg); padding-block: 80px; overflow: hidden; }
.cta .wrap { display: grid; grid-template-columns: minmax(0, 1fr) clamp(380px, 36vw, 460px); align-items: center; gap: clamp(32px, 4vw, 72px); }
.cta-head { position: relative; }
.cta h2 { position: relative; z-index: 1; color: #f3ede9; font-size: 82px; line-height: 0.98; letter-spacing: -0.015em; }
/* highlight rides the "Every Project" line directly, so it tracks any size */
.cta-hl-line { position: relative; background-image: linear-gradient(rgba(242, 139, 30, 0.5), rgba(242, 139, 30, 0.5)); background-repeat: no-repeat; background-size: 100% 0.72em; background-position: 0 0.16em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.cta-hl-line::before { content: none; }
.cta-btn { display: inline-flex; align-items: center; margin-top: 0px; padding: 16px 30px; background: var(--gold); font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 15px; color: var(--ink2); white-space: nowrap; transition: transform 240ms cubic-bezier(0.34, 1.56, 0.64, 1), filter 180ms ease; }
.cta-btn:hover { transform: translateY(-3px) scale(1.03); filter: brightness(1.08); }
.cta-sq1 { right: -10%; top: -20%; width: 12px; height: 12px; background: var(--gold); }
.cta-sq2 { right: -15%; top: -30%; width: 8px;  height: 8px;  background: var(--pink2); }
.cta-sq3 { right: -5%; top: -38%; width: 16px; height: 16px; background: var(--gold); }
.cta-sq4 { right: 0%; top: -48%; width: 8px;  height: 8px;  background: var(--gold); }

/* ===================== 07-faq ===================== */

.faq { position: relative; background: var(--cream); overflow: hidden; padding-block: 0px; }
.faq-head { position: relative; text-align: right; z-index: 1; margin-top: -20%; }
.faq-head h2 { position: relative; z-index: 1; color: var(--ink); display: inline-block; }
.faq-sq1 { right: 1%;   top: 8px;  width: 12px; height: 12px; background: var(--gold); z-index: 0; }
.faq-sq2 { right: 3.5%; top: 48px; width: 8px;  height: 8px;  background: var(--pink2); z-index: 0; }
.faq-sq3 { right: 5%;   top: 0;    width: 8px;  height: 8px;  background: var(--gold); z-index: 0; }
.faq-list { margin-top: 56px; }
.faq-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; }
.faq-row .q { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 17px; color: var(--ink); transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1); transform-origin: left center; }
.faq-row:hover .q, details.faq-row > summary:hover .q { transform: translateX(6px) scale(1.025); }
.faq-row .plus { font-family: 'JetBrains Mono', monospace; font-size: 20px; color: #8a6378; }
details.faq-row { display: block; padding: 0; }
details.faq-row > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center;
  justify-content: space-between; gap: 20px; padding: 22px 0;
}
details.faq-row > summary::-webkit-details-marker { display: none; }
details.faq-row .plus { transition: transform 150ms ease-out; }
details.faq-row[open] .plus { transform: rotate(45deg); }   /* + -> x */
.faq-a {
  padding: 0 0 24px; max-width: 760px;
  font-family: 'Space Grotesk', sans-serif; font-size: 14.5px; line-height: 1.6; color: var(--muted);
}
.faq-a .mono { color: var(--ink); }

/* ===================== footer ===================== */

.footer { background: var(--bg); border-top: 2px solid var(--term-head); display: flex; align-items: center; justify-content: space-between; padding: 36px max(30px, calc((100% - var(--content)) / 2)); font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--pink); }
.footer a { color: inherit; text-decoration: none; }

/* legal / privacy pages */

.legal { background: var(--cream); padding-block: 84px 104px; min-height: 64vh; }
.legal .wrap { max-width: 760px; }
.legal h1 { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 40px; letter-spacing: -0.02em; color: var(--ink); }
.legal h2 { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 20px; color: var(--ink); margin-top: 34px; }
.legal p, .legal li { font-family: 'Space Grotesk', sans-serif; font-size: 16px; line-height: 1.62; color: var(--muted); margin-top: 12px; }
.legal ul { margin-top: 12px; padding-left: 20px; }
.legal li { margin-top: 6px; }
.legal a { color: var(--ink); text-decoration: underline; }
.legal-updated { font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--muted2); margin-top: 8px; }

/* ===================================================================
   TABLET — vw <= 1179
   Content pins to 694; hero pins to the 829 tablet hero (90:16).
   =================================================================== */

@media (max-width: 1250px) {
  :root {
    --content: 800px;
    --section-py: 88px;
    --h2: 32px;
    --body: 15px;
    --card-h3: 20px;
    --card-p: 14px;
  }
  .desktop-only { display: none !important; }
  .terminal { left: 11%; top: 35%; width: 59.66%; height: 193px; }
  .term-body {
  position: absolute; left: 0; top: 25px; width: 100%; height: calc(100% - 25px);
  font-family: 'JetBrains Mono', monospace; font-size: clamp(8px, 1.5vw, 14px); line-height: 1.39;
}
  .filecard { left: 48%; top: 15.70%; width: 43.96%; height: 207px; }
  .filecard-body {
  font-family: 'JetBrains Mono', monospace; font-size: clamp(8px, 1.5vw, 13px); line-height: 1.62; color: var(--muted);
}
  .hero-sq1 { left: 47.05%; top: 61.08%; width: 1.88%; }
  .hero-sq2 { left: 51.87%; top: 66.32%; width: 2.51%; }
  .hero-sq3 { left: 48.25%; top: 75.04%; width: 1.26%; }
  .hero-sq4 { left: 54.28%; top: 55.84%; width: 1.88%; }
  .hero-tag { left: 11%; top: 20.24%; max-width: 33.3%; font-size: 1.2vw; }
  .btn-buy { left: 69.74%; top: 58.81%; }
  .hero-word { top: 505px; font-size: 13vw; letter-spacing: -0.04em; }
  .nav { gap: 34px; padding: 0 max(30px, calc((100% - var(--content)) / 2)); }
  .nav p:nth-child(2) { order: 3; }
  .nav p:nth-child(3) { order: 2; }

  /* sections */

  .why-goldbar { width: 400px; left: 0%;}
  .why-p2, .why-p3 { max-width: 350px; }
  .potato-wrap { right: -300px; top: 30px; width: 120%; height: 120%; }
  .potato-rot img { width: 290px; height: 257px; object-fit: cover; pointer-events: none; }
  .mode-cards { grid-template-columns: 1fr; gap: 24px; }
  .underline-wrap { left: 43%; top: calc(100% + 2px); width: 300px; height: 10.028px; }
  .underline-rot { transform: rotate(1deg); width: 270px; height: 2px; position: relative; }
  .uni-highlight { position: absolute; z-index: 0; left: 40%; top: 0.15em; width: 300px; height: 1.2em; background: rgba(242, 139, 30, 0.5); }
  .u-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; }  /* tablet keeps 2-col */
  .arrow-wrap { right: 20%; }
  .circle-wrap { right: 26%; }
  .bundle { padding-block: 10px; }
  .who-cards { grid-template-columns: 1fr; gap: 32px; }      /* stacked */
  .cta .wrap { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 40px; }
  .cta h2 { font-size: 50px; margin-left: 10px;}
  .cta-sq1{ width: 10.32px; height: 10.32px; }
  .cta-sq2 { width: 6.88px;  height: 6.88px;  }
  .cta-sq3 { width: 13.76px; height: 13.76px; }
  .cta-sq4 { width: 6.88px;  height: 6.88px;  }

  /* footer — match nav/content alignment at tablet */

  .footer { padding: 36px max(30px, calc((100% - var(--content)) / 2)); }

  /* signup — centered stack */

  .signup { padding-block: 60px; }
  .paper { top: 62%; }   /* push torn edge onto the cream at tablet */
  .signup-inner { flex-direction: column; align-items: center; text-align: center; margin-top: 180px;}
  .email-copy { align-items: center; text-align: center; flex-basis: auto; }
}

  @media (max-width: 950px) {
  .terminal { left: 10%; top: 35%; width: 65%; height: 193px; }
  .filecard { left: 52.33%; top: 15.70%; width: 38%; height: 207px; }
  .btn-buy { left: 70%; top: 58%; }
  .hero-word { top: 84%; font-size: 17vw; letter-spacing: -0.04em; }
  .hero-tag { left: 10%; top: 20.24%; max-width: 42%; font-size: 1.4vw; }
  .why-goldbar { position: absolute; right: 40%; top: 3px; width: min(450px, 60%); height: 1.2em; background: var(--gold); z-index: 0; }
  .potato-wrap { left: auto; right: 8%; top: 50%; bottom: auto; width: 300px; height: 178px; transform: none; }

}

@media (max-width: 768px) {
  :root {
    --content: 620px;
    --section-py: 60px;
    --h2: 28px;
    --body: 14px;
    --card-h3: 19px;
    --card-p: 12px;
  }

  /* nav */

  .nav { justify-content: space-between; gap: 0; padding: 0 18px; font-size: 8px; }
  .nav p:nth-child(2) { order: 3; }
  .nav p:nth-child(3) { order: 2; }

  /* hero — all top values are % of the 520px stage height */

  .hero-stage { height: 550px; }
  .hero-word { top: 63px; left: 1vw; font-size: 15vw; }
  .terminal { left: 35%; top: 20%; width: 60%; height: 193px; }
  .term-titlebar { width: 100%; height: 20px; }
  .term-body { height: 168px; font-size: 10px; }
  .filecard { left: 10%; top: 45%; width: 60%; height: 150px; }
  .filecard-body { width: 220px; font-size: 10px; }
  .hero-sq1 { left: 4.65%; top: 22.69%; width: 3.63%; }
  .hero-sq2 { left: 9.30%; top: 28.85%; width: 4.84%; }
  .hero-sq3 { left: 6.05%; top: 37.69%; width: 2.42%; }
  .hero-sq4 { left: 94.88%; top: 60.96%; width: 3.63%; }
  .hero-tag { left: 10%; top: 75%; max-width: calc(80vw - 40px); white-space: normal; font-size: clamp(10px, 2.6vw, 12px); }
  .btn-buy { left: 10%; top: 85%; font-size: 13px; padding: 14px 26px; }


  /* why */

  .why { overflow: visible; }
  .why-head { display: block; left: 0; top: 0; margin-left: 0; max-width: 80%; }
  .why-goldbar { width: 90%; right: auto; left: 0; top: auto; bottom: -2px; }
  .why-p1, .why-p2, .why-p3 { max-width: none; font-size: 14px; }
  .why-p1 { margin-top: 8%; }
  .potato-wrap { left: auto; right: 0%; top: -25%; bottom: auto; width: 300px; height: 178px; transform: none; }
  .potato-rot { transform: rotate(-8deg) scaleX(-1) scaleY(1); }
  .potato-rot img { width: 200px; height: auto; }

  /* modes */

  .underline-wrap { left: -13%; top: calc(100% + 2px); width: 300px; height: 10.028px; }
  .underline-rot { transform: rotate(1deg); width: 180px; height: 1px; position: relative; }
  .u-grid { grid-template-columns: 1fr; gap: 12px; }

  /* bundle */

  .bundle-tree { column-gap: 1em; font-size: 12.5px; }
  .uni-highlight { position: absolute; z-index: 0; left: 0; top: 0.18em; width: 100%; }
  .bundle-term { position: relative; z-index: 1; margin-top: 30px; background: var(--term); overflow: hidden; display: flex; flex-direction: column; align-items: stretch; }

  /* who */

  .who-cards { grid-template-columns: 1fr; gap: 24px; }
  .who { padding-top: 96px; }
  .cta .wrap { grid-template-columns: 1fr; margin-top: 40px; gap: 20px; }
  .cta h2 { font-size: 50px; }
  .cta-head { text-align: center; display: flex; flex-direction: column; align-items: center; }
  .cta-sq1{ width: 10.32px; height: 10.32px; right: 40px; top: 0; }
  .cta-sq2 { width: 6.88px;  height: 6.88px;  right: 80px; top: -40px; }
  .cta-sq3 { width: 13.76px; height: 13.76px; top: -80px; right: 30px; }
  .cta-sq4 { width: 6.88px;  height: 6.88px;  top: -110px; right: 60px; }

  /* signup */
  .signup { padding-block: 10px; }
  .signup-inner { flex-direction: column; align-items: center; text-align: center; margin-top: 180px; }
  .email-copy { align-items: center; text-align: center; flex-basis: auto; }
}

@media (max-width: 672px) {
  :root { --content: 500px; }
  .nav { justify-content: space-between; gap: 0; padding: 0 24px; font-size: 8px; }
  .nav p:nth-child(2) { order: 3; }
  .nav p:nth-child(3) { order: 2; }
  .hero-word { top: 10%; left: 2%; font-size: 15vw; }
  .potato-wrap { display: none; }
  .underline-wrap { left: 30%; top: calc(80% + 2px); width: 310px; height: 10.028px; }
  .why-goldbar { width: 95%; right: auto; left: 0; top: 10%; bottom: -2px; }
  .uni-highlight { position: absolute; z-index: 0; left: 0; top: 0.18em; width: 80%; }
}

@media (max-width: 580px) {
  :root { --content: 425px; }
  .why-goldbar { width: 75%; right: auto; left: 0; top: 10%; bottom: -2px; }
  .underline-wrap { left: 30%; top: calc(50% + 2px); width: 320px; height: 10.028px; }
}

@media (max-width: 500px) {
  :root { --content: 380px; }
  .btn-buy { left: 10%; top: 88%; font-size: 13px; padding: 14px 26px; }
  .underline-wrap { left: 60%; top: calc(50% + 2px); width: 100px; height: 10.028px; }
  .uni-highlight { position: absolute; z-index: 0; left: 0; top: 0.18em; width: 85%; }
}

@media (max-width: 426px) {
  :root { --content: 350px; }
  .potato-wrap { left: auto; right: -5%; top: -25%; bottom: auto; width: 200px; height: 178px; transform: none; }
  .potato-rot { transform: rotate(-8deg) scaleX(1) scaleY(1); }
  .potato-rot img { width: 100px; height: auto; }
}

/* 321–375px only */
@media (min-width: 321px) and (max-width: 375px) {
  .potato-wrap { display: none; }
}

@media (max-width: 320px) {
  .terminal { left: 3%; top: 14.42%; width: 94%; height: 193px; }
  .filecard { left: 5%; top: 42.31%; width: 84.65%; height: 150px; }
  .why-head { display: block; left: 0; top: 0; margin-left: 0; max-width: none; }
  .why-goldbar { width: 60%; right: auto; left: 0; top: auto; bottom: -2px; }
  .why-p1 { margin-top: 10%; }
  .potato-wrap { display: none; }
  .underline-wrap { left: -20%; top: calc(100% + 2px); width: 300px; height: 10.028px; }
  .uni-highlight { position: absolute; z-index: 0; left: 0; top: 2em; width: 90%; }
  .cta h2 { font-size: 40px; }
}


/* ===================== HOME-SPECIFIC STYLES ===================== */

/* --- hero --- */
.home-hero {
  position: relative;
  background: var(--hero-bg);
  overflow: hidden;
  min-height: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 52px;
  text-align: center;
}
.home-word {
  position: relative;
  z-index: 2;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: min(32vw, 380px);
  line-height: 0.85;
  letter-spacing: -0.03em;
  color: #f3ede9;
  white-space: nowrap;
  text-shadow: 0 10px 50px rgba(20, 13, 20, 0.45);
  pointer-events: none;
  margin-left: -1.3%;
}
.hero-bar {
  position: absolute;
  z-index: 3;
  background: var(--gold);
  padding: 6px 18px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(16px, 1.8vw, 18px);
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  pointer-events: none;
}
.hero-bar-left  { left:  calc(22% + 10%);top: calc(25% - 15px); }
.hero-bar-right { right: calc(17% + 10%); top: calc(75% - 15px); }
.hero-word-wrap { position: relative; width: 100%; }
.h-sq1 { right: 7%;  top: 38%; width: 17px; height: 17px; background: var(--pink2); }
.h-sq2 { right: 5%;  top: 54%; width: 23px; height: 23px; background: var(--gold); }
.h-sq3 { right: 8%;  top: 68%; width: 11px; height: 11px; background: var(--pink2); }
.h-sq4 { left: 6%;   top: 42%; width: 17px; height: 17px; background: var(--gold); }
.h-sq5 { left: 8%;   top: 60%; width: 11px; height: 11px; background: var(--pink2); }

/* ===== WRITING SECTION ===== */
.home-writing { background: var(--bg); padding-block: 0; position: relative; }
.hw-split { display: grid; grid-template-columns: 1fr 1fr; min-height: 480px; }
.hw-img-pane { position: relative; background: var(--term); overflow: hidden; }
.hw-img-pane img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: right center; display: block;
}
.hw-text-pane {
  padding: 64px 100px;
  display: flex; flex-direction: column; gap: 16px; justify-content: center;
  background: var(--cream);
  border-radius: 16px 0 0 16px;
  position: relative; z-index: 1; margin-left: -25px;
}
.hw-text-pane .eyebrow { color: var(--muted2); }
.hw-split-title {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  font-size: clamp(22px, 2.4vw, 30px); line-height: 1.14;
  letter-spacing: -0.02em; color: var(--ink);
}
.hw-split-excerpt {
  font-family: 'Space Grotesk', sans-serif; font-size: 14px;
  line-height: 1.62; color: var(--muted);
}
.hw-split-link {
  display: inline-block; margin-top: 6px;
  font-family: 'JetBrains Mono', monospace; font-size: 12px;
  letter-spacing: 0.5px; color: var(--gold); text-decoration: none;
}
.hw-split-link:hover { text-decoration: underline; }
.hw-strip {
  background: var(--gold); position: relative; overflow: visible; z-index: 2;
  padding: 0 max(30px, calc((100% - var(--content)) / 2));
}
.hw-strip-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 22px 0;
}
.hw-strip-label {
  font-family: 'JetBrains Mono', monospace; font-size: 13px;
  color: var(--ink2); line-height: 1.5;
}
.hw-strip-btn {
  flex-shrink: 0; display: inline-flex; align-items: center;
  padding: 11px 24px; font-family: 'JetBrains Mono', monospace; font-size: 12px;
  color: var(--ink2); text-decoration: none; border: 2px solid var(--ink2);
  white-space: nowrap; background: transparent;
  transition: transform 240ms cubic-bezier(0.34, 1.56, 0.64, 1), filter 180ms ease, background 120ms ease;
}
.hw-strip-btn:hover { background: rgba(0,0,0,0.1); transform: translateY(-3px) scale(1.03); }
.hw-folders {
  background: var(--bg);
  padding: var(--section-py) max(30px, calc((100% - var(--content)) / 2));
}
.hw-folders .eyebrow { color: var(--pink); margin-bottom: 32px; }
.hw-folder-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: end; }
.hw-folder {
  display: block; position: relative; text-decoration: none;
  min-height: 140px; padding: 22px 20px 24px;
  background: var(--term); transition: background 120ms ease;
}
.hw-folder::before {
  content: ''; position: absolute; top: -10px; left: 0;
  width: 44%; height: 10px; background: var(--term);
  border-radius: 5px 5px 0 0; transition: background 120ms ease;
}
.hw-folder:hover { background: var(--term-head); }
.hw-folder:hover::before { background: var(--term-head); }
.hw-folder-num {
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: 1.5px; color: var(--muted2); text-transform: uppercase; margin-bottom: 10px;
}
.hw-folder-title {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  font-size: 15px; line-height: 1.28; color: #f3ede9;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.hw-folder-cta {
  display: block; margin-top: 16px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: 0.5px; color: var(--gold);
}

/* --- faq --- */
.home-faq {
  background: var(--cream);
  padding-top: clamp(180px, 20vw, 260px);
  padding-bottom: var(--section-py);
  margin-top: clamp(32px, 5vw, 80px);
}
.home-faq .faq-list { max-width: 100%; }

/* --- paper / signup overrides for home --- */
#free.signup { overflow: visible; background: var(--cream); margin-top: -12vw; }
@media (max-width: 445px)  { #free.signup { margin-top: -60px; } }
@media (min-width: 1112px) { #free.signup { margin-top: -160px; } }
#free .paper { width: max(1800px, 175%); }

/* --- products --- */
.home-products {
  background: var(--cream);
  padding-block: clamp(48px, 10vw, 180px);
  margin-bottom: clamp(48px, 10vw, 180px);
}
.home-products h2 {
  font-size: var(--h2); line-height: 1.06; letter-spacing: -0.02em;
  color: var(--ink); margin-top: 14px;
}
.home-products .eyebrow { color: var(--muted2); }
.hp-cards {
  margin-top: 36px; display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 28px; align-items: start; max-width: 100%;
}
.hp-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 26px 24px 30px; text-decoration: none; transition: background 120ms ease;
}
.hp-card-a { background: var(--cream2); }
.hp-card-b { background: var(--sand); }
.hp-card-a:hover, .hp-card-b:hover { background: var(--lilac); }
.hp-price {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: 1px; color: var(--muted2); text-transform: uppercase;
}
.hp-card h3 {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  font-size: var(--card-h3); color: var(--ink);
}
.hp-card p {
  font-family: 'Space Grotesk', sans-serif; font-size: var(--card-p);
  line-height: 1.55; color: var(--muted);
}
.hp-cta {
  display: block; margin-top: 8px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: 0.5px; color: var(--ink);
}

/* --- home responsive --- */
@media (max-width: 768px) {
  .hero-bar { font-size: clamp(12px, 3.5vw, 16px); padding: 4px 12px; }
  .hw-split { grid-template-columns: 1fr; }
  .hw-img-pane { min-height: 300px; order:2;}
  .hw-text-pane { padding: 10% 10%; margin-left: 0; border-radius: 0; width: 100%; order: 1; }
  .hw-folder-grid { grid-template-columns: 1fr; gap: 32px; }
  .hw-strip-label { font-size: 11px; }
  .home-faq {margin-top: clamp(150px, 5vw, 180px)}
  .home-hero {padding-bottom: 15px;}
}

@media (max-width: 600px) {
  .home-hero { min-height: 240px; padding-bottom: 20px;}
  .hp-cards { grid-template-columns: 1fr; max-width: 100%; }
  .hw-strip-inner { flex-direction: column; align-items: center; gap: 12px; }
  .home-word { font-size: min(32vw, 380px); }
    .home-faq {margin-top: clamp(100px, 3vw, 100px)}
    .hero-bar-left  { left:  calc(2% + 10%);top: calc(28% - 15px); }
.hero-bar-right { right: calc(7% + 10%); top: calc(75% - 15px); }


}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}