/* Crosstela site: shared tokens, the three styles, base type, footer and consent.
   A style is html[data-style]; every colour on every page reads these tokens. */

@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url(../fonts/manrope-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url(../fonts/manrope-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url(../fonts/manrope-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url(../fonts/manrope-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;src:url(../fonts/inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;src:url(../fonts/inter-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;src:url(../fonts/inter-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;src:url(../fonts/inter-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}

:root{
  --gap:clamp(8px,1.05vmin,14px);
  --radius:clamp(14px,1.9vmin,30px);
  --radius-s:clamp(9px,1.1vmin,16px);
  --ease:cubic-bezier(.2,.8,.2,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --text:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  /* The app's own cloth and grid, shared by every drawn chart. */
  --cloth:#F6F1E7;
  --grid10:#D9466A;
  --grid5:#7FB3E0;
  color-scheme:light;
}

/* Blush — his reference: powder pink ground, wine ink, a heavy tight grotesque. */
html[data-style="blush"]{
  --bg:#EBCBC6;--bg-2:#E4BDB7;--tile:#FBF4F0;--tile-2:#F5E6E1;--tile-hi:#FFFFFF;
  --ink:#5C0E22;--ink-2:#7E3446;--muted:#7A4652;--line:rgba(92,14,34,.10);
  --accent:#8C1A38;--accent-2:#C64F6C;--accent-soft:rgba(140,26,56,.10);
  --on-accent:#FFF6F3;--thread:#7A1230;
  --display:'Manrope',var(--text);--display-w:800;--track:-.055em;
  --shadow:0 1px 0 rgba(255,255,255,.7) inset,0 18px 40px -28px rgba(92,14,34,.45);
  --pop-1:#C64F6C;--pop-2:#6F8F5B;--pop-3:#C98A2E;--pop-4:#8C1A38;--pop-5:#5E7FA8;
  --glass:rgba(255,250,248,.72);
}
/* Studio — Apple-like: grey ground, white tiles, black ink, one wine accent. */
html[data-style="studio"]{
  --bg:#F0F0F2;--bg-2:#E8E8EB;--tile:#FFFFFF;--tile-2:#F6F6F8;--tile-hi:#FFFFFF;
  --ink:#1D1D1F;--ink-2:#424245;--muted:#6E6E73;--line:rgba(0,0,0,.08);
  --accent:#A11D42;--accent-2:#E2557B;--accent-soft:rgba(161,29,66,.08);
  --on-accent:#FFFFFF;--thread:#9E1B3F;
  --display:'Inter',var(--text);--display-w:700;--track:-.04em;
  --shadow:0 0 0 1px rgba(0,0,0,.03),0 14px 34px -26px rgba(0,0,0,.35);
  --pop-1:#E2557B;--pop-2:#34A853;--pop-3:#F29A1F;--pop-4:#7A5AF8;--pop-5:#1F8FFF;
  --glass:rgba(255,255,255,.76);
}
/* Night — the keynote slide: black ground, graphite tiles, vivid accents. */
html[data-style="night"]{
  --bg:#000000;--bg-2:#0A0A0B;--tile:#141416;--tile-2:#1C1C1F;--tile-hi:#232327;
  --ink:#F5F5F7;--ink-2:#D1D1D6;--muted:#8E8E93;--line:rgba(255,255,255,.08);
  --accent:#FF5C8A;--accent-2:#FF9DB8;--accent-soft:rgba(255,92,138,.14);
  --on-accent:#140008;--thread:#FF5C8A;
  --display:'Inter',var(--text);--display-w:700;--track:-.045em;
  --shadow:0 0 0 1px rgba(255,255,255,.04) inset;
  --pop-1:#FF5C8A;--pop-2:#5BE49B;--pop-3:#FFB547;--pop-4:#A78BFA;--pop-5:#5AC8FA;
  --glass:rgba(30,30,33,.72);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--text);font-size:16px;line-height:1.45;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
img,svg,canvas,video{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:6px}
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:50;padding:10px 14px;border-radius:10px;background:var(--ink);color:var(--bg);text-decoration:none;font-weight:600}
.skip:focus{top:12px}

/* Footer: one line on wide screens, shared by every page. */
.foot{display:flex;align-items:center;gap:clamp(6px,.8vw,12px);min-height:clamp(34px,4.4vh,46px);
  padding:0 clamp(12px,1.4vw,22px);font-size:clamp(11.5px,1.25vmin,13px);color:var(--muted)}
.foot a{text-decoration:none;color:var(--ink-2);transition:color .2s}
.foot a:hover{color:var(--accent)}
.foot .grow{flex:1}
.foot nav{display:flex;gap:clamp(10px,1.4vw,20px);flex-wrap:wrap;margin-left:clamp(4px,.8vw,12px)}
.foot .cta{color:var(--accent);font-weight:650}
.foot .social{display:flex;gap:0}
.foot .social a,.ctl{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:0;background:transparent;cursor:pointer;color:var(--ink-2)}
.foot .social a:hover,.ctl:hover{background:var(--accent-soft);color:var(--accent)}
.foot svg{width:16px;height:16px}
.seg{display:inline-flex;padding:2px;border-radius:999px;background:var(--accent-soft);gap:2px}
.seg button{border:0;background:transparent;padding:4px 10px;border-radius:999px;cursor:pointer;font-size:12px;font-weight:600;color:var(--ink-2)}
.seg button[aria-pressed="true"]{background:var(--tile);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.lang{position:relative;display:inline-flex;align-items:center;gap:6px;color:var(--ink-2);cursor:pointer}
.lang:hover{color:var(--ink)}
.lang select{appearance:none;-webkit-appearance:none;field-sizing:content;border:0;background:transparent;color:inherit;font:inherit;font-size:12.5px;font-weight:600;
  padding:4px 16px 4px 0;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 7' fill='none' stroke='%23888' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 2px center;background-size:9px 6px}
.lang select:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.lang option{color:#1D1D1F;background:#fff}

/* Consent: a small card, never a wall. Analytics loads only after Allow. */
.consent{position:fixed;z-index:60;right:clamp(10px,1.4vw,20px);bottom:clamp(10px,1.4vw,20px);width:min(380px,calc(100vw - 20px));
  padding:16px 16px 14px;border-radius:20px;background:var(--glass);color:var(--ink);
  -webkit-backdrop-filter:blur(22px) saturate(1.6);backdrop-filter:blur(22px) saturate(1.6);
  box-shadow:0 0 0 1px var(--line),0 24px 60px -24px rgba(0,0,0,.45);font-size:13.5px;line-height:1.45;
  transform:translateY(16px);opacity:0;transition:transform .5s var(--spring),opacity .35s}
.consent.on{transform:none;opacity:1}
.consent p{margin:0 0 12px;color:var(--ink-2)}
.consent strong{display:block;color:var(--ink);font-size:14.5px;margin-bottom:3px}
.consent .row{display:flex;gap:8px;align-items:center}
.consent .grow{flex:1}
.consent a{color:var(--ink-2);font-size:12.5px}
.btn{border:0;border-radius:999px;padding:8px 16px;font-weight:650;font-size:13.5px;cursor:pointer;transition:transform .15s,background .2s}
.btn:active{transform:scale(.96)}
.btn.primary{background:var(--accent);color:var(--on-accent)}
.btn.quiet{background:var(--accent-soft);color:var(--ink)}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* The controls on the right sit together: style, language, social, pause, Download. */
.foot .lang{margin-left:clamp(4px,.6vw,10px)}
.foot .cta{margin-left:clamp(2px,.4vw,6px)}

/* The footer's links follow the menu's order (the page's own markup lists them differently). */
.foot nav [data-i18n="nav.stitches"]{order:1}.foot nav [data-i18n="nav.learn"]{order:2}.foot nav [data-i18n="nav.library"]{order:3}
.foot nav [data-i18n="nav.handbook"]{order:4}.foot nav [data-i18n="nav.support"]{order:5}.foot nav [data-i18n="nav.privacy"]{order:6}.foot nav [data-i18n="nav.terms"]{order:7}

/* Wide screens: one row; if a long language does not fit, the controls drop to a second row instead of squeezing. */
@media (min-width: 960px){.foot{flex-wrap:wrap}.foot .cta{margin-left:auto}}
/* Portrait tablets: the footer holds every link, so it takes two rows: the links, then © and the controls. */
@media (max-width: 959px){
  .foot{flex-wrap:wrap;row-gap:2px;padding:10px clamp(16px,3vw,28px) 16px}
  .foot nav{order:-1;width:100%;margin:0;gap:0 clamp(18px,3vw,30px)}
  .foot nav a{padding:12px 0}
  .foot .grow{flex:1}
  .foot .cta{padding:12px 0}
  .foot .social a,.ctl{width:40px;height:40px}
  .foot .lang select{padding-top:11px;padding-bottom:11px}
}
/* A phone on its side (touch, a short screen): the same 40px targets, the footer stays two rows. */
@media (pointer:coarse) and (max-height:500px) and (min-width:621px){
  .foot nav a{padding:12px 0}
}
/* Phones: a tidy block. Links in two columns, language and the three controls on one row, the store button, then ©. */
@media (max-width: 620px){
  .foot{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;grid-template-areas:"nav nav nav nav" "lang social theme motion" "cta cta cta cta" "copy copy copy copy";
    align-items:center;column-gap:0;row-gap:0;margin-top:6px;padding:8px 18px calc(22px + env(safe-area-inset-bottom));font-size:13px}
  .foot nav{grid-area:nav;display:flex;flex-wrap:wrap;gap:0 22px;width:auto;margin:0 0 8px}
  .foot nav a{display:flex;align-items:center;flex:1 1 calc(50% - 11px);min-height:50px;padding:0;margin:0;font-size:16px;font-weight:600;color:var(--ink);border-bottom:1px solid var(--line)}
  .foot nav [data-i18n="nav.support"]{flex-basis:100%}
  .foot nav [data-i18n="nav.privacy"],.foot nav [data-i18n="nav.terms"]{flex:0 0 auto;min-height:44px;border-bottom:0;font-size:14px;font-weight:500;color:var(--muted)}
  .foot .lang{grid-area:lang;margin:0;min-height:52px;min-width:0;font-size:16px}
  .foot .lang select{max-width:100%;min-width:0;text-overflow:ellipsis;font-size:16px;padding:12px 22px 12px 0;background-position:right 4px center;background-size:11px 8px}
  .foot .social{grid-area:social}
  .foot [data-theme-toggle]{grid-area:theme}
  .foot button[data-motion]{grid-area:motion}
  .foot .social a,.ctl{width:46px;height:46px}
  .foot svg{width:20px;height:20px}
  .foot .grow{display:none}
  .foot .cta{grid-area:cta;display:flex;align-items:center;justify-content:center;min-height:54px;margin:12px 0 0;padding:0;border-radius:15px;
    background:var(--accent);color:var(--on-accent);font-size:17px;font-weight:700}
  .foot .cta:hover{color:var(--on-accent)}
  .foot>span:first-child{grid-area:copy;justify-self:center;margin-top:16px;font-size:13px}
  .foot>span[data-app-lang]{grid-column:1/-1;justify-self:center;text-align:center;margin-top:4px;font-size:13px}
}

/* Blush: the page itself is a faint Aida weave. */
html[data-style="blush"] body{background-image:
  repeating-linear-gradient(0deg,rgba(92,14,34,.045) 0 1px,transparent 1px 7px),
  repeating-linear-gradient(90deg,rgba(92,14,34,.045) 0 1px,transparent 1px 7px)}

/* ---------- The way round the site (prefs.js siteMenu) ---------- */
.menu-btn{display:none;align-items:center;justify-content:center;flex:none;width:44px;height:44px;border:0;border-radius:12px;
  background:transparent;color:var(--ink);cursor:pointer;pointer-events:auto}
.menu-btn svg{width:24px;height:24px}
.menu-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Safari draws the ring when a script moves focus after a touch, so it stays on the button she just tapped: a keyboard is the ring's reason. */
@media (pointer:coarse){.menu-btn:focus-visible,.site-menu button:focus-visible{outline:none}}
.site-menu{position:fixed;z-index:70;right:max(10px,env(safe-area-inset-right));top:max(10px,env(safe-area-inset-top));
  width:min(280px,calc(100vw - 20px));max-height:calc(100dvh - 20px);overflow:auto;display:grid;gap:2px;padding:10px;border-radius:18px;
  background:var(--tile-hi);border:1px solid var(--line);box-shadow:0 20px 50px -12px rgba(40,10,20,.4)}
.site-menu[hidden]{display:none}
.site-menu a{display:flex;align-items:center;min-height:44px;padding:0 12px;border-radius:10px;text-decoration:none;color:var(--ink);font-weight:600;font-size:16px}
.site-menu a:hover,.site-menu a:focus-visible{background:var(--accent-soft)}
.site-menu .lang{min-height:44px;padding:0 12px}
.site-menu .lang select{font-size:16px}
.site-menu .cta{margin-top:6px;justify-content:center;background:var(--accent);color:var(--on-accent)}
.site-menu .cta:hover,.site-menu .cta:focus-visible{background:var(--accent);color:var(--on-accent)}
.top-links{display:none}
/* One header on every inner page: the legal and support pages' text column is narrow, their header is not. */
.legal-top.has-menu{display:flex;align-items:center;gap:14px;max-width:1320px;height:58px;padding:0 clamp(16px,2.4vw,28px)}
.legal-top.has-menu .brand{margin-right:auto;font-size:17px;min-height:0}
.legal-top.has-menu .brand img{width:28px;height:28px}
.has-menu .lib-toplink{display:none}
.top-get{text-decoration:none;font-weight:700;font-size:14px;color:var(--accent);white-space:nowrap}
@media (max-width:899px){
  .menu-btn{display:inline-flex}
  .top-get{display:none}
  .hb-top-in.has-menu .menu-btn,.legal-top.has-menu .menu-btn{margin-left:auto}
  .hero-top.has-menu{justify-content:flex-start}
  .hero-top.has-menu .brand{margin-right:auto}
}
@media (min-width:900px){
  .has-menu .hb-home{display:none}
  .top-links{display:flex;align-items:center;gap:clamp(10px,1.6vw,20px);margin-left:auto}
  .top-links a{text-decoration:none;color:var(--ink-2);font-weight:600;font-size:14.5px;padding:6px 2px}
  .top-links a:hover,.top-links a[aria-current="page"]{color:var(--accent)}
  .hb-top-in.has-menu>.grow{display:none}
  .hb-top-in.has-menu .brand{margin-right:0}
}
@media print{.site-menu,.menu-btn,.top-links,.top-get{display:none!important}}

/* The menu on a phone: a full-height sheet with large rows, the language and the store inside. Its close button sits where
   the menu button was, so a second tap in the same place closes it. */
.menu-close{display:none}
.menu-legal{display:contents}   /* tablet card: Privacy and Terms are rows like the others */
@media (max-width: 620px){
  html.menu-open{overflow:hidden}
  .menu-btn{width:46px;height:46px;margin-left:-10px}
  .menu-btn svg{width:26px;height:26px}
  .site-menu{inset:0;right:0;top:0;width:auto;max-height:none;border:0;border-radius:0;box-shadow:none;overflow:auto;overscroll-behavior:contain;
    display:flex;flex-direction:column;gap:0;padding:max(24px,env(safe-area-inset-top)) 24px max(20px,env(safe-area-inset-bottom));
    background:var(--bg);animation:menu-in .24s var(--ease) both}
  html[data-style="blush"] .site-menu{background:radial-gradient(110% 80% at 50% 8%,#F6DEDA 0%,#EFD0CB 55%,#E7C1BB 100%)}
  html[data-style="night"] .site-menu{background:radial-gradient(90% 70% at 50% 100%,rgba(255,92,138,.18),transparent 70%),#0E0E10}
  .site-menu[hidden]{display:none}
  .menu-close{display:inline-flex;align-items:center;justify-content:center;flex:none;width:46px;height:46px;margin:0 0 10px -10px;padding:0;border:0;border-radius:12px;
    background:transparent;color:var(--ink);cursor:pointer}
  .menu-close svg{width:26px;height:26px}
  .site-menu>a{justify-content:space-between;min-height:64px;padding:0 2px;border-radius:0;border-bottom:1px solid var(--line);
    font-family:var(--display);font-weight:var(--display-w);font-size:27px;letter-spacing:-.035em}
  .site-menu>a::after{content:"";flex:none;width:10px;height:17px;opacity:.38;background:currentColor;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 17' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 1.5l7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 17' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 1.5l7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat}
  .site-menu>a:active{background:var(--accent-soft)}
  .menu-legal{display:flex;gap:26px;margin-top:6px}
  .menu-legal a{display:flex;align-items:center;min-height:52px;padding:0;font-size:17px;font-weight:600;color:var(--ink-2);text-decoration:none}
  .site-menu>.lang{min-height:60px;padding:0 2px;border-top:1px solid var(--line);margin-top:6px;font-size:17px;justify-content:space-between}
  .site-menu>.lang select{font-size:17px;width:100%;padding:16px 26px 16px 0;background-position:right 4px center;background-size:12px 8px}
  .site-menu>.lang{margin-bottom:18px}
  .site-menu>.cta{margin-top:auto;min-height:56px;padding:0;border:0;border-radius:16px;font-family:var(--text);font-size:18px;font-weight:700;letter-spacing:0;justify-content:center;flex:none}
  .site-menu>.cta::after{display:none}
}
@keyframes menu-in{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
html[data-motion="paused"] .site-menu{animation:none}
@media (prefers-reduced-motion:reduce){.site-menu{animation:none}}

/* "(auf Englisch)": a link on a translated page to a page that exists only in English (package_release.english_notes).
   Inline after the link's words; on a card it is a quiet last line. */
.en-note{font-weight:400;font-size:min(.88em,14px);color:var(--muted);white-space:nowrap}
.st-card>.en-note,.brand-card>.en-note{display:block;white-space:normal;font-size:12.5px;line-height:1.3}
.st-card>.en-note{padding:0 11px 10px;margin-top:-4px}
.st-card:hover .en-note,.brand-card:hover .en-note{color:inherit}
.en-tag{display:inline-block;vertical-align:baseline;margin:4px 0 0;padding:2px 5px;border:1px solid currentColor;border-radius:5px;font-size:10px;font-weight:650;line-height:1;letter-spacing:.06em;color:var(--ink-2);opacity:.7}
.st-card,.brand-card{position:relative}
.st-card>.en-tag,.brand-card>.en-tag{position:absolute;right:10px;bottom:10px;margin:0}

/* Inner pages on a phone: the menu button leads the header (as on the home page), links in the header and the breadcrumb are
   finger-sized, the breadcrumb is readable. */
@media (max-width: 620px){
  .hb-top-in.has-menu .menu-btn,.legal-top.has-menu .menu-btn{order:-1;margin:0 -4px 0 -10px}
  .hb-top-in .hb-home{display:inline-flex;align-items:center;min-height:44px;white-space:nowrap}
  .has-menu .st-hb{display:none}
  .hb-top .brand{min-height:44px}
  .crumb{margin-bottom:6px;font-size:14.5px}
  .crumb a{display:inline-block;padding:9px 0}
}

/* The cookie card on a phone: text and buttons at a size a thumb and an eye can use. */
@media (max-width: 620px){
  .consent{font-size:15px;padding:18px 18px 16px}
  .consent strong{font-size:16.5px}
  .consent a{font-size:14.5px;padding:10px 0}
  .consent .btn{padding:12px 20px;font-size:15.5px}
}

/* The App Store badge: a 44 pt target round a 36-44 pt picture. */
@media (max-width: 620px){
  .hero-top .store{position:relative}
  .hero-top .store::after{content:"";position:absolute;inset:-5px -6px}
}