/* Northframe apps (Builder, Collect): product pages on top of tools.css — same paper, ink and coral. */
.ahero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(40px, 6vw, 84px) var(--gut) clamp(40px, 6vw, 72px); }
.ahero__text { display: grid; gap: 18px; align-content: start; }
.ahero h1 { font: 400 clamp(44px, 7vw, 86px)/1 var(--poster); }
.ahero h1 em { font: italic 400 1.05em var(--serif); }
.ahero p { font-size: clamp(18px, 2vw, 21px); max-width: 46ch; }
.ahero .note { font-size: 15px; }

/* the product visual: a drawing of the real screen layout, not a screenshot */
.mock { position: relative; border: 3px solid var(--ink); border-radius: 18px; background: var(--paper); box-shadow: 10px 10px 0 var(--ink); overflow: hidden; aspect-ratio: 16 / 11; }
.mock__bar { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-bottom: 3px solid var(--ink); background: var(--mist); }
.mock__bar i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--ink); background: var(--paper); }
.mock__bar span { margin-left: auto; font: 500 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.mock__bar b { padding: 3px 9px; border: 2px solid var(--ink); border-radius: 999px; background: var(--coral); font: 600 10px var(--display); }

/* Builder mock: rail · canvas · inspector */
.ed { display: grid; grid-template-columns: 13% 1fr 27%; height: calc(100% - 34px); }
.ed__rail { display: grid; align-content: start; gap: 10px; padding: 12px 0; border-right: 3px solid var(--ink); background: var(--ink); }
.ed__rail i { justify-self: center; width: 46%; aspect-ratio: 1; border-radius: 7px; border: 2px solid #6b7078; }
.ed__rail i.on { background: var(--coral); border-color: var(--coral); }
.ed__canvas { position: relative; display: grid; place-items: center; padding: 6%; background: repeating-linear-gradient(0deg, transparent 0 17px, rgba(17, 18, 20, .06) 17px 18px), repeating-linear-gradient(90deg, transparent 0 17px, rgba(17, 18, 20, .06) 17px 18px), var(--mist); perspective: 700px; }
.ed__page { width: 100%; display: grid; gap: 8px; padding: 9% 8%; border: 2px solid var(--ink); border-radius: 10px; background: var(--cream); transform-origin: 50% 80%; animation: ed-tilt 6s ease-in-out infinite; }
.ed__page b { display: block; height: 15px; width: 72%; border-radius: 4px; background: var(--ink); }
.ed__page b + b { width: 48%; }
.ed__page span { display: block; height: 7px; width: 86%; border-radius: 3px; background: rgba(17, 18, 20, .3); }
.ed__page em { display: block; width: 34%; height: 20px; margin-top: 4px; border-radius: 999px; background: var(--coral); border: 2px solid var(--ink); }
.ed__sel { position: absolute; inset: 31% 15% auto 15%; height: 17%; border: 2px solid #4d7cff; border-radius: 4px; pointer-events: none; }
.ed__sel::after { content: "Heading"; position: absolute; left: -2px; top: -20px; padding: 1px 6px; border-radius: 4px; background: #4d7cff; color: #fff; font: 600 9px var(--display); }
.ed__ins { display: grid; align-content: start; gap: 9px; padding: 12px 10px; border-left: 3px solid var(--ink); background: var(--paper); }
.ed__ins small { font: 500 8.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--grey); }
.ed__ins .track { position: relative; height: 4px; border-radius: 2px; background: var(--mist); }
.ed__ins .track::after { content: ""; position: absolute; top: -4px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--ink); background: var(--coral); left: var(--v, 40%); animation: ed-slide 6s ease-in-out infinite; }
.ed__ins svg { width: 100%; height: auto; border: 2px solid var(--ink); border-radius: 8px; background: var(--mist); }
@keyframes ed-tilt { 0%, 100% { transform: rotateX(0deg) translateY(0); } 50% { transform: rotateX(14deg) translateY(-4px); } }
@keyframes ed-slide { 0%, 100% { left: var(--v, 40%); } 50% { left: calc(var(--v, 40%) + 30%); } }

/* Collect mock: the client's checklist */
.cl { display: grid; align-content: start; gap: 12px; height: calc(100% - 34px); padding: 6% 7%; background: var(--cream); }
.cl__head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.cl__head b { font-size: clamp(14px, 1.6vw, 19px); font-weight: 600; }
.cl__bar { height: 10px; border: 2px solid var(--ink); border-radius: 999px; background: var(--paper); overflow: hidden; }
.cl__bar i { display: block; height: 100%; width: 58%; background: var(--coral); }
.cl__item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 2px solid var(--ink); border-radius: 12px; background: var(--paper); font-size: clamp(12px, 1.3vw, 15px); }
.cl__item span { margin-left: auto; padding: 2px 8px; border: 2px solid var(--ink); border-radius: 999px; font: 500 9.5px var(--mono); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.cl__item .ok { background: var(--sage); } .cl__item .wait { background: #ffe7a3; } .cl__item .miss { background: var(--paper); } .cl__item .fix { background: var(--lav); }

/* sections */
.asec { padding: clamp(20px, 3vw, 36px) var(--gut) clamp(44px, 6vw, 72px); display: grid; gap: 22px; }
.asec__h { font: 400 clamp(30px, 4.4vw, 52px)/1.05 var(--poster); max-width: 24ch; text-wrap: balance; }
.asec__h em { font: italic 400 1.05em var(--serif); }
.feat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.feat article { display: grid; gap: 8px; align-content: start; padding: 22px; border: 3px solid var(--ink); border-radius: 18px; background: var(--paper); }
.feat article:nth-child(3n + 2) { background: var(--sage); }
.feat article:nth-child(3n + 3) { background: var(--lav); }
.feat h3 { font-size: 21px; font-weight: 600; }
.feat p { color: #33363b; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; counter-reset: s; }
.steps li { display: grid; gap: 8px; padding-top: 16px; border-top: 3px solid var(--ink); counter-increment: s; }
.steps li::before { content: counter(s, decimal-leading-zero); font: 500 12px var(--mono); letter-spacing: .06em; }
.steps b { font-size: 20px; font-weight: 600; }
.price { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: clamp(20px, 3vw, 30px); border: 3px solid var(--ink); border-radius: 18px; background: var(--paper); }
.price p { max-width: 60ch; }

@media (max-width: 900px) {
  .ahero { grid-template-columns: minmax(0, 1fr); }
  .feat, .steps { grid-template-columns: minmax(0, 1fr); }
  .price { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .ed__page, .ed__ins .track::after { animation: none; } }
.ed__ins .track--a { --v: 30%; } .ed__ins .track--b { --v: 10%; }