/* Desk: the app half of the Mail by Pony system (docs/DESIGN-SYSTEM.md).
   Loaded after the component stylesheets; colours and radii there are already mapped. */
body{background:var(--paper);font-family:DM,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-optical-sizing:auto}
h1{font-weight:900;letter-spacing:-.05em;line-height:1.02}
h2{font-weight:800;letter-spacing:-.03em}
h3{font-weight:800;letter-spacing:-.02em}

/* One red per screen: the primary .button moves the letter forward. Everything else is Ink or a paper fill. */
.button{background:var(--red-action);font-weight:800;letter-spacing:-.01em}
.button:hover:not(:disabled){background:var(--red-dark)}
.button.secondary{background:var(--paper-2);color:var(--ink)}
.button.secondary:hover:not(:disabled){background:var(--paper-3)}
.text-button,.icon-action{color:var(--ink)}
.text-button:hover,.icon-action:hover{background:var(--paper-2)}

/* Header matches the landing page: the name set as text, same weight, on Paper. */
.masthead,.editor-bar{background:var(--paper)}
/* Header mark: the pixel-retouched pony, scaled 2x without smoothing. */
.mark{display:inline-flex;align-items:center;min-height:48px;flex-shrink:0}.mark img{display:block;width:78px;height:36px;image-rendering:pixelated}
.masthead nav{gap:2px}
.masthead nav button{font-weight:700;color:var(--ink);padding:10px 12px}
.masthead nav button:hover{background:var(--paper-2)}
/* Where you are: the current section is an Ink block, like every other selected state. */
.masthead nav button[aria-current=page]{background:var(--ink);color:var(--paper)}

/* Empty state: the pony gallops beside one line and the red bar (same sprite as the landing hero). */
.welcome-pony{width:min(100%,340px);aspect-ratio:384/224;margin:0 auto 12px;background:url('/static/landing/assets/pony-gallop-sm.png') 0 0/400% 300% no-repeat;animation:gx .4s steps(4) infinite,gy 1.2s steps(3) infinite}
@keyframes gx{to{background-position-x:133.333%}}@keyframes gy{to{background-position-y:150%}}
.empty .welcome-pony{animation:none} /* idle: nothing is happening, so the pony holds still */
.welcome h1{font-size:clamp(38px,6vw,56px);letter-spacing:-.06em;line-height:.95}

/* Data reads as data. */
.price-row>:last-child,.payment-total{font-family:Mono,ui-monospace,monospace;font-variant-numeric:tabular-nums}

/* Phones: inputs at 16px+ so iOS doesn't zoom on focus. */
input,textarea,select{font-size:max(16px,1em)}


/* The sheet is the hero; its focus cue is a tonal step, not an ink frame that reads as a rule. */
.letter-sheet:has(.page-write:focus-visible){outline:4px solid var(--paper-3);outline-offset:0}

/* Milestones: the one place Desk goes loud. Paid gallops; Mailed gets the stamp. */
.milestone{max-width:760px;margin:8px 0 40px}
.milestone-pony{width:min(100%,420px);aspect-ratio:384/224;background:url('/static/landing/assets/pony-gallop-sm.png') 0 0/400% 300% no-repeat;animation:gx .4s steps(4) infinite,gy 1.2s steps(3) infinite}
.milestone-stamp{display:block;width:min(100%,360px);height:auto;margin-bottom:20px}
.milestone-fit{display:block;margin:0;font-weight:900;letter-spacing:-.065em;line-height:.82;white-space:nowrap;padding-bottom:.14em;font-size:min(28vw,220px)}
.milestone-fit>span{display:inline-block;padding-right:.06em}
.milestone p{font-size:clamp(18px,2vw,24px);font-weight:600;letter-spacing:-.015em;line-height:1.35;max-width:36ch;margin:6px 0 0}

/* Working state: a small gallop beside the words instead of a sliding progress line. */
.action-loading{position:static;display:inline-block;width:44px;height:26px;margin-right:10px;vertical-align:middle;background:url('/static/landing/assets/pony-gallop-sm.png') 0 0/400% 300% no-repeat;animation:gx .4s steps(4) infinite,gy 1.2s steps(3) infinite}
.preview-updating{display:flex;align-items:center;gap:8px}
.preview-updating::before{content:"";width:34px;height:20px;background:url('/static/landing/assets/pony-gallop-sm.png') 0 0/400% 300% no-repeat;animation:gx .4s steps(4) infinite,gy 1.2s steps(3) infinite}
.preview-updating::after{display:none}

@media(prefers-reduced-motion:reduce){.welcome-pony,.milestone-pony,.action-loading,.preview-updating::before{animation:none}}