.workbench-hero,
.workbench-hero[data-proof-state="hidden"] {
  padding: clamp(24px, 3vw, 38px) clamp(22px, 4vw, 60px) 20px;
  outline: 0;
}

.workbench-promise h1 { max-width: 800px; font-size: clamp(2.45rem, 4.1vw, 4.2rem); line-height: 0.97; }
.workbench-intro { max-width: 760px; margin-top: 12px; font-size: clamp(0.95rem, 1.25vw, 1.08rem); }
.workbench-loop { margin-top: 17px; }

.front-door { margin: 0 clamp(20px, 4vw, 60px) clamp(36px, 5vw, 62px); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.front-door * { box-sizing: border-box; }
.front-door-heading { display: flex; gap: 12px; align-items: baseline; justify-content: space-between; padding: 12px 0; border-top: 2px solid #172326; color: #32443c; }
.front-door-heading span,
.front-door-card-top,
.front-door-type,
.front-door-file-stamp { font: 800 0.62rem/1.3 ui-monospace, "SFMono-Regular", Menlo, monospace; letter-spacing: 0.08em; }
.front-door-heading p { margin: 0; font-size: 0.78rem; }
.front-door-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.front-door-grid > article { display: flex; min-width: 0; flex-direction: column; border: 1px solid #172326; }
.front-door-card-top { display: flex; gap: 8px; justify-content: space-between; padding: 10px 15px; border-bottom: 1px solid #172326; }

.front-door-work { background: #e5ece3; box-shadow: 5px 5px 0 #d4a868; }
.front-door-work .front-door-card-top { color: #1e4e39; }
.front-door-work-paper { position: relative; flex: 1; padding: clamp(18px, 2vw, 29px); }
.front-door-work-paper::after { position: absolute; top: 0; right: 0; width: 26px; height: 26px; border-left: 1px solid #172326; border-bottom: 1px solid #172326; background: linear-gradient(45deg, #cbd8ca 49%, #fffdf7 50%); content: ""; }
.front-door-type { margin: 0 0 10px; color: #2d644e; }
.front-door-type span { margin-left: 3px; }
.front-door-work h2,
.front-door-room h2 { max-width: 500px; margin: 0; font-size: clamp(1.55rem, 2.5vw, 2.6rem); letter-spacing: -0.055em; line-height: 1.05; text-wrap: balance; }
.front-door-work-paper > p:not(.front-door-type),
.front-door-room-copy > p:not(.front-door-room-result) { max-width: 510px; margin: 12px 0; color: #3d5148; font-size: 0.83rem; line-height: 1.48; }
.front-door-file-stamp { display: inline-block; margin-top: 7px; padding: 5px 7px; border: 1px solid #37634d; color: #255239; transform: rotate(-2deg); }
.front-door-file-compare { display: block; width: fit-content; margin-top: 13px; color: #1e6246; font-size: 0.78rem; font-weight: 800; text-underline-offset: 3px; }
.front-door-open { display: flex; width: 100%; min-height: 52px; align-items: center; justify-content: space-between; gap: 12px; padding: 11px clamp(18px, 2vw, 29px); border: 0; border-top: 1px solid #172326; background: #244639; color: #fffdf7; cursor: pointer; font: 800 0.85rem/1.3 Inter, ui-sans-serif, sans-serif; text-align: left; }
.front-door-open:hover { background: #35634c; }

.front-door-room { background: #f9efe0; box-shadow: 5px 5px 0 #cfaa8c; }
.front-door-room .front-door-card-top { color: #894026; }
.front-door-room-stage { position: relative; height: 96px; overflow: hidden; border-bottom: 1px solid #172326; background: repeating-linear-gradient(90deg, transparent 0 42px, rgb(23 35 38 / 6%) 43px 44px), linear-gradient(#dce5d7 0 72%, #b6c6ac 72%); }
.front-door-window { position: absolute; top: 10px; left: 17%; display: flex; width: 64px; height: 53px; border: 4px solid #466968; background: #a9d8db; }
.front-door-window span { width: 50%; border-right: 2px solid #466968; }
.front-door-window span:last-child { border: 0; }
.front-door-chair { position: absolute; right: 26%; bottom: 7px; width: 43px; height: 36px; border: 4px solid #763f2d; border-radius: 5px 5px 0 0; background: #ddad82; transition: transform 250ms ease; }
.front-door-chair span { position: absolute; right: -7px; bottom: -14px; left: -7px; height: 12px; border: 3px solid #763f2d; background: #ddad82; }
.front-door-plant { position: absolute; right: 39%; bottom: 5px; width: 22px; height: 21px; border: 3px solid #824d38; background: #b77550; transition: transform 250ms ease; }
.front-door-plant b { position: absolute; bottom: 16px; left: 7px; width: 4px; height: 29px; background: #376b47; }
.front-door-plant i { position: absolute; z-index: 1; bottom: 32px; left: -17px; width: 27px; height: 15px; border-radius: 100% 4px; background: #3d8052; transform: rotate(26deg); }
.front-door-plant i:nth-child(2) { left: 3px; transform: rotate(-30deg) scaleX(-1); }
.front-door-plant i:nth-child(3) { bottom: 43px; left: -10px; transform: rotate(75deg); }
.front-door-plant i:nth-child(4) { bottom: 43px; left: 0; transform: rotate(-70deg) scaleX(-1); }
.front-door-board { position: absolute; top: 13px; right: 5%; display: grid; width: 105px; min-height: 48px; align-content: center; padding: 5px; border: 2px solid #344e42; background: #f6f1dc; text-align: center; }
.front-door-board small { font: 800 0.47rem/1.2 ui-monospace, monospace; }
.front-door-board strong { margin-top: 3px; font: 900 0.58rem/1.2 ui-monospace, monospace; }
.front-door-room[data-choice="a"] .front-door-plant { transform: translateX(33px); }
.front-door-room[data-choice="a"] .front-door-chair { transform: translateX(9px) rotate(-6deg); }
.front-door-room[data-choice="b"] .front-door-plant { transform: translateX(-73px); }
.front-door-room-copy { display: flex; flex: 1; flex-direction: column; padding: 17px clamp(18px, 2vw, 29px); }
.front-door-room-copy > .front-door-room-kept { width: fit-content; margin: 3px 0 12px; padding: 6px 9px; border: 1px solid #315d40; background: #e4eedf; color: #244d37; font: 800 0.65rem/1.3 ui-monospace, "SFMono-Regular", Menlo, monospace; text-transform: uppercase; }
.front-door-room-kept[hidden] { display: none; }
.front-door-room-choices { display: flex; gap: 7px; flex-wrap: wrap; margin-top: auto; }
.front-door-room-choices button { min-height: 42px; padding: 9px 11px; border: 1px solid #713e2e; background: #fffaf0; color: #713e2e; cursor: pointer; font: 800 0.75rem/1.2 Inter, ui-sans-serif, sans-serif; }
.front-door-room-choices button:hover,
.front-door-room-choices button[aria-pressed="true"] { background: #713e2e; color: #fffaf0; }
.front-door-room-result { margin: 11px 0 0; padding: 9px 11px; border-left: 3px solid #713e2e; background: #fffaf0; color: #4b342a; font-size: 0.78rem; font-weight: 750; line-height: 1.4; }
.front-door-room-result[hidden] { display: none; }
.front-door-room-enter { display: flex; min-height: 44px; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; border-bottom: 1px solid #713e2e; color: #713e2e; font-size: 0.8rem; font-weight: 850; text-decoration: none; }
.front-door-room-enter:hover { color: #a6422b; }
.front-door-waypoints { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 17px; }
.front-door-waypoints :is(a, button) { display: inline-flex; min-height: 42px; align-items: center; padding: 8px 11px; border: 1px solid #607667; background: #fffdf7; color: #244639; cursor: pointer; font: 800 0.75rem/1.25 Inter, ui-sans-serif, sans-serif; text-decoration: none; }
.front-door-waypoints :is(a, button):hover { background: #e5ece3; }
.front-door :is(button, a):focus-visible { outline: 3px solid #28748a; outline-offset: 3px; }
.front-check-room-return { margin: 7px 0 0; color: #555a53; font-size: 0.79rem; }
.front-check-room-return a { color: #1e6246; font-weight: 800; text-underline-offset: 3px; }

@media (max-width: 700px) {
  .front-door-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .front-door-work-paper { padding: 17px; }
  .front-door-work-paper > p:not(.front-door-type) { margin: 9px 0; }
  .front-door-room-stage { height: 65px; }
  .front-door-room-copy { padding: 16px 17px; }
  .front-door-room-choices button { flex: 1 1 130px; }
}

@media (max-width: 640px) {
  .workbench-hero,
  .workbench-hero[data-proof-state="hidden"] { padding: 23px 17px 16px; }
  .workbench-promise h1 { font-size: clamp(2.3rem, 10vw, 3rem); line-height: 0.96; }
  .workbench-loop { display: none; }
  .front-door { margin: 0 17px 43px; }
  .front-door-heading { display: block; padding: 8px 0; }
  .front-door-heading p { margin-top: 3px; }
  .front-door-work h2,
  .front-door-room h2 { font-size: clamp(1.5rem, 7vw, 2rem); }
  .front-door-waypoints { display: grid; grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .front-door-chair,
  .front-door-plant { transition: none; }
}