/* unbusy3 — one screen, the app window, seven overlays. Loaded after style.css (the unbusy2 base). */

/* ---------- header: two CTAs and the price chip ---------- */
.header-ctas{display:flex;align-items:center;gap:14px}
.cta-see{font-family:var(--mono);font-size:12px;letter-spacing:.04em;background:transparent;border:1px solid var(--ink);border-radius:5px;padding:16px 18px;color:var(--ink);cursor:pointer;transition:background .2s,transform .2s}
.cta-see:hover{background:var(--lime);transform:translateY(-1px)}
.cta-wrap{position:relative;display:flex;align-items:center}
.contact{border:0;color:var(--ink);cursor:pointer;font:inherit;font-family:var(--mono);font-size:12px;letter-spacing:.04em}
.contact-text{display:block}
.contact:hover{background:var(--lime)}
.automated .contact{background:var(--lime-strong)}
.price-chip{position:absolute;right:-8px;bottom:-15px;font-family:var(--mono);font-size:10px;letter-spacing:.04em;background:#fffef8;border:1px solid var(--ink);border-radius:999px;padding:5px 10px;color:var(--ink);cursor:pointer;box-shadow:2px 2px 0 var(--ink);transition:background .2s,transform .2s;white-space:nowrap}
.price-chip:hover{background:var(--lime);transform:translateY(-1px)}
.brand-caption{font-size:8px}
.eyebrow-short{display:none}

/* ---------- the hero with the new meaning ---------- */
/* the right column must stay shorter than the two-line headline: the hero aligns both to the same baseline */
@media(min-width:768px){.intro-copy{width:30%;max-width:430px}.intro-description{font-size:13px;line-height:1.45}}
.intro-copy p.micro-line{font-family:var(--mono);font-size:10px;line-height:1.5;letter-spacing:.03em;color:#6e7467;margin:14px 0 0;width:auto;display:block}
/* the terms label in the stage header is a button into "What we build" */
.stage-header .app-terms{border:0;background:transparent;padding:4px 0;margin:-4px 0;font:inherit;font-family:var(--mono);letter-spacing:inherit;color:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:color .2s}
.stage-header .app-terms:hover{color:var(--ink)}
.stage-header .app-terms i{width:6px;height:6px;border-radius:50%;background:var(--orange);display:inline-block}
/* the chaos cards keep their extras in OFF; which ones depends on the everyday */
.x-mail,.x-doc{display:none}
body[data-category="sales"] .x-mail,body[data-category="anything"] .x-mail{display:inline-flex!important}
body[data-category="sales"] .x-doc,body[data-category="finance"] .x-doc,body[data-category="operations"] .x-doc{display:inline-flex!important}
.x-steps,.x-asked,.x-chips,.x-pings,.x-approval,.task-cell-wrap{display:none!important}
/* the lines go quiet when the chaos is gone */
.automated.mode-window .connection{opacity:0}
/* the promise strip replaces the watermark when the software is on */
.stage-watermark{transition:opacity .3s}
.automated .stage-watermark{opacity:0}
.promise{position:absolute;left:0;right:0;bottom:0;height:28px;overflow:hidden;z-index:2;opacity:0;transition:opacity .3s;pointer-events:none;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.promise span{display:block;width:max-content;font-family:var(--mono);font-size:11px;letter-spacing:.08em;line-height:28px;color:var(--ink);white-space:nowrap;animation:promise-run 36s linear infinite}
@keyframes promise-run{to{transform:translateX(calc(-100% / 6))}}
.automated .promise{opacity:1}
.paused .promise span,.paused .stage-watermark span{animation-play-state:paused}
/* "Do your thing" keeps its line and gets a way into "How it works" */
.output-cta{display:inline-flex;align-items:center;gap:12px;margin-top:14px;padding:10px 13px;border:0;border-radius:5px;background:var(--ink);color:#f5f5f0;font-family:var(--mono);font-size:10px;letter-spacing:.06em;cursor:pointer;transition:background .2s,color .2s,transform .2s}
.output-cta:hover{background:var(--orange);color:var(--ink);transform:translateY(-1px)}
.output-cta .contact-symbol{font-size:14px}
.automated .output{pointer-events:auto}

/* ---------- the cube and the cards: collapse into the tool ---------- */
#stage{--core-x-on:66%;--core-y-on:50%;--win-w:520px;--win-x:36%;--win-y:50%}
body.automated.mode-window #core{left:var(--core-x-on);top:var(--core-y-on)}
#stage.collapsing .task{--x:var(--core-x-on);--y:var(--core-y-on);animation:none;transform:translate(-50%,-50%) scale(.1);opacity:0;transition:left .5s ease-in,top .5s ease-in,transform .5s ease-in,opacity .3s .15s;pointer-events:none}
#stage.collapsing .task .task-content,#stage.collapsing .task .task-icon{animation:none}
#stage.collapsing .core-face{animation:stamp-pulse .7s var(--spring) .35s}
@keyframes stamp-pulse{0%{transform:scale(1)}40%{transform:scale(1.12)}100%{transform:scale(1)}}
body.mode-window #output{left:86%;top:52%}

/* ---------- the app window ---------- */
.appwin-slot{position:absolute;left:var(--core-x-on);top:var(--core-y-on);width:var(--win-w);transform:translate(-50%,-50%) scale(.12);opacity:0;z-index:6;transition:left .55s var(--spring),top .55s var(--spring),transform .55s var(--spring),opacity .25s;pointer-events:none}
.appwin-slot.show{left:var(--win-x);top:var(--win-y);transform:translate(-50%,-50%) scale(1);opacity:1;pointer-events:auto}
.appwin{position:relative;background:#fffef8;border:1.5px solid var(--ink);border-radius:6px;box-shadow:5px 5px 0 #22271f;font-family:var(--mono);color:var(--ink)}
.appwin-bar{display:flex;align-items:center;gap:10px;padding:7px 10px;border-bottom:1.5px solid var(--ink);font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.appwin-dots{display:inline-flex;gap:4px}
.appwin-dots i{width:7px;height:7px;border:1px solid var(--ink);border-radius:50%}
.appwin-you{margin-left:auto;font-size:9px;letter-spacing:.1em;color:#6e7467}
.appwin-body{padding:2px 10px 8px}
.appwin-table{width:100%;border-collapse:collapse;font-size:11px;letter-spacing:.02em}
.appwin-table th{text-align:left;font-weight:400;color:#6e7467;font-size:9px;letter-spacing:.08em;text-transform:uppercase;padding:6px 6px 4px;border-bottom:1px solid var(--line)}
.appwin-table td{padding:5px 6px;border-bottom:1px solid var(--line);white-space:nowrap}
.appwin-table tr.row{opacity:0;transform:translateX(-8px);animation:row-in .35s var(--ease) forwards;animation-delay:calc(.3s + var(--i) * .12s)}
@keyframes row-in{to{opacity:1;transform:none}}
.appwin-table tr.is-new td{background:#eef6c4}
.appwin-table td.st{color:#465d24}
.appwin-table td[data-red]{color:#c33617;font-weight:700}
.appwin td.bump,.appwin .bcard.bump{animation:cell-bump .6s var(--spring)}
@keyframes cell-bump{0%{background:var(--lime)}100%{background:transparent}}
.appwin-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding-top:8px;min-height:96px}
.bcol h4{margin:0 0 6px;font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:#6e7467;font-weight:400}
.bcard{border:1px solid var(--ink);border-radius:4px;padding:6px 6px;font-size:9px;line-height:1.3;margin-bottom:6px;background:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;animation:row-in .35s var(--ease) forwards;animation-delay:calc(.3s + var(--i) * .12s)}
.appwin-toast{position:absolute;right:-18px;top:-18px;display:flex;gap:8px;align-items:center;max-width:280px;background:#fffef8;border:1.5px solid var(--ink);border-radius:6px;padding:8px 11px;font-size:10px;letter-spacing:.03em;line-height:1.3;box-shadow:4px 4px 0 var(--lime-strong);opacity:0;transform:translateX(24px);transition:opacity .3s,transform .45s var(--spring);pointer-events:none}
.appwin-toast.show{opacity:1;transform:none}
.toast-star{color:var(--orange);font-size:14px;flex-shrink:0}

/* ---------- shared bits ---------- */
.btn-ink{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:#f5f5f0;border:0;border-radius:5px;padding:14px 18px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;cursor:pointer;text-decoration:none;transition:background .2s,color .2s,transform .2s}
.btn-ink:hover{background:var(--orange);color:var(--ink);transform:translateY(-1px)}
.chip-link{background:transparent;border:1px solid var(--ink);border-radius:999px;padding:9px 13px;font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--ink);cursor:pointer;transition:background .2s}
.chip-link:hover{background:var(--lime)}
.app-k{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.08em;color:#6e7467;margin-bottom:4px}
.accent{color:var(--orange)}

/* ---------- the bottom panel ---------- */
.panel{position:absolute;bottom:0;left:var(--pad);right:var(--pad);height:57px;display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:#636c59;z-index:10;border-top:1px solid var(--line)}
.panel-item{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 11px;border:1px solid transparent;border-radius:999px;background:transparent;color:inherit;font:inherit;letter-spacing:inherit;cursor:pointer;transition:border-color .2s,color .2s,background .2s;white-space:nowrap}
.panel-item:hover{border-color:var(--ink);color:var(--ink)}
.panel-price{border-color:var(--ink);color:var(--ink);font-weight:700}
.founder-dot{width:26px;height:26px;border-radius:50%;border:1px solid var(--ink);background:var(--lime);display:grid;place-items:center;overflow:hidden;flex-shrink:0}
.founder-dot img{width:100%;height:100%;object-fit:cover;display:block}
.founder-dot .founder-initials{font-size:10px;letter-spacing:0;font-weight:800}
.panel-motion{margin-left:auto}
.panel-motion svg{width:12px;height:12px}
.panel-short{display:none}

/* ---------- overlays ---------- */
.overlay{position:fixed;inset:0;z-index:40;background:#22271f00;display:grid;place-items:center;padding:24px;transition:background .25s}
/* the hidden attribute must win over display:grid, otherwise invisible overlays sit on top of the page and eat every tap */
.overlay[hidden]{display:none}
.overlay.open{background:#22271fb8}
.overlay-panel{position:relative;width:min(760px,100%);max-height:calc(100% - 48px);overflow:auto;background:var(--paper);border:1.5px solid var(--ink);border-radius:8px;box-shadow:8px 8px 0 var(--ink);padding:28px 32px 32px;transform:translateY(16px) scale(.98);opacity:0;transition:transform .3s var(--spring),opacity .25s}
.overlay.open .overlay-panel{transform:none;opacity:1}
.overlay-wide .overlay-panel{width:min(980px,100%)}
.overlay-close{position:absolute;top:10px;right:10px;width:44px;height:44px;border:0;background:transparent;color:var(--ink);font-size:28px;line-height:1;cursor:pointer;border-radius:50%;z-index:1}
.overlay-close:hover{background:var(--lime)}
.overlay .eyebrow{margin-bottom:10px}
.ov-title{font-size:28px;font-weight:800;letter-spacing:-.04em;line-height:1.05;margin:4px 0 18px;max-width:720px}
.overlay-wide .ov-title{font-size:40px;margin-bottom:10px}
.ov-lead{font-size:16px;line-height:1.35;letter-spacing:-.015em;color:#4a5044;margin:0 0 20px;max-width:640px}
.ov-note{font-size:13px;line-height:1.4;color:#4a5044;margin:12px 0 0}
.ov-spots strong{color:var(--ink)}
.overlay .btn-ink{margin-top:18px}
.ov-ctas{display:flex;gap:14px;align-items:center;margin-top:18px}
.ov-ctas .btn-ink{margin-top:0}
.ov-foot{display:flex;gap:14px;align-items:center;margin:22px 0 0;font-family:var(--mono);font-size:10px;color:#6e7467}
/* what we build */
.build-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 28px}
.build-card{border-top:1.5px solid var(--ink);padding:14px 0 6px}
.build-card.is-current{position:relative}
.build-card.is-current::before{content:'ON THE SCREEN NOW';position:absolute;right:0;top:-10px;font-family:var(--mono);font-size:8px;letter-spacing:.1em;background:var(--lime);padding:3px 7px;border-radius:999px}
.build-card h3{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin:0 0 10px;font-size:22px;font-weight:800;letter-spacing:-.035em;line-height:1}
.build-terms{font-family:var(--mono);font-size:10px;letter-spacing:.05em;font-weight:400;color:#4a5044}
.build-card p{margin:0 0 10px;font-size:13.5px;line-height:1.35;letter-spacing:-.01em}
/* how it works */
.how-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:36px;align-items:start}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.steps li{display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:start}
.step-n{width:30px;height:30px;border:1.5px solid var(--ink);border-radius:50%;display:grid;place-items:center;font-family:var(--mono);font-size:11px}
.steps p{margin:0;font-size:14px;line-height:1.4;letter-spacing:-.01em}
.promise-col{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.promise-col .btn-ink{margin-top:4px}
.guarantee{font-size:22px;font-weight:700;line-height:1.15;letter-spacing:-.03em;margin:0}
.guarantee-small{font-size:12px;line-height:1.4;color:#4a5044;margin:0}
.hours{font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:#6e7467;margin:0}
.founder-card{display:flex;gap:16px;align-items:flex-start;margin-top:26px;padding-top:18px;border-top:1px solid var(--line)}
.founder-photo{width:96px;height:96px;border-radius:50%;border:1.5px solid var(--ink);background:var(--lime);display:grid;place-items:center;flex-shrink:0;overflow:hidden;box-shadow:3px 3px 0 var(--ink)}
.founder-photo img{width:100%;height:100%;object-fit:cover;display:block}
.founder-initials{font-weight:800;font-size:30px;letter-spacing:-.04em}
.founder-lines{margin:0;font-size:13px;line-height:1.4}
.team-line{font-size:12px;line-height:1.4;color:#4a5044;margin:10px 0 0}
.founder-card-big{margin-top:0;padding-top:0;border-top:0}
.founder-card-big .founder-photo{width:140px;height:140px}
.founder-card-big .founder-initials{font-size:44px}
.founder-card-big .ov-title{margin-bottom:10px}
.why-romania{font-weight:600;color:var(--ink)}
.ov-links{display:flex;gap:18px;margin-top:16px;font-family:var(--mono);font-size:11px}
.ov-links a{color:var(--ink)}
/* price, book, legal, cases */
.price-table{width:100%;border-collapse:collapse;font-size:13px}
.price-table th{text-align:left;font-family:var(--mono);font-size:9px;letter-spacing:.08em;color:#6e7467;font-weight:400;padding:8px 8px 6px;border-bottom:1.5px solid var(--ink)}
.price-table td{padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.35}
.price-table td:first-child{font-weight:700}
.price-table td:nth-child(3),.price-table td:last-child{font-family:var(--mono);white-space:nowrap;font-size:12px}
.overlay-book .overlay-panel{width:min(920px,100%)}
.calendly{min-height:640px}
.book-fallback p{font-size:14px;line-height:1.4;margin:0 0 14px}
.legal-list{display:grid;grid-template-columns:max-content 1fr;gap:8px 20px;font-size:13px;margin:0}
.legal-list dt{font-family:var(--mono);font-size:9px;letter-spacing:.08em;color:#6e7467;padding-top:3px}
.legal-list dd{margin:0}
.case{border-top:1px solid var(--line);padding:14px 0}
.case h3{margin:0 0 8px;font-size:18px;letter-spacing:-.03em}
.case p{margin:0 0 8px;font-size:13px;line-height:1.4}
.case blockquote{margin:8px 0;font-size:14px;font-style:italic}
.case-facts{font-family:var(--mono);font-size:11px}

/* ---------- wide and short desktops ---------- */
@media(min-width:1600px){
  #stage{--win-w:600px;--win-x:34%;--core-x-on:64%}
  body.mode-window #output{left:85%}
  .appwin-table{font-size:12px}
}
@media(min-width:768px) and (max-height:760px){
  .intro-copy{width:28%;max-width:340px}
  .intro-copy p.intro-line{font-size:19px;margin-bottom:10px}
  .intro-description{font-size:12px;line-height:1.4}
  .intro-copy p.micro-line{margin-top:10px}
  #stage{--win-w:450px;--win-y:44%}
  .appwin-table{font-size:10px}
  .appwin-table td{padding:3px 6px}
  .appwin-table th{padding:3px 6px 2px;font-size:8px}
  .appwin-bar{padding:5px 9px;font-size:10px}
  .appwin-body{padding:0 9px 6px}
  .promise{height:22px}
  .promise span{line-height:22px;font-size:10px}
  .output-cta{display:none}
  .overlay-wide .ov-title{font-size:32px}
}

/* ---------- phones ---------- */
@media(max-width:767px){
  .cta-see,.price-chip,.contact-free{display:none}
  .contact{font-size:9px}
  .eyebrow-long{display:none}.eyebrow-short{display:inline}
  .eyebrow{margin-bottom:8px}
  .intro-copy{margin-top:10px}
  .intro-copy p.intro-line{font-size:14.5px;line-height:1.28}
  .intro-copy p.micro-line{display:none}
  .demo-caption{display:none}
  .stage-header{justify-content:flex-start}
  .stage-header .app-terms{gap:5px}
  .stage-header .app-terms i{width:4px;height:4px}
  .appwin-board{gap:5px;padding-top:5px;min-height:0}
  .bcard{white-space:normal;font-size:8.5px;line-height:1.25;padding:4px 5px;margin-bottom:4px}
  .bcol h4{font-size:8px;margin-bottom:4px}
  #stage{--core-x-on:86%;--core-y-on:14%;--win-w:300px;--win-x:50%;--win-y:44%}
  body.mode-window #output{display:none}
  .output-cta{display:none}
  .appwin-table{font-size:10px}
  .appwin-table td{padding:4px 5px}
  .appwin-table th{padding:4px 5px 3px;font-size:8px}
  .appwin-bar{padding:5px 8px;font-size:10px}
  .appwin-body{padding:0 8px 6px}
  .appwin-toast{right:-6px;top:-14px;max-width:210px;font-size:9px;padding:6px 9px}
  .promise{height:22px}
  .promise span{font-size:9px;line-height:22px}
  .panel{height:56px;gap:0;font-size:10px;bottom:env(safe-area-inset-bottom)}
  .panel-item{padding:0 7px;min-height:44px}
  .panel-full{display:none}
  .panel-short{display:inline}
  .overlay{padding:0;align-items:end}
  .overlay-panel,.overlay-wide .overlay-panel,.overlay-book .overlay-panel{width:100%;max-height:90vh;height:90vh;border-radius:12px 12px 0 0;box-shadow:none;padding:22px 18px 28px;transform:translateY(100%);opacity:1}
  .overlay.open .overlay-panel{transform:none}
  .ov-title,.overlay-wide .ov-title{font-size:22px}
  .ov-lead{font-size:14px}
  .build-grid{grid-template-columns:1fr;gap:6px}
  .build-card h3{font-size:19px}
  .build-card p{font-size:13px}
  .how-grid{grid-template-columns:1fr;gap:22px}
  .guarantee{font-size:18px}
  .founder-photo{width:64px;height:64px}
  .founder-initials{font-size:22px}
  .founder-card-big{flex-direction:column}
  .founder-card-big .founder-photo{width:96px;height:96px}
  .founder-card-big .founder-initials{font-size:30px}
  .price-table{font-size:12px}
  .price-table td{padding:8px 4px}
  .calendly{min-height:70vh}
  .ov-ctas{flex-wrap:wrap}
}
@media(max-width:767px) and (max-height:700px){
  #stage{--win-y:41%;--win-w:280px}
  .appwin-table{font-size:9px}
  .appwin-table td{padding:3px 4px}
  .appwin-table th{padding:3px 4px 2px;font-size:7px}
  .appwin-bar{padding:4px 8px;font-size:9px}
  .appwin-toast{font-size:8px;padding:5px 8px;max-width:180px}
}
@media(prefers-reduced-motion:reduce){
  .appwin-slot,.appwin-toast,.appwin-table tr.row,.bcard{transition:none;animation:none;opacity:1;transform:none}
  .appwin-slot{transform:translate(-50%,-50%)}
  .appwin-slot:not(.show){opacity:0}
  .promise span,.stage-watermark span{animation:none}
}

/* ---------- four pictures ---------- */
/* two lines of h1 must end above the stage header even on short, wide screens */
@media(min-width:768px){h1{font-size:clamp(68px,min(9.25vw,13.5vh),170px)}}
@media(min-width:768px) and (max-height:760px){h1{font-size:min(8.1vw,13.5vh)}}
/* the flow picture keeps the cards, the lines and the big watermark; the promise strip steps aside */
.automated.mode-flow .stage-watermark{opacity:.045}
.automated.mode-flow .promise{opacity:0}
.automated.mode-flow .x-mail,.automated.mode-flow .x-doc{display:none!important}
/* the chart */
.appwin-chart{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:end;height:104px;padding:12px 6px 0}
.appwin-chart .bar{height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;min-width:0}
.appwin-chart .bar i{display:block;width:100%;height:calc(var(--v) * 1%);background:var(--ink);border-radius:3px 3px 0 0;transform-origin:bottom;animation:bar-up .6s var(--spring) both;animation-delay:calc(.3s + var(--i) * .12s);transition:height .5s var(--spring),background .3s}
.appwin-chart .bar.is-red i{background:#c33617}
.appwin-chart .bar.paid i{height:6%;background:#9bb86a}
.appwin-chart .bar em{font-style:normal;font-size:10px;letter-spacing:.02em;margin-bottom:4px;white-space:nowrap}
.appwin-chart .bar.is-red em{color:#c33617;font-weight:700}
.appwin-chart .bar.paid em{color:#465d24}
.appwin-chart .bar b{font-size:8px;font-weight:400;letter-spacing:.08em;color:#6e7467;margin-top:5px;white-space:nowrap}
@keyframes bar-up{from{transform:scaleY(0)}}
.appwin-total{font-size:10px;letter-spacing:.02em;line-height:1.3;color:#4a5044;padding:7px 2px 0;margin-top:8px;border-top:1px solid var(--line)}
@media(min-width:768px) and (max-height:760px){.appwin-chart{height:84px}.appwin-total{font-size:9px}}
@media(max-width:767px){.appwin-chart{height:80px;gap:8px;padding-top:8px}.appwin-chart .bar em{font-size:9px}.appwin-chart .bar b{font-size:7px}.appwin-total{font-size:8.5px;margin-top:6px}}
@media(prefers-reduced-motion:reduce){.appwin-chart .bar i{animation:none}}