/* What the product pages (Peregrino's and PocaPal's) stand on: the layout
   tokens, the phone frame's measurements and the reset. A site's own :root,
   after this one, can override any of it. */

:root{
  --nav-h:48px;
  --pad:max(22px, env(safe-area-inset-left));
  --maxw:1120px;

  /* phone frame geometry, measured off /shared/assets/phone-frame.webp */
  --frame-ar:1470 / 3000;
  --screen-l:5.10%; --screen-t:2.37%; --screen-w:89.80%; --screen-h:95.27%;
  --screen-r:13.4% / 6.1%;      /* a hair tighter than the cut-out */
  --body-l:2.11%;   --body-t:0.73%;   --body-w:95.78%;   --body-h:98.53%;
  --body-r:16.41% / 7.81%;
  --device-body:#6b6560;        /* sampled off the frame's own edge */

  --ease:cubic-bezier(.22,.61,.36,1);

  /* the shared navbar and footer read these */
  --mk-nav-h:var(--nav-h);
  --mk-pad:var(--pad);
  --mk-maxw:var(--maxw);
  --mk-ease:var(--ease);
}

*,*::before,*::after{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}